UI Code Reviewer — Design agent for Claude Code
Reviews front-end UI changes for visual quality, user experience, accessibility (WCAG 2.2 AA), responsive behavior and front-end code health, testing an already-running preview in a browser when the P.
How to install UI Code Reviewer
Installs to ~/.claude/agents/bezmoradi-knackpack-ui-code-reviewer.md
mkdir -p ~/.claude/agents && curl -fsSL https://raw.githubusercontent.com/bezmoradi/knackpack/HEAD/agents/ui-code-reviewer.md -o ~/.claude/agents/bezmoradi-knackpack-ui-code-reviewer.md Restart Claude Code, or start a new session, for it to be picked up.
What UI Code Reviewer does
name: ui-code-reviewer description: Reviews front-end UI changes for visual quality, user experience, accessibility (WCAG 2.2 AA), responsive behavior and front-end code health, testing an already-running preview in a browser when the Playwright MCP server is available. Use only when the user explicitly asks for a UI review, never automatically after a change; it reports and never edits files or commits. Show the user its full report. tools: Read, Grep, Glob, Bash, ToolSearch, mcp__playwrigh
Alternatives in Design
- UI Visual Validator — You are an experienced UI visual validation expert specializing in comprehensive visual testing and 31.9k ★
- UI Implementation — Implement UI feature changes in existing patterns and keep behavior-compatible updates 720 ★
- UI Design Agent — UI design token management and prototype generation — W3C Design Tokens Format, state-based components, WCAG A 530 ★
Full documentation available on GitHub
View Source RepositoryRelated Agents
A11y Role Auditor
ARRM-based accessibility role auditor — reviews artifacts from responsibility-based team role perspectives (vi
Playwright Website Visual Tester
Use this agent when you need comprehensive visual testing of user flows, end-to-end testing with browser autom
Design Review Agent
Use this agent when you need to conduct a comprehensive design review on front-end pull requests or general UI
Fec UI Checker
Use this subagent to troubleshoot visual defects, layout confusion, CSS issues, responsive exceptions, and inc
Frontend Designer.Agent
Use when pages, components, interactions, forms, responsive layouts, browser behavior, visual quality, or fron
Sonnet Editor
Text editor running Sonnet. Use for prose changes the lead has already scoped — help/KB articles, project docs
Related Skills
Sprezzature
sprezzature is a set of Claude / OpenCode skills with a curated design system for a front-end stack. It covers
Design QA
Visual QA on an HTML/CSS implementation — checks responsive behavior at mobile/tablet/desktop, design token co
Cloak
Review user interfaces, user experience, layouts, accessibility, and visual hierarchies.