frontend-design

This skill guides creation of distinctive, production-grade frontend interfaces that avoid generic "AI slop" aesthetics. Implement real working code with exceptional attention to aesthetic details and creative choices.

The user provides frontend requirements: a component, page, application, or interface to build. They may include context about the purpose, audience, or technical constraints.

Input Types & Workflows

When User Provides Screenshot/Image/Design Reference

MANDATORY workflow for screenshot/image/design inputs:

1. Extract Design Guidelines using ./references/design-extraction-overview.md:
   • Analyze screenshot/image with ai-multimodal skill
   • Extract: colors (hex codes), typography (fonts, sizes, weights), spacing scale, layout patterns, visual hierarchy
   • Document findings in project docs/design-guidelines/extracted-design.md
   • See ./references/extraction-prompts.md for comprehensive analysis prompts