This skill guides creation of distinctive, production-grade frontend interfaces. It provides structured SOPs, design systems, and comprehensive guidelines to produce premium results - not generic "AI slop." 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.

Design Process SOP: Define -> Build -> Review -> Refine

Follow this structured process for any non-trivial frontend project. This mirrors how real product design teams work and produces dramatically better results than jumping straight to code.

Phase 1: Define

Before writing any code, establish clear context and direction.

1. Project Brief - Understand the fundamentals:

What are we building? (landing page, dashboard, SaaS app, portfolio)
Who is the target audience? (developers, executives, consumers, creators)
What is the primary goal? (conversions, engagement, information, trust)
What are the technical constraints? (framework, performance, accessibility)
What is the brand personality? (luxury, playful, technical, organic)

frontend-design

Design Process SOP: Define -> Build -> Review -> Refine

Phase 1: Define