Generate production-ready, accessible, token-driven component code for ANY framework (React+Tailwind, Next.js, SwiftUI, Vue, Svelte, Angular, Solid, Web Components/Lit, React Native, Flutter, Jetpack Compose, vanilla CSS, or CSS-in-JS). Use when the user wants working UI code for a component or screen in a specific stack.
Skill: Design Code
Requirements
This skill needs the full UX/UI Agent Skills kit: the gates, the references and
the design-system library. Install it with npx [email protected] init
or as the Claude Code plugin. npx [email protected] add copies the skill folder and
nothing else. Installed that way, this skill runs in guidance-only mode: no gate
runs, so it gives no verdict.
Step 0: is the kit here? Check once:
ls ${CLAUDE_SKILL_DIR}/../../../tokens >/dev/null 2>&1 && echo KIT_OK || echo KIT_MISSING
On KIT_MISSING, open your reply with: "Guidance-only mode: the UX/UI Agent
Skills kit is not installed here, so no gate ran and nothing below is
measured." Then work from this file and general practice, under three rules.
Do not guess or cite the contents of a kit file you could not open. State no
measured number (no contrast ratio, no N/N, no "passes WCAG"): write "not
verified" where one would go. End with a line Skipped (kit not installed):
that names every gate script this file tells you to run, then the install
command above.
Render components into a target framework via the adapter system.
Steps
Identify the target framework + styling method from the request (or ask).
Read ${CLAUDE_SKILL_DIR}/../../../frameworks/adapter-protocol.md (the universal contract: token resolution, component contract, styling, dark mode, motion + output rules).
Load the concrete adapter:
Full references: ${CLAUDE_SKILL_DIR}/../../../frameworks/react-tailwind.md, ${CLAUDE_SKILL_DIR}/../../../frameworks/nextjs.md, ${CLAUDE_SKILL_DIR}/../../../frameworks/swiftui.md.
No file for the target? Generate an adapter on the fly using the protocol's "author a new adapter" checklist.
Pull the component spec from ${CLAUDE_SKILL_DIR}/../../../components/* and the ARIA pattern from ${CLAUDE_SKILL_DIR}/../../../accessibility/aria-patterns.md.
Resolve all values to tokens (${CLAUDE_SKILL_DIR}/../../../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_SKILL_DIR}/../../../workflows/redesign-audit.md → Output Completeness).
Verification (mandatory before declaring done)
Code is the highest-stakes output. Self-check every time:
No hardcoded values: every color/size/radius/shadow/duration/font traces to a token (CSS var / theme key / asset). Run ${CLAUDE_SKILL_DIR}/../../../scripts/lint_hardcodes.py over the output; zero raw hex/px/ms AND zero raw Tailwind palette utilities (bg-gray-500, text-blue-600). Use semantic utilities/tokens (bg-surface, text-primary). Run ${CLAUDE_SKILL_DIR}/../../../scripts/validate_theme_refs.py so every var(--…) resolves to a defined theme token (no floating tokens). One allowed exception: 3rd-party theme-config (MUI/Mantine) mapping our tokens INTO their API.
All applicable states present: Default, Hover, Focus(-visible ring), Active, Disabled, Loading(+aria-busy), Error, Selected, or justified N/A.
Accessibility wired: correct role/ARIA per ${CLAUDE_SKILL_DIR}/../../../accessibility/aria-patterns.md, keyboard model, focus management, ≥24px target; verify contrast (${CLAUDE_SKILL_DIR}/../../../scripts/contrast.py) for any new color pair.
Dark mode + reduced motion + responsive: semantic tokens swap; motion has a prefers-reduced-motion fallback; layout is mobile-first.
Completeness: full files, no // ...; if asked for N, deliver N. If any check fails, fix before returning (run a11y-audit if unsure).
Single-theme consistency: consume the project's ONE shared token theme (the root CSS-var layer); never define a per-page palette or new colors. Across multiple pages/screens, the same semantic tokens must drive every surface so the whole product stays visually identical and themeable from one place (${CLAUDE_SKILL_DIR}/../../../.claude/rules/tokens-and-color.md → Single-Theme Consistency).
One shared primitive layer: build ONE reusable component per atom (Button, Input, Modal, Badge via cva/equivalent); never repeat utility-class clusters inline across files or hand-roll a div-as-modal per screen. Overlays reuse the single Modal primitive: focus trap, role="dialog", aria-modal="true", aria-labelledby, Escape, return focus on close, backdrop (WCAG 2.4.3 + 2.1.2). See ${CLAUDE_SKILL_DIR}/../../../examples/golden/Button.tsx + ${CLAUDE_SKILL_DIR}/../../../examples/golden/Modal.tsx.
Font loading: NEVER web fonts in CSS (render-blocking). Use a framework loader () or + with ; self-host when possible. Font family comes from a token (), never a literal.
3.2k 顆星
Generate production-ready, accessible, token-driven component code for ANY framework (React+Tailwind, Next.js, SwiftUI, Vue, Svelte, Angular, Solid, Web Components/Lit, React Native, Flutter, Jetpack
1---2name: design-code3description: Generate production-ready, accessible, token-driven component code for ANY framework (React+Tailwind, Next.js…4---56# .claude/skills/design-code/SKILL.md
D
SKILL.md代理技能
傳輸方式
檔案
狀態
已收錄
總覽
關於 design-code
Generate production-ready, accessible, token-driven component code for ANY framework (React+Tailwind, Next.js, SwiftUI, Vue, Svelte, Angular, Solid, Web Components/Lit, React Native, Flutter, Jetpack Compose, vanilla CSS, or CSS-in-JS). Use when the user wants working UI code for a component or screen in a specific stack.
Semantic token BY INTENT + consistency: the token's meaning must match the action: destructive (Delete/Remove) → action.destructive (danger), neveraction.primary; secondary = neutral outline/transparent with dark text (never a colored fill → no dark-text-on-blue). The SAME action uses the SAME variant everywhere (a trigger button and its confirm button must match, not red in one place and blue in another). Gates don't catch this. You must.
No emoji as icons: use a real icon set (default lucide) as inline SVG with currentColor; never an emoji, including in JS that swaps a label (swap the <svg>, not a text/emoji string). Mentally run ${CLAUDE_SKILL_DIR}/../../../scripts/lint_taste.py (it flags emoji-as-icon).
Destructive confirmation UX: irreversible actions (delete account/data, anything stated "cannot be undone") need real friction per WCAG 3.3.4 / 3.3.6: a confirmation dialog whose confirm button restates the action ("Delete account", not "Delete"/"OK"/"Yes") and, for high-stakes, a type-to-confirm step. See ${CLAUDE_SKILL_DIR}/../../../examples/sample-app/preview.html and ${CLAUDE_SKILL_DIR}/../../../content/voice-tone.md.
Taste pre-flight: run the 12-point aesthetic check in ${CLAUDE_SKILL_DIR}/../../../taste/design-taste.md and, for any rendered HTML, DS_REQUIRE_BROWSER=1 node ${CLAUDE_SKILL_DIR}/../../../scripts/taste_audit.mjs <file> (render-based: flags timid type-scale contrast, uniform repetition, over-wide measure, palette sprawl). Taste is heuristic: treat findings as a strong signal and pair with a real screenshot review; it is NOT auto-provable like correctness.
Run the gates, then report (mandatory). Before declaring done, RUN node ${CLAUDE_SKILL_DIR}/../../../scripts/gate.mjs verify_states.mjs <file> + --dark (every element, default/hover/focus) and node ${CLAUDE_SKILL_DIR}/../../../scripts/accuracy_report.mjs; report their actual output. Never type a contrast number or "100%" you didn't just measure (CLAUDE.md → Verification Protocol).