frontend-design

Distinctive frontend design requires moving beyond default patterns by applying bold aesthetic choices in typography, color, motion, and spatial composition. This skill guides you through selecting a memorable visual direction and implementing it in production-grade HTML, CSS, and JavaScript or frameworks like React and Vue, ensuring your interface stands out while meeting functional requirements.

Yes. This skill creates functional, high-quality component code in React, Vue, HTML, CSS, and JavaScript that embodies your chosen aesthetic direction. It balances distinctive design choices with production requirements including accessibility, performance, responsive behavior, and design-system cohesion.

Anti-generic directives guide you away from tired, repetitive design patterns by encouraging bold, unexpected creative choices. The skill helps you articulate a clear aesthetic vision—whether brutalist, minimalist, or other directions—and implements it consistently across components and pages.

Supply context about your project: its purpose, target audience, technical constraints, and the visual direction you want (e.g., brutalist, raw, experimental). The skill then generates complete, accessible, performant code in your preferred framework that satisfies both functional and design requirements.

This skill scales from single components to full pages and entire applications. It applies consistent aesthetic principles and design-system integration across your scope, whether you're building a hero section, landing page, or complete product interface.

The skill generates code that embodies bold aesthetic directions while maintaining design-system cohesion. This ensures your distinctive visual choices integrate seamlessly with existing component libraries, tokens, and patterns across your application.