Como usar
- Copie o comando e verifique o pacote antes de instalar no seu ambiente de agente.
- Consulte no original as ferramentas, credenciais e ambientes necessários.
- Descreva os dados de entrada e a entrega esperada; confira a saída com as fontes.
npx skills add https://github.com/plugin87/ux-ui-agent-skills --skill migrate-design-systemAntes de começar
- A instalação não inclui assinatura de modelo, franquia API ou acesso aos seus arquivos.
- Estrelas e instalações indicam atividade, não um teste independente de qualidade ou segurança.
Documento original do Skill
Renderizado do repositório de origem, preservando títulos, exemplos, código, tabelas, links e imagens.
Skill: Migrate / Interop Design System
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.
Bridge to or from external design systems via a role-based crosswalk.
Steps
- Read
${CLAUDE_SKILL_DIR}/../../../design-systems/interop-protocol.md(Crosswalk Method, the three directions, headless-vs-styled guidance, verification). - Use the curated tables in
${CLAUDE_SKILL_DIR}/../../../design-systems/crosswalk.mdfor 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 (
${CLAUDE_SKILL_DIR}/../../../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.
