Generate correct shadcn/Tailwind layouts by applying CSS mental models...
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.
Use this skill when:
Do NOT use this skill when:
CSS layout flows from constraints. Height flows down from explicit ancestors. Width flows up from content. Agents fail because they apply classes without understanding the constraint chain.
h-full means height: 100%. 100% of what? 100% of the parent's computed height.
BROKEN (chain incomplete):
<html> <!-- no height -->
<body> <!-- no height -->
<div class="h-full"> <!-- 100% of nothing = 0 -->
WORKING (chain complete):
<html class="h-full"> <!-- 100% of viewport -->
<body class="h-full"> <!-- 100% of html -->
<div class="h-full"> <!-- 100% of body = works -->
Rule: Trace from element up to <html>. Every ancestor needs explicit height, OR use viewport units (h-screen) to break the chain.
Flex children have implicit min-height: auto, preventing shrinking below content size.
// BROKEN (won't scroll)
<div className="flex flex-col h-screen">
<main className="flex-1 overflow-y-auto"> {/* Can't shrink! */}
// WORKING (scrolls correctly)
<div className="flex flex-col h-screen">
<main className="flex-1 overflow-y-auto min-h-0"> {/* Can shrink */}
Rule: Flex children that scroll need min-h-0. Children that shouldn't shrink need shrink-0.
Grid is defined on the parent. Children just occupy cells.
// BROKEN
<div className="grid-cols-3"> {/* Missing 'grid'! */}
// WORKING
<div className="grid grid-cols-3"> {/* 'grid' enables grid-cols-* */}
Rule: flex or grid must be declared on parent before direction/template classes work.
Scroll containers need explicit dimensions to know when to scroll.
// BROKEN (never scrolls)
<ScrollArea> {/* No height constraint */}
// WORKING (flex-constrained)
<div className="flex flex-col h-screen">
<ScrollArea className="flex-1 min-h-0">
Symptoms: Elements collapse, h-full not working
Fix: Trace to html, add heights or use h-screen
Symptoms: Scroll doesn't work, content overflows
Fix: Add min-h-0 to flex children that scroll
Symptoms: Items stack vertically instead of columns
Fix: Ensure grid grid-cols-* on parent
Symptoms: Unstyled components, colors wrong Fix: Check Tailwind content paths, CSS variables in globals.css
Symptoms: "Module not found", functionality broken
Fix: npx shadcn add [component], install peer deps
// layout.tsx
<html lang="en" className="h-full">
<body className="h-full">{children}</body>
</html>
// page.tsx
<div className="flex h-full">
<aside className="w-64 shrink-0 border-r overflow-y-auto">
<nav>...</nav>
</aside>
<main className="flex-1 min-w-0 overflow-y-auto">
{children}
</main>
</div>
<div className="flex flex-col h-screen">
<header className="h-16 shrink-0 border-b">...</header>
<div className="flex flex-1 min-h-0">
<aside className="w-64 shrink-0 border-r overflow-y-auto">...</aside>
<main className="flex-1 min-w-0 overflow-y-auto p-6">
{children}
</main>
</div>
</div>
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
{items.map(item => (
<Card key={item.id}>
<CardHeader><CardTitle>{item.title}</CardTitle></CardHeader>
<CardContent>{item.content}</CardContent>
</Card>
))}
</div>
Using h-full without verifying ancestor chain.
Fix: Trace to html. Use h-screen to break chain.
Adding overflow-y-auto without min-h-0 on flex children.
Fix: Flex children need min-h-0 to shrink.
Guessing import paths like shadcn/ui.
Fix: Check components.json for alias. Usually @/components/ui/*.
Flattening compound components (Dialog without DialogTrigger/DialogContent). Fix: Maintain required nesting structure.
@/components/ui/*)h-fullh-full or min-h-fullmin-h-0shrink-0
