shadcn-firstlisted

# shadcn-first Someone maintains this code after you. Every hand-written `div` with bespoke classes and every `style={{}}` is a thing they keep alive, and it drifts. Hand-rolled UI also silently drops the craft that comes free with the library: focus rings, hover and active states, keyboard navigation, skeletons, empty states, ARIA. ## The order. Never skip a step. 1. **Block.** `ui.shadcn.com/blocks` has whole sidebars, dashboards, logins, data tables. Install the block. 2. **Component.** If no block fits, use a component from the registry. 3. **Compose** two or three components. 4. **Write it yourself.** Only here, and the commit message must name which block or component you evaluated and why it did not fit. Adapt the design to the component, not the component to the design. Brand and visual language are reached through **theme variables in one theme**, never per-screen CSS beside the component. ## Tools, and which to use Two MCP servers are configured. They do different jobs. **`shadcn-official`** (`npx shadcn@latest mcp`) is project-aware: it reads the repo's `components.json`. Use it for the real work. | Tool | Use it to | |---|---| | `get_project_registries` | confirm the project is initialised at all | | `search_items_in_registries` | find the component for the job, fuzzy | | `list_items_in_registries` | see everything available | | `view_items_in_registries` | read a component's actual source and deps before using it | | `get_item_examples_from_registri