{"enrichment":{"faq":[{"a":"Shadcn Layouts teaches the CSS constraint models that make shadcn/Tailwind layouts work\u2014height 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.","q":"What are shadcn layout components?"},{"a":"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.","q":"How do shadcn layout components handle responsive design?"},{"a":"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.","q":"How to use shadcn layouts in my project?"},{"a":"Shadcn Layouts provides examples and code snippets focused on CSS constraint models\u2014height 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.","q":"Where can I find shadcn layout examples and code snippets?"},{"a":"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.","q":"What layout patterns does shadcn Layouts teach?"},{"a":"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.","q":"How do I debug height and scroll issues in shadcn layouts?"}],"shadow_tags":["ui-components","layout-system","responsive-design","component-library","frontend-toolkit","template-collection","shadcn-ecosystem","web-layouts"],"summary_rewrite":"This skill teaches the CSS constraint models that make shadcn/Tailwind layouts work\u2014height 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."},"gist":{"api_url":"https://skillfed.io/api/skills/jwynia/agent-skills/shadcn-layouts.json","as_of":"2026-02-24","description":"Shadcn Layouts helps you build correct shadcn/Tailwind components by applying CSS mental models for layout. npx skillfed install jwynia/agent-skills/shadcn-layouts","install":{"manual":["git clone https://github.com/jwynia/agent-skills","cp -r agent-skills ~/.claude/skills/shadcn-layouts"],"primary":"npx skillfed install jwynia/agent-skills/shadcn-layouts","version":"b06db604"},"kind":"skill","mirror_url":"https://skillfed.io/jwynia/agent-skills/shadcn-layouts.md","similar":[{"id":"JosiahSiegel/claude-plugin-marketplace/tailwindcss-advanced-layouts","name":"tailwindcss-advanced-layouts","publisher":"JosiahSiegel/claude-plugin-marketplace","url":"https://skillfed.io/JosiahSiegel/claude-plugin-marketplace/tailwindcss-advanced-layouts"},{"id":"OneWave-AI/claude-skills/responsive-layout-builder","name":"responsive-layout-builder","publisher":"OneWave-AI/claude-skills","url":"https://skillfed.io/OneWave-AI/claude-skills/responsive-layout-builder"},{"id":"bobmatnyc/claude-mpm-skills/tailwind","name":"tailwind","publisher":"bobmatnyc/claude-mpm-skills","url":"https://skillfed.io/bobmatnyc/claude-mpm-skills/tailwind"},{"id":"patricio0312rev/skills/page-layout-builder","name":"page-layout-builder","publisher":"patricio0312rev/skills","url":"https://skillfed.io/patricio0312rev/skills/page-layout-builder"},{"id":"jmsktm/claude-settings/ui-builder","name":"Ui Builder","publisher":"jmsktm/claude-settings","url":"https://skillfed.io/jmsktm/claude-settings/ui-builder"}],"title":"Shadcn Layouts by jwynia: Find pre-built layout components and templates using shadcn \u2014 SkillFed","use":{"when":["Shadcn Layouts covers responsive layout solutions by teaching height inheritance chains and flex overflow patterns that adapt across screen.","Shadcn Layouts teaches you to structure pages using CSS constraint models: understand height inheritance chains to avoid layout collapse."]},"what":{"lead":"Shadcn Layouts helps you build correct shadcn/Tailwind components by applying CSS mental models for layout, flex, grid, and scrolling.","rest":"This skill teaches the CSS constraint models that make shadcn/Tailwind layouts work\u2014height 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."}},"id":"jwynia/agent-skills/shadcn-layouts","install":{"mode":"external","repo":"https://github.com/jwynia/agent-skills"},"links":{"html":"https://skillfed.io/jwynia/agent-skills/shadcn-layouts","md":"https://skillfed.io/jwynia/agent-skills/shadcn-layouts.md","repo":"https://github.com/jwynia/agent-skills"},"meta":{"agents_supported":[],"first_seen":"2026-07-28","forks":16,"language":"TypeScript","last_updated":"2026-02-24","license":null,"name":"Shadcn Layouts","publisher":"jwynia","stars":124},"relations":{"similar":[{"id":"JosiahSiegel/claude-plugin-marketplace/tailwindcss-advanced-layouts"},{"id":"OneWave-AI/claude-skills/responsive-layout-builder"},{"id":"bobmatnyc/claude-mpm-skills/tailwind"},{"id":"curiositech/some_claude_skills/mobile-ux-optimizer"},{"id":"patricio0312rev/skills/page-layout-builder"},{"id":"assistant-ui/skills/primitives"},{"id":"patricio0312rev/skills/modal-drawer-system"},{"id":"jmsktm/claude-settings/ui-builder"},{"id":"YangsonHung/awesome-agent-skills/frontend-quality-guardrails-cn"},{"id":"Cap-go/capgo-skills/tailwind-capacitor"}]},"slug":{"owner":"jwynia","repo":"agent-skills","skill":"shadcn-layouts"},"version":"b06db604"}