Does it support different token tiers?

Yes, it specifically evaluates usage across global, semantic, and component tiers to ensure the correct level of abstraction is used for each property.

How does it handle hard-coded values?

It inventories all hard-coded values, groups them by frequency, and maps them to the most appropriate existing token or suggests new token candidates.

What files can this skill audit?

It can audit CSS, SCSS, Tailwind configurations, JSX/TSX components, and style-related configuration files to identify visual value inconsistencies.

Can it help with theme migrations?

Absolutely. It is highly effective for identifying values that block successful multi-brand or dark-mode implementations by finding non-semantic references.

Design Token Audit

Name: Design Token Audit
Author: sethdford

bysethdford

•

设计工具

Audits design token adoption and consistency to eliminate hard-coded values and improve design system coverage.

The Design Token Audit skill empowers teams to systematically evaluate how design tokens are integrated across their product's codebase and design files. It identifies technical debt by locating hard-coded hex codes, magic numbers, and inconsistent spacing values, then maps them against your existing design system architecture. By analyzing token tiers—from global to semantic and component levels—the skill provides a clear roadmap for migration, helping developers and designers achieve 100% token coverage and a more maintainable, scalable UI.

主要功能

01Maps visual properties to global, semantic, and component token tiers

02Generates actionable migration plans with prioritized cleanup tasks

03Detects redundant, inconsistent, or deprecated token usage

04Flags gaps where visual values should be tokenized but aren't

05Identifies hard-coded CSS and style values across the repository

069 GitHub stars

使用场景

01Generating a design debt report to justify refactoring and token migration efforts

02Measuring design system adoption percentage in a legacy codebase

03Identifying 'magic numbers' in CSS that deviate from spacing and typography scales

What are Skills?·How to Install

Install with 🐟 Skill.Fish

npx skillfish add sethdford/claude-skills design-token-audit

For use in Claude.ai and ChatGPT

主要功能

01Maps visual properties to global, semantic, and component token tiers

02Generates actionable migration plans with prioritized cleanup tasks

03Detects redundant, inconsistent, or deprecated token usage

04Flags gaps where visual values should be tokenized but aren't

05Identifies hard-coded CSS and style values across the repository

069 GitHub stars

使用场景

01Generating a design debt report to justify refactoring and token migration efforts

02Measuring design system adoption percentage in a legacy codebase

03Identifying 'magic numbers' in CSS that deviate from spacing and typography scales

What are Skills?·How to Install

Install with 🐟 Skill.Fish

npx skillfish add sethdford/claude-skills design-token-audit

For use in Claude.ai and ChatGPT