← ClaudeAtlas

google-stitch-shadcn-uilisted

Use when implementing or reviewing a React interface with shadcn/ui and it needs coherent theming, component composition, variants, accessibility, interaction states, responsive behavior, or visual consistency.
host452b/polish · ★ 1 · Web & Frontend · score 64
Install: claude install-skill host452b/polish
# shadcn/ui Interface Integration ## Overview Build product interfaces from owned shadcn/ui source without turning registry primitives into domain components. Start from the project’s real configuration and design contract, then compose accessible states and verify them in context. ## Workflow 1. **Inspect before installing.** Read `components.json`, `package.json`, global CSS, Tailwind configuration, import aliases, installed `components/ui`, existing composed components, project scripts, and `DESIGN.md` when present. Run `scripts/verify-setup.sh` when setup is uncertain. 2. **Reuse the project vocabulary.** Match its registry style, primitive library, icon set, CSS-variable convention, radii, spacing, and dark-mode strategy. Do not introduce a second token system or arbitrary colors. 3. **Choose the boundary.** Keep reusable primitives in `components/ui`. Put product data, copy, routing, permissions, async behavior, and domain-specific composition outside that directory. Wrap or compose primitives rather than embedding business logic into them. 4. **Model states explicitly.** Cover applicable default, hover, focus-visible, active, selected, disabled, loading, empty, validation, error, success, and partial-data states. Preserve accessible names, descriptions, keyboard behavior, focus management, and non-color cues. 5. **Design responsive behavior.** Specify ordering, stacking, overflow, action placement, target size, and information priority at the project’s existing bre