Shadcn Layouts
This skill teaches the CSS constraint models that make shadcn/Tailwind layouts work—height inheritance chains, flex overflow gotchas, grid parent/child separation, and scroll container sizing. Use it when building layouts, debugging height or scroll failures, or fixing flex and grid issues in React and Next.js projects.
Shadcn Layouts helps you build correct shadcn/Tailwind components by applying CSS mental models for layout, flex, grid, and scrolling.
AI-generated summary based on this skill's SKILL.md
Install
jwynia/agent-skills/shadcn-layouts · repository language: TypeScript
git clone https://github.com/jwynia/agent-skills
cp -r agent-skills ~/.claude/skills/shadcn-layoutsgenerated, unverified - the skill's exact subdirectory could not be determined; check the repository on GitHub
npx skillfed install jwynia/agent-skills/shadcn-layoutsFrequently asked questions
AI-generated answers based on this skill's SKILL.md and metadata
What are shadcn layout components?
Shadcn Layouts teaches the CSS constraint models that make shadcn/Tailwind layouts work—height inheritance chains, flex overflow gotchas, grid parent/child separation, and scroll container sizing. Use shadcn layout components when building layouts, debugging height or scroll failures, or fixing flex and grid issues in React and Next.js projects.
How do shadcn layout components handle responsive design?
Shadcn Layouts covers responsive layout solutions by teaching height inheritance chains and flex overflow patterns that adapt across screen sizes. The skill focuses on CSS constraint models and scroll container sizing, enabling you to build responsive layouts that work reliably in React and Next.js without common responsive layout pitfalls.
How to use shadcn layouts in my project?
Shadcn Layouts teaches you to structure pages using CSS constraint models: understand height inheritance chains to avoid layout collapse, master flex overflow gotchas to prevent unwanted scrolling, separate grid parent and child concerns, and size scroll containers correctly. Apply these patterns when building React and Next.js projects to create stable, predictable layouts.
Where can I find shadcn layout examples and code snippets?
Shadcn Layouts provides examples and code snippets focused on CSS constraint models—height inheritance chains, flex overflow solutions, grid parent/child separation, and scroll container sizing. These patterns demonstrate how to structure pages and debug layout failures in React and Next.js projects using shadcn/Tailwind.
What layout patterns does shadcn Layouts teach?
Shadcn Layouts teaches CSS constraint models including height inheritance chains, flex overflow gotchas, grid parent/child separation, and scroll container sizing. These patterns form the foundation for building dashboard layouts, admin interfaces, page structures, and other layout templates in React and Next.js projects.
How do I debug height and scroll issues in shadcn layouts?
Shadcn Layouts helps you debug by teaching the underlying CSS constraint models: trace height inheritance chains to find where sizing breaks, identify flex overflow gotchas causing unexpected scrolling, separate grid parent and child sizing concerns, and verify scroll container dimensions. These techniques solve most layout failures in React and Next.js projects.