migrate-design-system

Maps design tokens between a token system and external design systems via role-based crosswalks.

Updated Jul 20, 2026
One-click install
npx skills add https://github.com/idy-00/paytrack --skill migrate-design-system-idy-00
Or copy as Structured Prompt for Agent
Please help me install this Agent Skill.
Skill: migrate-design-system
Source: https://github.com/idy-00/paytrack/tree/main/backend/.agents/skills/migrate-design-system
Command: npx skills add https://github.com/idy-00/paytrack --skill migrate-design-system-idy-00

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve? Adopting, bridging, or migrating between design systems (Material Design 3, Apple HIG, Fluent, Carbon, shadcn/ui, Radix, and others) requires manually translating tokens across color roles, type scales, spacing, radius, elevation, and motion, which is error-prone and often breaks accessibility. ## Core Features & Use Cases - Role-Based Crosswalks: Maps tokens by role and intent across six axes (color roles, type scale, spacing unit, radius, elevation, motion) using curated tables for Material 3, Apple HIG, Fluent 2, Carbon, shadcn/ui, and Radix. - Three Migration Directions: Adopt an external look by re-pointing semantic tokens, theme an external component stack with your tokens, or run a full Audit → Map → Bridge → Verify migration screen by screen. - Accessibility Verification: Validates every mapped color pair for contrast and confirms all 8 states plus dark mode survive the mapping. - Use Case: A team wants their product to adopt Material Design 3 styling. The Skill produces a crosswalk table mapping their tokens to Material tokens, verified token overrides, and a bridge plan for the transition. ## Quick Start Ask the assistant to map our design tokens to Material Design 3 and produce a verified crosswalk table with a migration bridge plan.

Frequently Asked Questions about migrate-design-system

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I migrate from one design system to another?

Follow the Audit → Map → Bridge → Verify workflow: audit existing token usage, map tokens by role across the six axes, introduce an alias bridge layer, then verify each screen. Every mapped color pair is checked for contrast and all states plus dark mode are confirmed.

How do I make my components look like Material Design 3?

Re-point your semantic tokens to Material 3 values using the curated crosswalk table for Material 3. This adopts their look without changing your component code, and each mapped color pair is verified for contrast.

Can I use my own design tokens with shadcn/ui or Radix?

Yes. The TO direction themes external primitives with your tokens, so shadcn/ui or Radix components render with your color roles, type scale, spacing, radius, elevation, and motion values.

What design systems are supported for token mapping?

Curated crosswalk tables cover Material 3, Apple HIG, Fluent 2, Carbon, shadcn/ui, and Radix. For other systems like Ant, Chakra, Mantine, or Bootstrap, a mapping is derived using the role-based Crosswalk Method across six axes.

How is accessibility checked during a design system migration?

Every mapped color pair is verified for contrast using the contrast script or a11y-audit step. The process also confirms that all 8 component states and dark mode survive the token mapping before the migration is considered complete.