Getting Started with Claude Code
Install Claude Code, set project-level conventions, and complete your first real task inside an existing codebase.
What Claude Code actually is
Claude Code is a terminal-based coding agent — you run it inside a real Git repository and give it tasks in plain language. It reads your files, plans an approach, edits code, runs your tests or build, and reports back, rather than requiring you to copy-paste code between a chat window and your editor. See /tools/claude-code for a full breakdown of its capabilities and limitations.
It works best on an existing project it can explore, not a blank folder with no context. If you don't have one yet, run the /tutorials/build-website-with-ai tutorial first to create a small project to practice on.
Step 1: Install and sign in
The first run walks you through authenticating with an Anthropic account. Always start it from inside the project directory — it uses your working directory as its default scope.
npm install -g @anthropic-ai/claude-code
# then, inside your project folder:
cd my-project
claudeStep 2: Give it project conventions with a CLAUDE.md file
Claude Code automatically reads a `CLAUDE.md` file at the root of your project if one exists. This is the single highest-leverage thing you can do to get consistently better output — it removes the need to repeat the same instructions in every session.
# Project conventions
- Package manager: npm (do not use yarn or pnpm)
- Run `npm test` before considering any task finished
- TypeScript strict mode — never use `any`
- One component per file, inside components/
- Use Tailwind CSS utility classes; don't add new CSS files
- Never delete existing tests without asking firstStep 3: Run your first task
Start small. A first task should be scoped enough that you can review the entire diff in a couple of minutes — this builds trust in how it behaves on your specific codebase before you hand it anything bigger.
> Add a loading spinner to the SubmitButton component while the form is
submitting. Don't change its existing props.
⏺ I'll look at the current SubmitButton implementation first.
⏺ Read components/ui/button.tsx
⏺ Editing components/ui/button.tsx to add a pending state indicator
⏺ Running npm test — 12 passed
Done. The button now shows a spinner and disables itself while pending
is true; existing props and styling are unchanged.Step 4: Review the diff like a pull request
- Run `git diff` before accepting anything — read every changed line
- Check that it only touched files relevant to the task
- Run the test suite yourself, don't just trust that it reported success
- If something's wrong, describe the problem precisely in a follow-up rather than starting a new session from scratch
Step 5: Scale up to bigger tasks
Once you trust how it behaves on your codebase, you can hand it larger, multi-file tasks — a refactor, a new feature end to end, or investigating a bug across several files. Always keep committing in small chunks so you have a clean rollback point if a later change goes wrong.
git add -A
git commit -m "Add loading state to SubmitButton"Tools used in this tutorial
Claude Code
A terminal-based agentic coding tool from Anthropic that reads, edits and runs code in your own repository.
Cursor
An AI-native code editor built on VS Code, with deep inline editing, chat, and agent capabilities.
OpenAI Codex
OpenAI's cloud and CLI coding agent that can work on tasks in an isolated sandboxed environment.
Prompts to pair with this
Write clear commit messages and a clean PR description from a diff
Turns a raw git diff into properly scoped conventional commit messages and a PR description that explains why the change was made, not just what changed.
Copy promptreactRefactor a messy React component into clean, reusable pieces
Guides an AI to safely refactor a large, tangled React component into smaller composable pieces while preserving exact behavior.
Copy prompttestingGenerate a thorough unit test suite for existing code
Generates a unit test suite that actually covers edge cases and failure paths for existing code, instead of only testing the happy path.
Copy promptRelated tutorials
Git Basics for AI-Assisted Coding
Git isn't optional once an AI tool is editing your code for you — it's the only reliable way to review, commit and roll back changes.
BeginnerHow to Debug AI-Generated Code
A repeatable method for tracking down bugs in AI-generated code — reproduce, isolate, prompt with real context, and verify with a test.
IntermediateGetting Started with Cursor
Set up Cursor, configure a .cursorrules file, and learn the inline Cmd+K and chat workflows that make it useful day to day.
BeginnerReady to build the next one?
Browse the full tutorial library or grab a ready-made prompt for your next step.