frontend-design

Production-grade frontend interfaces combine working code (HTML/CSS/JS or framework components) with intentional design direction—bold typography, cohesive color palettes, motion, and spatial hierarchy. Provide your requirements, context, and constraints; this Skill delivers both the code and documented design decisions that enforce aesthetic direction while meeting accessibility and performance standards.

Yes. This Skill generates production-ready components and pages in HTML/CSS/JS, React, Vue, or other frameworks based on your requirements. It adapts the design and code output to your chosen tech stack while maintaining bold aesthetics and design quality across all formats.

Design coverage includes typography, color systems, motion and transitions, spatial layout, and visual hierarchy. Each deliverable includes detailed design guidelines explaining key decisions so you understand the rationale behind aesthetics and can apply them consistently across your application.

State accessibility and performance constraints in your requirements. This Skill integrates both into the code and design process, delivering interfaces that are visually bold and production-ready while adhering to accessibility standards and optimized performance metrics.

Provide requirements, purpose, target audience, framework preference, and any constraints (accessibility, performance, visual direction). The more context you give—brand guidelines, layout preferences, or component needs—the more tailored and distinctive the output design becomes.