Design Critique Skill

Use this skill to validate every UI component before implementation.

🌌 The "Neural Flux" Design System

Color Palette (CSS Variables from index.css)

❌ NEVER hardcode hex values in JSX data arrays. Use CSS variables via style={{ '--project-color': color }} and reference in CSS as var(--project-color).

Typography

• Headers: Space Grotesk (--font-primary)
• Code/Data: JetBrains Mono (--font-mono)
• Fluid scaling: All sizes use clamp() — e.g., --text-4xl: clamp(2rem, 5vw, 3.5rem)

Visual Effects

Layouts

• Asymmetrical, overlapping, "Deconstructed" grids.
• Sections use min-height: 100vh with responsive padding.

🕵️ Evaluation Criteria

1. The "Wow Factor" Check

• Does this element do something when I hover over it?
• Does it entrance the user or just sit there?
• Is the animation curve "springy" (see motion_guide for configs)?
• Does it use data-cursor for custom cursor interaction?

2. Smoothness Check

• No layout shifts.
• Animations run at ≥55fps.
• Uses transform/opacity only (no top/left/width/height).

3. Cohesion Check

• Are we introducing a new color? STOP. Use existing CSS variables.
• Are we using a new font? STOP. Use --font-primary or --font-mono.
• Do new components follow the section header pattern? (section-number → section-title → section-subtitle)

🔄 Critique Workflow

1. Observe: Look at the proposed design/code.
2. Compare: Check against the 3 criteria above and actual CSS variables.
3. Refine: If it fails "Wow Factor", suggest a stronger interaction (e.g., "Add glow on hover using --neon-violet").