token-mapping
From the author
Use to report how hardcoded style values on a page, file or diff map onto a project's existing design tokens, such as "are we using our tokens here", "which hardcoded colors map to which tokens", a token audit or planning a token migration. It never edits. Replacing the values is build-design-system.
Install
npx skills add arla6ka/design.how --skill token-mapping -a claude-code
Installs to .claude/skills/token-mapping/ · Each command fetches the skill straight from GitHub with the open skills CLI.
Byte-identical to the scanned commit, with the repository’s licence and a SOURCE.txt.
Want your agent to suggest skills while you type? See how to use skills from your IDE.
Safety checks on SKILL.md
No warnings.
Why 84
aiqbench computes the trust score from public signals. It is not a security audit, so read a skill before you install it.
Similar skills
Closest to this one by what they do and when they are used.
- hue-tokentonone-ai/tononeAudit or refactor a design token system for color — naming, structure, and coverage. Use when asked to "refactor our color tokens", "fix color token naming", or "improve token coverage for color".Design★ 76
- tone-tokentonone-ai/tononeDesign or refactor a design token architecture — naming, tiers, and coverage. Use when asked to "design a token architecture", "fix token naming", or "refactor our tokens".Writing★ 76
- design-systemanthropics/knowledge-work-pluginsAudit, document, or extend your design system. Use when checking for naming inconsistencies or hardcoded values across components, writing documentation for a component's variants, states, and accessibility notes, or designing a new pattern that fits the existing system.OfficialDesign★ 32.5K
- tone-recontonone-ai/tononeAudit existing token usage in a codebase — find literal values, missing tokens, and pipeline gaps. Use when asked to "audit our design tokens", "find hardcoded values in the CSS", or "check our token pipeline".Writing★ 76
- design-system-compliancereticlehq/reticleCheck that the UI you actually rendered uses the design system, by reading computed styles in the running app against the project's design tokens. Catches hardcoded hex colors, off-palette backgrounds, invisible or unusable controls, and animations that never ran. Use after building or restyling a component, when a design review is wanted, when a UI looks slightly off but nobody can say why, or when a design system exists and nothing checks whether the code follows it.Design★ 1.3K
- token-mapnexu-io/open-designMap an extracted Figma / source-code token bag onto the active OD design system, producing a deterministic mapping the generate stage can consume.Design★ 103.7K
Ratings & reviews
—
no reviews
Tried this skill? Rate it to help others. Sign in
Discussion
Join the discussion. Sign in