2.1 KiB

Raw Blame History

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