frontend-design-review

name	frontend-design-review
description	Review and create distinctive, production-grade frontend interfaces with high design quality and design system compliance. Evaluates using three pillars: frictionless insight-to-action, quality craft, and trustworthy building. USE FOR: PR reviews, design reviews, accessibility audits, design system compliance checks, creative frontend design, UI code review, component reviews, responsive design checks, theme testing, and creating memorable UI. DO NOT USE FOR: Backend API reviews, database schema reviews, infrastructure or DevOps work, pure business logic without UI, or non-frontend code.
acknowledgments	Design review principles and quality pillar framework created by @Quirinevwm (https://github.com/Quirinevwm). Creative frontend guidance inspired by Anthropic's frontend-design skill. Source — Microsoft Skills (https://github.com/microsoft/skills). Used under their published terms.

Frontend Design Review

Review UI implementations against design quality standards and your design system OR create distinctive, production-grade frontend interfaces from scratch.

Two Modes

Mode 1: Design Review

Evaluate existing UI for design system compliance, three quality pillars (Frictionless, Quality Craft, Trustworthy), accessibility, and code quality.

Mode 2: Creative Frontend Design

Create distinctive interfaces that avoid generic "AI slop" aesthetics, have clear conceptual direction, and execute with precision.

---

Creative Frontend Design

Before coding, commit to an aesthetic direction:

• Purpose: What problem does this solve? Who uses it?
• Tone: minimal, maximalist, retro-futuristic, organic, luxury, playful, editorial, brutalist, art deco, soft/pastel, industrial, etc.
• Constraints: Framework, performance, accessibility requirements
• Differentiation: What makes this distinctive and context-appropriate?

Aesthetics Guidelines

• Typography: Distinctive fonts that elevate aesthetics. Pair a display font with a refined body font. Avoid Inter, Roboto, Arial, Space Grotesk.
• Color & Theme: Cohesive palette with CSS variables. Dominant colors + sharp accents > timid, evenly-distributed palettes.
• Motion: CSS-only preferred. One well-orchestrated page load with staggered reveals > scattered micro-interactions.
• Spatial Composition: Asymmetry, overlap, diagonal flow, grid-breaking elements, generous negative space OR controlled density.
• Backgrounds: Gradient meshes, noise textures, geometric patterns, layered transparencies, dramatic shadows, grain overlays.

AVOID: Overused fonts, clichéd color schemes, predictable layouts, cookie-cutter design without context-specific character.

Match implementation complexity to vision. Maximalist = elaborate code. Minimalist = restraint and precision.

---

Design Review

Design System Workflow

Before implementing:

1. Review component in your component library for API and usage
2. Use design specs to get exact spacing, tokens, and properties
3. Implement using design system components + design tokens

During review:

1. Compare implementation to design spec
2. Verify design tokens are used (not hardcoded values)
3. Check all variants/states are implemented correctly
4. Flag deviations (needs design approval)

If component doesn't exist:

1. Check if existing component can be adapted
2. Document exception and rationale in code

Review Process

1. Identify user task
2. Check design system for matching patterns
3. Evaluate aesthetic direction
4. Identify scope (component, feature, or flow)
5. Evaluate each quality pillar
6. Score and prioritize issues (blocking/major/minor)
7. Provide recommendations with examples

Core Principles

• Task completion: Minimum clicks. Every screen answers "What can I do?" and "What happens next?"
• Action hierarchy: 1-2 primary actions per view. Progressive disclosure for secondary.
• Onboarding: Explain features on introduction. Smart defaults over configuration.
• Navigation: Clear entry/exit points. Back/cancel always available. Breadcrumbs for deep flows.

---

Quality Pillars

1. Frictionless Insight to Action

Evaluate: Task completable in ≤3 interactions? Primary action obvious and singular?

Red flags: Excessive clicks, multiple competing primary buttons, buried actions, dead ends.

2. Quality is Craft

Evaluate:

• Design system compliance: uses design tokens, not hardcoded values
• Aesthetic direction: distinctive typography, cohesive colors, intentional motion
• Accessibility: Grade C minimum (WCAG 2.1 A), Grade B ideal (WCAG 2.1 AA)

Red flags: Generic AI aesthetics, hardcoded hex values, missing focus indicators, broken reflow.

3. Trustworthy Building

Evaluate:

• AI transparency: disclaimer on AI-generated content
• Error transparency: actionable error messages with next steps

Red flags: Missing AI disclaimers, opaque errors without guidance, silent failures.

---

Review Output Format

## Design Review: [Component/Feature Name]

### Summary
- Score: [Blocking / Major Issues / Minor Only / Clean]
- Mode: [Review / Creative]

### Pillar 1: Frictionless Insight to Action
- ✅ / ❌ [Finding with specific line/component reference]

### Pillar 2: Quality Craft
- ✅ / ❌ [Finding]

### Pillar 3: Trustworthy Building
- ✅ / ❌ [Finding]

### Recommendations (prioritized)
1. [Blocking] ...
2. [Major] ...
3. [Minor] ...

Accessibility Quick Checks

// Required for interactive elements
<button aria-label="Close panel" onClick={onClose}>×</button>

// Required for images
<img src="..." alt="Descriptive text" />

// Required for form inputs
<label htmlFor="search">Search tickets</label>
<input id="search" type="text" />

// Keyboard navigation — ensure focus ring visible
:focus-visible { outline: 2px solid var(--vscode-focusBorder); }

// Reduced motion
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 0.01ms !important; }
}