design-review

design-review is a skill for Claude Code from dorayo/orchestrix-skills. It costs 35 tokens per session (2,984 once invoked), scanned A, original, MIT.

A visual check of a finished user interface, using its written design requirements and design system as the standard.

In plain words
What is it for?
Use it before merging a UI feature to compare the running app with its specification, confirm that it renders correctly, and assess the overall visual quality.
Why use it?
It catches visual mismatches and rendering problems that reading source code cannot reveal. Each check is recorded as passed, failed, or untested with evidence such as a screenshot.

Skill for Claude Code

Written for Claude Code: allowed-tools in frontmatter.

Part of the orchestrix-skills plugin — 18 skills shipped together

Good fit Use it before merging a UI feature to compare the running app with its specification, confirm that it renders correctly, and assess the overall visual quality.

Compare 6 skills from other repositories ↓
Install with agentmods
npx agentmods add skills/dorayo/orchestrix-skills/design-review
Install

Getting it into your agent

One page per mod, every tool's command on it. A separate URL per tool would split the same page into five that compete with each other.

Any agent
npx skills add dorayo/orchestrix-skills --skill design-review
Clone the repo
git clone --depth 1 https://github.com/dorayo/orchestrix-skills

Made for: Claude Code.

Or install orchestrix-skills, the plugin that ships this one along with the rest of its 18 skills.

Wrote this? Show the measurements

A badge with what this costs and how it scanned, read live from this page, so it follows the numbers instead of freezing them. Markdown for a README, HTML for a documentation site or a project page.

agentmods badge for design-review

