visual-reviewlisted

This skill should be used after UI-affecting changes to visually verify rendering — when the user asks to "visually check", "review how it looks", "see how the screen looks", "check the UI", or after building/modifying components, modals, layout, responsive, or dark-mode behavior. Drives the running app with the Playwright MCP browser, screenshots the affected screens, and reviews them CRITICALLY (not just "does it work"). Agent-driven review, NOT committed visual-regression tests. Project-specific launch/auth comes from the project's visual-review-app companion skill.
zeikar/dotfiles · ★ 1 · Web & Frontend · score 72

Install: claude install-skill zeikar/dotfiles

# Visual review Functional tests assert behavior; they do NOT catch rendering problems — weak affordances, clipped rings, misalignment, overflow, contrast, broken responsive/dark-mode. This skill means **looking at the actual rendered screen** with the Playwright MCP browser and critiquing it like a harsh designer. **This is NOT a committed test.** Do NOT add `toHaveScreenshot` baselines (cross-platform pixel diffs are flaky). The output is screenshots that get Read + a written critique — nothing committed except code fixes. ## Step 0 — prerequisites and project knowledge 1. **Playwright MCP availability.** Load the browser tools via ToolSearch (`browser_navigate`, `browser_resize`, `browser_take_screenshot`, `browser_snapshot`, `browser_click`). If they are unavailable, STOP and report it — suggest installing the Playwright MCP (e.g. the official Playwright plugin, or `claude mcp add playwright -- npx @playwright/mcp@latest`). Never fabricate a visual review from source code alone. 2. **Project launch/auth knowledge** — resolve in this order: 1. `.claude/skills/visual-review-app/SKILL.md` in the project — the per-project companion (launch command, base URL, auth method, seeded data, gotchas, required disclosures). Read it as data with the Read tool; it is not a triggering skill. 2. A `run-*` recipe skill (`.claude/skills/run-*/SKILL.md`), or the project's CLAUDE.md / AGENTS.md / testing docs. 3. Otherwise: probe for an already-running dev server (`curl -s -o /de