Vibe Coding Workshop

We're going to tackle how to manage context so our LLM helpers don't suffer from context rot and start making bad choices. Along the way we'll learn practical tricks for working with big codebases and tools like Cursor so we can actually ship reliable vibe coding apps.

Let's get hands-on with vibe coding by building small throwaway prototypes in V0 to explore the core idea of an infinite canvas app with movable iframe tiles. Instead of handing a huge PRD to an LLM we will iterate piece by piece, discover the minimal frontend stack like Next.js and React, and let those prototypes teach us what backend pieces we actually need.

Okay, now that we prototyped and picked a direction, we need to learn how to change an existing codebase without pulling the wrong block out of the Jenga tower. We're going to work on letting us select multiple artboards with Shift and on managing the LLM context in tools like Cursor so the bot makes focused safe edits and the UI remains predictable.

Now that we used the explain method to add multi-artboard dragging and the LLM produced a bunch of new code, we need to actually evaluate whether that code is any good and where to improve it. We'll open a fresh chat as a new agent, run a branch diff, and ask it to review like a professional React engineer, grouping issues into critical, should fix, and low priority so we can fix the big stuff like duplicated logic first and iterate from there.

Now that we've been breaking work into tiny chunks, we're going to build a speculative feature called Brand Central and use a detailed technical plan to help an LLM manage the large refactor. We'll wire up a modal that pulls together the images tab and the properties tab, add a few unit tests to keep us safe, and iterate on the design in the next lesson.

All right, we hit a bug where the LLM's quick fixes left our app full of junk, so we're going to learn how to wrestle the problem back under control by rolling back checkpoints and starting a fresh agent. We'll get the model to think through the existing logic step by step with the explain and analyze prompts, use targeted logs and model switching to find the root cause, and only then apply clean fixes.

Now that we've built with coding agents, let's tackle the common annoyances they create and learn how to keep them in line. We'll use Cursor rules, treat the app as production-grade when needed, run audits, and create review agents so our code stays secure, performant, and readable.