elegant-design

# Designing Elegant Interfaces

## Philosophy

World-class design is intentional, accessible, and delightful. Every element serves a purpose, every interaction feels natural, and the experience adapts gracefully across contexts.

**Core Principles:**
- **Clarity over cleverness** - Users should never wonder what to do next
- **Consistency over novelty** - Patterns should repeat predictably
- **Performance over features** - Fast, smooth interactions trump visual complexity
- **Accessibility always** - Design for all users from the start
- **Progressive disclosure** - Reveal complexity only when needed
- **Intentional friction** - Make destructive actions harder, constructive actions effortless

## When to Use This Skill

Use this skill when:
- Building web applications with React/Next.js/similar frameworks
- Creating developer tools or technical interfaces
- Designing interfaces with chat, terminals, or code display
- Implementing real-time or streaming features
- Ensuring accessibility and responsive design
- Working with shadcn/ui, daisyUI, or HeroUI design systems

## Design Process Workflow

Follow this workflow for optimal results:

### 1. Discovery & Planning (15-30 min)

**Map User Experience:**
```bash
# Create flow diagrams with Graphviz
cat > user-flow.dot << 'EOF'
digraph UserFlow {
  Start -> "Observe State"
  "Observe State" -> "Orient Understanding"
  "Orient Understanding" -> "Decide Action"
  "Decide Action" -> "Act Execute"
  "Act Execute" -> "Observe State" [label="OODA loop"]
}
EOF

dot -Tpng user-flow.dot -o user-flow.png
```

**OODA Loop Mapping:**
For each major user goal, optimize the cycle:
1. **Observe** - What information does the user need?
2. **Orient** - How do they make sense of it?
3. **Decide** - What choices are available?
4. **Act** - How do they execute?

**Document States:**
- Entry points (how users arrive)
- Core loops (repeated actions)
- Success states (goals achieved)
- Failure states (errors, recovery paths)
- Edge cases (emp