# UX Spec: [Project Name]

## Overview
[Brief summary of the product and primary user goal]

---

## Information Architecture

### Navigation Structure

### Key User Paths
1. **[Path Name]:** [Start] → [Step] → [Step] → [End]
2. **[Path Name]:** [Start] → [Step] → [End]

---

## User Flows

### Flow 1: [Flow Name]
**Trigger:** [What initiates this flow]
**User goal:** [What they're trying to accomplish]

**Steps:**
1. User [action]
2. System [response]
3. User [action]
4. System [response]
5. User reaches [end state]

**Error paths:**
- If [condition]: [what happens]
- If [condition]: [what happens]

### Flow 2: [Flow Name]
[Same structure]

---

## Screens

### Screen: [Screen Name]
**URL/Route:** `/path`
**Purpose:** [What the user accomplishes here]
**Entry points:** [How users get here]

#### Layout

#### Components
| Component | Description | Behavior |
|-----------|-------------|----------|
| [Name] | [What it displays] | [How it behaves] |
| [Name] | [What it displays] | [How it behaves] |

#### States
| State | Appearance | Trigger |
|-------|------------|---------|
| Default | [Description] | Initial load |
| Loading | [Description] | Data fetching |
| Empty | [Description] | No data exists |
| Error | [Description] | Request failed |
| Success | [Description] | Action completed |

#### Actions
| Action | Trigger | Result |
|--------|---------|--------|
| [Action] | [Click/tap/etc.] | [What happens] |
| [Action] | [Trigger] | [Result] |

### Screen: [Screen Name]
[Same structure]

---

## Components

### Component: [Component Name]
**Used in:** [List of screens]
**Purpose:** [What it does]

#### Props/Inputs
| Prop | Type | Description |
|------|------|-------------|
| [name] | [type] | [what it controls] |

#### Variants
- **[Variant 1]:** [Description]
- **[Variant 2]:** [Description]

#### States
- Default: [Description]
- Hover: [Description]
- Active: [Description]
- Disabled: [Description]

### Component: [Component Name]
[Same structure]

---

## Interactions

### Interaction: [Name]
**Trigger:** [User action]
**Response:** [System behavior]
**Duration:** [Instant / 200ms / async]
**Feedback:** [What user sees/feels]

### Interaction: [Name]
[Same structure]

---

## Responsive Behavior
**Breakpoints:**
- Mobile: < 768px
- Tablet: 768px - 1024px
- Desktop: > 1024px

**Key adaptations:**
- [Component/layout]: [How it changes]
- [Component/layout]: [How it changes]

---

## Design Notes
[Optional — any specific visual direction, references, or constraints]

- **Style:** [Minimal / Dense / Playful / etc.]
- **Reference:** [Any inspiration or similar products]
- **Constraints:** [Accessibility, brand, etc.]