diff --git a/.claude/agents/presentation-curator.md b/.claude/agents/presentation-curator.md
new file mode 100644
index 0000000..1184135
--- /dev/null
+++ b/.claude/agents/presentation-curator.md
@@ -0,0 +1,98 @@
+---
+name: presentation-curator
+description: PROACTIVELY use this agent whenever the user wants to update, modify, or fix the presentation slides, structure, styling, or weights
+tools: Read, Write, Edit, Grep, Glob
+model: sonnet
+color: magenta
+skills:
+ - presentation/vibe-to-agentic-framework
+ - presentation/presentation-structure
+ - presentation/presentation-styling
+---
+
+# Presentation Curator Agent
+
+You are a specialized agent for modifying the presentation at `presentation/index.html`.
+
+## Your Task
+
+Apply the requested changes to the presentation while maintaining structural integrity.
+
+## Workflow
+
+### Step 1: Understand Current State (presentation-structure skill)
+
+Follow the presentation-structure skill to understand:
+- The slide format (`data-slide` and `data-weight` attributes)
+- The journey bar system and weight requirements
+- The section structure (Parts 0-6 + Appendix)
+- How slide numbering works
+
+### Step 2: Apply Changes
+
+Based on the request:
+- **Content changes**: Edit slide HTML within existing `
` elements
+- **New slides**: Insert new slide divs with correct `data-slide` numbering
+- **Reorder**: Move slide divs and renumber all `data-slide` attributes sequentially
+- **Weight changes**: Update `data-weight` attributes ensuring they sum to 100%
+- **Styling changes**: Update CSS within the `
+
+ Agentic
+
+ Vibe
+ 0%
+
+
+
+
+
@@ -83,32 +105,88 @@
Claude Code
-
Complete Onboarding Guide for Developers
-
From First Prompt to Production Workflows
+
From Vibe Coding to Agentic Engineering
+
A journey through every best practice — with a real project.
-
+
-
What You'll Learn
+
The Example Project: TodoApp
-
Goal
-
Go beyond vibe coding. Learn to use Claude Code as a professional tool — from basic prompting to custom agents and team workflows.
+
Running Example
+
Every technique in this presentation is demonstrated on a TodoApp monorepo — a realistic full-stack project.
+
+
# TodoApp Monorepo Structure
+todoapp/
+ backend/# FastAPI (Python)
+ main.py # App entry + CORS
+ routes/
+ todos.py # CRUD: GET/POST/PUT/DELETE /api/todos
+ users.py # Auth: POST /api/login, /api/register
+ models/
+ todo.py # SQLAlchemy: Todo model
+ user.py # SQLAlchemy: User model
+ tests/
+ test_todos.py
+ frontend/# Next.js + Tailwind
+ components/
+ TodoList.tsx # Main list component
+ Sidebar.tsx # Navigation sidebar
+ pages/
+ index.tsx # Home page
+ todos.tsx # Todo list page
+ lib/
+ api.ts # API client (fetch wrapper)
+ CLAUDE.md # Project instructions
+
+
+
+
+
What is Vibe Coding?
+
This is where everyone starts. The question is: how fast can you move beyond it?
+
+
+
What Happens (0%)
+
> add a notes feature
+
Claude creates /api/notes with a random schema
+
Frontend gets a standalone page with no sidebar nav
+
Tests? None. Patterns? Ignored.
+
Every new feature is a coin flip. Code entropy increases with every prompt.
+
+
+
What We Want (100%)
+
Claude knows the TodoApp architecture
+
New routes follow existing patterns in routes/todos.py
+
Frontend uses Sidebar.tsx nav and Tailwind tokens
+
Tests written automatically matching test_todos.py style
+
Consistent, tested, production-quality code — every time.
+
+
+
+
+
+
+
The Journey
+
+
From 0% to 100%
+
Each section adds techniques that move you from vibe coding toward fully agentic engineering.
-
Getting Started
-
Beyond Vibe Coding
-
Essential Commands
-
Workflows
-
CLAUDE.md & Memory
-
Skills
-
Agents
-
Customization
-
Tips & Next Steps
+
1Prerequisites
+
2Better Prompting (0%→20%)
+
3Project Memory (20%→40%)
+
4Structured Workflows (40%→50%)
+
5Domain Knowledge (50%→65%)
+
6Agentic Engineering (65%→100%)
-
-
+
+
+
+
+
+
Installing Claude Code
Prerequisite
@@ -126,8 +204,8 @@
Run /doctor anytime to check your installation health.
-
-
+
+
Login Option A: Subscription
Use your Claude Pro or Max subscription via OAuth login:
claude
@@ -169,11 +247,10 @@
Weekly limits reset every 7 days. Usage is shared across Claude web, desktop, and Claude Code. Opus 4.6 requires a Max plan.
-
Best for: Individual developers, teams with existing subscriptions
-
-
+
+
Login Option B: API Key
Pay per token with an Anthropic API key — no weekly caps:
Token Pricing (per million tokens)
@@ -201,706 +278,270 @@
Haiku 4.5
-
$1 / MTok
-
$5 / MTok
-
200K
+
$0.80 / MTok
+
$4 / MTok
+
200K (1M beta)
-
Setup
-
-
-
Quick: Environment Variable
-
export ANTHROPIC_API_KEY=sk-ant-...
+
+
Setup
+
export ANTHROPIC_API_KEY=sk-ant-...
claude
-
-
-
Recommended: apiKeyHelper
-
# ~/.claude/settings.json
-{ "apiKeyHelper": "~/.claude/anthropic_key.sh" }
-
-# ~/.claude/anthropic_key.sh
-echo "sk-ant-........."
-
-# Make it executable
-chmod +x ~/.claude/anthropic_key.sh
-
-
Best for: CI/CD, automation, variable usage, full model access without subscription
+
Best for: Heavy usage, CI/CD pipelines, teams needing predictable billing
-
-
+
+
Your First Session
Start Claude Code
Navigate to your project and run:
-
cd ~/my-project
+
cd ~/todoapp
claude
What Happens
Claude Code scans your project structure, reads CLAUDE.md (if it exists), and opens an interactive REPL where you can type prompts.
-
Key Concept
-
Claude Code is project-aware. Always run it from your project's root directory so it understands your codebase.
+
This IS Vibe Coding
+
Right now, with no CLAUDE.md, no skills, no agents — you're at 0%. Claude will guess at everything. That's okay. We'll fix it step by step.
+-----------------------------------------+
+|Claude Code v2.1.33
+| Model: claude-opus-4-6
+| Project: ~/todoapp
++-----------------------------------------+> Type your prompt here...
Quick Reference
-
⌨️
EnterSubmit your prompt
-
↩️
Shift+Enter or \New line (multiline input)
-
🛑
Ctrl+CCancel current generation
-
🚪
Ctrl+D or /exitExit Claude Code
+
⌨
EnterSubmit your prompt
+
↵
Shift+Enter or \New line (multiline input)
+
■
Ctrl+CCancel current generation
+
▶
Ctrl+D or /exitExit Claude Code
-
-
+
+
+
-
Beyond Vibe Coding
-
Effective prompting that produces real, production-quality results — not AI slop.
+
+
+
Part 2
+
Better Prompting
+
Journey: 0% — effective prompting that produces real, production-quality results.
-
-
+
+
Your First Prompt
Try This
-
Start simple — ask Claude to understand your project:
+
Start simple — ask Claude to understand your project:
> Read the README.md and give me a summary of this project
Claude will use the Read tool to open the file, then summarize it. You'll see the tool call in the output.
What Just Happened?
-
1️⃣
Claude read your promptUnderstood you want a summary
-
2️⃣
Used the Read toolOpened README.md from your project
-
3️⃣
Responded with a summaryBased on actual file contents, not guessing
+
1️⃣
Claude read your promptUnderstood you want a summary
+
2️⃣
Used the Read toolOpened README.md from your project
+
3️⃣
Responded with a summaryBased on actual file contents, not guessing
-
-
+
+
Good vs Bad Prompts
-
The difference between vibe coding and professional usage:
+
The difference between vibe coding and professional usage — shown on our TodoApp:
-
❌ Vibe Coding
-
make it work
-
fix the bug
-
add a login page
-
refactor everything
-
Vague, no context, no constraints. Claude guesses — and often guesses wrong.
+
Vibe Coding
+
> add a notes feature
+
Claude creates a random /api/notes endpoint with a new schema that doesn't match models/todo.py. Frontend page has no sidebar nav.
+
Vague, no context, no constraints.
-
✅ Professional
-
The /api/users endpoint returns 500 when email is null. Add validation in src/routes/users.ts
-
Add JWT auth middleware to the Express routes in src/middleware/. Follow the existing pattern in auth.ts
-
Specific file, specific problem, specific approach.
+
Professional
+
> In backend/routes/todos.py, add a
+ PUT /api/todos/{id}/complete endpoint.
+ Follow the existing route pattern and
+ update the Todo model's is_completed field.
+ Add a test in tests/test_todos.py.
+
Specific file, specific endpoint, specific pattern.
-
-
+
+
Providing Context
Key Rule
The more context you give, the better Claude performs. Use @ to reference files directly in your prompt.
-
Try This
-
> Look at @src/api/routes.ts and @src/models/user.ts
- Add input validation for the create user endpoint
+
TodoApp Example
+
> Look at @backend/routes/todos.py and @backend/models/todo.py
+ Add a priority field to the Todo model and update
+ the create endpoint to accept it.
Context Tips
-
📄
@file/pathReference specific files for Claude to read
-
📸
Paste screenshotsCtrl+V to paste images of errors or UI
-
📋
Paste error logsCopy the full error message into your prompt
+
📄
@file/pathReference specific files for Claude to read
+
📸
Paste screenshotsCtrl+V to paste images of errors or UI
+
📋
Paste error logsCopy the full error message into your prompt
-
-
-
How Claude Uses Tools
-
Claude Code doesn't just generate text — it takes actions using tools:
-
-
-
File Tools
-
Read — Read file contents
-
Edit — Modify existing files
-
Write — Create new files
-
Glob — Find files by pattern
-
Grep — Search file contents
-
-
-
Action Tools
-
Bash — Run shell commands
-
Task — Spawn subagents
-
WebFetch — Fetch URLs
-
WebSearch — Search the web
-
Skill — Invoke skills
-
-
-
-
Important
-
Claude asks for permission before running potentially dangerous commands. Always review what it's about to do.
-
-
-
-
-
-
File Operations
-
Reading Files
-
> Read the package.json file
-
Editing Files
-
> In src/utils/format.ts, change the date format from MM/DD to DD/MM
-
Creating Files
-
> Create a new test file for the user service at tests/user.test.ts
-
-
Pro Tip
-
Always tell Claude which file to edit. Don't say "fix the bug" — say "fix the null check in src/handlers/auth.ts line 42".
-
-
-
-
-
-
Bash Commands & Search
-
Running Commands
-
> Run the test suite: npm test
-> Check which port the server is using
-> Install express as a dependency
-
Searching the Codebase
-
> Find all files that import the UserService class
-> Search for any TODO comments in the src directory
-> Find where the API_KEY environment variable is used
-
-
Pro Tip
-
Use ! prefix for quick bash commands: !git status runs the command and shows output without Claude analyzing it.
-
-
-
-
-
-
Understanding the Context Window
+
+
+
Context Window & /compact
Key Concept
-
Claude has a context window — a limit on how much conversation it can remember. Think of it as short-term memory.
+
Claude has a context window — a limit on how much conversation it can remember. Every prompt, file read, and response fills it up.
-
What Fills Up Context
-
-
💬
Your promptsEvery message you type
-
📄
File contentsEvery file Claude reads gets added to context
-
🖥️
Command outputResults from bash commands and tool calls
-
🤖
Claude's responsesEverything Claude says back to you
-
-
-
When Context Fills Up
-
Claude auto-compacts (summarizes) old messages. Run /compact manually at ~50% to stay in control.
-
-
-
-
-
-
Prompting Best Practices
-
-
🎯
Be specific about files"In src/api/users.ts" not "in the user code"
-
🔍
Describe the problem, not just the fix"The API returns 500 when..." not "make it work"
-
📐
Reference existing patterns"Follow the pattern in auth.ts" gives Claude a template
-
🧩
One task at a timeSmall, focused requests get better results than mega-prompts
-
✅
Ask Claude to verify"Run the tests after making changes" catches errors early
-
📸
Provide screenshots for UI issuesA picture is worth a thousand words of description
-
-
-
-
-
-
-
Essential Commands
-
Slash commands that transform Claude Code from a chatbot into a power tool.
-
-
-
-
-
/help
-
-
Try This
-
> /help
-
-
Shows all available slash commands. This is your starting point when you forget a command.
-
Commands You'll Use Most
-
Daily Use
-
/model — Switch models
-
/plan — Plan before coding
-
/compact — Free up context
-
/cost — Check spending
+
What Fills Context
+
Your prompts and messages
+
Every file Claude reads
+
Bash command output
+
Claude's own responses
-
Project Setup
-
/init — Create CLAUDE.md
-
/memory — Edit memory
-
/config — Settings
-
/doctor — Diagnostics
+
/compact — The Fix
+
> /compact
+
Compresses conversation history into a summary. Claude continues from that summary.
-
-
-
-
-
/model — Switch Models
-
-
Try This
-
> /model
-
-
Opens the model picker. Use arrow keys to select:
-
-
🧠
Opus 4.6 (Default)Most capable — complex tasks, architecture, debugging
-
⚡
Sonnet 4.5Fast and capable — everyday coding, quick edits
Plan first, execute second. Professional workflows that prevent wasted effort.
-
-
-
-
-
Why Plan Before Code
-
❌ Without Planning
-
1. Ask Claude to add a feature
-
2. Claude writes code immediately
-
3. Wrong approach — redo everything
-
4. Context wasted, tokens burned
-
50% of context gone before the real work starts.
+
Without /plan
+
Claude writes code immediately
+
Wrong approach — redo everything
+
50% of context gone before real work starts
-
✅ With Planning
-
1. Enter plan mode
-
2. Claude explores and proposes approach
-
3. You review and approve
-
4. Claude executes the approved plan
-
Right approach from the start. Context preserved.
+
With /plan
+
Claude explores codebase read-only
+
Proposes approach for your approval
+
Right approach from the start
-
-
-
-
-
Plan Mode in Practice
-
-
Step by Step
-
# Step 1: Enter plan mode
-> /plan
-
-# Step 2: Describe what you want
-> Add pagination to the /api/products endpoint
-
-# Step 3: Claude explores and writes a plan
-# (reads files, checks patterns, proposes approach)
-
-# Step 4: Review the plan and approve it
-# Claude then executes the approved plan
-
Rule of Thumb
Always start with plan mode for any task that touches more than 2-3 files or involves architectural decisions.
-
-
-
Task Lists
-
For complex tasks, Claude creates a task list to track progress:
-
> Add user authentication with JWT, including:
- - Login endpoint
- - Register endpoint
- - Auth middleware
- - Token refresh
- - Tests for all endpoints
-
Claude breaks this into individual tasks and shows progress as it works through each one.
+
+
+
Plan Mode in Practice
+
+
Step by Step
+
# Step 1: Enter plan mode
+> /plan
+
+# Step 2: Describe what you want
+> Add pagination to the /api/todos endpoint
+
+# Step 3: Claude explores and writes a plan
+# (reads routes/todos.py, checks models, proposes approach)
+
+# Step 4: Review the plan and approve it
+# Claude then executes the approved plan
+
-
Best Practice
-
Break subtasks small enough that each can be completed in under 50% context. Commit after each subtask.
+
TodoApp Benefit
+
In plan mode, Claude discovers your existing SQLAlchemy pagination pattern before writing a single line — no reinventing the wheel.
-
-
-
The Commit Workflow
-
-
Ask Claude to Commit
-
> Commit these changes with a descriptive message
-
-
Claude will:
+
+
+
Prompting Best Practices
-
1️⃣
Run git status & diffReviews all staged and unstaged changes
-
2️⃣
Draft a commit messageFocuses on "why" not "what", following your repo's style
-
3️⃣
Stage and commitAdds specific files (not git add -A) and creates the commit
-
-
-
Important
-
Commit often — as soon as a task is completed. This gives you clean rollback points.
+
🎯
Be specific about files"In backend/routes/todos.py" not "in the backend code"
+
🔎
Describe the problem, not just the fix"The API returns 500 when..." not "make it work"
+
📐
Reference existing patterns"Follow the pattern in routes/todos.py" gives Claude a template
+
🧩
One task at a timeSmall, focused requests get better results than mega-prompts
+
✅
Ask Claude to verify"Run pytest after making changes" catches errors early
+
📸
Provide screenshots for UI issuesA picture is worth a thousand words of description
-
-
-
The PR Workflow
-
-
Ask Claude to Create a PR
-
> Create a pull request for these changes
-
-
Claude will:
-
-
1️⃣
Review all commits on the branchAnalyzes the full diff from base branch
-
2️⃣
Write PR title & descriptionSummary, test plan, and changes overview
-
3️⃣
Push and create PR via gh CLIUses GitHub CLI to create the pull request
-
+
+
+
+
+
+
+
Part 3
+
Project Memory
+
Journey: 20% — make Claude remember your project, conventions, and preferences.
-
-
-
Workflow Best Practices
-
-
🗺️
Always start with plan modeFor any non-trivial task
-
🧩
Break tasks into small piecesEach subtask should complete in under 50% context
-
💾
Commit after each subtaskClean rollback points, not one mega-commit
-
📦
Manual /compact at ~50%Don't wait for auto-compact
-
🤖
Vanilla Claude Code for small tasksSimple tasks don't need elaborate workflows
-
-
-
-
-
-
-
CLAUDE.md & Memory
-
Make Claude remember your project, conventions, and preferences across every session.
-
-
-
-
-
What is CLAUDE.md?
+
+
+
CLAUDE.md & /init
Key Concept
CLAUDE.md is a markdown file that Claude reads at the start of every session. It's your project's instruction manual for Claude.
-
Think of it like a README, but for Claude. It tells Claude:
-
-
📋
Project overviewWhat this project does, its architecture
Critical rulesThings Claude must always or never do
-
-
-
-
-
-
Creating CLAUDE.md
-
Try This
+
Create It
> /init
-
Claude scans your project and generates a CLAUDE.md with:
+
TodoApp CLAUDE.md
# CLAUDE.md
-## Project Overview
-A Node.js REST API for managing user accounts...
+## Project
+TodoApp monorepo: FastAPI backend + Next.js frontend.
-## Key Components
-- src/routes/ — API endpoints
-- src/models/ — Database models
-- src/middleware/ — Auth and validation
+## Structure
+- backend/routes/ — FastAPI route handlers
+- backend/models/ — SQLAlchemy models
+- frontend/components/ — React components
+- frontend/lib/api.ts — API client
-## Development Commands
-- npm run dev — Start development server
-- npm test — Run test suite
+## Commands
+- cd backend && uvicorn main:app --reload
+- cd frontend && npm run dev
+- cd backend && pytest
-## Coding Conventions
-- Use TypeScript strict mode
-- Follow existing error handling patterns in src/utils/errors.ts
+## Conventions
+- Backend: follow route patterns in routes/todos.py
+- Frontend: use Tailwind, add nav to Sidebar.tsx
+- Always add tests for new endpoints
-
-
+
+
What to Include in CLAUDE.md
-
✅ Include
+
Include
Project architecture overview
Build and test commands
Key file locations
@@ -909,7 +550,7 @@ A Node.js REST API for managing user accounts...
Critical do's and don'ts
-
❌ Avoid
+
Avoid
Entire API documentation
Long code examples
Secrets or API keys
@@ -917,173 +558,226 @@ A Node.js REST API for managing user accounts...
Anything over 150 lines total
-
-
-
-
-
Keep It Under 150 Lines
Critical Rule
-
CLAUDE.md should not exceed 150 lines. Longer files dilute the instructions — Claude may ignore parts of it.
+
Keep CLAUDE.md under 150 lines. Longer files dilute the instructions — Claude may ignore parts of it. Use Rules and Skills for detail.
+
+
+
+
+
Keep It Under 150 Lines
If You Need More Space
-
📄
Use RulesPut topic-specific instructions in .claude/rules/*.md files
-
📚
Use SkillsPut domain knowledge in .claude/skills/ — loaded on demand
-
🔗
Reference filesPoint to docs rather than inlining content
+
📄
Use RulesPut topic-specific instructions in .claude/rules/*.md files
+
📚
Use SkillsPut domain knowledge in .claude/skills/ — loaded on demand
+
🔗
Reference filesPoint to docs rather than inlining content
Opens all your CLAUDE.md files in an editor so you can add or modify instructions.
-
Memory Hierarchy
-
# Loaded in this order (all combined):
-~/.claude/CLAUDE.md # Global — all projects
-.claude/CLAUDE.md # Project — shared with team
-.claude/CLAUDE.local.md # Local — personal, git-ignored
-
Claude also learns automatically — it may add notes to a separate auto-memory file as you work.
-
-
-
-
+
+
Rules (.claude/rules/)
What Are Rules?
Modular, topic-specific instructions in individual markdown files. Unlike CLAUDE.md, rules can be scoped to specific paths.
-
# .claude/rules/testing.md
+
TodoApp Backend Testing Rule
+
# .claude/rules/backend-testing.md
---
-globs: ["src/**/*.test.ts", "tests/**"]
+globs: ["backend/tests/**"]
---
-When writing tests:
-- Use vitest, not jest
-- Follow AAA pattern (Arrange, Act, Assert)
-- Mock external dependencies
-
This rule only activates when Claude is working on test files — keeping context clean for other tasks.
+When writing tests for the backend:
+- Use pytest with the existing conftest.py fixtures
+- Follow the pattern in test_todos.py:
+ - Use TestClient from FastAPI
+ - Create test data with factory functions
+ - Assert status codes AND response body
+ - Clean up test database after each test
+- Name tests: test_{action}_{entity}_{scenario}
+- Always test both success and error cases
+
This rule only activates when Claude is working on test files — keeping context clean for other tasks.
-
-
-
Memory Best Practices
-
-
📏
CLAUDE.md under 150 linesBrief, focused, high-signal instructions
-
📂
Use rules for specificsPath-scoped rules in .claude/rules/ for targeted guidance
-
👥
Commit project CLAUDE.mdTeam shares project conventions via git
-
🔒
Use .local.md for personal prefsGit-ignored, won't affect teammates
-
🔄
Review and trim regularlyOutdated instructions cause confusion
+
+
+
/memory & Memory Hierarchy
+
+
Try This
+
> /memory
+
+
Opens your CLAUDE.md memory files in an editor. Changes here persist across all sessions.
+
Three Scopes (loaded in order)
+
# All combined at session start:
+~/.claude/CLAUDE.md # Global — all projects
+.claude/CLAUDE.md # Project — shared with team via git
+.claude/CLAUDE.local.md # Local — personal, git-ignored
+
+
TodoApp Tip
+
Put your TodoApp CLAUDE.md in the repo root so the whole team shares it. Put personal preferences (editor, style) in CLAUDE.local.md.
-
-
-
-
Skills
-
Reusable knowledge and workflows that Claude loads on-demand — like giving it a manual.
+
+
+
Memory Best Practices
+
+
📏
CLAUDE.md under 150 linesBrief, focused, high-signal instructions
+
📂
Use rules for specificsPath-scoped rules in .claude/rules/ for targeted guidance
+
👥
Commit project CLAUDE.mdTeam shares project conventions via git
+
🔒
Use .local.md for personal prefsGit-ignored, won't affect teammates
+
🔄
Review and trim regularlyOutdated instructions cause confusion
+
-
-
+
+
+
+
+
+
+
Part 4
+
Structured Workflows
+
Journey: 40% — systematic approaches that prevent wasted effort.
+
+
+
+
+
Task Lists
+
For complex tasks, Claude creates a task list to track progress:
+
> Add user authentication to the TodoApp:
+ - POST /api/register endpoint
+ - POST /api/login endpoint
+ - JWT auth middleware
+ - Protect /api/todos endpoints
+ - Tests for all auth endpoints
+
Claude breaks this into individual tasks and shows progress as it works through each one.
+
+
Best Practice
+
Break subtasks small enough that each can be completed in under 50% context. Commit after each subtask.
+
+
+
+
+
+
/model — Model Selection
+
+
Try This
+
> /model
+
+
Opens the model picker. Match the model to the task:
+
+
🧠
Opus 4.6 (Default)Complex tasks — "Add auth to the TodoApp backend with JWT"
+
⚡
Sonnet 4.5Everyday coding — "Add a completed_at field to the Todo model"
+
🏎
Haiku 4.5Simple tasks — "Read backend/routes/todos.py and summarize the endpoints"
+
+
+
Pro Tip
+
Use Option+P (Mac) or Alt+P to quickly switch models. Use /fast for faster Opus output on non-complex tasks.
+
+
+
+
+
+
Workflow Best Practices
+
+
🗺
Always start with plan modeFor any non-trivial task
+
🧩
Break tasks into small piecesEach subtask should complete in under 50% context
+
💾
Commit after each subtaskClean rollback points, not one mega-commit
+
📦
Manual /compact at ~50%Don't wait for auto-compact
+
🤖
Vanilla Claude Code for small tasksSimple tasks don't need elaborate workflows
+
+
+
+
+
+
+
+
+
+
Part 5
+
Domain Knowledge
+
Journey: 50% — reusable knowledge that Claude loads on-demand.
+
+
+
+
What Are Skills?
Key Concept
-
Skills are markdown files that contain domain knowledge — instructions, patterns, or workflows that Claude can load when needed. Think of them as micro-manuals.
+
Skills are markdown files that contain domain knowledge — instructions, patterns, or workflows that Claude can load when needed. Think of them as micro-manuals.
Why Skills?
-
📚
Progressive DisclosureKnowledge loaded only when relevant — doesn't bloat every session
-
♻️
ReusableSame skill works across agents and workflows
-
👥
ShareableCommit to git — your whole team benefits
+
📚
Progressive DisclosureKnowledge loaded only when relevant — doesn't bloat every session
+
♻
ReusableSame skill works across agents and workflows
Each skill lives in its own directory under .claude/skills/. The SKILL.md file is the entry point.
+
Skills vs CLAUDE.md
+
CLAUDE.md = always loaded, every session. Skills = loaded on-demand, when relevant. Use skills for knowledge that's only needed sometimes.
-
-
-
SKILL.md Frontmatter
-
# .claude/skills/weather-fetcher/SKILL.md
+
+
+
Creating Skills: TodoApp Frontend
+
Frontend Conventions Skill
+
# .claude/skills/frontend-conventions/SKILL.md
---
-name: weather-fetcher
-description: Fetch weather data from wttr.in API
+name: frontend-conventions
+description: TodoApp frontend patterns and conventions
---
-Fetch the current temperature for a city using:
+# Frontend Conventions
- curl -s "wttr.in/{city}?format=%t"
+When creating or modifying frontend components:
-Return only the temperature value in Celsius.
+## Sidebar Navigation
+- Add new page routes to frontend/components/Sidebar.tsx
+- Use the existing NavLink pattern with icon + label
+- Keep alphabetical order in the nav list
+
+## Component Patterns
+- Use functional components with TypeScript
+- Import API functions from lib/api.ts
+- Follow TodoList.tsx as the reference component
+- Use Tailwind classes: bg-white, rounded-lg, shadow-sm
+
+## API Integration
+- All API calls go through lib/api.ts
+- Use the existing fetch wrapper with error handling
+- Base URL: process.env.NEXT_PUBLIC_API_URL
+
+
+
+
+
Skill Frontmatter & Invocation
Frontmatter Options
-
📛
nameSkill identifier (uses directory name if omitted)
-
📝
descriptionWhen to invoke — helps Claude auto-discover the skill
-
🤖
modelOverride which model runs the skill
-
🔧
allowed-toolsRestrict which tools the skill can use
+
📜
nameSkill identifier (uses directory name if omitted)
+
📝
descriptionWhen to invoke — helps Claude auto-discover the skill
+
🤖
modelOverride which model runs the skill
+
🔧
allowed-toolsRestrict which tools the skill can use
> Create a skill called "code-review" in .claude/skills/
- that tells Claude how to review code:
- - Check for security issues
- - Check for performance problems
- - Verify error handling
- - Suggest improvements
-
-
Claude will create:
-
.claude/skills/code-review/SKILL.md
-
-
Pro Tip
-
You can also create skills manually — they're just markdown files. No special tooling required.
-
-
+# 2. Auto: Claude discovers via description field
+# (happens when task matches description)
-
-
-
Invoking Skills
-
Manual Invocation (Slash Command)
-
> /weather-fetcher
-> /code-review
-
Type / and the skill name to invoke it. The skill's content gets loaded into Claude's context.
-
Auto-Invocation
-
If a skill has a description field, Claude can discover and load it automatically when relevant.
-
Preloaded into Agents
-
# In an agent's frontmatter:
+# 3. Preloaded: in an agent's frontmatterskills:
- - weather-fetcher
- - weather-transformer
-
Skills preloaded into agents are available from the start — no manual invocation needed.
+ - frontend-conventions
-
-
+
+
Skills Summary
@@ -1094,26 +788,34 @@ Return only the temperature value in Celsius.
How to Use
-
/skill-name — manual invoke
+
/skill-name — manual invoke
Auto-discovered by description
Preloaded into agents via skills:
-
-
Skills vs CLAUDE.md
-
CLAUDE.md = always loaded, every session. Skills = loaded on-demand, when relevant. Use skills for knowledge that's only needed sometimes.
Custom agents with their own tools, skills, and personality — from simple helpers to complex workflows.
+
+
+
Part 6
+
Agentic Engineering
+
Journey: 65% — custom agents that know your codebase and follow your patterns.
-
-
+
+
What Are Agents?
Key Concept
@@ -1123,27 +825,96 @@ Return only the temperature value in Celsius.
As Main Agent
-
Replaces the default Claude for your entire conversation.
-
# Set in settings.json
-"agent": "my-agent"
-
-# Or via CLI flag
-$ claude --agent my-agent
+
Replaces default Claude for your conversation.
+
$ claude --agent frontend-eng
As Subagent
-
Spawned by Claude in an isolated context via the Task tool.
-
# Claude spawns it:
-Task(
- subagent_type="my-agent"
- prompt="Review this PR"
+
Spawned in an isolated context via Task tool.
+
Task(
+ subagent_type="frontend-eng"
+ prompt="Add a settings page"
)
-
-
+
+
+
Frontend Engineer Agent
+
+
+
Without Agent
+
> add a settings page
+
Claude creates pages/settings.tsx with:
+
• Inline CSS (no Tailwind)
+
• Direct fetch calls (ignores api.ts)
+
• No sidebar nav entry
+
Standalone page that doesn't fit the app.
+
+
+
With Agent
+
Frontend agent already knows:
+
• Use Tailwind tokens from the design system
+
• Import API functions from lib/api.ts
+
• Add route to Sidebar.tsx
+
• Follow TodoList.tsx component pattern
+
Integrated page matching the app perfectly.
+
+
+
# .claude/agents/frontend-engineer.md
+---
+name: frontend-engineer
+description: Frontend development following TodoApp conventions
+tools: Read, Write, Edit, Bash, Glob, Grep
+model: sonnet
+skills:
+ - frontend-conventions
+---
+You are a frontend engineer for the TodoApp.
+Always add new pages to the Sidebar navigation.
+Use the existing API client in lib/api.ts.
+Follow TodoList.tsx as your reference component.
+
+
+
+
+
Backend Engineer Agent
+
+
+
Without Agent
+
> add a tags feature
+
Claude creates random endpoint structure
+
Different error handling than existing routes
+
No tests, no model validation
+
+
+
With Agent
+
Backend agent follows existing patterns:
+
• Route structure from routes/todos.py
+
• SQLAlchemy model like models/todo.py
+
• Tests matching test_todos.py style
+
• Pydantic schemas for validation
+
+
+
# .claude/agents/backend-engineer.md
+---
+name: backend-engineer
+description: Backend development following TodoApp patterns
+tools: Read, Write, Edit, Bash, Glob, Grep
+model: sonnet
+skills:
+ - backend-patterns
+---
+You are a backend engineer for the TodoApp.
+Follow the route patterns in routes/todos.py.
+Create SQLAlchemy models matching models/todo.py.
+Always add pytest tests for new endpoints.
+Use Pydantic schemas for request/response validation.
+
+
+
+
Agent Frontmatter
# .claude/agents/code-reviewer.md
---
@@ -1161,38 +932,18 @@ You are a code reviewer. Check for security issues,
performance problems, and suggest improvements.
Review your memory for patterns you've seen before.
Key Fields
-
tools — what the agent can do. skills — knowledge preloaded at startup. memory — persistent learning across sessions.
-
-
-
-
-
Example: The Weather Agent
-
This repository includes a working example of the Command → Agent → Skills pattern:
-
# .claude/agents/weather.md
----
-name: weather
-description: Fetch and transform weather data
-tools: Read, Write, WebFetch, Bash
-model: haiku
-color: cyan
-skills:
- - weather-fetcher
- - weather-transformer
----
-
-You are a weather agent. Use your preloaded skills
-to fetch weather data and apply transformations.
-
-
How It Works
-
The agent starts with both skills already loaded — it knows how to fetch weather and how to transform the data without being told.
+
+
🔧
toolsWhat the agent can do (Read, Write, Edit, Bash, etc.)
+
📚
skillsKnowledge preloaded at startup
+
🧠
memoryPersistent learning across sessions (user/project/local)
-
-
-
Agent Tools & Model
+
+
+
Agent Tools & Skills
Restricting Tools
-
# Read-only agent — can't modify anything
+
# Read-only agent — can't modify anythingtools: Read, Grep, Glob# Full access agent
@@ -1200,69 +951,32 @@ to fetch weather data and apply transformations.
Now every time you run claude in this project, you'll talk to the api-developer agent instead of default Claude.
-
Per-Session Override
-
$ claude --agent code-reviewer
-
-
Manage Agents
-
Run /agents to view, create, edit, or delete agents interactively.
+
Choosing a Model
+
+
🧠
opusComplex reasoning, architecture decisions
+
⚡
sonnetGood balance of speed and capability
+
🏎
haikuFast, cheap — great for simple, focused tasks
-
-
+
+
Subagents via Task Tool
Key Concept
-
Subagents run in an isolated context — separate from the main conversation. They do their work, return a summary, and their context is discarded.
+
Subagents run in an isolated context — separate from the main conversation. They do their work, return a summary, and their context is discarded.
# Claude spawns a subagent automatically or you can ask:
-> Use the code-reviewer agent to review src/api/users.ts
+> Use the frontend-engineer agent to add a settings page
# Claude uses the Task tool internally:
Task(
- subagent_type="code-reviewer",
- prompt="Review src/api/users.ts for quality"
+ subagent_type="frontend-engineer",
+ prompt="Add a user settings page to the TodoApp"
)
Built-in Subagent Types
@@ -1273,28 +987,86 @@ Task(
-
-
-
Command → Agent → Skills
+
+
+
Commands & Orchestration
+
Commands are the entry points for complex workflows — the Command → Agent → Skills pattern:
+
# .claude/commands/add-feature.md
+---
+description: Add a new feature to the TodoApp
+model: opus
+---
+
+# Add Feature Command
+
+1. Ask the user what feature to add (AskUserQuestion)
+2. Invoke the backend-engineer agent for API work:
+ - Task(subagent_type="backend-engineer", ...)
+3. Invoke the frontend-engineer agent for UI work:
+ - Task(subagent_type="frontend-engineer", ...)
+4. Run tests to verify: pytest + npm test
+5. Summarize what was built
+
+
Invoke It
+
Commands live in .claude/commands/. Users invoke them as slash commands: > /add-feature
+
+
+
+
+
+
Hooks & MCP Servers
+
+
+
Hooks
+
Custom scripts at specific moments in Claude's lifecycle:
+
PreToolUse — validate commands
+
PostToolUse — auto-format code
+
Stop — check task completion
+
SessionStart — load context
+
15 hook events, 5 can block execution.
+
+
+
MCP Servers
+
Connect Claude to external tools via Model Context Protocol:
+
Playwright — browser automation
+
Chrome DevTools — console logs
+
Databases — query data directly
+
> /mcp
+
+
+
+
+
+
+
Command → Agent → Skills
The full architecture pattern for complex workflows:
-
┌─────────────────────────────────────────────┐
-│/weather-orchestrator (Command) │
-│ Entry point — user invokes this │
-│ ↓ │
-│weather agent (Agent) │
-│ Orchestrates with preloaded skills │
-│ ↓ │
-│weather-fetcher + weather-transformer│
-│ (Skills — domain knowledge) │
-└─────────────────────────────────────────────┘
+
+-----------------------------------------------+
+|/add-feature (Command) |
+| Entry point — user invokes this |
+| | |
+| +----------+----------+ |
+| v v |
+|backend-engineerfrontend-engineer|
+| (Agent) (Agent) |
+| | | |
+|backend-patternsfrontend-conventions|
+| (Skill) (Skill) |
++-----------------------------------------------+
Your TodoApp now has: CLAUDE.md for project context, Rules for path-scoped conventions, Skills for domain knowledge, Agents for consistent execution, Commands for orchestrated workflows, Hooks for lifecycle automation, and MCP servers for external tools.
+
+
+
+
Agent Memory
Key Feature
@@ -1307,14 +1079,14 @@ Task(
security-checklist.md # Learned over time
Memory Scopes
- user — cross-project
- project — team-shared
- local — personal
+ user — cross-project
+ project — team-shared
+ local — personal
-
-
+
+
Agents Summary
@@ -1337,22 +1109,339 @@ Task(
Architecture
-
Command → Agent → Skills
+
Command → Agent → Skills
Progressive disclosure of knowledge
Single execution context per agent
-
-
+
+
+
-
Customization
-
37 settings and 84 environment variables — make Claude Code truly yours.
+
+
+
Appendix
+
Reference
+
Command references, workflows, settings, and customization options.
-
-
+
+
+
How Claude Uses Tools
+
Claude Code doesn't just generate text — it takes actions using tools:
+
+
+
File Tools
+
Read — Read file contents
+
Edit — Modify existing files
+
Write — Create new files
+
Glob — Find files by pattern
+
Grep — Search file contents
+
+
+
Action Tools
+
Bash — Run shell commands
+
Task — Spawn subagents
+
WebFetch — Fetch URLs
+
WebSearch — Search the web
+
Skill — Invoke skills
+
+
+
+
Important
+
Claude asks for permission before running potentially dangerous commands. Always review what it's about to do.
+
+
+
+
+
+
File Operations
+
Reading Files
+
> Read the package.json file
+
Editing Files
+
> In src/utils/format.ts, change the date format from MM/DD to DD/MM
+
Creating Files
+
> Create a new test file for the user service at tests/user.test.ts
+
+
Pro Tip
+
Always tell Claude which file to edit. Don't say "fix the bug" — say "fix the null check in src/handlers/auth.ts line 42".
+
+
+
+
+
+
Bash Commands & Search
+
Running Commands
+
> Run the test suite: npm test
+> Check which port the server is using
+> Install express as a dependency
+
Searching the Codebase
+
> Find all files that import the UserService class
+> Search for any TODO comments in the src directory
+> Find where the API_KEY environment variable is used
+
+
Pro Tip
+
Use ! prefix for quick bash commands: !git status runs the command and shows output without Claude analyzing it.
+
+
+
+
+
+
/help
+
+
Try This
+
> /help
+
+
Shows all available slash commands. This is your starting point when you forget a command.
+
+
+
Daily Use
+
/model — Switch models
+
/plan — Plan before coding
+
/compact — Free up context
+
/cost — Check spending
+
+
+
Project Setup
+
/init — Create CLAUDE.md
+
/memory — Edit memory
+
/config — Settings
+
/doctor — Diagnostics
+
+
+
+
+
+
+
/model — Effort Level
+
When Opus 4.6 is selected, you can adjust the effort level:
+
+
How to Set
+
Run /model, select Opus, then use ← → arrow keys to change effort.
+
+
+
🔥
High (Default)Full reasoning depth — complex architecture, tricky bugs, large refactors
+
⚖
MediumBalanced — everyday coding tasks
+
💨
LowMinimal reasoning — quick, simple tasks where speed matters
+
+
+
+
+
+
/fast — Faster Output
+
+
Try This
+
> /fast
+
+
+
What It Does
+
Toggles fast mode — same Opus 4.6 model with faster token output. It does NOT switch to a different model.
+
+
+
+
+
+
/context & /cost
+
+
+
/context — Visualize Usage
+
> /context
+
Shows a colored grid of your context window — how much is used, what's taking space.
+
+
+
/cost — Track Spending
+
> /cost
+
Shows token usage and cost for the current session.
+
+
+
+
+
+
+
/clear & /rewind
+
+
+
/clear — Fresh Start
+
> /clear
+
Clears conversation history completely. Use when switching tasks.
+
+
+
/rewind — Go Back
+
> /rewind
+
Rewinds conversation and/or code to an earlier point.
+
+
+
+
When to Use Which
+
/clear = new topic. /rewind = same topic, wrong turn. /compact = same topic, low on context.
+
+
+
+
+
+
/resume — Resume Sessions
+
+
Try This
+
# Resume most recent session
+$ claude --resume
+
+# Or from inside Claude Code:
+> /resume
+
+
Opens a session picker showing your recent conversations. Select one to continue where you left off.
+
+
+
+
+
/doctor — Diagnostics
+
+
Try This
+
> /doctor
+
+
Checks the health of your Claude Code installation:
+
+
✅
AuthenticationVerifies your login is valid
+
✅
ConfigurationChecks settings.json for errors
+
✅
PermissionsDetects unreachable permission rules
+
✅
UpdatesChecks if a newer version is available
+
+
+
+
+
+
/config — Configuration
+
+
Try This
+
> /config
+
+
Opens the interactive settings UI. Key things you can configure:
+
+
🎨
ThemeLight or dark mode
+
📝
Output StyleExplanatory, Learning, or Custom
+
🔔
NotificationsEnable desktop notifications
+
🔒
Permission ModeHow Claude asks for approval
+
+
+
+
+
+
/permissions — Tool Access Control
+
+
Try This
+
> /permissions
+
+
Manage what Claude can do without asking. Supports wildcard syntax:
+
// Allow patterns
+Bash(npm run *) // Any npm script
+Bash(git *) // All git commands
+Edit(src/**) // Edit any file in src/
+
+// Deny patterns
+Bash(rm -rf *) // Block destructive commands
+Read(.env) // Block reading secrets
+
+
+
+
+
/sandbox — Sandboxing
+
+
Try This
+
> /sandbox
+
+
+
What It Does
+
Enables file and network isolation for bash commands. Safer, with fewer permission prompts.
+
+
+
+
+
+
Commands Cheat Sheet
+
+
+
Session
+
/clear — Fresh start
+
/compact — Free context
+
/resume — Continue session
+
/rewind — Undo changes
+
+
+
Model & Mode
+
/model — Switch models
+
/fast — Toggle speed
+
/plan — Plan mode
+
/config — Settings
+
+
+
Project
+
/init — Create CLAUDE.md
+
/memory — Edit memory
+
/permissions — Tool access
+
/sandbox — Sandboxing
+
+
+
Info & Debug
+
/context — Context usage
+
/cost — Token spending
+
/doctor — Health check
+
/help — All commands
+
+
+
+
+
+
+
The Commit Workflow
+
+
Ask Claude to Commit
+
> Commit these changes with a descriptive message
+
+
Claude will:
+
+
1️⃣
Run git status & diffReviews all staged and unstaged changes
+
2️⃣
Draft a commit messageFocuses on "why" not "what", following your repo's style
+
3️⃣
Stage and commitAdds specific files (not git add -A) and creates the commit
+
+
+
+
+
+
The PR Workflow
+
+
Ask Claude to Create a PR
+
> Create a pull request for these changes
+
+
Claude will:
+
+
1️⃣
Review all commits on the branchAnalyzes the full diff from base branch
+
2️⃣
Write PR title & descriptionSummary, test plan, and changes overview
+
3️⃣
Push and create PR via gh CLIUses GitHub CLI to create the pull request
