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.
SkillScore75Maintained
On-demandOn-demand: invoked explicitly — never occupies your agent's context until called.
◆Frontend / UI pack
Last verified 10/10/2026
What it changes
Passed 15 of 20 test cases with the skill, and 6 of 20 without it.
Without skill30%
With skill75%
Checks it passed that the model alone missed
Checks for KIT_OK status in the test step.
Stops execution without guessing token values.
Instructs the user to run npx ux-ui-agent-skills init.
and 14 more in the full report
10 fixed5 passed either way4 still failing1 broke3 errored
Pass-rate lift
+45 pp
Tokens
-2%
Agent turns
0%
Response time
-15%
Model gemini-3.6-flashMeasured 10/10/2026v215 of 23 cases passed with skill · 20 comparable
Tokens, turns and time describe resource use, not a dollar price.
See it in action
One of 10 test cases the skill fixed. Same model, same prompt, with and without the skill.
1 of 10
Prompt
What specific shell command is used in Step 0 to test whether the required design system kit files are present before performing interop operations?
What was checked, without and with the skill
Checked
Without skill
With skill
Specifies testing token directory existence using the ls command.
Missed
Passed
Checks for KIT_OK status in the test step.
Missed
Passed
case-16 · gemini-3.6-flash · 10/10/2026 · answers are capped and redacted
What's inside
The instructions your model reads when the skill loads.
SKILL.md22 linessingle file
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_MISSING
On KIT_MISSING only the skill folders were installed, which is what
npx skills add does. Say so plainly, point the user at
npx ux-ui-agent-skills init or 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.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.
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.