IDST
Course contents

Session 1 of 8

Session 1: The One-Shot (ship it inside the session)

In this session you will build a piece of software and put it on the internet. Not a toy exercise, one of your actual itches, live at a real web address, before you go home. This is the first of three projects in this course, each built a different way. This session's way is the simplest one there is: the one-shot: describe it once, watch it appear. Choose it with a little care, though: in the next session this page stops being a one-shot and becomes a product, the thing you'll grow for the next two sessions.

In this session at a glance, the whole one-shot lifecycle, with every gstack command and every document it produces:

The one-shot lifecycle: setup, one prompt, the agent loop, break-test and QA, ship, end on purpose, with the gstack skills and documents at each step

Blue = gstack commands · yellow = documents · grey = things you do · green = the payoff.

Part 1: What an agent actually is (~20 min)

Claude Code is not a chatbot that talks about code. It's an agent: an AI model wired up to tools: it can read your files, write files, and run commands on your computer. It works in a loop:

  1. Read: look at your files and your request
  2. Act: write code, run a command
  3. Observe: look at what happened (did the command work? what's the error?)
  4. Repeat until done

That loop is the whole trick. There's no magic and it doesn't "think" the way you do, it's an extremely well-read text predictor that can use tools and check its own results. It is genuinely brilliant and it confidently makes mistakes, including inventing things that don't exist (a tool, a fact, a step); the trade calls these hallucinations, and the confidence is the dangerous part. Both things are true at once, and the whole course lives in that tension.

Two words you'll hear constantly:

One rule for the whole course, starting now: you never open a terminal. Claude runs every command. Your job is to read what it's asking to do and say yes or no. That reading habit is a real safety layer, treat every permission prompt as a question addressed to you personally, because it is.

Part 2: Git without a terminal (~15 min)

Before we let an AI loose on files, we want an undo button. That's git: a snapshot system for folders. You save a snapshot ("commit") whenever things work; you can rewind to any snapshot ever taken.

This is what makes vibe coding safe. The agent can try something bold, and if it makes a mess, you throw the mess away and you're back to the last good snapshot. Fearlessness is a feature you install.

Your first git act. Say this to Claude:

Clone the course repo from https://github.com/IDSTUK/vibe-coding-course into my projects folder.

Watch what it runs, approve it, done. That's the pattern for every git operation in this course: you say what you mean, Claude types the command, you approve it. You need to know what the commands mean, not memorise them, the six that matter are on the git survival cheatsheet. The three for in this session:

Part 3: Meet your toolbelt (~15 min)

In setup you pasted a web address and told Claude to install gstack. Here's what you actually did: Claude Code can be extended with skills, packaged, step-by-step workflows the agent knows how to follow. Each one is the checklist an experienced professional would run through for a job (testing a site, shipping a release, reviewing code), written down so the agent can execute it the same way every time. gstack is a pack of about fifty of them.

Using a skill couldn't be simpler: type / followed by its name into Claude Code, /qa, /ship, /retro, and the agent runs that whole workflow, asking your permission along the way as usual. Think of plain prompts as asking the agent to improvise, and skills as handing it a proven recipe. You'll meet nearly all of them over the three projects; the full map is the gstack directory cheatsheet, which will make more sense as the course goes on.

(If the setup step didn't happen, do it now; say to Claude: Install the gstack plugin and its skills from https://github.com/garrytan/gstack.)

Three to run right now:

  1. /gstack-upgrade: make sure the toolbelt is current (do this at the start of every stretch; tools in this field date in months).
  2. /careful: turns on warnings for destructive commands. The seatbelt goes on before the car moves, and it stays on for the whole course.
  3. /connect-chrome: launches a browser your agent can see and drive. In this session it's how the robot tester will look at your page.

Part 4: The one-shot build (~40 min)

A one-shot is building something from a single prompt. Pick the smallest itch on your list, ideally something that can live on a single web page.

  1. Ask Claude to make a new folder for it in your projects folder, and to start a git repo there.

  2. Describe what you want. Aim for a short paragraph: what it is, who it's for, what it must do. Example shape:

    Build a single-page web app (one HTML file, no build tools) that turns pasted lecture notes into revision flashcards. I paste text, it splits it into question/answer cards, and I can flip through them. Make it look clean on both laptop and phone.

  3. Watch what it does. Seriously, watch. You'll see the loop from Part 1 happening in real time: reading, writing files, running things.

  4. When it says it's done, open the page and try to break it, say "open it in the browser". Paste weird input. Resize the window. Click things twice. Note everything odd.

  5. Ask for one or two fixes. Then say: "add a sensible .gitignore for this project, then commit everything with a sensible message." Your first snapshot. (A .gitignore is a list of files git should pretend not to see, system junk, and later, secrets. Getting one in the very first commit is a habit that pays off for years.)

Part 5: QA and ship (~25 min)

Before anything goes live, someone should try to break it who isn't you. Run:

/qa-only

A robot tester will drive your page in the browser and hand you a report of what it found, it deliberately fixes nothing. Read the findings with your tutor and sort them into three piles: real problem, fix now · real, but not in this session · a robot's opinion, thank it and move on. That sorting is a professional skill called triage, and you just did it on day one. Fix the first pile.

Then the moment the session exists for:

/ship

Watch what it does, checks the code, reviews the changes, writes a changelog, commits, pushes. Your tutor has connected the repo to Netlify, so a couple of minutes after the push: a URL. Software that only exists on your laptop is a diary; software on the internet is a product. Send the link to someone.

Part 6: End on purpose (~5 min)

The agent's memory doesn't survive the session, but its notes can. Run:

/context-save

That writes down where you got to, so the next session starts where this one ended instead of from zero. Ending a session on purpose, with a saved state, is a habit you'll keep for every working session in this course.

Debrief, with your tutor: list three things the one-shot got wrong or you'd change. Keep the list, in the next session it becomes a backlog, and honestly it's the syllabus: every session left in this course exists because of the kinds of things that will be on your list.

What you just learned without noticing

Version control (git snapshots before and after changes), shipping small and early, professionals release the smallest useful thing and improve it live, and triage: sorting findings by judgement instead of obeying them all. Day one and you're already doing the habits that most distinguish working developers from students.