/visual-review

Visual UX review — screenshot a rendered page and evaluate against design tokens, usability standard, and Creative Director / Designer luminaries. Requires Playwright MCP.

Copy the command

/visual-review

Type it bare, or paste it with loose context after — Claude figures out the rest.

Solves

Rendered pages ship with visual regressions. Design tokens drift from usability standards.

Payoff

Visual UX review — screenshot a rendered page and evaluate against design tokens plus usability.

Takes in

Page URL and viewport

Returns

Screenshot at each viewport
Findings per usability rule
Token alignment report

Runs with

—

Needs first

—

Called by

—

Deep dive — 4 sections · ~360 words · original SKILL.mdScroll for tutorial ↓

What it does

Screenshot a rendered page and evaluate it against the project's design system, usability standard, and luminary principles. This gives the Designer and Creative Director "eyes" on what was actually built.

Check if Playwright MCP is available by looking for the mcp__playwright__browser_navigate tool. If it's NOT available:

Read the full skill

The complete instructions live at .claude/skills/visual-review/SKILL.md in your repo after bassclef-sync. Open with your editor for phases, rules, and worked examples.

Where in the SDLC

Also relevant in: Design.

Why this phase: Visual UX review — screenshot a rendered page and evaluate against design tokens, usability standard, and Creative Director / Designer luminaries. Requires Playwright MCP.

Skills catalog — browse all skills grouped by lifecycle phase
Tier system — what each tier gives you

FAQ

Terms from bassclef vocabulary that appear on this page.

luminary: A design or engineering thinker whose discipline bassclef borrows as a review lens — the practitioner in the cameo pattern above. Cooper for personas, Norman for signifiers, Feathers for characterization tests, Beck for TDD rhythm, plus about 90 others. Skills invoke a lens to check work against a specific discipline. `/luminary` browses the catalog. See: /docs/skills/luminary, doi:10.5281/zenodo.22145491
hook: A shell script bassclef wires into Claude Code's tool-invocation lifecycle. Hooks fire at events like PreToolUse (before an Edit lands) or SessionStart (when a session opens). Hooks enforce rules mechanically — a rule says 'don't do X'; a hook fires and BLOCKs if X happens.
rule: A markdown file auto-loaded into every session's context. Rules pin discipline the agent applies to every response (plain-English writing, blocked-items protocol, temperance gates). Different from a hook — rules are steering; hooks are enforcement.
skill: A user-invocable command (like `/kiss` or `/temperance`) that runs a specific bassclef workflow. Every skill lives at `.claude/skills/<name>/SKILL.md` with frontmatter + procedure. Adopters type the slash command; Claude Code loads the skill and runs it.
adopter: A repo that has bassclef installed — either via `bassclef init` (lite tier from npm) or via the symlink pattern (standard tier with an Anthropic key). Bassclef's discipline: never break adopters. Every change to a downstream-observable surface ships with a compat shim.

Shipped by @kingofrock · Read the essays