Vibe Coding for Beginners: From Zero to App/Create something valuable
Lesson 2 / 4 · 25 min · 0 / 2 exercises
Course contents
Project · 2 hands-on exercises

Create context files

Write the short instruction file your agent loads every session (AGENTS.md, CLAUDE.md, GEMINI.md or a Cursor rule) with your stack, commands, files and rules.

An instruction file is a short note to every future session: here's the project, here's how we work, here's what never to do. Agents load it automatically at the start, so you stop repeating yourself and rules stick even in a brand-new conversation. You started one in the security lesson. Now you'll make it complete, and keep it short.

Which file does your tool read?

ToolInstruction file (as of November 2026)Shortcut
CodexAGENTS.md/init writes one for you
Claude CodeCLAUDE.md. It reads AGENTS.md instead when there's no CLAUDE.md/init writes a CLAUDE.md
Gemini CLIGEMINI.mdWrite it yourself, or ask the agent
CursorAGENTS.md, or rule files (.mdc) in .cursor/rules//create-rule in the Agent chat
GitHub Copilot.github/copilot-instructions.md, AGENTS.md, or a single CLAUDE.md or GEMINI.md at the project rootAsk the agent to create one
Grok BuildRun grok inspect to see which instruction files it foundAsk the agent to create AGENTS.md
LovableProject settings, then Instructions (up to 10,000 characters)Paste your rules there

AGENTS.md is the closest thing to a standard. It's an open format stewarded by the Agentic AI Foundation under the Linux Foundation, and Codex, Cursor, Gemini CLI, Devin, the GitHub Copilot coding agent and many other tools read it. If you use more than one tool, write AGENTS.md. For Claude Code, either let it read AGENTS.md directly (it does when there's no CLAUDE.md), or create a CLAUDE.md whose only line is @AGENTS.md, which imports the shared file.

What goes in, and what stays out

Sort itExercise 1 of 2

Where does each line belong?

Card 1 of 7

Brand colors: cream #FFF8EE, brown #4A2C1A, accent #C8553D.

Keep it short. Claude Code's documentation recommends keeping each CLAUDE.md under 200 lines, because longer files cost more context and are followed less consistently, and the same logic applies to every tool. A good beginner file fits on one screen: what the project is, the stack, how to preview and ship, a map of the files, the rules, and what “done” means.

Build itExercise 2 of 2

Assemble a good AGENTS.md for Crumb & Co. Switch on what helps; leave out what hurts.

What gets sent
# AGENTS.md
Crumb & Co.: website for a neighborhood bakery.
A finished example (yours can differ)
# AGENTS.md

## What this is
Website for Crumb & Co., a neighborhood bakery. Visitors are mostly on phones.

## Stack and constraints
Plain HTML, CSS and JavaScript. No frameworks, no build step.
No new packages or outside scripts without asking. Pin exact versions.

## Preview and ship
Preview: start a local server in the project folder.
Ship: commit, then push. The host redeploys automatically.

## Files
index.html (home), archive.html (all past weeks), specials.json (every week, newest first),
invoice.html (the owner's invoice tool), styles.css, app.js.

## Rules
- Brand: cream #FFF8EE background, brown #4A2C1A text, accent #C8553D.
- Secrets only in .env, which stays in .gitignore. None in front-end code.
- Show anything a visitor types as plain text, never as HTML.
- Never turn off a security rule to make an error go away.

## Done means
Checked at 375px wide, no red errors in the console, and you tell me what you tested.
Definition of done0 / 5
Pick your track · finish either one
Steps · 0 / 5 done

  1. Generate a starter file

    In Codex or Claude Code, run /init: Codex writes AGENTS.md and Claude Code writes CLAUDE.md. With other agents, ask: “Create an AGENTS.md for this project.” Then read what it wrote, because generators guess.

    VerifyThe file exists and describes your actual project, not a generic one.

  2. Cut it down to one screen

    Ask the agent to restructure the file, then compare it with the example above.

    prompt
    Rewrite our instruction file so it fits on one screen, under these headings:
- What this is
- Stack and constraints
- Preview and ship
- Files
- Rules (keep the Security rules)
- Done means
Remove anything that's a one-off task, project history, or a secret. Show me the result before saving.
    VerifyThe file has the six headings, fits on one screen, and has no secrets or one-off tasks.

  3. Make one file serve every tool

    If you use Claude Code and also want other tools to share the rules, keep the rules in AGENTS.md and make CLAUDE.md a single line: @AGENTS.md. Or delete CLAUDE.md, and Claude Code reads AGENTS.md directly.

    VerifyYour rules live in exactly one file; any other instruction file points to it.

  4. Test it in a fresh session

    Quit and start a brand-new session (in Claude Code, /clear also works), then ask a question only the file can answer. In Grok Build, grok inspect should list the file too.

    prompt
    What are this project's rules, and how do I preview it?
    VerifyThe agent answers correctly from the instruction file.

  5. Commit it

    Ask the agent to commit the instruction file with a clear message.

    VerifyThe git log shows the commit.
Check your understanding
Q1. You use Codex at home and Cursor at work on the same project. Where should your project rules live?
Q2. Claude Code's docs recommend keeping each CLAUDE.md under 200 lines. Why?
· Tick off the 5 step(s) above.
· Work through the 2 remaining exercises above (stuck? each one can show you the answer).
· Score 100% on the quiz.
Vocabulary in this lesson
AgentA model wired to tools and a loop: it reads, acts, checks the result, and goes again until the task is done or you stop it.AGENTS.mdThe instructions file at the repo root that every session reads first: commands, conventions, gotchas. CLAUDE.md in Claude Code.SessionOne continuous run with an agent, from an empty context to the moment you clear it, close it, or hand its work off.ToolA named capability the harness lets the model invoke, such as reading a file, running a shell command or fetching a page.ContextEverything the agent currently has in front of it that bears on the task: loaded files, your messages, tool results so far.ClearingWiping the session so the next request starts from an empty context window, keeping only the standing instructions.

Plain-English definitions from the AI Coding Dictionary.