Emcn Design Review
simstudioai/sim
Review UI code for alignment with the emcn design system — components, tokens, patterns, and conventions
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.
Install Design System Compliance
$ npx skills add reticlehq/reticle --skill design-system-compliance -a claude-codeProject install by default; add -g for ~/.claude/skills/.
$ gh skill install reticlehq/reticle design-system-compliance --agent claude-codeProject scope by default; add --scope user for a personal install. Needs GitHub CLI 2.90.0 or later (public preview).
$ git clone --depth 1 https://github.com/reticlehq/reticle.git skills-src && mkdir -p .claude/skills && cp -r skills-src/skills/design-system-compliance .claude/skills/design-system-compliance && rm -rf skills-srcUse ~/.claude/skills/ instead of .claude/skills for a personal install. The folder must contain SKILL.md.
Claude Code skills documentation · loads skills from .claude/skills/
Install the "design-system-compliance" agent skill from https://github.com/reticlehq/reticle/tree/main/skills/design-system-compliance into .claude/skills/design-system-compliance/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "design-system-compliance", then confirm the skill loads.Claude Code copies the folder itself, the same result as the manual copy. Check what it changed before you commit it.
$skill-installer install https://github.com/reticlehq/reticle/tree/main/skills/design-system-complianceType this inside Codex. $skill-installer <name> installs a curated skill from openai/skills. The installer writes to $CODEX_HOME/skills (default ~/.codex/skills). Restart Codex if the skill does not show up.
$ npx skills add reticlehq/reticle --skill design-system-compliance -a codexProject install goes to .agents/skills/; add -g for ~/.codex/skills/.
$ gh skill install reticlehq/reticle design-system-compliance --agent codexProject scope by default (.agents/skills/); add --scope user for a personal install.
$ git clone --depth 1 https://github.com/reticlehq/reticle.git skills-src && mkdir -p .agents/skills && cp -r skills-src/skills/design-system-compliance .agents/skills/design-system-compliance && rm -rf skills-srcUse ~/.agents/skills/ instead of .agents/skills for a personal install.
Codex skills documentation · loads skills from .agents/skills/
Install the "design-system-compliance" agent skill from https://github.com/reticlehq/reticle/tree/main/skills/design-system-compliance into .agents/skills/design-system-compliance/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "design-system-compliance", then confirm the skill loads.Codex copies the folder itself, the same result as the manual copy. Check what it changed before you commit it.
$ npx skills add reticlehq/reticle --skill design-system-compliance -a cursorProject install goes to .agents/skills/; add -g for ~/.cursor/skills/.
$ gh skill install reticlehq/reticle design-system-compliance --agent cursorProject scope by default (.agents/skills/); add --scope user for a personal install.
$ git clone --depth 1 https://github.com/reticlehq/reticle.git skills-src && mkdir -p .cursor/skills && cp -r skills-src/skills/design-system-compliance .cursor/skills/design-system-compliance && rm -rf skills-srcUse ~/.cursor/skills/ instead of .cursor/skills for a personal install.
Cursor skills documentation · loads skills from .cursor/skills/, .agents/skills/, .claude/skills/, .codex/skills/
Install the "design-system-compliance" agent skill from https://github.com/reticlehq/reticle/tree/main/skills/design-system-compliance into .cursor/skills/design-system-compliance/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "design-system-compliance", then confirm the skill loads.Cursor copies the folder itself, the same result as the manual copy. Check what it changed before you commit it.
$ gemini skills install https://github.com/reticlehq/reticle.git --path skills/design-system-compliance--scope user (default) or --scope workspace; --path is the subfolder of the repo that holds the skill; --consent skips the security confirmation prompt.
$ npx skills add reticlehq/reticle --skill design-system-compliance -a gemini-cliProject install goes to .agents/skills/; add -g for ~/.gemini/skills/.
$ gh skill install reticlehq/reticle design-system-compliance --agent gemini-cliProject scope by default (.agents/skills/); add --scope user for a personal install.
$ git clone --depth 1 https://github.com/reticlehq/reticle.git skills-src && mkdir -p .gemini/skills && cp -r skills-src/skills/design-system-compliance .gemini/skills/design-system-compliance && rm -rf skills-srcUse ~/.gemini/skills/ instead of .gemini/skills for a personal install, then run /skills reload.
Gemini CLI skills documentation · loads skills from .gemini/skills/, .agents/skills/
Install the "design-system-compliance" agent skill from https://github.com/reticlehq/reticle/tree/main/skills/design-system-compliance into .gemini/skills/design-system-compliance/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "design-system-compliance", then confirm the skill loads.Gemini CLI copies the folder itself, the same result as the manual copy. Check what it changed before you commit it.
$ gh skill install reticlehq/reticle design-system-complianceInstalls for Copilot at project scope by default; add --scope user for a personal install. Preview a skill first with gh skill preview. Needs GitHub CLI 2.90.0 or later (public preview).
$ npx skills add reticlehq/reticle --skill design-system-compliance -a github-copilotProject install goes to .agents/skills/; add -g for ~/.copilot/skills/.
$ git clone --depth 1 https://github.com/reticlehq/reticle.git skills-src && mkdir -p .github/skills && cp -r skills-src/skills/design-system-compliance .github/skills/design-system-compliance && rm -rf skills-srcUse ~/.copilot/skills/ instead of .github/skills for a personal install. Commit .github/skills so cloud agent and code review can use it.
GitHub Copilot skills documentation · loads skills from .github/skills/, .claude/skills/, .agents/skills/
Install the "design-system-compliance" agent skill from https://github.com/reticlehq/reticle/tree/main/skills/design-system-compliance into .github/skills/design-system-compliance/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "design-system-compliance", then confirm the skill loads.GitHub Copilot copies the folder itself, the same result as the manual copy. Check what it changed before you commit it.
$ npx skills add reticlehq/reticle --skill design-system-compliance -a opencodeOpenCode documents no install command of its own. Project install goes to .agents/skills/; add -g for ~/.config/opencode/skills/.
$ gh skill install reticlehq/reticle design-system-compliance --agent opencodeProject scope by default (.agents/skills/); add --scope user for a personal install.
$ git clone --depth 1 https://github.com/reticlehq/reticle.git skills-src && mkdir -p .opencode/skills && cp -r skills-src/skills/design-system-compliance .opencode/skills/design-system-compliance && rm -rf skills-srcUse ~/.config/opencode/skills/ instead of .opencode/skills for a personal install.
OpenCode skills documentation · loads skills from .opencode/skills/, .claude/skills/, .agents/skills/
Install the "design-system-compliance" agent skill from https://github.com/reticlehq/reticle/tree/main/skills/design-system-compliance into .opencode/skills/design-system-compliance/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "design-system-compliance", then confirm the skill loads.OpenCode copies the folder itself, the same result as the manual copy. Check what it changed before you commit it.
Facts
- Skill name
design-system-compliance- GitHub stars
- 1.2k
- Token cost
- ~1k tokens
- SKILL.md length
- 469 words
- Files
- 1
- Skills in repo
- 19
- Repo updated
- First seen
- Licence
- Apache-2.0
At a glance
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.
- Tasks that involve Design systems
- SKILL.md covers The check, Beyond color: is the control…, Animations and Report violations as…, plus 1 more section
- Calls npx and curl; reaches docs.reticle.sh
- Tasks that involve Design review and critique
What it does
Design System Compliance is an agent skill from reticlehq/reticle. 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.
Its SKILL.md is about 1k tokens, which your agent loads only when the skill is triggered. It is a single SKILL.md file with no bundled scripts.
It sits in Frontend & Design, covering Design systems, Design review and critique and Design tokens. The repository describes itself as: AI agents can generate code, but still struggle to understand what they build. Reticle brings Jev-style machine-native runtime perception to web & desktop applications. The licence is Apache-2.0.
When your agent uses it
- Tasks that involve Design systems
- Tasks that involve Design review and critique
- Tasks that involve Design tokens
Example prompts
- “/design-system-compliance”
Requirements
- Node.js
What it can do on your machine
Read from SKILL.md and the folder at commit 178e5c0. It shows what the files ask for, not the result of running them.
Tool permissions
Pre-approves nothing: there is no allowed-tools line, so your agent's usual permission prompts apply.
From allowed-tools in the SKILL.md frontmatter.
Runs code
Shell commands in SKILL.md call:
npxcurl
From the folder's file list and the shell code blocks in SKILL.md.
Network
Hosts in commands or code, which the agent is likely to contact:
docs.reticle.sh
From URLs in SKILL.md, links to its own repository left out.
Credentials
Names no API keys, tokens, secrets or passwords.
From names ending in _API_KEY, _TOKEN, _SECRET, _KEY or _PASSWORD in SKILL.md.
Context cost
Design System Compliance loads about 1k tokens when it runs. Until then it costs about 125 tokens; SKILL.md has 469 words of instructions outside code blocks.
Estimates: characters ÷ 4, the usual rule of thumb; real counts depend on the model's tokenizer. Scripts and assets cost tokens only if the agent reads them.
Safety
Auto-check passed
The automated check found no risky patterns in SKILL.md.
Automated static check — not a guarantee. Review scripts before installing. It scans the text of SKILL.md for risky patterns (piping downloads into a shell, reading credential files, hidden Unicode, destructive commands); files beside SKILL.md are not scanned.
SKILL.md
The full file from reticlehq/reticle at commit 178e5c0, republished under its Apache-2.0 licence (© reticlehq). 469 words, ~1,030 tokens.
Download SKILL.mdSave it as
.claude/skills/design-system-compliance/SKILL.md (or your agent's skills folder).- name
- design-system-compliance
- 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.
- license
- Apache-2.0
- metadata.version
- 3.7.0
- metadata.homepage
- https://www.reticle.sh
- metadata.repository
- https://github.com/reticlehq/reticle
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 installed? RETICLE_INSTALL_SOURCE=npx_skill npx @reticlehq/server@latest init, then the install-and-verify skill.
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:
occluded: covered by an overlay. It renders, and no user can click it.box:0×0is present-but-invisible, the most common "it's there, I can see it in the DOM" bug.styles.opacity/styles.cursor: the difference between disabled-looking and disabled.source: { file, line }: where to go and fix it.
A design review that only compares colors passes a button nobody can press.
Show full SKILL.md (175 more words)Show less
Animations
reticle_run({ tool: "reticle_animations", args: { sessionId } })Returns running and recently completed animations with their targets and timing. Two things worth checking after any motion work: an animation you added that never appears here did not run, and one whose duration does not match the token is off-spec. Both look identical in a screenshot.
Report violations as locations, not opinions
For each element that failed, give the file:line from inspect and the specific fact: "background #3b82f6 matches no token; the palette has --color-primary at #2563eb". A design-review comment without a location is a task someone else has to redo.
What this is not
This checks compliance with the tokens the project declares. It is not an opinion about whether the design is good, and it is not an accessibility audit. Contrast ratios, focus order and screen-reader semantics are a different job, and claiming them here would be a false green of exactly the kind this repo exists to prevent.
Everything else, one page at a time: curl https://docs.reticle.sh/llms.txt. Design token check missing something you needed? reticle_session { action: "feedback" } with kind: "gap".
© reticlehq, Apache-2.0. Rendered from Markdown: HTML in the file is shown as text, images as links, and headings moved down two levels. Raw file
Files
Just SKILL.md in skills/design-system-compliance of reticlehq/reticle.
Open the folder on GitHubat commit 178e5c0
Compare with similar skills
Design System Compliance next to the 5 skills that share the most tags, products or categories with it. Stars are the repository's; “used in” counts other GitHub owners with a copy.
| Skill | Stars | Used in | Tokens | Auto-check | Licence | Repo updated |
|---|---|---|---|---|---|---|
| Design System Compliance this skillreticlehq/reticle | 1.2k | — | ~1k | Automated safety check: Pass | Apache-2.0 | |
| Emcn Design Reviewsimstudioai/sim | 30k | — | ~1.2k | Automated safety check: Pass | Apache-2.0 | |
| Design Standardsrampstackco/claude-skills | 945 | — | ~2.4k | Automated safety check: Pass | MIT | |
| Figma Design System Builderwarpdotdev/warp | 65k | 2 repos | ~4.4k | Automated safety check: Pass | AGPL-3.0 | |
| Figma use_figma Plugin API Ruleswarpdotdev/warp | 65k | 4 repos | ~4.4k | Automated safety check: Pass | AGPL-3.0 | |
| Design SystemOhh-889/skyroc | 795 | 11 repos | ~1.7k | Automated safety check: Pass | MIT |
Similar skills
Design Standards
rampstackco/claude-skills
Apply production-grade design standards when building or reviewing pages, components, or UI.
Figma Design System Builder
warpdotdev/warp
Builds or updates a design system in Figma from a codebase in ordered phases: discovery, variables and tokens, components, theming and documentation, with checkpoints.
Figma use_figma Plugin API Rules
warpdotdev/warp
Required groundwork before any use_figma call: the rules and reference files for running JavaScript in a Figma file through the Plugin API without common failures.
Design System
Ohh-889/skyroc
Token architecture, component specifications, and slide generation.
Design Dna
zanwei/design-dna
Extract, define, and apply design DNA across three dimensions: design system (tokens), design style (qualitative feel), and visual effects (Canvas, WebGL, 3D, particles, shaders, scroll effects…
More from reticlehq/reticle
All 19 skills in this repoAgentic TDD
reticlehq/reticle
Applies red-green TDD to behavior unit tests cannot reach, by stating the expected outcome against the running app with Reticle before writing the feature.
Whole-App Health Sweep
reticlehq/reticle
Sweeps a running web app by clicking every reachable control, then reports dead buttons, console errors, failed requests and mismatches between API data and the screen.
Broken UI Debugger
reticlehq/reticle
Finds why a running web app misbehaves when the console is empty and the code looks fine, by reading the click, request, store and console together.
Desktop App Driving with Reticle
reticlehq/reticle
Drives and verifies Electron or Tauri desktop apps through Reticle, which sees the renderer and the IPC calls that a browser-based testing tool cannot observe.
False Green Test Detection
reticlehq/reticle
Finds out why a passing test suite sits on top of a broken app by comparing what the running app does with what the tests claim, using Reticle.
Fix What I Pointed At
reticlehq/reticle
Picks up bugs a person flagged by pointing at elements in the running app, each mark carrying the element, their note and the source file and line, then fixes and verifies them.
Related
Categories
Questions about Design System Compliance
What does Design System Compliance do?
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. Design System Compliance is an agent skill from reticlehq/reticle. 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.
When should I use Design System Compliance?
Design System Compliance fits situations like: tasks that involve Design systems; tasks that involve Design review and critique; tasks that involve Design tokens.
How do I install Design System Compliance in Claude Code?
Run `npx skills add reticlehq/reticle --skill design-system-compliance -a claude-code`. Or copy the skill folder (skills/design-system-compliance in reticlehq/reticle) into .claude/skills/design-system-compliance in your project. Claude Code loads it when a task matches its description.
How do I install Design System Compliance in Codex?
Run `npx skills add reticlehq/reticle --skill design-system-compliance -a codex`. Or copy the skill folder (skills/design-system-compliance in reticlehq/reticle) into .agents/skills/design-system-compliance in your project. Codex loads it when a task matches its description.
Can I use Design System Compliance in Cursor, Gemini CLI or GitHub Copilot?
Cursor, Gemini CLI, GitHub Copilot and OpenCode also load SKILL.md folders. With the skills CLI, run `npx skills add reticlehq/reticle --skill design-system-compliance -a cursor` (or -a gemini-cli, github-copilot or opencode for the others). To copy it by hand, put the folder in .cursor/skills/design-system-compliance, .gemini/skills/design-system-compliance, .github/skills/design-system-compliance and .opencode/skills/design-system-compliance in your project.
What does Design System Compliance need to run?
Going by SKILL.md and its folder, Design System Compliance needs the command-line tools its instructions call (npx and curl). Our summary lists: Node.js.
Does Design System Compliance access the network?
SKILL.md names 1 domain. In commands or code: docs.reticle.sh; the agent is likely to contact it when it follows the instructions. This is read from the text; nothing was executed.
Is Design System Compliance safe to install?
Our automated static check of SKILL.md found no risky patterns, such as piping downloads into a shell, reading credential files or hidden Unicode. It is not a guarantee. Review the folder before installing.
What licence does Design System Compliance use?
Design System Compliance is published under the Apache-2.0 licence (declared in SKILL.md). It allows redistribution, so the full SKILL.md is shown on this page.
How many tokens does Design System Compliance use?
About 1k tokens (SKILL.md is roughly 4.1k characters). Agents keep only the skill's name and description in context until a task matches; then they load SKILL.md in full.
What are the alternatives to Design System Compliance?
Skills that share tags, products or a category with Design System Compliance: Emcn Design Review (simstudioai/sim, 30k stars), Design Standards (rampstackco/claude-skills, 945 stars), Figma Design System Builder (warpdotdev/warp, 65k stars) and Figma use_figma Plugin API Rules (warpdotdev/warp, 65k stars). The comparison table on this page puts their stars, adoption, token cost, safety result and licence side by side.
Who maintains Design System Compliance?
reticlehq (a GitHub organization) maintains it in reticlehq/reticle, which has 1,199 GitHub stars. The repository holds 19 skills in this directory. The repository was last updated on October 9, 2026.
Source: reticlehq/reticle on GitHub. Facts on this page come from the repository at the commit we read; the author's words are quoted as theirs.