---
name: tailwind-responsive-layouts
description: Build responsive Tailwind CSS layouts for premium websites and apps. Use for breakpoints, mobile-first layout, grids, flex, spacing, container widths, aspect ratios, responsive typography, media crops, nav adaptation, dashboard density, and preventing mobile stacking from looking generic.
---

# Tailwind Responsive Layouts

## Use This Skill

Use this skill for compose responsive tailwind layouts that feel designed on mobile and desktop.

## Operating Contract

1. Inspect the existing project before changing code.
2. Identify the styling system, token source, component primitive strategy, and available verification commands.
3. Keep premium visual standards active: no generic library defaults, no weak states, no one-off styling chaos.
4. Follow existing project conventions unless a change clearly improves the result.
5. Run available checks and visually inspect responsive output when the change affects UI.

## Required Reference

Read [references/tailwind-responsive-layouts-guide.md](references/tailwind-responsive-layouts-guide.md) before making architectural or visible UI changes with this skill.