frontend-design

Frontend design with Tailwind and React starts by defining an aesthetic direction (Brutalist, Luxury, Minimalist, etc.), then applying design tokens for typography, color, spacing, and motion. This Skill provides framework-specific patterns and implementation guidance to build production-grade interfaces that avoid generic styling.

High-quality frontend design requires consistent typography rules, color systems, motion guidelines, spacing tokens, and accessibility requirements applied across your framework. This Skill documents implementation patterns for Tailwind, React, Vue, and Rails/Hotwire to maintain design coherence and meet production standards.

Yes. Frontend design principles apply across Vue and Rails/Hotwire ecosystems through framework-specific guidance. This Skill covers implementation patterns, component structure, and design token application tailored to each framework's conventions and constraints.

Avoiding generic frontends means applying strong design direction through deliberate aesthetic choices, established typography hierarchies, purposeful color palettes, and intentional motion. This Skill provides design thinking frameworks and concrete implementation patterns to build distinctive, intentional interfaces.

Frontend design accessibility includes color contrast, motion constraints, typography legibility, spacing clarity, and keyboard navigation. This Skill integrates accessibility requirements into design tokens and implementation patterns for Tailwind, React, Vue, and Rails/Hotwire.

You need working knowledge of your framework (Tailwind, React, Vue, or Rails/Hotwire), not formal design training. This Skill provides design tokens, implementation patterns, and aesthetic direction guidance so you can build high-quality frontends systematically.