From supervibe
Use AFTER a UI mockup, prototype, desktop/mobile shell, browser extension view, or implemented screen exists TO review layout, visual hierarchy, responsiveness, accessibility basics, interaction states, copy fit, and design-system adherence before handoff or implementation.
npx claudepluginhub vtrka/supervibe --plugin supervibeThis skill is limited to using the following tools:
Review an existing UI artifact and produce a prioritized polish report. This
Mandates invoking relevant skills via tools before any response in coding sessions. Covers access, priorities, and adaptations for Claude Code, Copilot CLI, Gemini CLI.
Share bugs, ideas, or general feedback.
Review an existing UI artifact and produce a prioritized polish report. This skill is review-only: it identifies issues and concrete fixes, but it does not rewrite the UI unless the user explicitly asks for implementation after review.
Use after a UI mockup, prototype, desktop/mobile shell, browser extension view, or implemented screen exists and needs review before approval, handoff, or production claim. Do not use it to invent a visual direction from scratch; use the design or prototype flow first.
Follow docs/references/skill-expert-operating-standard.md: start from source of truth, preserve retrieval evidence, apply scope safety, use real producers with runtime receipts for durable delegated outputs, verify before completion claims, and keep confidence below gate when evidence is partial.
Read docs/references/design-expert-knowledge.md before review. Use the
Eight-Pass Expert Routine through Design Pass Triage as a completeness map
for the evidence that should exist. Classify relevant evidence as required | reuse | delegated | skipped | N/A with rationale. Existing approved design
systems normally make preference/product fit and visual-system evidence reuse;
candidate or needs_revision systems are review gaps, not prototype-ready sources.
Review should focus on local evidence, IA/user-flow, responsive/platform,
quality, and feedback/approval gaps. External references are supplemental; use
the internet only for current references or official platform evidence after
local data has been checked.
Artifact is a prototype with a runnable preview
-> Open or serve it, inspect declared mobile and desktop viewports, and cite screenshot/browser evidence.
Artifact is an implemented framework screen
-> Run the local UI, typecheck, lint, test, or screenshot command defined by the project.
Artifact targets desktop, extension, or mobile-native
-> Apply the matching platform viewport, density, input, and shell policy before judging layout.
Approved design system exists
-> Review token/component adherence and treat deviations as findings.
Design system is missing, candidate, or needs_revision
-> Mark design-system evidence as a gap instead of approving visual readiness.
Brief is legal, finance, health, government, security, or other regulated trust
-> Require domain evidence before accepting palette, copy, trust cues, or data-display defaults.
Evaluate these eight dimensions in order:
Use docs/references/design-expert-knowledge.md to make the review complete, not just visually tasteful. Cover or mark N/A with rationale: Accessibility, Touch & Interaction, Performance, Style Selection, Layout & Responsive, Typography & Color, Animation, Forms & Feedback, Navigation Patterns, and Charts & Data.
For Accessibility, verify keyboard, focus, labels, contrast, semantics, target size, and reduced motion. For Performance, verify image sizing, layout shift risk, font loading, main-thread cost, and list virtualization where relevant. For Charts & Data, verify chart fit, legends, tooltips, non-color-only encoding, scale behavior, and empty/error states.
Treat generic AI-generated aesthetics as a review failure, not a matter of personal taste. When a UI claims creative quality, verify these gates or mark them N/A with rationale:
For web-facing artifacts, include these checks in the review:
transition: all is forbidden; transitions list explicit properties.font-variant-numeric: tabular-nums or an
equivalent tabular-nums utility.scroll-margin-top when
applicable.translate="no" or equivalent
no-translate handling.min-w-0 or an equivalent min-width
reset.Intl.DateTimeFormat,
Intl.NumberFormat, or another locale-aware formatter.blocker: breaks core use, hides data, blocks interaction, or violates
accessibility in a way that prevents use.high: likely production-quality defect or repeated workflow friction.medium: visible polish issue with local impact.low: refinement that is useful but not required for handoff.UI_POLISH_REPORT
Artifact: <path or URL>
Viewports checked: <list>
Verification: <commands or manual inspection evidence>
Confidence: <N>/10
Findings:
- <severity> <file:line or selector> - <issue>
Fix: <smallest concrete change>
Approval readiness: <ready | blocked>
agents/_design/ui-polish-reviewer - specialist agent that usually owns this
review.supervibe:prototype - creates native HTML prototypes before this review.supervibe:design-intelligence - supplies retrieval-backed design evidence.supervibe:verification - required before claiming an artifact is ready.