Claude Code: Basic to Advanced
Use Claude's coding agent to read, edit and build real projects, create and push GitHub repositories, deploy prototypes, and extend it with MCP, skills, subagents and hooks.
On this page
Commands and menus evolve
Claude Code updates often. If a command here behaves differently, run /help inside Claude Code or check the Claude Code docs. Terminal screens below are illustrative.
15.1 What Claude Code is
Claude Code is an agentic coding tool. You describe what you want in plain language; it reads the files in a project, plans, edits code, runs commands (tests, builds, git), shows you what it changed, and asks permission before risky steps. Module 11 introduced it for vibe coding. This class goes from first install to advanced automation.
Why a PM should learn it
You can build and change prototypes yourself, answer "how does this feature actually work?" by reading the codebase, write data scripts, fix copy and small UI bugs, update documentation, and turn a PRD into a working demo in an afternoon. Engineers still review anything that goes to production.
15.1.1 Where Claude Code runs
Terminal (CLI)
- Type claude in any project folder
- Most complete feature set
- macOS, Linux, Windows
IDE extensions
- VS Code, Cursor, JetBrains
- See diffs inline
- Good once you edit code daily
Desktop app
- Graphical app on Mac and Windows
- Projects on your laptop
- No terminal needed
Web: claude.ai/code
- Runs in the cloud on your GitHub repositories
- Start tasks from any browser or phone
- Opens pull requests
GitHub Actions
- Mention @claude in an issue or pull request
- Claude works and replies in GitHub
Agent SDK and headless
- claude -p 'task' in scripts and CI
- Build your own agents on the same engine
15.1.2 What you need
| Need | Detail |
|---|---|
| Claude plan or API | Pro, Max, Team or Enterprise includes Claude Code. Or pay per use with a Claude Console API account. |
| Git | Version control; installed on macOS, install "Git for Windows" on Windows. |
| GitHub account | To store and share repositories, and for the web version. |
| A terminal | Terminal (macOS), PowerShell or Windows Terminal (Windows). Not needed for the desktop app. |
| Optional | Node.js (some installs and projects), the GitHub CLI gh, a Netlify account for deploying. |
15.2 Level 1 · Install and your first session
Level 1 · Beginner
Goal: install Claude Code, make one change to a small project, review it and save it with git.
15.2.1 Install
15.2.2 Your first session
15.2.3 Essential commands
| Command or key | What it does |
|---|---|
claude |
Start a session in the current folder |
claude -c |
Continue your most recent session here |
claude --resume |
Pick an older session to resume |
/help |
List commands available in your version |
/init |
Create a CLAUDE.md file that describes the project for future sessions |
/clear |
Start fresh in the same window (clears the conversation) |
/compact |
Summarise a long conversation to free up context |
/model |
Switch model (for example a faster or a more capable one) |
/permissions |
See and change what Claude may do without asking |
/mcp |
Manage connected MCP servers |
| Shift+Tab | Cycle modes: normal → auto-accept edits → plan mode |
| Esc, Esc Esc | Stop the current step; rewind to an earlier checkpoint |
15.3 Creating a repository and pushing to GitHub
Every project you build should live in a git repository, so you can undo mistakes and share the work.
Prompt that does it all
"Initialise a git repository here, add a sensible .gitignore, commit everything with a clear message, then create a public GitHub repository called split-bill with the GitHub CLI and push. Explain each command before you run it."
Two other routes to a repository:
- Start on GitHub: create the repository at github.com/new, then ask Claude: "Clone github.com/you/split-bill here and open it."
- Start in Lovable or Replit: connect the project to GitHub (Classes 16 and 17), then clone that repository and improve it with Claude Code.
15.4 Level 2 · Working like a professional
Level 2 · Working PM
Goal: make Claude reliable on real projects with project memory, planning before coding, tests, and the right permissions.
15.4.1 CLAUDE.md: the project's instructions
CLAUDE.md sits in the project folder. Claude reads it at the start of every session. Run /init to create a first version, then edit it.
15.4.2 Explore → plan → build → check
15.4.3 Pictures, screenshots and designs
Drag a screenshot or a design image into the terminal or desktop app and say "Make the page look like this" or "This button overlaps on mobile, fix it". Visual input is often faster than describing a layout.
15.4.4 Permissions and safety
- Claude asks before editing files and running commands. Approve carefully, especially for commands that delete, deploy or spend money.
- Use
/permissionsto pre-approve safe, repeated commands (for examplenpm test) and keep risky ones on "ask". - Never paste API keys into the chat. Put them in a
.envfile that is listed in.gitignore. - Review the diff before every commit. You are responsible for what you push.
15.5 Level 3 · Extending Claude Code
Level 3 · Advanced
Goal: give Claude new tools (MCP), reusable know-how (skills and commands), helpers (subagents), automatic checks (hooks), and run it without you (headless, GitHub, web).
15.5.1 MCP servers: new tools for Claude
Add an MCP server once, and Claude can use its tools in every session. Use claude mcp add, or /mcp inside a session.
15.5.2 Skills and custom commands
- A skill is a folder with a
SKILL.mdfile (instructions, examples, optional scripts) inside.claude/skills/in your project or your user folder. Claude uses it automatically when a task matches its description. Example: a "release-notes" skill that turns merged pull requests into customer-friendly notes in your house style. - A custom slash command is a Markdown prompt in
.claude/commands/, run by typing/its-name. Example:/prd-checkasks Claude to compare the code withdocs/prd.md.
15.5.3 Subagents
A subagent is a helper with its own instructions, tools and separate context. Create one with /agents. Good PM examples: a reviewer that checks a change against the PRD, a tester that runs Playwright checks, a copy editor that enforces your tone guide. Subagents keep long, noisy work out of your main conversation.
15.5.4 Hooks
Hooks run your own script automatically at set moments, for example before a tool runs (block edits to .env), or after a file is edited (run the formatter). Manage them with /hooks. Hooks are rules that always run, unlike instructions, which Claude may occasionally miss.
15.5.5 Plugins
A plugin bundles skills, subagents, commands, hooks and MCP servers so a team can install the same setup with one /plugin command. Use them to share your team's standard Claude Code setup.
15.5.6 Running without you
| Mode | How | PM use |
|---|---|---|
| Headless | claude -p "Summarise the changes since last Friday" in a script |
Scheduled reports, release notes |
| GitHub Actions | Run /install-github-app, then write @claude in an issue or pull request |
"@claude fix this typo and open a PR" |
| Claude Code on the web | claude.ai/code → pick a GitHub repository → describe the task | Start a task from your phone; review the pull request later |
15.6 Costs
- Pro and Max plans include Claude Code; usage is shared with chat, and heavy agentic work uses more.
- API billing charges per token. Run
/costto see what an API session has spent, and set a spend limit in the Console. - Cheaper habits: one clear task per session,
/clearbetween unrelated tasks,/compactin long sessions, plan mode before big changes.
15.7 Labs
Lab 1 · Install and first change (20 minutes)
- Install Claude Code (desktop app or CLI) and log in.
- Make a folder
first-projectand startclaudein it. - Ask for a one-page landing page with sample data. Approve the file writes.
- Ask for one design change. Review the diff.
- Press Esc Esc and rewind the last change, to see that undo works.
Lab 2 · Create and push a GitHub repository (20 minutes)
- In the same folder: "Initialise git, add a .gitignore, and commit."
- "Create a public GitHub repository called first-project and push." (Install
ghand rungh auth loginfirst, or create the repository on github.com and ask Claude to push to it.) - Open the repository on GitHub and check your files are there.
Lab 3 · From PRD to deployed prototype (60 minutes)
- Copy
templates/01-prd-template.mdfrom this handbook into the project asdocs/prd.mdand fill in a small feature. - Shift+Tab to plan mode: "Read docs/prd.md and plan a clickable prototype that covers every requirement."
- Approve the plan, leave plan mode, and let Claude build.
- "Check the page at 375 px width; fix horizontal scroll; label it as a prototype."
- Deploy: drag the folder onto app.netlify.com/drop, or ask Claude to use the Netlify CLI. Share the link.
Lab 4 · CLAUDE.md and a repeat mistake (15 minutes)
- Run
/init. Edit CLAUDE.md using the five-part structure above. - Notice one thing Claude got wrong in Lab 3. Add a rule for it.
- Start a new session and repeat the task. The mistake should not return.
Lab 5 · Test your page with Playwright MCP (20 minutes)
claude mcp add playwright -- npx @playwright/mcp@latest- "Open site/index.html with Playwright, submit the waitlist form empty and with a valid email, and report what happens."
- Ask Claude to fix any bug it found, then re-run the test.
Lab 6 · A release-notes skill (30 minutes)
- "Create a skill in .claude/skills/release-notes that turns git commit messages from the last 7 days into customer-friendly release notes, grouped by benefit, max 150 words."
- Make three small commits.
- Ask: "Write this week's release notes." Check Claude used the skill.
Lab 7 · Claude Code on the web (15 minutes)
- Open claude.ai/code and connect GitHub when asked.
- Choose your
first-projectrepository. - Task: "Add a FAQ section with three questions and open a pull request."
- Review the pull request on GitHub and merge it yourself.
15.8 PM use cases
| Task | Prompt |
|---|---|
| Understand a feature | "Explain how refunds work in this codebase, with file names. Don't change anything." |
| Size a request | "What would it take to add a coupon field at checkout? List files to touch and risks." |
| Data question | "Write a Python script that reads data/orders.csv and prints weekly retention by cohort." |
| Copy fix | "Change every 'Checkout' button label to 'Pay now' and show me the diff." |
| Docs | "Update README.md so a new teammate can run this project in five minutes." |
| Issue triage | "Read the open GitHub issues and group them into themes with counts." |
15.9 Common mistakes
- Huge first prompts: build in small steps and commit after each working step.
- Approving everything without reading: especially deletes, deploys and package installs.
- No CLAUDE.md: Claude rediscovers the project every session and repeats mistakes.
- Secrets in code: keys belong in
.env(git-ignored) or the host's environment variables. - Treating a prototype as production: production code needs engineering review, tests and security checks (Module 11).
15.10 Exercises with model answers
Exercise 1 · Plan or just do it?
Which of these should start in plan mode? (a) Fix a typo in the footer. (b) Add login with email OTP to the prototype. (c) Rename a CSS class.
Model answer
Only (b). It touches several files, adds data storage and has security decisions, so agree the approach first. (a) and (c) are small, contained edits you can review in one diff.
Exercise 2 · Which extension?
Your team keeps asking Claude to check new screens against the Figma design, and someone keeps accidentally committing .env. What do you add?
Model answer
Add the Figma MCP server (so Claude can read the design) and a short skill or subagent for "compare the implementation with the Figma frame". For .env, add it to .gitignore and a PreToolUse hook that blocks edits or commits touching .env. A hook always runs, unlike an instruction.
15.11 Key takeaways
- Claude Code works on real files and repositories and asks before risky actions.
- Use git from the first minute: commit small, working steps and push to GitHub.
- CLAUDE.md and plan mode are the two habits that most improve results.
- MCP, skills, subagents, hooks and plugins extend Claude Code once you repeat a task.
- Headless mode, GitHub Actions and Claude Code on the web let it work while you do something else.
15.12 Check your understanding
Check your understanding
Which key cycles into plan mode?
- Ctrl+C
- Shift+Tab
- Esc
- F5
What does CLAUDE.md do?
- Stores your API key
- Gives Claude project instructions at the start of every session
- Deploys the site
- Lists your GitHub followers
You want an automatic check that blocks edits to .env every time. Use…
- A line in the prompt
- A hook
- Plan mode
- The /model command
How do you let Claude read a spec in Notion?
- Copy the Notion password into the chat
- Add Notion's MCP server with claude mcp add
- Export Notion as a ZIP
- It's not possible
15.13 Recommended resources
- Claude Code docs · Claude Code best practices
- Claude Academy: Claude Code in Action (free; formerly Anthropic Academy)
- DeepLearning.AI: Claude Code: A Highly Agentic Coding Assistant (free, about 2 hours)
- Coursera: Claude Code: Software Engineering with Generative AI Agents (Vanderbilt)
- GitHub CLI · Netlify Drop · Playwright MCP