agentsclimarketplace

Migrate design system

Skill plugin87/ux-ui-agent-skills/.claude/skills/migrate-design-system

Turn Claude into a Senior Design Architect — DTCG design tokens, 42 components, WCAG 2.2 accessibility, any-framework code, 138 design systems, and runnable skills.

Install
npx -y skills add plugin87/ux-ui-agent-skills --skill migrate-design-system

Assembled from the repository path, not quoted from the project. Check it against their README if it does not work.

One thing to look at

  • no licenseNo license file was found in the repository. Code published without one is not open source by default, so using it at work is a question for whoever answers licensing questions where you are.

What its author says it does

Copied from the file, not written here

Map this token system to or from any external design system (Material Design 3, Apple HIG, Fluent, Carbon, Ant, shadcn/ui, Radix, Chakra, Mantine, Bootstrap…) — adopt their look, build on their stack, or migrate between systems. Use when the user mentions interop, migration, or a specific design-system/component-library bridge.

SKILL.md

1.5 KB, as published. Nobody here has run it

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.

Keep looking

Skills are one crate of 328,083. Ordering is by how many stacks a row turns up in, so the top of any crate is what has actually been picked rather than what has the most stars.