From frontend-skills
Browser-based frontend review for changed UI. Invoke via /visual-review or auto-runs on UI diffs to inspect screenshots, states, accessibility, console errors, and cross-browser/mobile regressions.
How this skill is triggered — by the user, by Claude, or both
Slash command
/frontend-skills:visual-reviewThe summary Claude sees in its skill listing — used to decide when to auto-load this skill
Browser QA for changed UI. Hooks catch static smells; this catches composed UI bugs that need seeing + interaction. See [REFERENCE.md](REFERENCE.md) for environment fingerprint, platform risk map, ecosystem wiring.
Browser QA for changed UI. Hooks catch static smells; this catches composed UI bugs that need seeing + interaction. See REFERENCE.md for environment fingerprint, platform risk map, ecosystem wiring.
Standalone trigger OK: /visual-review. Also run before /commit-push-pr when diff touches rendered UI: *.tsx, *.jsx, *.css, *.scss, *.html; src/routes/, src/pages/, src/app/, src/components/, components/ui/; Tailwind/theme/config files that affect visuals. Skip only docs-only, test-only, type-only, backend-only, or explicit skip reason.
Accept route/component hints. If omitted: inspect git diff --name-only HEAD; map route files to URLs when obvious; map component edits to nearest affected route/story/test; if route cannot be inferred, ask one concise question.
Minimum:
Prefer when feasible:
Use project scripts first: scripts/skills-browser.sh, Playwright, bun run dev. Never ask user to verify visual UI manually when tools can.
100vh, virtual keyboard, scrollbars, writing mode.aria-label not used on static/generic elements and not hiding visible text.aria-disabled behaviour clear and keyboard-safe.requestSubmit()-style paths.scrollIntoView, overscroll, and scrollbar-gutter side effects.HTML first. User agents vary. State beats happy path. Motion is interaction. Content stress wins. Accessibility automation is partial. Performance is visual. If seen twice, automate.
Return concise report:
## Visual review
Status: ready | needs fixes | blocked
Changed UI: <routes/components>
Checked: <browser/viewport/state list>
Findings: | Severity | Area | Finding | Evidence | Fix |
Screenshots: | View | Browser | Path | Notes |
PR notes: <rows usable in /commit-push-pr screenshot table>
Automation candidates: <repeatable misses worth hook/eval/docs>
Severity: P0 blocks use/security/data loss. P1 fix before PR. P2 fix if low-risk else note. P3 advisory.
P0/P1 fixed or user accepted. Screenshot evidence captured for visual changes when app runnable. Skip reasons recorded for unrun matrix items. Recurring deterministic issue suggested as hook/eval follow-up.
npx claudepluginhub redpanda-data/ui-harness --plugin frontend-skillsValidates UI modifications through systematic visual analysis, detecting pixel-level differences, design system compliance issues, and accessibility violations.
Use when a backpressured loop has a front-end/UI change and needs to compare the rendered result against its design reference (a Figma frame or images on a Linear ticket) — catching layout, spacing, contrast, and visual-consistency defects automated tests and happy-path clicking miss.
Conducts 7-phase frontend design review with WCAG 2.1 AA accessibility checks, responsive testing, visual polish for PR reviews, UI audits, layout issues.