# Recipe Manager UI/UX Audit — Baseline Findings (Pre-Redesign)

_All findings are based on code and asset inspection of the existing main branch as of 2026-03-27._

---

## Key Page Coverage
- **Home / Recipe List**: `/` (RecipeListPage)
- **Recipe Detail**: `/recipe/:id` (RecipeDetailPage)
- **Add / Edit form**: `/recipe/new` and `/recipe/:id` (edit mode in RecipeDetailPage)
- **Import from URL**: `/import/url` (ImportUrlPage)
- **Cook Mode**: `/recipe/:id/cook` (CookModePage)
- **Not Found**: fallback route

---

## Issues & Opportunities — By Page

### 1. Home / Recipe List Page
- **Severity: HIGH**
  - No clear visual separation between recipe library and feature highlights sections (hierarchy muddled)
  - Search and filter tag UI lack sticky/top persistence for long lists (usability friction)
- **Severity: MEDIUM**
  - Tag color accessibility not enforced; tag backgrounds may contrast poorly with white text
  - "No recipes" empty state lacks illustration/invitation for mobile
- **Severity: LOW**
  - Visual spacing between cards is adequate, but elevation/shadow separation could be stronger
  - Edge-case: very large recipe titles can overflow

### 2. Recipe Detail Page
- **Severity: HIGH**
  - No image/hero area for recipes — makes page visually flat
  - Action buttons (Edit, Cook Mode, Delete) overwhelm above-the-fold space, all equally visually weighted
  - Tag badges: insufficient color contrast, risk of not being distinguishable
- **Severity: MEDIUM**
  - Stats grid (prep time/servings/cook time) sometimes missing if fields absent, leading to awkward negative space
- **Severity: LOW**
  - Additional Information section can be overlooked (visual hierarchy weak)

### 3. Add/Edit Recipe Form
- **Severity: HIGH**
  - Long single form, minimal grouping/hierarchy; no inline field validation or visual feedback on invalid states
  - No photo upload/preview capability
- **Severity: MEDIUM**
  - Lack of step-by-step clarity for ingredient vs instructions entry
- **Severity: LOW**
  - No help text/examples for field format (e.g. "1 cup flour")

### 4. Import from URL
- **Severity: MEDIUM**
  - Progress indicators use color only (AA contrast edge-cases possible, e.g. blue-on-white)
- **Severity: LOW**
  - Errors are shown contextually, but do not visually block/disable further input

### 5. Cook Mode
- **Severity: HIGH**
  - No sticky/fixed controls for moving between ingredients/steps (usability on mobile)
  - Progress bars for steps/ingredients provide good feedback but blending color could limit clarity for colorblind users
- **Severity: LOW**
  - Success/checkoff state lacks distinct visual reward (just celebratory emoji and card)

---

## Cross-cutting / General Issues
- **Accessibility:**
  - Some color choices insufficient for AA contrast in tag buttons/badges
  - Keyboard navigation generally present but focus rings partly overridden (potential risk)
- **Imagery:**
  - Strong reliance on fallback illustration — only 1 bundled hero image (`hero.png`) for all recipes
  - No per-recipe image or placeholder; flat visual identity

---

## Acceptance Checklist — Baseline
- [ ] Screenshots for all primary pages (desktop/mobile)
- [x] Placeholder README in `docs/visual-audit/before/` (documenting screenshot gap)
- [x] List of all key pages and views
- [x] Audit notes: all UX/UI issues prioritized and categorized by page
- [x] Accessibility/opportunity notes captured
- [x] General imagery and identity state described
- [x] This audit document committed for baseline comparison

_For later: Repeat all QA for new visual implementation, providing strict before/after comparisons for each line item._

---

_Last updated: 2026-03-27_