token-audit

Scans CSS and component TS/TSX files for hardcoded values that should use design tokens.

1|Updated Feb 14, 2026
One-click install
npx skills add https://github.com/robritacca-dotcom/design-system --skill token-audit-robritacca-dotcom
Or copy as Structured Prompt for Agent
Please help me install this Agent Skill.
Skill: token-audit
Source: https://github.com/robritacca-dotcom/design-system/tree/main/.claude/skills/token-audit
Command: npx skills add https://github.com/robritacca-dotcom/design-system --skill token-audit-robritacca-dotcom

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve? Hardcoded hex colours, raw pixel values, and literal transition timings silently drift a codebase away from its design token system, and near-duplicate values that almost match a token hide as typos no build check catches. This Skill audits CSS and component files against the token registry and reports every violation with a recommended replacement. ## Core Features & Use Cases - Violation detection: Flags hardcoded hex colours, raw rgb()/rgba() calls, pixel values for spacing and typography, hardcoded font weights, and literal transition durations or easings that map to existing tokens. - Near-twin hunting: Compares raw values against the token registry and against each other to catch values that are one step off a token, including cross-notation twins like a hex and an hsl() of the same colour. - Scoped audits: Accepts a single component, all-components, the website directory, or a specific file path, and respects ds-allow directives that sanction deliberate off-token values. - Use Case: Ask to audit the Avatar component's CSS, and receive a line-by-line report like Avatar.css:42 — #0E6E8F → var(--color-action-primary-bg) plus a summary count of violations and documented exceptions. ## Quick Start Audit the Button component CSS for hardcoded values and report any token violations with recommended replacements.

Frequently Asked Questions about token-audit

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

FAQPage Schema
How do I check CSS files for hardcoded values that should use design tokens?

Run a token audit scoped to a component, all components, or the website directory. The scan flags hardcoded hex colours, raw rgb() calls, pixel values matching tokens, hardcoded font weights, and literal transition timings, reporting file, line, and recommended token replacement.

How do I audit a single component's CSS for token compliance?

Pass the component name as the scope, for example Avatar, and the audit scans that component's CSS file against the token registry. The report lists each violation with its line number and the token that should replace it.

What is a near-twin token violation?

A near-twin is a raw value that almost matches an existing token, such as a colour within a few points per channel or a spacing value one pixel off a scale step. These are reported as their own finding class because they usually indicate a mistyped token value rather than a deliberate choice.

Can a hardcoded value be allowed without failing the audit?

Yes, a ds-allow directive comment sanctions a deliberate off-token value for a declaration, section, or entire file. Values covered by a directive are reported as documented exceptions rather than violations, and the directive grammar is enforced by a build script.

Does the token audit check TypeScript component files?

Yes, component TS and TSX files are scanned for colour-shaped literals such as hex, rgb(), and hsl() values. Hits are judged against the sanctioned out-of-CSS surfaces in the token reference validation script, and anything outside those mirrors is reported as a finding.

Why are chart palette hex values not flagged as violations?

The chart palette emits var() references with literal hex fallbacks so charts follow theme switches, and those fallbacks are deliberate. A separate validation script fails the build if a fallback stops matching its token, so the audit treats them as sanctioned.