frontend-design

Design production-grade React interfaces by establishing a bold aesthetic direction, then translating it into code through deliberate typography, cohesive color theming, motion, and layout. This Skill guides you through conceptual design, component generation, and accessibility implementation to avoid generic UI outcomes.

Build branded UIs by defining a unique aesthetic direction and applying it consistently across typography, color palettes, micro-interactions, and layout. This approach ensures your landing pages or dashboards maintain brand identity while meeting production-grade code standards and accessibility requirements.

Yes. This Skill produces accessible, animated components and full interfaces in HTML/CSS/JS, React, or Vue. It handles bold aesthetic constraints, motion design, and accessibility from the start, so your components work across frameworks and meet production standards.

Translate design intent by establishing clear aesthetic principles—typography, color, motion, layout—upfront, then enforcing those principles through component code and design documentation. This Skill ensures consistency across pages and dashboards while maintaining production-grade quality.

Accessible animated interfaces require attention to motion preferences, contrast ratios, semantic HTML, and keyboard navigation alongside your aesthetic choices. This Skill integrates accessibility into design-intent consistency so animations and styling work for all users.

No. This Skill guides you through establishing aesthetic direction and generating production-grade code without requiring design software. It bridges conceptual design and code generation, so developers can deliver branded, distinctive interfaces independently.