shadcn-syntax-layout-primitives
Installation
SKILL.md
shadcn ui : Layout Primitives
Four shadcn primitives ship as pure layout helpers. They hold no business state and expose no independent decision logic. They differ only in which layout problem they solve : drag-to-resize panes, custom-styled scroll, content divider, fixed width:height ratio. Pick by the layout problem and compose. This skill covers all four because none of them is large enough to warrant a dedicated skill, and the composition rules are isolated per primitive.
Quick Reference
The four primitives
| Primitive | Solves | Library | Subcomponents | "use client" in v4 source |
|---|---|---|---|---|
Resizable |
Drag-to-resize split panes | react-resizable-panels v4 |
ResizablePanelGroup, ResizablePanel, ResizableHandle |
YES |
ScrollArea |
Custom-styled scrollable region | Radix ScrollArea |
ScrollArea, ScrollBar |
YES |
Separator |
Horizontal or vertical divider | Radix Separator |
Separator |
YES |
AspectRatio |
Lock container to width:height ratio | Radix AspectRatio |
AspectRatio |
YES |