# Review Page > Adversarial review loop for a built ethereum.org page — spawns copy and design-system reviewer subagents against the Figma source, triages their findings, fixes, and re-reviews until a fresh round comes back clean. Invoke with /review-page. - Skill: `tuyv/review-page` (Agent Skill, multi-file: 4 files) - Install (CLI): `npx skillmds@latest add tuyv/review-page` - Raw SKILL.md: https://api.skillmd.com/api/skills/tuyv/review-page/raw - Safety review: pending - Works with: Claude Code, Claude.ai, OpenAI Codex - Category: Design & Media - Author: tuyv (https://skillmd.com/u/tuyv) - Updated: 2026-09-17 - Page: https://skillmd.com/skills/tuyv/review-page --- # Review Page Audit a built page by turning two **adversarial** reviewers loose on it, fixing what they find, and re-running them until a fresh round comes back **green**. Each reviewer is a subagent prompted to assume the page is *wrong* and hunt for proof — never to rubber-stamp it. You (the orchestrator) own the Figma pull, the triage, and the fixes; the reviewers only report. This is the QA half of building a page — pair it with `/new-page`, or run it standalone against any existing page. Work the steps in order. Each ends on a checkable condition — don't start the next until the current one is met. ## Step 0 — Ground truth You need two things before any review: 1. **The live page.** Start `pnpm dev`, load the route (locale-stripped for `en`: `//`), confirm **HTTP 200**. A 500 is a build/asset error — fix that first; there is nothing to audit on a broken page. 2. **The design source.** A Figma link/selection is the gold standard. A written spec serves the copy reviewer but not the pixel-level design checks. **No source at all → the copy reviewer has nothing to sync against; say so and confirm the user still wants a design-system-only pass.** **Done when:** the page serves 200 and the design source is known (or its absence is confirmed). ## Step 1 — Capture both sides The reviewers compare *the page as it renders* against *the design as it's specified*. Capture both once, to a scratch dir, and pass the paths to the subagents — don't make each reviewer re-pull Figma (reads drift between pulls, and it burns rate limits). - **Design.** Read the Figma **fresh** — never a read from an earlier turn: `get_metadata` for the frame tree, `get_screenshot` per region, `get_design_context` for the text, `get_variable_defs` for tokens. Save the region screenshots; keep the text/token dump. - **Live page.** Full-page screenshot with `playwright-cli`, plus per-section shots for a long page. Save them beside the design shots. **Done when:** design and live-page artifacts are saved and their paths are known. ## Step 2 — Spawn the adversarial reviewers Read both briefs in `reviewers/` and spawn **one subagent per brief, in parallel** — a single message with two `Agent` calls. Give each subagent its brief verbatim, the route, and the artifact paths from Step 1. Each returns a structured findings list — `{location, claim, evidence, fix, severity}` — and nothing else. **Reviewers report; they never edit** (two agents editing in parallel would collide). - `reviewers/copy.md` — every string on the page matches the Figma/source copy. - `reviewers/design-system.md` — components, spacing, heading sizes, and colors are the design system's, with no custom CSS bolted onto primitives. **Done when:** both subagents have returned their findings lists. ## Step 3 — Triage Adversarial reviewers over-report by design. **You** judge each finding before touching code — keep the real ones, drop the noise. Two calls need judgment: - **Intentional copy divergence.** A string differs because the *design is stale*, or because it's a templated/localized value — not a copy bug. Confirm against the source, not the reviewer's assumption. - **Justified custom CSS.** Custom CSS *chasing pixel parity* on a primitive is a finding; custom CSS the design *genuinely requires* (a one-off the system can't express) is acceptable per "match, don't mimic." Don't strip styling the design needs. Show the user the **confirmed** findings as a table — `Region · Finding · Fix · Severity` — and flag anything ambiguous for their call. This is their window into what the reviewers saw. **Done when:** every finding is confirmed or dropped, and the confirmed table has been shown to the user. ## Step 4 — Fix Apply the confirmed findings yourself, reuse-first — a variant, not custom CSS; the right primitive, not a re-invention. Load the `design-system` skill if you haven't, for the component and token calls. **Done when:** every confirmed finding is fixed in the working tree. ## Step 5 — Re-review until green Re-capture the **live page** (it changed; the Figma side didn't — reuse Step 1's design artifacts) and re-spawn the same reviewers. The loop is **green** when a fresh adversarial round returns **zero** confirmed findings. Until then: triage → fix → re-review. Cap it: if the loop isn't green after **3 rounds**, stop and hand the user the stubborn findings — a finding that survives three fixes usually needs a human design call, not another pass. **Done when:** a fresh round is green, or the 3-round cap is hit and the remaining findings are handed off.