mcpbeat

Migrate Design System

plugin87/migrate-design-system

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.

380 tokens
context cost
the whole folder, loaded on every use
1
files
instructions only
0
copies elsewhere
how many repositories repackaged it
482
stars on the repo
on the repository, not the skill itself

Install

one command, takes just this skill from the repository 
npx skills add https://github.com/plugin87/ux-ui-agent-skills --skill migrate-design-system

The instruction itself

3 sections, as written by the author

Skill: Migrate / Interop Design System

Bridge to or from external design systems via a role-based crosswalk.

Steps

  • Read design-systems/interop-protocol.md (Crosswalk Method, the three directions, headless-vs-styled guidance, verification).
  • 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).
  • 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.
  • 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.

How to use it

Copy the folder

Take plugin87/migrate-design-system from the repository into ~/.claude/skills for personal use, or into .claude/skills inside a project.

Check the name does not clash

The agent identifies a skill by the name field in its header. Two skills with the same name cannot sit side by side — one of them will be ignored.