Claude Code Tutorial: Get Productive in 30 Minutes (VN Dev 2026)

Claude Code is Anthropic's terminal-first AI coding CLI - a direct competitor to Cursor/Windsurf but with a different philosophy: no new IDE, run it inside your existing terminal. This tutorial walks through setup + 5 real workflows in 30 minutes.

What Makes Claude Code Different?

• Terminal-native: No IDE swap - run claude in a project folder
• Agent-first: Multi-step tasks run themselves, not tab autocomplete
• Claude 4.7 Opus default: Anthropic's strongest model
• MCP ecosystem: Connect Postgres, GitHub, Slack, Notion via one config
• Skill/agent customization: Build workflows for your project

Requirements

• macOS / Linux / WSL2
• Node 20+ or Bun 1.2+
• Anthropic Pro subscription ($20/mo) or API key

Step 1: Install (2 min)

npm install -g @anthropic-ai/claude-code
# or
bun install -g @anthropic-ai/claude-code

claude --version

Then:

cd ~/your-project
claude

First run asks for login (browser) or API key. Choose claude.ai login if you have Pro.

Step 2: Create CLAUDE.md (5 min)

CLAUDE.md is the context file Claude reads every session - explains the project so Claude doesn't guess.

# Project Name

Next.js 16 + Prisma + Supabase. Bilingual EN/VN.

## Session start
1. git log --oneline -5
2. Read task files, don't guess
3. Use bun, not npm

## Conventions
- Files: kebab-case
- Components: PascalCase
- Comments: English
- Chat reply: match user language

## Commands
bun dev       # port 3000
bun test
bun run build

50-150 lines is enough. Don't write long - Claude reads it every time.

Step 3: Workflow #1 - Explore a Codebase (5 min)

Scenario: Fresh clone, need to understand auth flow.

claude

> Explain the authentication flow in this repo.
  Find relevant files, read them, then summarize in 5 bullets.

Claude will Grep/Glob, read files, return a summary. No need to know file names first.

Step 4: Workflow #2 - Bug Fix (5 min)

Scenario: TypeScript errors across 3 files after schema change.

> bun run type-check is failing with 8 errors.
  Fix them all without changing business logic.
  Run type-check again after you're done.

Claude will (1) run the command, (2) read errors, (3) fix files, (4) verify by re-running.

Step 5: Workflow #3 - New Feature (10 min)

Scenario: Add bookmark button to blog post page.

> Add a bookmark feature for blog posts:
  - DB: Bookmark table (userId, articleId, createdAt)
  - API: POST/DELETE /api/bookmarks
  - UI: heart icon on BlogPostHeader, filled if saved
  - Auth required

  Read conventions from CLAUDE.md first. Plan, then code.

Tip: For complex tasks, ask for "plan before code" so you can review the approach.

Step 6: Workflow #4 - Code Review (3 min)

Use the code-reviewer agent to review the diff before commit:

> Review git diff --staged for security, performance,
  code style. Report concrete file:line issues.

If you have a custom agent at .claude/agents/code-reviewer.md, Claude uses it.

Step 7: Workflow #5 - MCP Integration (5 min)

MCP = Model Context Protocol, lets Claude Code query external tools.

Example: let Claude query your Supabase Postgres:

claude mcp add supabase npx @supabase/mcp-server-supabase \
  --env SUPABASE_URL=xxx \
  --env SUPABASE_SERVICE_ROLE_KEY=yyy

# In session:
> Count users signed up in the last 7 days from Supabase.

Other MCP servers: GitHub, Slack, Filesystem, Notion, Cloudflare. See docs.claude.com/mcp.

5 Advanced Tips

1. Use Skills for repeated workflows

Create .claude/skills/article-publish.md so Claude always follows your article pipeline.

2. Hooks to auto-format

.claude/settings.json with a PostToolUse hook → run prettier after every edit.

3. Parallel sessions

Open 2-3 terminal tabs, one task each. Unlike Cursor (1 session per project).

4. /compact on long chats

Long session → type /compact to have Claude summarize context and free tokens.

5. Subagents for parallel search

> Find all usages of function X + security review on file Y
  + i18n check for page Z. Run 3 subagents in parallel.

Claude Code vs Cursor - Which?

Use case	Winner
Solo dev, terminal-lover	Claude Code
Want UI polish, tab autocomplete	Cursor
Complex multi-step tasks	Claude Code
Pair programming with AI	Cursor
Agent + MCP workflows	Claude Code
Price	Claude Code ($20 via Claude Pro)

See: Cursor vs Windsurf 2026.

My Minimal Setup

~/.claude/
├── CLAUDE.md           # global rules
├── commands/           # custom slash commands
├── agents/             # custom subagents
└── skills/             # repeated workflows

~/project/
├── CLAUDE.md           # project rules
└── .claude/
    ├── commands/
    ├── agents/
    └── skills/

Cost & ROI

• Claude Pro $20/mo = covers Claude Code + web/mobile/desktop
• Or API pay-as-you-go (~$30-80/mo for active solo dev)
• Saves 10-15h/week on boilerplate + refactor
• ROI > 100x if you ship 20+h/week

Common Errors

1. "Command not found": Add npm global bin to PATH
2. Permission denied: sudo or install via nvm/bun user-local
3. Rate limit: Pro has 5-hour token limits - don't run 3 agents all day
4. Context overflow: Use /compact or split sessions
5. MCP server fail: Check env vars, debug with claude mcp list

Next Steps

1. Week 1: Use basics (ask code, fix bugs) - build habit
2. Week 2: Write CLAUDE.md for your 1-2 main projects
3. Week 3: Create 1-2 custom slash commands + agents
4. Week 4: MCP integration for database/GitHub
5. Month 2+: Shared skills across team

Conclusion

Claude Code is the only tool I use daily for coding. Terminal-first = zero context switch, agent-first = complex tasks solve themselves. Set it up in 30 minutes today - after a month you won't want to go back.

Claude Pro ($20/month) → includes Claude Code.

See also: Claude Pro Review 2026 · Top AI Coding Assistants for VN Devs.