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.