shadcn-layouts_skill

This skill helps you generate correct shadcn/Tailwind layouts by applying CSS layout mental models to ensure scrolling, height, and grid correctness.

TypeScript

22

GitHub Stars

1

Bundled Files

2 months ago

Catalog Refreshed

4 months ago

First Indexed

Readme & install

Copy the install command, review bundled files from the catalogue, and read any extended description pulled from the listing source.

Installation

Preview and clipboard use veilstrat where the catalogue uses aiagentskills.

npx veilstrat add skill jwynia/agent-skills --skill shadcn-layouts

SKILL.md5.8 KB

Overview

This skill generates correct shadcn/Tailwind layouts and fixes common layout failures by applying clear CSS mental models. It focuses on practical fixes for height chains, flex/grid behaviors, overflow, and scroll containers so components render correctly the first time. Use it to get layout code that follows Tailwind patterns and shadcn component expectations.

How this skill works

I inspect the constraint chain for height and the parent layout context (flex or grid) to determine why an element is collapsing, overflowing, or not scrolling. The skill adds or recommends specific Tailwind utilities (h-full, h-screen, min-h-0, min-w-0, shrink-0, grid) and the correct parent-level classes to restore expected behavior. It also checks for missing component dependencies and common Tailwind configuration issues.

When to use it

Create a new shadcn layout or app shell that must fill the viewport
Fix elements using h-full that collapse to zero height
Make a scrolling region work inside a flex column
Correct grid layouts where items stack vertically instead of forming columns
Resolve missing styling or module import issues for shadcn components

Best practices

Trace height from the element up to <html>; every ancestor needs explicit height or use h-screen to break the chain
When a flex child should scroll, add min-h-0 (or min-w-0 for horizontal cases) so it can shrink correctly
Declare layout types (flex or grid) on the parent before applying direction or template classes
Use shrink-0 for fixed-size children (sidebars, headers) and flex-1 for flexible regions
Verify Tailwind content paths and CSS variables if styles appear missing

Example use cases

Generate a full-page app shell with html/body h-full and a flex layout that scrolls correctly
Convert a dashboard design into shadcn components with header, sidebar, and scrollable main area
Fix a modal or dialog where content overflows because parent grid/flex classes are missing
Diagnose and patch a card grid that unexpectedly stacks on small screens
Suggest shadcn component installation steps when imports report missing modules

FAQ

h-full is 100% of the parent's computed height. If ancestors don't have explicit heights (or h-full/h-screen), 100% resolves to zero. Add heights up the chain or use h-screen on the constrained ancestor.

My scroll container doesn't scroll inside a flex column — what's missing?

Flex children default to min-height: auto, which prevents shrinking. Add min-h-0 to the flex child that should scroll and ensure its parent has an explicit height (h-screen or h-full chain).