frontend-design

Distinctive frontend designs require intentional aesthetic direction, elevated typography, and cohesive color themes. This Skill guides you through choosing a bold conceptual direction—like retro-futuristic or brutalist—and executing it with precision across React, Tailwind, CSS Modules, or styled-components to produce visually striking interfaces that stand out.

Yes. This Skill adapts to multiple styling approaches including Tailwind, CSS Modules, Sass, and styled-components, and works with component libraries like shadcn/ui, Radix, MUI, and Chakra UI. It generates production-grade code that respects your existing stack and design tokens.

Impactful motion and spatial composition use animations for delight and create memorable layouts with generous negative space or controlled density. This Skill generates complete, working code with animations and interactions that align with your design system and accessibility standards.

Design a landing page by defining a bold conceptual aesthetic, selecting distinctive typography and color pairings, then generating React code with animations and layouts using your preferred styling tool. This Skill automates production-grade frontend code that implements your design vision end to end.

No. This Skill handles design guidance—distinctive aesthetic direction, typography, color, and motion—so you focus on code generation. It works within existing codebases and greenfield projects, adapting to your component libraries and design tokens while producing accessible, styled code.