# UI Mockups & Wireframes: {{titleCase FEATURE_NAME}}

| Field | Value |
|-------|-------|
| **Feature** | {{FEATURE_NAME}} |
| **Created** | {{DATE}} |

---

## Screen Inventory

| Screen ID | Name | Route | Priority |
|-----------|------|-------|----------|
| **S001** | {Screen Name} | /path | High |
| **S002** | {Screen Name} | /path | Medium |

---

## S001: {Primary Screen}

### Desktop Layout

```
┌─────────────────────────────────────┐
│  Header                    [User ▼] │
├─────────────────────────────────────┤
│                                     │
│  [Title]                            │
│                                     │
│  ┌──────────────────────────────┐  │
│  │ Main Content Area            │  │
│  │                              │  │
│  │  [Card 1]    [Card 2]        │  │
│  │                              │  │
│  │  ┌────────────────────────┐  │  │
│  │  │ Data Table             │  │  │
│  │  │ ...                    │  │  │
│  │  └────────────────────────┘  │  │
│  └──────────────────────────────┘  │
│                                     │
└─────────────────────────────────────┘
```

### Mobile Layout

```
┌──────────────────────┐
│ ☰  Title    [User ▼]│
├──────────────────────┤
│                      │
│ [Card 1]             │
│                      │
│ [Card 2]             │
│                      │
│ [View All Items]     │
│                      │
└──────────────────────┘
```

---

## States

### Loading
- Show skeleton placeholders
- Spinner for primary content

### Empty
- Icon + message
- Clear call-to-action button

### Error
- Warning icon
- User-friendly message
- Retry button

### Success (After Action)
- Toast notification
- Auto-dismiss after 3s

---

## Interactions

- **Hover**: Subtle elevation increase
- **Click**: Scale down (0.98)
- **Transitions**: Fade-in 200ms

---

## Accessibility
- [ ] 44x44px minimum touch targets
- [ ] Focus indicators visible
- [ ] Proper heading hierarchy (H1 → H2 → H3)

---

*Generated with MORPH Framework*