frontend-design_skill

Overview

This skill helps create distinctive, production-grade frontend interfaces with exceptional design quality. It focuses on deliberate aesthetic direction, polished implementation, and practical code that avoids generic AI-driven templates. Use it to produce memorable UI components, pages, and design-forward applications that are accessible and performant.

How this skill works

The skill guides a stepwise design process: clarify context (purpose, audience, constraints), choose a bold aesthetic direction, and implement working code tuned to that vision. It provides concrete patterns for typography, color systems, motion choreography, spatial composition, and atmospheric backgrounds, with examples in CSS and React. Deliverables are production-ready: responsive, accessible (WCAG AA), and optimized for performance.

When to use it

• Building new web components, landing pages, or full applications that need a unique visual identity
• When the client requests creative, non-generic design rather than template-based layouts
• Creating portfolio or marketing sites that must stand out and be memorable
• Design-forward product UIs where aesthetics and craft are core to user experience
• When you need production-quality code with accessibility and performance guarantees

Best practices

• Pick one clear aesthetic direction and commit—either bold maximalism or refined minimalism
• Choose distinctive display and complementary body fonts; avoid default system fonts
• Use CSS variables and a dominant-accent color strategy for cohesive theming
• Prioritize a few well-choreographed motion moments over many trivial micro-interactions
• Match implementation complexity to the vision: elaborate code for maximalist designs, restraint for minimalism
• Ensure responsive layouts, lazy-loaded assets, semantic HTML, and WCAG AA accessibility

Example use cases

• A hero section with atmospheric layered gradients, staggered reveal animation, and a memorable display font
• A marketing landing page that breaks the grid with diagonal sections, overlapping elements, and a bespoke color system
• A refined dashboard UI with precise typography, subtle shadows, and performance-optimized components
• A playful product microsite using custom cursors, tactile neomorphic controls, and bold color accents
• A portfolio site demonstrating multiple distinct themes (dark first, editorial, retro-futuristic) without repeating design choices