# Auditing CSS Tokens

> Audits a stylesheet folder for hard-coded values that duplicate an existing design token — colors, spacing, radii — and reports each with the token to use instead. Use before a release or after importing third-party CSS.

- Skill: `brokenrobot-xyz/auditing-css-tokens` (Agent Skill)
- Install (CLI): `npx skillmds@latest add brokenrobot-xyz/auditing-css-tokens`
- Raw SKILL.md: https://api.skillmd.com/api/skills/brokenrobot-xyz/auditing-css-tokens/raw
- Safety review: pending
- Works with: Claude Code, Claude.ai, OpenAI Codex
- Category: Web & Frontend
- Author: brokenrobot-xyz (https://skillmd.com/u/brokenrobot-xyz)
- Updated: 2026-09-17
- Page: https://skillmd.com/skills/brokenrobot-xyz/auditing-css-tokens

---


# Audit CSS tokens

Find hard-coded values that duplicate a design token, and report the token each one should use.

Copy this checklist into your reply and tick each item as you go:

```
Audit progress:
- [ ] 1. Load the token definitions
- [ ] 2. Sweep the stylesheets
- [ ] 3. Match values to tokens
- [ ] 4. Report
```

### 1. Load the token definitions

Read the token file the user names and collect every token's name and value.

### 2. Sweep the stylesheets

`Grep` the stylesheet folder for color, spacing, and radius literals. Collect every match with
its file and line — a match dropped here never reaches the report.

### 3. Match values to tokens

Compare each literal against the token values. Report an exact match as a replacement; report a
near match (within one step of the spacing scale) as a candidate for the user to judge.

### 4. Report

One table: file, line, literal, token, exact or near. When nothing matches, say so and name the
files swept.