migrate-design-system
The migrate-design-system skill maps design tokens between Anthropic's token system and external design systems like Material Design 3, Apple HIG, Fluent, Carbon, and others. Use it when integrating with a specific design library, adopting another system's visual language, or migrating between design frameworks. It provides crosswalk tables, mapping methodology, and accessibility verification across color roles, typography, spacing, and component states.
git clone --depth 1 https://github.com/plugin87/ux-ui-agent-skills /tmp/migrate-design-system && cp -r /tmp/migrate-design-system/.claude/skills/migrate-design-system ~/.claude/skills/migrate-design-systemSKILL.md
# Skill: Migrate / Interop Design System Bridge to or from external design systems via a role-based crosswalk. ## Steps 1. Read `design-systems/interop-protocol.md` (Crosswalk Method, the three directions, headless-vs-styled guidance, verification). 2. Use the curated tables in `design-systems/crosswalk.md` for Material 3 / Apple HIG / Fluent 2 / Carbon / shadcn/ui / Radix. For others, derive a mapping with the Crosswalk Method (map by role/intent across 6 axes: color roles, type scale, spacing unit, radius, elevation, motion). 3. Choose the direction: - **FROM** external → our tokens (adopt their look): re-point `semantic.*`. - **TO** external stack (our components on their foundation): theme their primitives with our tokens. - **Migrate**: Audit → Map → Bridge (alias layer) → Verify, screen by screen. 4. **Verify** every mapped color pair for contrast (`scripts/contrast.py` / `a11y-audit`); confirm all 8 states + dark mode survive the mapping. ## Output A crosswalk table (our token → their token → value note), a bridge plan if migrating, and verified token overrides. Render via `design-code`.
Audit a UI or design against WCAG 2.2 AA/AAA and ARIA patterns, returning criterion-referenced findings with severity and specific fixes. Use when the user wants an accessibility check, contrast verification, keyboard/screen-reader review, or wants to confirm a component meets POUR.
Apply a visual direction — an archetype (high-end agency, editorial minimal, brutalist, soft-SaaS, dark-tech) or one of 138 named design systems (apple, linear-app, stripe, vercel, notion, material, shadcn, spotify, tesla…) — by resolving it into the token system. Use when the user wants a specific look/vibe/brand feel, or asks to make a design feel premium/expensive/non-generic.
Generate a complete, accessible brand design system from a brief — primitive → semantic → component DTCG tokens (color, type, spacing, radius, shadow, motion), light + dark, plus a single theme.css — verified for WCAG. Use when the user wants a from-scratch brand/design foundation, a new palette + type system, or a themeable token kit for a product.
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.
Design a UI component spec to the house quality bar — anatomy, variants, sizes, the 8 states, token mapping, and accessibility. Use when the user wants to design or document a component (button, input, tabs, toast, combobox, date picker, modal, etc.) at the spec level before or alongside code. For generating framework code, use design-code.
Set up or run design QA gates — token + hardcoded-value lint, automated a11y (axe), contrast, visual regression across variants/states/themes/RTL, and the manual a11y checklist. Use when the user wants CI quality gates, to prevent design regressions, or to QA a component/screen before shipping.
Review or audit a design/UI across 6 weighted dimensions with Nielsen's 10 heuristics and a prioritized findings table. Use when the user wants a design critique, quality score, heuristic evaluation, or audit of an existing screen, page, or product before/after build.
Generate, extend, or audit design tokens in DTCG format with the 3-tier architecture (primitive → semantic → component). Use when the user wants a color palette, type scale, spacing/shadow/radius/motion tokens, multi-brand theming, or wants to validate token files. Covers colors, typography, spacing, shadows, borders, breakpoints, motion, gradients, opacity, blur, sizing, states, theming.