reviewing-hi-fi

Reviews high-fidelity UI designs-as-code by re-rendering and vision-checking them against a fixed acceptance bar.

1|1|Updated May 24, 2026
One-click install
npx skills add https://github.com/bm629/agent-skills --skill reviewing-hi-fi-bm629
Or copy as Structured Prompt for Agent
Please help me install this Agent Skill.
Skill: reviewing-hi-fi
Source: https://github.com/bm629/agent-skills/tree/main/skills/reviewing-hi-fi
Command: npx skills add https://github.com/bm629/agent-skills --skill reviewing-hi-fi-bm629

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve? Reviewing a finished high-fidelity UI design is unreliable when reviewers trust handed-in screenshots or skim the code — stale images, broken renders, off-token values, and contrast failures slip through to the build phase. This Skill acts as an independent acceptance gate that re-renders the code itself and judges the fresh result against a fixed checklist. ## Core Features & Use Cases - Independent re-rendering: Renders the hi-fi code in a headless browser (agent-browser/Playwright), captures fresh screenshots per viewport and state, and vision-reviews them — never trusting supplied images. - Single-sourced 14-condition bar: Judges wireframe coverage, fidelity, polish heuristics, token-backed styling, content realism, rendered states, responsive reflow, numeric WCAG 2.2 AA on the render, and design-system conformance. - Machine-parseable verdict: Emits exactly one VERDICT: approve or VERDICT: revise line plus actionable findings (failed condition, location, concrete fix), including delta-scoped review for amended designs. - Use Case: Before approving a hi-fi Settings screen as a build seed, run this Skill to re-render it at 360/768/1280px, catch a broken mobile reflow, an off-token raw hex color, and a missing accessible name, then return a revise verdict with fixes. ## Quick Start Use reviewing-hi-fi to judge the finished hi-fi code in this directory against the wireframes and design-system, then give me the verdict and findings.

Frequently Asked Questions about reviewing-hi-fi

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

FAQPage Schema
How do I review a high-fidelity UI design written as code?

Re-render the code yourself in a headless browser, capture fresh screenshots per viewport and state, and vision-review the result against a fixed checklist covering coverage, fidelity, tokens, states, responsiveness, and WCAG. Never trust a handed-in screenshot, which can be stale or cherry-picked.

What accessibility checks should a UI design review include?

Run axe-core on the rendered page with no rules disabled, then judge on the render: text contrast at least 4.5:1, large text and UI at 3:1, visible and unobscured focus, 24px minimum targets, keyboard operability, and reduced-motion support per WCAG 2.2 AA.

Can this review run without a vision-capable AI model?

A text-only runtime produces a degraded review: it can read the code statically but cannot see the render, so the run must be explicitly flagged as degraded. The full gate requires a vision-capable model plus a headless browser such as Playwright.

When should a hi-fi design review not reject a design?

Do not revise for subjective taste outside the named heuristics, for the design-system's own quality, or for seed-only gaps like missing tests, mock data, or no real backend. A thin screen whose applicable conditions pass must be approved.

How is an amended hi-fi design reviewed differently?

An amendment triggers a delta-scoped review: examine only the diff and re-rendered changed screens, verify the change rippled to all consuming screens with no stale screenshots, and confirm the version bump and changelog match the change class.