| 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
(https://github.com/anthropics/skills/tree/main/skills/frontend-design). Licensed under respective 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, cliched 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:
- Review component in your Storybook / component library for API and usage
- Use Figma Dev Mode to get exact specs (spacing, tokens, properties)
- Implement using design system components + design tokens
During review:
- Compare implementation to Figma design
- Verify design tokens are used (not hardcoded values)
- Check all variants/states are implemented correctly
- Flag deviations (needs design approval)
If component doesn't exist:
- Check if existing component can be adapted
- Reach out to design for new component creation
- Document exception and rationale in code
Review Process
- Identify user task
- Check design system for matching patterns
- Evaluate aesthetic direction
- Identify scope (component, feature, or flow)
- Evaluate each pillar
- Score and prioritize issues (blocking/major/minor)
- Provide recommendations with design system 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: matches Figma specs, uses design tokens
- 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 values, implementation doesn't match Figma, broken reflow, missing focus indicators.
3. Trustworthy Building
Evaluate:
- AI transparency: disclaimer on AI-generated content
- Error transparency: actionable error messages
Red flags: Missing AI disclaimers, opaque errors without guidance.
Review Output Format
See references/review-output-format.md for the full review template.
Review Type Modifiers
See references/review-type-modifiers.md for context-specific review focus areas (PR, Creative, Design, Accessibility).
Quick Checklist
See references/quick-checklist.md for the pre-approval checklist covering design system compliance, aesthetic quality, frictionless, quality craft, and trustworthy pillars.
Pattern Examples
See references/pattern-examples.md for good/bad examples of creative frontend and design system review work.
Acknowledgments
Creative frontend principles inspired by Anthropic's frontend-design skill. Design review principles and quality pillar framework created by @Quirinevwm for systematic UI evaluation.
