Design Code skill

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 blue in another). Gates don't catch this. You must.
10. 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).
11. 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.
12. 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.
13. 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).