Frontend Design Skill

When to use

• Building or redesigning UI components, pages, or layouts.
• The user asks for a high-quality visual result, not just functional UI.

Design thinking (before code)

1. Purpose: what problem does this UI solve, and for whom?
2. Tone: pick a bold aesthetic direction and commit (futuristic/glow, brutalist, editorial, etc.).
3. Constraints: performance, accessibility, framework/tooling limits.
4. Differentiation: what’s the single memorable element?

Project alignment

• This repo defaults to a futuristic/glow, portfolio-first aesthetic.

Aesthetic checklist

• Typography: pair a distinctive display font with a legible body font.
• Color: choose a cohesive palette and use CSS variables.
• Motion: use a few high-impact moments (load + hover), avoid noisy micro-effects.
• Layout: deliberate asymmetry, overlap, or negative space where appropriate.
• Visual texture: gradients, noise, glows, or subtle layers aligned with the theme.

Execution rules

• Implement working code (not mockups) with production-grade structure.
• Match complexity to the aesthetic vision (maximalist requires more structure).
• Prioritize accessibility and readability (contrast, focus states, keyboard flow).
• Use shadcn/ui primitives and Tailwind utilities where possible.
• Use shadcn MCP for component patterns and variants.

Anti-patterns

• Generic palettes, generic fonts, cookie-cutter layouts.
• Visual noise without a clear aesthetic direction.