/design-code

name: design-code
description: 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 ux-ui-agent-skills@3.1.0 init` or as the Claude Code plugin. `npx skills@1.7.6 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

1. Identify the **target framework** + styling method from the request (or ask). 2. Read `${CLAUDE_SKILL_DIR}/../../../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_SKILL_DIR}/../../../frameworks/react-tailwind.md`, `${CLAUDE_SKILL_DIR}/../../../frameworks/nextjs.md`, `${CLAUDE_SKILL_DIR}/../../../frameworks/swiftui.md`.
• Concise adapters: `${CLAUDE_SKILL_DIR}/../../../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_SKILL_DIR}/../../../components/*` and the ARIA pattern from `${CLAUDE_SKILL_DIR}/../../../accessibility/aria-patterns.md`. 5. 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: 1. **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. 2. **All applicable states present**: Default, Hover, Focus(-visible ring), Active, Disabled, Loading(+`aria-busy`), Error, Selected, or justified N/A. 3. **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. 4. **Dark mode + reduced motion + responsive**: semantic tokens swap; motion has a `prefers-reduced-motion` fallback; layout is mobile-first. 5. **Completeness**: full files, no `// ...`; if asked for N, deliver N. If any check fails, fix before returning (run `a11y-audit` if unsure). 6. **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). 7. **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`. 8. **Font loading**: NEVER `@import` web fonts in CSS (render-blocking). Use a framework loader (`next/font`) or `<link rel="preconnect">` + `<link rel="preload">` with `font-display: swap`; self-host when possible. Font family comes from a token (`--font-sans`), never a literal. 9. **Semantic token BY INTENT + consistency**: the token's *meaning* must match the action: destructive (Delete/Remove) → `action.destructive` (danger), **never** `action.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