UX Specification: {project_name}

Source: ux-spec.md

# UX Specification: {project_name}

> **Version:** 1
> **Status:** Draft
> **Last Updated:** {date}
> **Author:** Planning Team — UX Designer
> **Source:** `docs/prd.md`, `docs/personas.md`
> **Change Log:**
> - v1 ({date}): Initial version

## 1. Information Architecture
<!-- sniper:managed:information-architecture:start -->
<!-- Page hierarchy and navigation structure -->
<!-- sniper:managed:information-architecture:end -->

## 2. Screen Inventory
<!-- sniper:managed:screen-inventory:start -->
| Screen | Purpose | User Stories | Key Components |
|--------|---------|-------------|----------------|
| | | | |
<!-- sniper:managed:screen-inventory:end -->

## 3. User Flows

<!-- sniper:managed:user-flows:start -->
### 3.1 {Flow Name}
<!-- Step-by-step with decision points, error paths -->

Step 1: User does X → Success: Go to Step 2 → Error: Show error message, stay on current screen Step 2: ...

<!-- sniper:managed:user-flows:end -->

## 4. Component Hierarchy
<!-- sniper:managed:component-hierarchy:start -->
<!-- Reusable UI components and their variants -->

### 4.1 {Component Name}
- **States:** default, hover, active, disabled, loading, error
- **Props/Variants:**
- **Accessibility:**
<!-- sniper:managed:component-hierarchy:end -->

## 5. Interaction Patterns
<!-- sniper:managed:interaction-patterns:start -->
<!-- Loading states, transitions, empty states, error states -->

### Loading States
### Empty States
### Error States
### Confirmation Dialogs
<!-- sniper:managed:interaction-patterns:end -->

## 6. Responsive Strategy
<!-- sniper:managed:responsive:start -->
| Breakpoint | Width | Layout Changes |
|-----------|-------|---------------|
| Mobile | < 768px | |
| Tablet | 768-1024px | |
| Desktop | > 1024px | |
<!-- sniper:managed:responsive:end -->

## 7. Accessibility Requirements
<!-- sniper:managed:accessibility:start -->
- **WCAG Level:** AA
- **Keyboard Navigation:**
- **Screen Reader Support:**
- **Color Contrast:**
<!-- sniper:managed:accessibility:end -->