Claude Code system-audit skill for missing design tokens and drift
Compare interface code with token declarations to find unused definitions, broken references, and raw values that should follow the system.
中文Install in Claude Code
A local Claude Code project with design-token declarations and the CSS snippets that use them.
- Review `.claude/skills/system-audit/SKILL.md` and its requirements at the pinned GitHub commit.
- Create `.claude/skills/system-audit/` in your project and save the reviewed file as `.claude/skills/system-audit/SKILL.md`.
- Start Claude Code from that project's root, then select `/system-audit` in the slash menu.
Example task
Invoke /system-audit in the project and review these fictional CSS excerpts. Explain each finding and suggest a correction.
defined `--surface-main`, `--shadow-sm`, `--shadow-xl`, `--space-legacy`
component references `var(--surface-main)` and `var(--shadow-md)`
raw UI spacing `padding: 18px` has no matching tokenWhat to check
Report `--space-legacy` as unused, `var(--shadow-md)` as a broken reference, and `padding: 18px` for review against spacing rules. Preserve the valid `var(--surface-main)` reference.
Original SKILL.md on GitHub · Updated
Frequently asked question
How do I distinguish undefined references from unused definitions?
Collect both definitions and uses. A definition without a use is unused, and a reference without a definition is unresolved.