Loading
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
The skill file stays in the publisher's repository.
Paste the copied command in a terminal. It installs this SKILL.md into that agent.
npx skills add plugin87/ux-ui-agent-skills --skill design-code -a cursor -y
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.
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.
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_MISSINGOnKIT_MISSINGonly the skill folders were installed, which is whatnpx skills adddoes. Say so plainly, point the user atnpx ux-ui-agent-skills initor 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.
${CLAUDE_SKILL_DIR}/../../../frameworks/adapter-protocol.md (the universal contract: token resolution, component contract, styling, dark mode, motion + output rules).${CLAUDE_SKILL_DIR}/../../../frameworks/react-tailwind.md, ${CLAUDE_SKILL_DIR}/../../../frameworks/nextjs.md, ${CLAUDE_SKILL_DIR}/../../../frameworks/swiftui.md.${CLAUDE_SKILL_DIR}/../../../frameworks/adapters/{vue,svelte,angular,solid,web-components-lit,react-native,flutter,jetpack-compose,vanilla-css,css-in-js}.md.${CLAUDE_SKILL_DIR}/../../../components/* and the ARIA pattern from ${CLAUDE_SKILL_DIR}/../../../accessibility/aria-patterns.md.${CLAUDE_SKILL_DIR}/../../../tokens/*.json); apply aesthetic direction if requested (apply-aesthetic skill).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).
Code is the highest-stakes output — self-check every time:
${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.aria-busy), Error, Selected — or justified N/A.${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.prefers-reduced-motion fallback; layout is mobile-first.// ...; if asked for N, deliver N. If any check fails, fix before returning (run a11y-audit if unsure)..claude/rules/tokens-and-color.md → Single-Theme Consistency).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.@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.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.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).${CLAUDE_SKILL_DIR}/../../../examples/sample-app/preview.html and ${CLAUDE_SKILL_DIR}/../../../content/voice-tone.md.${CLAUDE_SKILL_DIR}/../../../taste/design-taste.md and, for any rendered HTML, 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.node ${CLAUDE_SKILL_DIR}/../../../scripts/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).