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.
npx skills add https://github.com/jwynia/agent-skills --skill shadcn-layouts