Generate correct shadcn/Tailwind layouts by applying CSS mental models. This skill should be used when the user asks to 'create a shadcn layout', 'fix layout issues', 'debug CSS height problems', 'make scrolling work', or has issues with Tailwind flex/grid. Keywords: shadcn, Tailwind, layout, CSS, flex, grid, height, scroll, overflow.
npx claudepluginhub joshuarweaver/cascade-content-creation-misc-1 --plugin jwynia-agent-skills-1This skill uses the workspace's default tool permissions.
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.
Guides Next.js Cache Components and Partial Prerendering (PPR) with cacheComponents enabled. Implements 'use cache', cacheLife(), cacheTag(), revalidateTag(), static/dynamic optimization, and cache debugging.
Guides building MCP servers enabling LLMs to interact with external services via tools. Covers best practices, TypeScript/Node (MCP SDK), Python (FastMCP).
Generates original PNG/PDF visual art via design philosophy manifestos for posters, graphics, and static designs on user request.
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