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)

• Purpose: what problem does this UI solve, and for whom?

• Tone: pick a bold aesthetic direction and commit (futuristic/glow, brutalist, editorial, etc.).

• Constraints: performance, accessibility, framework/tooling limits.

• 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.