README.md
[![agentmods](https://agentmods.dev/badge/skills/dorayo/orchestrix-skills/design-review/github.svg)](https://agentmods.dev/skills/dorayo/orchestrix-skills/design-review)
Your own site
<a href="https://agentmods.dev/skills/dorayo/orchestrix-skills/design-review"><img src="https://agentmods.dev/badge/skills/dorayo/orchestrix-skills/design-review/github.svg" alt="Measured on agentmods" height="20"></a>

Or the 80×15 button, for a site that already has a row of RSS and ATOM ones. Only the verdict fits; the numbers stay here.

agentmods 80×15 button for design-review

Your own site · 80×15
<a href="https://agentmods.dev/skills/dorayo/orchestrix-skills/design-review"><img src="https://agentmods.dev/badge/skills/dorayo/orchestrix-skills/design-review.svg" alt="Reviewed on agentmods" width="80" height="20"></a>
Per session 35 Skills are progressive disclosure: only the name and description are preloaded; the body loads when the skill is used.
When invoked 2,984 The whole file, excluding the scripts and references it only reads on demand.
Security scan A 0 findings. A grade says what 26 rules found in the file — not that it is safe.
Origin original No closer match found in the catalogue.
Token cost

What it costs to keep this loaded

Counted locally with the o200k_base tokenizer, which is exact for GPT models; Claude uses its own tokenizer and its counts differ. Treat this as one consistent yardstick across the catalogue rather than a bill. Prices are per million input tokens.

ModelPer sessionOnce invoked
Fable 5.1 $0.00035 $0.02984
Opus 5 $0.00017 $0.01492
Sonnet 5 $0.00007 $0.00597
Haiku 4.5 $0.00003 $0.00298

Measured 7d ago against content hash 2eb313fe9277, method: parsed. Prices are Anthropic first-party input rates as of 2026-09-11, from the pricing page.

Security

Grade A, and why

design-review scanned grade A with 0 findings against 26 rules in 11 categories — prompt injection, anti-refusal, data exfiltration, privilege escalation, supply chain, agent snooping, system-prompt leakage, SSRF and excessive agency — measured 7d ago.

A static scan of the body, not an audit. Every finding is printed with the line that produced it so you can judge whether it matters here. A mod is markdown that instructs an agent; that is exactly why what it instructs is worth reading.

Nothing flagged

None of the 26 patterns this scan looks for appear in this file: no shell pipes, no recursive deletes, no credential paths, no hidden text, no instruction-override or anti-refusal phrasing, no agent-config snooping. That is not a guarantee, it is the absence of the things that are checkable.

skills/design-review/SKILL.md · 235 lines

How it starts

The opening of the file, as written. The whole thing — 235 lines — stays where its author put it; the contents beside it link to each section on GitHub.

Design Review

Review a built UI with a senior designer's eye. The visual counterpart of review-code: three verdicts, in order — does it match the spec, does it actually render correctly, and is it world-class.

Core principle: You cannot review design from source. Render it and look at the pixels. A claim about how it looks, without a screenshot, is a guess — the visual equivalent of claiming tests pass without running them.

The Iron Law

UNRENDERED IS NOT PASSED. Every check ends in exactly one of:
pass (with evidence) | fail (with evidence) | untested (with the reason)

A review run without a browser is a partial review, and says so. It is never a clean one.

Inputs

  • built_ui — the running app (a live URL, or a dev server this skill starts).
  • ui_specspecs/<slug>-ui.md it must satisfy, including its declared treatment (utility / product / editorial).
  • ui_artboards? — the artboards the human approved at the design-ui gate (specs/design/<slug>/). They are the visual bar for Verdict 3: a built screen that departs from its approved artboard in hierarchy, spacing, or treatment is a finding, at the same severity as a deviation from the system.
  • screenshots? — captures a prior smoke-test already took. Use them instead of relaunching the app for the same screen.
  • Read taste/design-system + taste/brand — the bar to calibrate against. Deviations from the system are higher severity, not lower.

How to render (do this before any verdict)

Prefer what already exists: if screenshots covers a screen, do not relaunch the app for it. When you must launch it yourself, follow the same protocol smoke-test uses — it is the same hazard.

  1. Discover how to run it. registry/app first; else the project's manifest (package.json scripts, Makefile, README). Genuinely unguessable → every render-dependent check is untested: cannot launch. Do not invent a server.
  2. Launch in the background, capture logs to .orchestrate/verify/design-review-server.log. Record the PID. Pick a free port if configurable, to avoid colliding with anything already running.
  3. Wait for readiness, bounded — poll the health endpoint / port / ready line for up to ~60s. Not ready → the checks are failed: app did not start, attach the server log, skip to cleanup.
  4. Render every screen and state in the spec (loading, empty, error too), in every mode under the system's theme.modes, with the best driver available:
    • Browser automation (a Playwright/Chrome MCP tool, if available in this session) — the only driver that can reach computed style, keyboard focus, a media-query override, or a viewport change.
    • Handed-in screenshots — enough for layout, hierarchy, contrast, and the greyscale check; not enough for focus, computed font, or media queries.
    • No driver at all — state it once, mark the dependent checks untested, and still deliver Verdict 1 and every judgment call the spec supports.
  5. Capture evidence per screen to .orchestrate/verify/design-review-<screen>-<mode>.png (or .log).
  6. ALWAYS clean up — kill only the processes you started, and remove temp state you created. Cleanup runs even when checks fail.

Read the full file on GitHub · 235 lines

Changes

What this file has done since we first saw it

Hashed on every crawl. A supply-chain change to an agent config is a question of when, not whether, so the history is kept rather than the latest state alone.

  1. 7d ago Changed · +5 lines 2eb313fe9277
  2. 11d ago First seen · 230 lines · 35 tokens per session scan A 29ac12418acd

Subscribe to this mod's changes

design-review is a skill published in the GitHub repository dorayo/orchestrix-skills (2 stars, last pushed 9d ago), licensed MIT. It adds 35 tokens to every session and 2,984 once invoked, about $0.0002 per session on Opus 5. A static security scan graded it A with 0 findings. No closer match exists in the catalogue, so it is treated as the original; first seen 2026-08-31.

Related

Other skills, from other repositories

webgl-holographic-foil

A self-contained WebGL2 hero: thin-film interference over a crushed-foil surface whose palette shifts with the viewing angle; move the cursor to tilt the film.

nexu-io/open-design · 41 tokens

html-ppt-hermes-cyber-terminal

OpenDesign + BYOK: choosing and wiring your own model, hands-on — cost, quality, and the routing decision. Built as a decision-grade AI literacy deck for engineers, IT, applied-AI teams.

nexu-io/open-design · 53 tokens

html-ppt-taste-brutalist

16:9 HTML deck in tactical-telemetry / CRT-terminal taste. Deactivated-CRT charcoal slides, white-phosphor monospace, hazard-red accent, scanline overlay, ASCII syntax, density over decoration. Distilled from Leonxlnx/taste-skill brutalist-skill (Tactical Telemetry mode).

nexu-io/open-design · 78 tokens

visual-ralph

Visual Ralph orchestration for frontend UI from generated references, static references, or live URL targets, using $ultragoal with built-in visual verdict and pixel-diff evidence until the implementation matches and leaves a reproducible design system.

Yeachan-Heo/oh-my-codex · 52 tokens

accessibility

Consolidated accessibility skill entrypoint for WCAG 2.2, ARIA Authoring Practices, cognitive accessibility, Section 508, EN 301 549, design intent verification, and the Accessibility Planner workflow.

microsoft/hve-core · 47 tokens

make-resume

A Chinese-language tool for creating editable HTML resumes that can be changed in a browser and printed to PDF. It uses available resume templates when they are installed and otherwise provides a simpler fallback.

Hisn00w/ASu-skills · 86 tokens