frontend-design

# Frontend Design Skill

This skill provides two distinct workflows for creating production-grade frontend interfaces:

## Scenario Detector

**Answer this question:** Is there an existing codebase with components, pages, or a design system?

### ✅ YES → Existing Codebase (Most Common)
**Use this workflow:** [EXISTING-CODEBASE-CHECKLIST.md](EXISTING-CODEBASE-CHECKLIST.md)

**Purpose:** Enforce design language consistency by analyzing existing patterns before implementation.

**When to use:**
- Adding components to existing project
- Creating new pages in existing app
- Modifying UI in established codebase
- Working with design system

**Process:** Mandatory 3-phase checklist (Design Analysis → Decisions → Implementation)

---

### ✅ NO → New Project (Greenfield)
**Use this workflow:** [NEW-PROJECT-DESIGN.md](NEW-PROJECT-DESIGN.md)

**Purpose:** Create bold, distinctive aesthetic design from scratch.

**When to use:**
- Starting new projects
- Building standalone components/pages
- No existing design system to match
- Full creative freedom

**Process:** Design thinking → Aesthetic principles → Implementation

---

## Quick Reference

**For consistency in existing codebases:**
→ [EXISTING-CODEBASE-CHECKLIST.md](EXISTING-CODEBASE-CHECKLIST.md)

**For aesthetic design philosophy:**
→ [NEW-PROJECT-DESIGN.md](NEW-PROJECT-DESIGN.md)

**For real-world examples:**
→ [EXAMPLES.md](EXAMPLES.md)

**For deep-dive principles:**
→ [REFERENCE.md](REFERENCE.md)

---

**Still unsure which scenario applies?** Default to **EXISTING-CODEBASE-CHECKLIST** if there's any existing code to reference.