---
# vibed-vytp
title: Bit by Bit — pixel-art habit tracker (single-file HTML app)
status: completed
type: feature
priority: normal
created_at: 2026-07-14T00:18:14Z
updated_at: 2026-07-14T04:13:54Z
---

Build a local-only, single-page .html habit tracker where checking off daily habits reveals a pixel-art image one pixel at a time.

Requirements:
- Daily habits list, user-defined
- Pixel art image revealed pixel-by-pixel per habit check-off
- Preset pixel art gallery + image upload (downsampled to grid)
- Dark/light mode (auto + manual toggle)
- localStorage only, zero server/network dependencies
- Export/import JSON backup for device migration
- Fun and whimsical, easy to use
- Deliverable: one self-contained index.html

Process: Fable designs (docs/DESIGN.md), Sonnet agent implements, Opus agent reviews and iterates with Sonnet.

- [x] Design spec written (DESIGN.md)
- [x] Project scaffolding (CLAUDE.md, README, docs/)
- [x] Sonnet implementation of index.html (1,496 lines, self-verified with jsdom flow tests)
- [x] Opus review round 1 + Sonnet fixes (NEEDS-FIXES → all 7 findings fixed, regression suite passing)
- [x] Opus verification pass (verdict: SHIP, all 7 fixes verified, no regressions)
- [x] Final validation (node --check clean, zero external references, 71.5KB single file)

## Summary of Changes

Built `bit-by-bit/`, a whimsical single-file pixel-art habit tracker.

- **Design (Fable):** `docs/DESIGN.md` — full product spec: layout, reveal mechanics (seeded mulberry32 permutation, pixelsPerCheck sized for ~30-day completion), data model (`bitbybit.v1` localStorage doc), whimsy requirements, theming, export/import, a11y bar, 8 edge cases.
- **Implementation (Sonnet):** `index.html` (71.5KB, 1,576 lines) — vanilla JS/CSS IIFE, zero external requests, works from file://. 8 hand-shaded preset pixel artworks, image upload with pixelation preview, onboarding wizard, streaks + perfect-day sparkles, confetti celebration, dark/light/auto themes, JSON export/import, reduced-motion support. Verified with jsdom flow tests.
- **Review (Opus):** round 1 found 1 major (completion-moment canvas flash), 4 minors (seed-0 determinism, onboarding cap feedback, theme FOUC, hidden storage banner), 3 nits. All fixed by Sonnet; Opus verification pass returned SHIP with no regressions. Final cosmetic nit applied by Fable.
- **Scaffolding:** CLAUDE.md, README.md (with model credits), docs/PLANNING.md, docs/ARCHITECTURE.md.

Not committed — awaiting user review.