Hey y’all, we’re back to finish the to-do app. Earlier today we were in Codex—we added inline editing and moved some things around, but Codex spent a lot of the session fighting with Chrome DevTools and I didn’t get as much done as I’d hoped. So this time we’re switching to Claude.
One thing to know when you bounce between agents—bigger projects usually carry an AGENTS.md file with instructions for whatever agent is working in the repo. Claude doesn’t read AGENTS.md, it looks for CLAUDE.md, so you either copy it or symlink the two so they’re the same file. We only have a plan and an index file here, so nothing to do yet—more on this in a future video.
I check the MCP, then have Claude open the app in Chrome DevTools—hoping we don’t hit the same issues Codex did. Everything from this morning is in place. Inline editing works, drag-and-drop got some polish and the moving card has that frosted-glass effect. Such a nice effect. Dates are gone to keep things simple.
I ask for status and what’s next in the master plan. At this point there’s no set list of things left—just add polish, which is a pretty good place to be.
One thing I’ve been thinking about since the last video—instead of the create-task input being fixed at the bottom, I want it inline at the top, like an empty task. Type, hit enter and the task is added at the top instead of the bottom.
The second piece will be clicking between tasks to insert one right there, but first things first. I go into plan mode and walk Claude through it, answering its questions about insert position and composer styling as it puts the plan together.
It works—type at the top, hit enter and the task drops in right below the composer. That’s what I’d expect. While we’re here I have it remove the empty header area sitting above the create-task bar—just a spacer doing nothing.
Now for the fun one. I want to click within 10 or 20 pixels of the top or bottom edge of a task and have the composer disappear from the top and reappear right there. There are a lot of questions to answer—what happens after you hit enter, does the composer stay in place or jump back to the top, how does it work from the keyboard.
So I ask Claude to brainstorm it with me. Honestly these agents are so good at brainstorming—if I’m not exactly sure what I want, I just tell it to work with me on it.
Claude comes back with good questions. How does the user know the edge zone is there? A hover hairline—yes, there’s something nice about a line. It also offers a create-task hint, which I skip. After you submit, the composer stays at the same gap—glad it asked, because that’s how I’d handle it. For the hit zone it suggests a percentage of row height, but a fixed size feels right. I also ask it straight up what it thinks the best user experience is.
While Claude is thinking I notice the input doesn’t wrap—type something long and it keeps scrolling on one line, then wraps when it loses focus and the row jumps. So I take a screenshot, paste it in and spin up a second agent with Command-D—each lane in the terminal is its own agent.
You’ll see people online running 20 agents at once and honestly it’s madness. At my most I’ll run four or five. I rarely run more than two.
The two agents mostly stay out of each other’s way—one finishes before the other really gets started—but they will collide. One agent can change something another is working on, or change what it expects to find. If you do run multiple agents, the common move is to put them on separate parts of the app—one on the back end, one on the front end. I’m also not using Git here, which makes collisions more dangerous. Maybe I should’ve been more careful about that.
And then things get funky. I hard refresh—Command-Shift-R, which clears the cache and reloads—and now delete doesn’t work. Then nothing works. The Chrome DevTools MCP fails, the same trouble Codex had earlier, and I have to let it reconnect. Maybe it was a little early to introduce the double-agent thing, but here we are. Once it reconnects, the app opens and create and delete work again.
The click-to-insert area feels finicky, and I realize the problem isn’t the hit area—it’s the cursor. It shows the text cursor in the edge zone, which signals editing, not inserting. Claude wants to make the zone bigger, but I don’t think that’s the fix. We go back to 16 pixels everywhere and change the cursor to a pointer. That was the confusing piece.
A couple of small ones. The placeholder says Create Task—I have it switch to sentence case. And escape is off—it keeps your text and moves the composer back to the top. Moving to the top is fine, but the text should clear. Escape while editing a task already undoes the edit, which is what I’d expect, so it’s just the create piece.
Now the icons. We’ve got a thin one-point circle for completion and a thick X for remove—they don’t feel like they belong to the same app. There are free icon sets like Lucide and Phosphor, but what we really need is for these two to family together. We land on a stroke-only set at one and a half points with the X hidden until you hover the row, plus a hover preview on the completion circle—a nice touch.
I skip delete confirmation. That’s for destructive actions with real repercussions—usually a dialog asking if you’re sure—and this is a fun little app. I also keep the circle and the X the same size.
While that runs, a word on Git, because we’ll start using it on the next project. Imagine you’re playing a video game, you get really far, you die and you haven’t saved—you’re back at the beginning. That’s what can happen here if you get in deep without Git. Every time you commit you’re saving your progress, and with an agent commits are easy, so you’ll want to commit after every big change. If you don’t know how to set it up, just ask the agent—it’ll walk you through it.
Claude adds a subtle animation to the check, but it animates on hover. I’d rather it animate on completion—and I don’t want it touching the rows, since we’re doing those next. Scoped down, the little check draws in when you complete a task and the row fades out a beat later. Much better.
Last round of polish. When you click a border to insert, I want the composer to grow out of that border—very subtle. For completed tasks, height-plus-fade on the way out, no scaling, no sliding left. Good animation isn’t decoration—it explains where things come from, and it should stay fast. For the composer’s leading icon we try a dashed circle the same size as the real ones, which reads as a task that isn’t a task yet.
One behavior keeps bothering me—type into the composer, click away and the text follows the composer back to the top. It’s not like an email you’ve spent an hour on, it takes two seconds to retype. I bring back the second agent to fix it.
Along the way Claude starts recalling a memory from our earlier conversation. Agents sometimes save decisions as memories, but it’s unpredictable—you can’t count on one being saved. Commits are better. Plans are better. Saving a master plan like we did beats depending on memory.
And I think that’s our task list. To recap the series—we planned the whole thing, then built create, inline editing, completion, deletion and reordering, then finessed the details in this little prototype.
For a couple hours of tinkering you can get away without Git—the apps are small enough that agents can fix most mistakes. But if you’re about to build the amazing thing you have in mind, wait for the next video. We’ll set up Git and GitHub so you never lose a save. Thanks for watching.