skills.rest
ethereum
ethereumOFFICIAL
Explore all skills by this author →
WebsiteGitHub

review-page

Runs adversarial copy and design-system review loops against built ethereum.org pages until clean.

6.0k|5.4k|Updated Jan 6, 2018
Search Tags:#playwright#Figma#QA automation#Design system#page review#copy review#ethereum.org
One-click install
npx skills add https://github.com/ethereum/ethereum-org-website --skill review-page
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: review-page
Source: https://github.com/ethereum/ethereum-org-website/tree/main/.claude/skills/review-page
Command: npx skills add https://github.com/ethereum/ethereum-org-website --skill review-page

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Built web pages often drift from their Figma designs and copy specs, and manual QA misses subtle mismatches in wording, spacing, and component usage. This Skill automates an adversarial review loop that catches those drifts and re-verifies fixes until the page passes clean.

Core Features & Use Cases

  • Adversarial subagent reviewers: Spawns parallel copy and design-system reviewer subagents that assume the page is wrong and hunt for proof, returning structured findings with severity levels.
  • Figma ground-truth comparison: Captures fresh Figma metadata, screenshots, and tokens alongside live-page Playwright screenshots so reviewers compare the rendered page against the actual design source.
  • Triage-fix-re-review loop: Orchestrates triage of findings, applies reuse-first fixes aligned with the design system, and re-runs reviewers until a round returns zero confirmed findings, capped at 3 rounds.
  • Use Case: After building a new ethereum.org page with /new-page, run /review-page to automatically catch a stale button label, a hand-built heading that should use a design-system primitive, and an arbitrary margin value — then fix and re-verify them.

Quick Start

Run /review-page against my newly built page at /roadmap using the Figma frame I linked, and keep fixing and re-reviewing until both reviewers come back clean.

Frequently Asked Questions about review-page

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I review a built page against its Figma design?▼

Invoke /review-page with the page route and a Figma link. The skill captures fresh Figma screenshots and tokens plus live-page Playwright screenshots, then spawns adversarial copy and design-system reviewers that report structured findings for triage and fixing.

How does the adversarial review loop work?▼

Two subagent reviewers assume the page is wrong and hunt for proof, returning findings as JSON with location, claim, evidence, fix, and severity. The orchestrator triages findings, applies fixes, and re-runs the reviewers until a fresh round returns zero confirmed findings, capped at 3 rounds.

What does the design-system reviewer check on a page?▼

It checks for reinvented primitives, hand-built headings instead of semantic h1-h6, arbitrary spacing values, raw hex or rgb colors instead of semantic tokens, custom CSS overriding primitive-owned properties, and non-logical direction utilities like ml- instead of ms-.

Can I run the page review without a Figma design source?▼

A written spec supports the copy reviewer but not pixel-level design checks. With no source at all, the copy reviewer has nothing to sync against, so the skill asks you to confirm a design-system-only pass before proceeding.

What happens if the review loop never comes back clean?▼

The loop stops after 3 rounds and hands the remaining stubborn findings to the user. A finding that survives three fix attempts usually needs a human design decision rather than another automated pass.

Related Skills

Explore More Software Engineering Skills→
bitovibitovi
24

generate-behavior-questions

Generate frame-specific clarifying questions from Jira, Figma, Confluence, and Google Docs.

Official
Advanced
mathiasbourgoinmathiasbourgoin
2

git-conventions

Standardize git commit messages, branch names, and pull request descriptions.

Community
Intermediate
lucabattistinilucabattistini

design-system

Generate a design token specification document from spacing, typography, and color primitives.

Community
Advanced
BruceTyndallBruceTyndall

visual-regression-checker

Capture and compare web application screenshots against a baseline to detect visual drift.

Community
Intermediate