skills.rest
rebuildup
rebuildupCOMMUNITY
Explore all skills by this author →
Website𝕏@361do_sleepGitHub

token-audit

Audit hardcoded design values and migrate them into a three-layer design token system.

1|Updated Sep 11, 2026
Search Tags:#theming#design system#css#audit#migration#design tokens#visual regression
One-click install
npx skills add https://github.com/rebuildup/my-web-2026 --skill token-audit-rebuildup
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: token-audit
Source: https://github.com/rebuildup/my-web-2026/tree/main/skills/token-audit
Command: npx skills add https://github.com/rebuildup/my-web-2026 --skill token-audit-rebuildup

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve? Existing UIs accumulate hardcoded colors, spacing, and typography values that drift semantically over time, making theming and maintenance fragile. This Skill audits those values, separates primitive, semantic, and component token layers, and guides a safe staged migration with visual verification. ## Core Features & Use Cases - Hardcoded Value Audit: Inventory color, spacing, typography, radius, shadow, z-index, and motion values, distinguishing same-value-different-meaning from same-meaning-different-value conflicts. - Three-Layer Token Architecture: Classify candidates into primitive, semantic, and component tokens with explicit promotion rules so one-off values stay hardcoded intentionally. - Staged Migration with Visual Verification: Migrate in ordered phases (token home, duplicates, high-frequency semantics, components, pages) and verify with screenshots, light/dark modes, and interaction states. - Use Case: A team inheriting a legacy React app with scattered hex codes and pixel values uses this Skill to consolidate them into a semantic token system supporting light and dark themes without visual regressions. ## Quick Start Audit this project's stylesheets for hardcoded design values and propose a semantic token structure with a migration plan.

Frequently Asked Questions about token-audit

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

FAQPage Schema
How do I audit hardcoded design tokens in an existing UI?▼

Inventory color, spacing, typography, radius, shadow, z-index, and motion values across stylesheets and components. Then distinguish values that share meaning but differ numerically from identical values used for different semantic roles before proposing tokens.

What is the difference between primitive, semantic, and component design tokens?▼

Primitive tokens hold raw scales like color.blue.500 or space.4. Semantic tokens express UI meaning like color.text.primary or color.status.danger. Component tokens cover component-specific contracts like button.primary.background only when global semantics cannot express the responsibility.

Should every hardcoded value become a design token?▼

No. One-off illustration geometry, content-dependent dimensions, feature-specific positioning, derived values, and platform workarounds should stay hardcoded. Promote values only when they repeat in the same role, need theme switching, or carry brand meaning.

How do I migrate to design tokens without visual regressions?▼

Migrate in stages: establish the canonical token home, resolve duplicates, move high-frequency semantic roles, then components, then pages. Verify each stage with builds, rendered UI checks, light and dark modes, interaction states, and before-and-after screenshots.

Does this approach work with Tailwind or CSS-in-JS theme objects?▼

Yes. The audit covers CSS custom properties, Tailwind theme variables, Style Dictionary or DTCG JSON, CSS-in-JS theme objects, and component library tokens. It first identifies the existing token home rather than imposing a new naming scheme.

Related Skills

Explore More Design & Creative Skills→
vikingokftvikingokft

stitch::extract-design-md

Extract a Stitch-compatible DESIGN.md from frontend source code.

Official
Intermediate
scanbottscanbott

frontend-theme

Apply Rawgrowth design system tokens, typography, and layout before writing UI code.

Community
Advanced
systempromptiosystempromptio
2

visual-design-system

Enforce branded visual design consistency using OKLCH tokens and fluid typography.

Official
Advanced
PSkinnerTechPSkinnerTech

design-systems

Design and implement scalable design systems with component libraries, tokens, and governance.

Community
Advanced