Frontend Design Review Agent Skill

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.