Class 4 · 4.2

Build the Kanban app in YOLO mode

Now the fun part: put Cursor in plan mode, let it design the build, then unleash it in YOLO mode. Watch the agent loop — read, think, write, test, fix — and sharpen the result with a little targeted feedback.

⚡ Goal: ship a working drag-and-drop app⏱ Read: 9 min

01Start in plan mode

Drag the agent panel wider — we’re going all in. Leave the model on auto (let Cursor choose), then set the agent dropdown to Plan. Now simply type:

agent · plan mode

go ahead and plan

You don’t need to say what to plan — it loads agents.md into context automatically. Watch it read, think, and produce a Kanban MVP implementation plan: multiple phases (scaffolding, drag-and-drop, add cards…), an architecture overview, what’s out of scope, and an execution order.

Watch the context meter

Hover near the bottom of the agent panel: a little dial shows how much of the context window is used (say 6.4%). It also lists the active rules it loaded — including your agents.md. Keep an eye on that number climbing as work proceeds.

The “right” thing vs. what we’ll do

The disciplined move is to read the plan carefully and give feedback where you disagree. That’s for careful people — and you probably should. But to feel YOLO, we’re going to trust it: press Build without even reading the plan. (Do as we say, not as we do.)

02Hit Build and watch the loop

Press Build. Because you’re in YOLO, it just goes — creating a .gitignore, a frontend directory, files appearing everywhere. This is the definition of an agent, live in front of you: an LLM in a loop with tools, working toward a goal.

You’ll literally see this: it finds a failing test, comes back, and fixes it — round and round.

After a few minutes it declares the phases complete. Often it even launches the app itself; sometimes it just prints the command. Either way, to run it yourself:

Cursor terminal

$ cd frontend
$ npm run dev
  ▲ Next.js — ready on http://localhost:3000

Open localhost:3000 and there it is: a Kanban board — Backlog, To Do, In Progress, Review, Done — with drag handles. Try it: drag a card between columns, add a card, delete one, rename a column. It meets the requirements, built from that one agents.md with no feedback from you.

03Sharpen it with feedback

It won’t be perfect — maybe a stray Next.js error, janky drag-and-drop, or no reordering within a column. This is where you give targeted feedback. One message, several fixes:

agent · feedback

It’s mostly working nicely, but:
• Next.js shows one error (red symbol, bottom of screen).
• The drag-and-drop is a bit janky, and I can’t reorder
  within a column — can this be made more slick?
• It would be nice to have more yellow and purple on screen.

Let it work. It comes back having clearly added the purple and yellow, made the interaction slicker, and enabled reordering within a column. (In the demo it didn’t fully close the stray error — a reminder that it’s not magic, and you keep iterating.) The look and feel is great; good enough for us.

What you just practised

Writing a good agents.md, running in YOLO, watching the agent loop, and iterating with targeted feedback. That’s the core rhythm of vibe coding in an IDE — and the foundation for everything in the weeks ahead.

If yours broke

Totally normal. Give it the specific error (“the buttons don’t do anything when clicked”), or delete everything and start again with a fresh agents.md that accounts for where it went wrong. Simplify, then build back up.

✓ Key takeaways

Plan first: plan mode produces a phased implementation plan from your agents.md automatically.
In YOLO mode the agent runs the full loop — read, write, test, fix — with no approvals.
You watched a real agent: an LLM running tools in a loop toward a goal.
Targeted feedback (“more yellow and purple”, “reorder within a column”) is how you refine.
Imperfect is expected — keep iterating, or reset and simplify.