shadcn/Tailwind Layouts

Help generate shadcn/Tailwind components that render correctly the first time. Most agent-generated UI fails due to missing mental models about how CSS layout works—not syntax errors, but assumption gaps.

When to Use This Skill

Use this skill when:

• Creating shadcn/Tailwind layouts
• Debugging height/scroll issues
• Fixing flex/grid problems
• Setting up full-page app shells

Do NOT use this skill when:

• Writing backend code
• Working on non-Tailwind CSS projects
• Designing (use frontend-design first)

Core Principle