design-token-audit
The design-token-audit skill systematically evaluates how consistently design tokens are used throughout a product, identifying hard-coded values, gaps in token coverage, redundant tokens, and areas of inconsistency. Use this skill when implementing or improving a design token system, conducting periodic health checks on token adoption, preparing migration strategies from ad-hoc styling to token-based design, or investigating why design inconsistencies persist across a product despite having tokens defined.
git clone --depth 1 https://github.com/Owl-Listener/designer-skills /tmp/design-token-audit && cp -r /tmp/design-token-audit/designer-toolkit/skills/design-token-audit ~/.claude/skills/design-token-auditSKILL.md
# Design Token Audit You are an expert in auditing design token adoption and consistency across products. ## What You Do You audit how design tokens are used (or not used) in a product, identifying inconsistencies, gaps, and hard-coded values. ## Audit Scope ### Token Coverage - What percentage of visual properties use tokens? - Which properties are commonly hard-coded? - Are the right tier of tokens used (global vs semantic vs component)? ### Token Consistency - Are the same tokens used for the same purposes? - Are there redundant tokens (different names, same value)? - Are deprecated tokens still in use? ### Token Gaps - Are there visual values that should be tokens but are not? - Are there use cases not covered by the existing token set? - Do custom values suggest missing token scale steps? ## Audit Process 1. **Inventory** — Extract all visual values from code/design files 2. **Categorize** — Group by type (color, spacing, typography, etc.) 3. **Map** — Match values to existing tokens 4. **Flag** — Identify hard-coded values, mismatches, and gaps 5. **Prioritize** — Rank issues by frequency and impact 6. **Recommend** — Suggest new tokens, migrations, and cleanup ## Audit Report Format - Executive summary (token adoption percentage, key findings) - Detailed findings by category - Hard-coded value inventory with suggested token replacements - Recommended new tokens - Migration plan and priority ## Best Practices - Audit both design files and code - Automate detection where possible (lint rules) - Focus on high-impact categories first (color, spacing) - Track adoption over time - Make the audit results actionable, not just informational
Design an A/B experiment — hypothesis, variants, primary metric, and sample size. Use when a change can be measured quantitatively at scale. For observing behaviour qualitatively, use `test-scenario`.
Audit an existing interface against WCAG, producing findings with severity ratings and remediation steps. Use when you have a design or build to assess now. Not for planning future sessions with assistive-technology users — use `accessibility-test-plan` (prototyping-testing).
Plan accessibility testing — assistive technologies, participant criteria, WCAG coverage, and session protocol. Use when scheduling testing with real AT users. Not for evaluating a design yourself — use `accessibility-audit` (design-systems).
Apply the Aesthetic-Usability Effect — polished, consistent interfaces are perceived as more usable and forgive minor friction. Use when justifying visual polish or diagnosing why a functional design tests badly. For emotional resonance specifically, use `interfaces-that-feel` (interaction-design).
Cluster many qualitative data points into themes and insight statements. Use when synthesising across multiple sessions or sources. For a single transcript use `summarize-interview`; for one segment's inner state use `empathy-map`.
Apply animation principles — easing, staging, follow-through — to one specific UI motion. Use when tuning how an animation feels. For product-wide duration and easing tokens use `motion-system` (design-systems); for a full interaction spec use `micro-interaction-spec`.
A practitioner's toolkit for thinking and communicating as a designer in a business context — reading financials, mapping competitive landscapes, and defending design decisions in the language of value.
Analyse open or closed card sort results into a proposed grouping and label set. Use after running a sort study. For turning that evidence into a full structure, use `information-architecture` (ux-strategy).