Watch Celeborn ship a feature
A recorded run, shown in the real Celeborn board. Seven cards take one small feature from a plan to shipped. Nothing here calls a model or uses a membership budget.
This is the real app playing a recording. Scroll down to walk through it. Scroll back to rewind.
Before the run
One feature, seven cards, nobody watching the clock
The project is Sunlight (demo project). Someone asked for a dark-mode toggle. Celeborn turned that ask into seven small cards on the TO DO column. Scroll down to watch it carry them to DONE, or press the button at the bottom of the board.
Card 1 of 7
🌙 Plan the dark-mode toggle
Every feature starts as a plan, not a guess. Celeborn reads the request, looks at the code it already remembers, and breaks the work into cards small enough to finish cleanly.
Stop condition A short plan exists: theme variables, a toggle control, and persistence — split into cards.
Card 2 of 7
🌙 Define the theme colour variables
Instead of hard-coding colours everywhere, Celeborn moves them into one place — CSS variables — so a single switch can repaint the whole app. It touches the file, then records what it did.
Stop condition Light and dark palettes exist as CSS custom properties on :root and [data-theme='dark'].
Card 3 of 7
🌙 Build the toggle control
Now the control itself: a small, accessible button. Notice it explains its choices — a real aria-label, keyboard focus — the details a rushed prompt usually forgets.
Stop condition A ThemeToggle component renders a sun/moon button and flips the data-theme attribute.
Card 4 of 7
🌙 Persist the choice across reloads
A toggle that forgets is annoying. Celeborn wires the choice to localStorage so the app opens the way you left it — the kind of follow-through that comes from remembering the whole task.
Stop condition The selected theme is saved to localStorage and restored on load.
Card 5 of 7
🌙 Fix the flash of the wrong theme
This is the card that separates a demo from a product. Celeborn catches the classic bug — a flash of light theme before the saved choice loads — and fixes it before you'd ever file it.
Stop condition No light flash on load for dark-mode users; theme is applied before first paint.
Card 6 of 7
🌙 Write a test for the toggle
Nothing ships here on trust alone. A test locks the behaviour in place, so the next change can't quietly break it — and you can see it go green.
Stop condition A passing test asserts the toggle flips data-theme and persists the value.
Card 7 of 7
🌙 Ship it — commit and document
The last card closes the loop: one clean commit, a line in the README, and the work moves to Done. Next session, Celeborn will remember this shipped — that's the persistent memory at work.
Stop condition Feature is committed with a clear message and the README notes the new toggle.
After the run
That is the whole loop
Plan, build, fix a real bug, test, ship. Everyone watches this same recording. Your own board points at your own repo and remembers your project between sessions.