Skill: Design Code

Step 0: is the kit here? This skill reads files from the kit. Check once: ls ${CLAUDE_SKILL_DIR}/../../../tokens >/dev/null 2>&1 && echo KIT_OK || echo KIT_MISSING On KIT_MISSING only the skill folders were installed, which is what npx skills add does. Say so plainly, point the user at npx ux-ui-agent-skills init or the plugin install, and stop. Do not guess the contents of a file you could not open.

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).