frontend-agents-design-system-validator
Installation
SKILL.md
Frontend Agents : Design System Validator
Deterministic checklist that agents and code reviewers apply BEFORE merging UI changes. Validates token usage, three-tier chain, cascade-layer discipline, @property registration, dark / light parity, and WCAG contrast. Outputs a findings report.
Quick Reference
The seven validation rules (deterministic)
| # | Rule | Severity if violated |
|---|---|---|
| 1 | Every color / spacing / font-size / radius / shadow value MUST be a var(--token) reference. NEVER a raw value outside the @layer tokens block. |
ERROR |
| 2 | Three-tier chain : component CSS consumes SEMANTIC tokens; semantic tokens reference PRIMITIVE tokens. Components NEVER reference primitives directly. | WARNING |
| 3 | Every defined token MUST be referenced somewhere (no orphans). Every reference MUST resolve (no dangling). | ERROR (dangling) / INFO (orphan) |
| 4 | Naming convention : kebab-case + namespaced prefix (--color-*, --space-*, --font-size-*, --line-height-*, --radius-*, --shadow-*, --motion-*, --easing-*). |
WARNING |
| 5 | @layer tokens, theme, base, components, utilities; MUST be declared at the project root CSS entry. |
ERROR |
| 6 | Every animatable custom property (used in transition / animation) MUST be @property-registered with syntax, inherits, initial-value. |
WARNING |
| 7 | No !important outside the utilities layer. |
ERROR |