dev-skills

Appearance

Plan Example ​

A worked plan for a small UI issue, showing the narrative plan plus the live end-to-end checklist. This is the artifact the Plan topic produces.

Plan ​

#412: Add a dark-mode toggle to the settings page

Scope. Add a toggle in Settings that switches the app between light and dark themes and persists the choice. In scope: the toggle control, wiring it to the existing theme tokens, and persistence. Out of scope: per-component theme overrides and system-preference auto-detect (tracked separately in #418).

Approach. Reuse the existing CSS custom-property theme tokens. The toggle flips a data-theme attribute on <html> and stores the choice in localStorage. No new dependencies.

Key decisions. Persist with localStorage, not a server round-trip, so the choice applies before first paint and needs no auth. Open question: default to the stored value only, or fall back to prefers-color-scheme? Deferred with the auto-detect work in #418.

Live checklist ​

Plan       ✅ Confirm scope and acceptance criteria
           ✅ Write the plan and this checklist
Build      ✅ Add the toggle control to the settings page
           ✅ Wire it to data-theme + localStorage
           ⏳ Persist and restore the choice on load
           ⬜ Tests pass: theme-toggle.test.js
PR-ready   ⬜ Code style + conventions
           ⬜ Self-review the diff
           ⬜ Proof of work: review.html with the toggle in light and dark,
             default and focused, before/after, captured from the running app
Ship       ⬜ Open PR (Closes #412)
           ⬜ Review the PR: code-review + clear every automated/bot comment
           🔍 Review gate: reviewer inspects review.html and approves
           ⬜ Address human review comments (one item per thread)
           ⬜ Merge
Deploy     ⬜ Watch CI to green
           ⬜ Verify the toggle on the deployed settings page
Cleanup    ⬜ Delete branch + worktree
           ⬜ Close #412

Where it lives. The checklist above is mirrored in the agent's live todo surface, with one item in progress ("Persist and restore the choice on load"). This narrative plan lives in plan.md on the branch.

On the proof-of-work item. The evidence is a single self-contained review.html: the toggle in each state (light and dark, default and focused), before and after side by side, captured with Playwright from the running app, so the reviewer confirms it by looking rather than pulling the branch. See Proof of Work.