You cannot select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
vibed/.beans/vibed-vytp--bit-by-bit-pixe...

2.4 KiB

title status type priority created_at updated_at
Bit by Bit — pixel-art habit tracker (single-file HTML app) completed feature normal 2026-07-14T00:18:14Z 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.

  • Design spec written (DESIGN.md)
  • Project scaffolding (CLAUDE.md, README, docs/)
  • Sonnet implementation of index.html (1,496 lines, self-verified with jsdom flow tests)
  • Opus review round 1 + Sonnet fixes (NEEDS-FIXES → all 7 findings fixed, regression suite passing)
  • Opus verification pass (verdict: SHIP, all 7 fixes verified, no regressions)
  • 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.