Skill: Design Code

In this project, shadcn-ui-design is the authority for building/editing UI. Follow its rules: semantic Tailwind tokens (bg-primary, text-muted-foreground, border-border) — never hardcoded colors or raw Tailwind palette (bg-blue-600); add primitives via npx shadcn@latest add … (don't fork components/ui/*); keep the blue-primary light+dark theme. Use this skill as guidance only — any output must conform to shadcn-ui-design. Token source of truth: .claude/skills/_ux-ui-shared/tokens/*.json → compiled to app/globals.css.

Render components into a target framework via the adapter system.

Steps

1. Identify the target framework + styling method from the request (or ask).
2. Read .claude/skills/_ux-ui-shared/frameworks/adapter-protocol.md (the universal contract: token resolution, component contract, styling, dark mode, motion + output rules).
3. Load the concrete adapter:
   • Full references: .claude/skills/_ux-ui-shared/frameworks/react-tailwind.md, .claude/skills/_ux-ui-shared/frameworks/nextjs.md, .claude/skills/_ux-ui-shared/frameworks/swiftui.md.
   • Concise adapters: .claude/skills/_ux-ui-shared/frameworks/adapters/{vue,svelte,angular,solid,web-components-lit,react-native,flutter,jetpack-compose,vanilla-css,css-in-js}.md.
   • No file for the target? Generate an adapter on the fly using the protocol's "author a new adapter" checklist.
4. Pull the component spec from .claude/skills/_ux-ui-shared/components/* and the ARIA pattern from .claude/skills/_ux-ui-shared/accessibility/aria-patterns.md.
5. Resolve all values to tokens (.claude/skills/_ux-ui-shared/tokens/*.json); apply aesthetic direction if requested (apply-aesthetic skill).

Output rules (mandatory)

Use tokens (never hardcode) · include a11y on every interactive element · handle all applicable of the 8 states · support dark mode at the semantic layer · mobile-first · honor reduced motion · deliver complete files, no placeholders (.claude/skills/_ux-ui-shared/workflows/redesign-audit.md → Output Completeness).