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.

brokenrobot-xyz b0a2023 1.2 KB Updated

File contents

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.

brokenrobot-xyz/agent-skills/tree/main/plugins/agent-authoring-toolkit/skills/reviewing-claude-skills/evals/files/eval-model-subset/auditing-css-tokens commit b0a2023589

Frequently asked questions

npx skillmds@latest add brokenrobot-xyz/auditing-css-tokens