← ClaudeAtlas

ui-reviewerlisted

UI visual review skill. Uses a 4-layer review framework (code static audit → visual defect scan → aesthetic evaluation → AI-generated code typical issues), combined with browser preview verification, to systematically diagnose UI and output specific actionable fix suggestions. Triggers when user says "review UI", "check the page", "any UI issues", "review the interface", "check the styling", "UI has a bug". Also applies to diagnosing visual issues found after screenshots. Covers code static audit, design heuristics, Shadcn design system standards, and Dashboard-specific design knowledge.
korbinjoe/openteam · ★ 1 · Code & Development · score 77
Install: claude install-skill korbinjoe/openteam
## Review Process Overview ``` Code implementation → Layer 0: Code static audit → Fix code issues → Browser preview verification → Layer 1: Visual defect scan → Layer 2: Design aesthetic evaluation → Layer 3: AI-generated code typical issues → Iterative fixes → Multi-viewport verification (required before delivery) ``` ### Prerequisites 1. Complete Layer 0 code static audit (see below) 2. Use `mcp__playwright__browser_navigate` to open the page 3. Use `mcp__playwright__browser_snapshot` to get page snapshot 4. **Examine the page with a "find problems" mindset, not "go through the motions"** ### Knowledge Base Reference When design judgment basis is needed during review, read the `references/` directory: - `references/design-heuristics.md` — 10 core design heuristics + page layout best practices + component composition patterns + spacing/font-size quick reference - `references/shadcn-design-system.md` — Shadcn component mapping + Lucide icon specs + HSL color variables + typography/states/a11y specs - `references/dashboard-design.md` — Dashboard information architecture + layout patterns + data visualization selection + metric card design + anti-pattern checklist --- ## Layer 0: Code Static Audit > Execute before browser preview. Scan newly created or modified `.tsx` / `.ts` files via Grep/Read to catch code-level issues early. ### 1. Tailwind Arbitrary Va