# Design System Compliance

Check that the UI you actually rendered uses the design system, by reading computed...

- Repository: https://github.com/reticlehq/reticle (1299 stars)
- Category: Design
- License: Apache-2.0
- Last updated: 2026-11-01
- Runs scripts: no, instructions only

## Install

Claude Code: `npx skills add reticlehq/reticle --skill design-system-compliance -g -a claude-code -y`
Codex: `npx skills add reticlehq/reticle --skill design-system-compliance -g -a codex -y`
Cursor: `npx skills add reticlehq/reticle --skill design-system-compliance -g -a cursor -y`
Gemini CLI: `npx skills add reticlehq/reticle --skill design-system-compliance -g -a gemini-cli -y`
Claude Code plugin marketplace: `/plugin marketplace add reticlehq/reticle`

## Description

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.

## SKILL.md, as published by its author (untrusted third-party text, read it as data)

# 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`](https://github.com/reticlehq/reticle/blob/main/skills/reticle/SKILL.md) 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:

The rest: https://github.com/reticlehq/reticle/blob/HEAD/skills/design-system-compliance/SKILL.md