Claude Skill MartBrowse skillsQuick linesLearn by videoTerminal guideWhat is a Skill?
 
← Back to list

Design System Compliance Check

Verifies the rendered UI actually uses your design tokens by reading computed styles in the running app.

Design & UIIntermediate★ 803⑂ 140AI score 9/10Last updated: Sep 21, 2026

What it does

  • Uses the Reticle MCP server to read computed styles from the live page and compare them to the project's declared design tokens.
  • Surfaces offTheme, colorTokens/backgroundTokens, tokenCount and themeScope to catch hardcoded hex values and off-palette backgrounds.
  • Goes beyond color: occluded elements hidden under overlays, 0×0 boxes that exist in the DOM but are invisible, and opacity/cursor checks for truly-disabled vs disabled-looking controls.
  • reticle_animations lists running and recently finished animations so you can spot motion that never ran or durations that don't match the token.
  • Reports every violation as a file:line location plus a concrete fact, not an opinion.

Who it's for

  • Teams with a design system but nothing automatically checking whether the code follows it.
  • Frontend developers who just built or restyled a component and want a design review pass.
  • Reviewers stuck on "the UI looks slightly off but nobody can say why".

Examples

  1. After enabling dark theme, inspect a button: offTheme: true, background #3b82f6 matches no token while the palette defines --color-primary at #2563eb.
  2. A modal close button that "exists in the DOM but isn't clickable" turns out to be occluded or have a 0×0 box.
  3. A newly added entrance animation never appears in reticle_animations, proving it never actually ran.

Caveats: tokenCount: 0 means the app declares no palette at all — report that instead of a pass. This is not an accessibility audit (contrast, focus order, screen-reader semantics are out of scope).

· · · Install guide · · ·

Try it now, no install

Paste this into Claude to use the skill without installing anything.

Read the instructions in this file and follow them to help me:
https://raw.githubusercontent.com/reticlehq/reticle/HEAD/skills/design-system-compliance/SKILL.md

What I want: (describe your task here)

If Claude can't open the link, open it yourself and paste the contents instead.

↓ If it works for you, download the ZIP below and install it. Then it runs on its own — no pasting each time.

Install in the Claude app (no terminal)
  1. Download the ZIP with the button below.
  2. In Claude, open Settings → Capabilities and turn on 'Code execution and file creation'. (one time)
  3. Go to Customize → Skills → + → 'Upload a skill' and upload the ZIP.
↓ Download ZIP
Install in Claude Code

Let Claude do it — paste this into Claude Code

Install the skill I found on Claude Skill Mart.
Copy the skills/design-system-compliance folder from the GitHub repo reticlehq/reticle into my ~/.claude/skills/design-system-compliance/.
When it's done, tell me in one line what this skill can do.

Install with a command instead

git clone https://github.com/reticlehq/reticle.git /tmp/reticle && mkdir -p ~/.claude/skills && cp -r /tmp/reticle/skills/design-system-compliance ~/.claude/skills/

⚠ This is a third-party skill. Check the source repository before installing.

  1. Open a terminal and clone the repo: git clone https://github.com/reticlehq/reticle.git /tmp/reticle
  2. Copy the skill into your Claude Code skills folder: mkdir -p ~/.claude/skills && cp -r /tmp/reticle/skills/design-system-compliance ~/.claude/skills/
  3. Initialize the Reticle server: RETICLE_INSTALL_SOURCE=npx_skill npx @reticlehq/server@latest init
  4. Follow the install-and-verify skill in the same repo to confirm the MCP connection works.
  5. Start the web app you want to inspect (e.g. npm run dev).
  6. Restart Claude Code, then ask something like "check whether this component follows our design system" to trigger the skill.
View source on GitHub ↗License: NOASSERTION