71 lines
2.1 KiB
Markdown
71 lines
2.1 KiB
Markdown
# Recipe Manager — Visual Refresh Task Plan (Agentic Harness)
|
|
|
|
## Goal
|
|
Transform the site from plain white UI into a polished, appetizing product experience with consistent styling, imagery, and modern visual hierarchy.
|
|
|
|
## Task 1 — Design Tokens + Global Theme Foundation
|
|
**Scope**
|
|
- Establish color palette, typography scale, spacing/radius/shadow tokens
|
|
- Add global background treatment (subtle gradient/texture)
|
|
- Normalize button/input/card styles
|
|
- Ensure contrast/accessibility baseline
|
|
|
|
**Success Criteria**
|
|
- Theme variables centrally defined and used globally
|
|
- App no longer appears “flat white”
|
|
- Build/tests pass
|
|
|
|
---
|
|
|
|
## Task 2 — Homepage + Recipe List Visual Upgrade
|
|
**Scope**
|
|
- Add hero section with food imagery
|
|
- Improve recipe cards with thumbnails/placeholders, depth, and metadata chips
|
|
- Better empty/loading states with visuals
|
|
- Keep layout responsive
|
|
|
|
**Success Criteria**
|
|
- Homepage/list feels branded and visual
|
|
- Cards look rich and scannable on desktop/mobile
|
|
- Build/tests pass
|
|
|
|
---
|
|
|
|
## Task 3 — Recipe Detail + Import Flow Polish
|
|
**Scope**
|
|
- Visual hierarchy for recipe detail sections (ingredients, steps, tags)
|
|
- Add image block/header treatment
|
|
- Improve import screens with progress visuals and status indicators
|
|
|
|
**Success Criteria**
|
|
- Detail/import pages match refreshed style
|
|
- Clear phase/status UX
|
|
- Build/tests pass
|
|
|
|
---
|
|
|
|
## Task 4 — Micro-interactions + Motion + Iconography
|
|
**Scope**
|
|
- Add subtle transitions, hover/focus states, and motion consistency
|
|
- Introduce icon accents where useful (not noisy)
|
|
- Polish nav/header interactions
|
|
|
|
**Success Criteria**
|
|
- UI feels alive but not distracting
|
|
- Keyboard focus remains strong
|
|
- Build/tests pass
|
|
|
|
---
|
|
|
|
## Task 5 — Asset Strategy + Final QA Sweep
|
|
**Scope**
|
|
- Add/organize image assets and fallback strategy
|
|
- Verify no broken images/layout regressions
|
|
- Run full verification (`npm test`, app build/start command if available)
|
|
- Update docs with visual system notes
|
|
|
|
**Success Criteria**
|
|
- End-to-end visual refresh stable
|
|
- No obvious regressions
|
|
- Final commit + summary with before/after notes
|