Design System Compliance
Check that the UI you actually rendered uses the design system, by reading computed...
Install
npx skills add reticlehq/reticle --skill design-system-compliance -g -a claude-code -y- Repository
- reticlehq/reticle1.3k
- Category
- Design
- Updated
- 3d ago
- License
- Apache-2.0
- Context cost
- Lightabout 865 tokens
- Runs scripts
- No, instructions only
What it does
Check that the UI you actually rendered uses the design system, by reading computed styles in the running app against the project's design tokens. Catches hardcoded hex colors, off-palette backgrounds, invisible or unusable controls, and animations that never ran. Use after building or restyling a component, when a design review is wanted, when a UI looks slightly off but nobody can say why, or when a design system exists and nothing checks whether the code follows it.
Does the rendered UI actually use the design system?
Reading the source tells you what the component asks for. It cannot tell you what the browser resolved: a token overridden three layers up, a hardcoded #3b82f6 that happens to look close, a dark-theme scope that never applied. That answer only exists in the running page.
Reticle reads computed styles in the live app and compares them against the project's tokens. Not set up? Follow the reticle skill: it installs Reticle, asks the user before init changes the app's files, and proves one flow.
The check
reticle_look({ action: "page", sessionId, mode: "interactive" })
reticle_look({ action: "element", sessionId, ref })
inspect returns a theme report per element:
| Field | What it tells you |
|---|---|
offTheme | the headline. True when a set, opaque color matches no token in the palette: a violation worth fixing |
colorTokens / backgroundTokens | every token whose resolved value is this color. Empty means off-palette |
colorToken / backgroundToken | the unambiguous match, or null when several tokens share the color. null here is an abstention, not a violation: read the plural field |
tokenCount | how many tokens resolved under the active theme. 0 means the app declares no palette, and offTheme is never asserted: report that rather than a clean bill of health |
themeScope | the theme active at capture (e.g. .dark), so two inspects taken minutes apart are comparable at all |
Read tokenCount first. Zero tokens means there is nothing to comply with, and every "pass" below it is vacuous.
Beyond color: is the control actually usable?
The same call answers the questions a screenshot cannot:
