frontend-design

Production-grade frontend interfaces combine typography, color systems, motion, and layout into a cohesive visual identity. This Skill generates accessible, responsive HTML/CSS/JS or React/Vue components with design guidelines that avoid generic aesthetics and establish distinctive branding across pages or applications.

Yes. This Skill produces working React and Vue components with built-in accessibility and responsive design. It applies cohesive typography scales, CSS variables for theming, and accessible contrast ratios to ensure components function across devices and meet WCAG standards.

Establish visual identity through a design system: define a typographic scale, color palette with accessible contrast, motion principles, and texture guidelines. This Skill generates components that implement these system rules consistently, ensuring cohesive branding across your entire interface.

Bold aesthetic direction prevents generic output. Provide context about your purpose, audience, and design constraints; the Skill generates distinctive interfaces with production-grade implementation, unique typography, and custom color systems rather than default templates.

Yes. This Skill specializes in responsive dashboard components with custom typographic systems and CSS variable-based theming. It delivers production-ready code that supports dynamic color palettes and maintains accessibility across different visual themes.