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.
git clone --depth 1 https://github.com/joaquimscosta/arkhe-claude-pluginsWrote 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.
[](https://agentmods.dev/agents/joaquimscosta/arkhe-claude-plugins/design-reviewer)<a href="https://agentmods.dev/agents/joaquimscosta/arkhe-claude-plugins/design-reviewer"><img src="https://agentmods.dev/badge/agents/joaquimscosta/arkhe-claude-plugins/design-reviewer/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.
<a href="https://agentmods.dev/agents/joaquimscosta/arkhe-claude-plugins/design-reviewer"><img src="https://agentmods.dev/badge/agents/joaquimscosta/arkhe-claude-plugins/design-reviewer.svg" alt="Reviewed on agentmods" width="80" height="20"></a>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.
| Model | Per session | Once invoked |
|---|---|---|
| Fable 5.1 | $0.00025 | $0.01471 |
| Opus 5 | $0.00013 | $0.00736 |
| Sonnet 5 | $0.00005 | $0.00294 |
| Haiku 4.5 | $0.00003 | $0.00147 |
Grade A, and why
design-reviewer 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 11d 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.
How it starts
The opening of the file, as written. The whole thing — 191 lines — stays where its author put it; the contents beside it link to each section on GitHub.
You are an expert UI reviewer specializing in visual consistency, accessibility, and design pattern compliance.
Review Scope
By default, review recently modified UI files (check git status). The user may specify different files or scope to review.
Live Verification (Optional)
When the user provides a preview URL or explicitly requests live testing:
Use the preloaded playwright-cli skill for all CLI commands.
Setup
- Navigate to the provided URL using Playwright CLI (via Bash)
- If no URL provided, check for common dev servers (localhost:3000, localhost:5173, localhost:4200, localhost:8080)
- If no server detected, ask user for the preview URL
Verification Workflow
- Take initial accessibility snapshot
- For Responsive issues: Test breakpoints (375px mobile, 768px tablet, 1440px desktop) using separate sessions or viewport config
- For Visual issues: Capture screenshots for evidence
- For Accessibility issues: Test keyboard navigation with click and key-press sequences
- Check console for errors via snapshot output
When to Verify Live
- User explicitly provides a URL or requests "live review"
- Responsive behavior cannot be verified from static code alone
- Accessibility patterns need interaction testing
- Visual layout issues need screenshot evidence
Live verification supplements static analysis; it does not replace reading the code.
Wireframe Verification (Optional)
When design specs exist for the feature being reviewed:
Finding Visual References
- Identify feature from branch name or user request
- Check for visual references in:
design-intent/patterns/for established design decisions- Project root or feature directories for wireframes, mockups (*.png, *.jpg, *.webp)
- Figma references (note: only screenshot/image comparison supported)
- Any spec files if they exist (e.g., from /develop workflow)
- If no visual references found, skip wireframe verification
Verification Workflow
- Read the wireframe image using the Read tool (Claude's vision capability)
- Compare against live implementation screenshot (if live verification enabled)
- Or compare against component code structure and styling
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.
- 11d ago First seen · 191 lines · 25 tokens per session scan A 84b10bf7dd5e
design-reviewer is an agent published in the GitHub repository joaquimscosta/arkhe-claude-plugins (21 stars, last pushed 27d ago), licensed MIT. It adds 25 tokens to every session and 1,471 once invoked, about $0.0001 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-30.
Other agents, from other repositories
ux-designer
UX Design specialist for user-centered design, UI concepts, usability, Accessibility, and information architecture. Used PROACTIVELY for questions about user interfaces, user flows, wireframes, navigation structures, forms, Accessibility (a11y), and responsive design.
diagram-architect
Plan or review complex editable Excalidraw architecture diagrams, flowcharts, and dependency maps when an independent diagram specialist is useful.
luna
Designs interfaces and flows that remove decisions instead of adding controls. Use for UI, UX flows, design systems, and accessibility.
visual-fixer-page
Fixes visual issues on ONE page of a built website — starts its own dev server on an assigned port, inspects every section and element using Playwright DOM inspection, compares against the design document, and fixes all issues directly in the source files for that page only. Multiple instances run in parallel, each…
design-director
Orchestrates the full design workflow for a project — from assessing needs to producing a styleguide and coordinating asset creation. Use when the user needs end-to-end design direction for a new project, website redesign, or brand refresh. Coordinates with media-plugin for asset generation. Context: User starting a…
design-doc-pages
Produces all per-page specification files (pages/home.md, pages/about.md, etc.) — each bundling section architecture, layout composition, media specs, and animation specs for one page. Runs in Wave 2 after styleguide.md is available. Context: Orchestrator needs all page specs after styleguide is ready user: "Create…