Shadcn Layouts

Generates shadcn and Tailwind layouts that actually work on the first try by teaching Claude the CSS mental models most AI code generation misses. The core insight is that layout bugs aren't syntax errors, they're broken constraint chains. It walks through the four critical concepts agents get wrong: height inheritance requiring explicit ancestors all the way to html, flex children needing min-h-0 to scroll, grid display modes on parents not children, and scroll containers requiring explicit dimensions. Includes diagnostic states and common patterns like app shells and dashboards. Honestly, if you've ever had Claude generate a layout where h-full does nothing or scrolling mysteriously breaks, this explains exactly why and how to fix it.

skills.sh installs: 460
GitHub stars: 182
last updated: Aug 21, 2026

View on GitHub

Install

$ npx -y skills add jwynia/agent-skills --skill shadcn-layouts --agent claude-code

Installs into .claude/skills of the current project.

Files

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

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.

Critical Mental Models

Model 1: Height Inheritance 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 -->

SKILL.md on GitHub