frontend-design

Start by committing to a clear aesthetic direction such as editorial, brutalist, or retro-futuristic, then implement it with distinctive font pairings, CSS variable color themes, and staggered animations. The skill produces working React components placed in app/components/.

Avoid overused fonts like Inter and Roboto, clichéd purple-gradient palettes, and predictable layouts. Instead choose characterful display fonts, dominant colors with sharp accents, asymmetric compositions, and contextual textures or grain overlays.

Yes, the skill targets the agent-native stack of React 18, Vite, TailwindCSS, and shadcn/ui. Custom styles go in component CSS or Tailwind classes, never inline styles, and fonts load via Google Fonts imports.

Prefer CSS transitions and keyframes for most effects, and use Framer Motion for complex animation sequences. One well-orchestrated page load with staggered reveals creates more impact than scattered micro-interactions.

Match implementation complexity to the aesthetic vision. Refined or minimal interfaces need restraint, precise spacing, and subtle typography rather than elaborate animations, so choose maximalism only when the concept demands it.