From 599bba5317f0ecd82360aba7af34ea92f893b837 Mon Sep 17 00:00:00 2001 From: Shayan Rais Date: Thu, 12 Feb 2026 17:02:47 +0500 Subject: [PATCH] added presentation --- presentation/index.html | 1589 +++++++++++++++++++++++++++++++++++++++ 1 file changed, 1589 insertions(+) create mode 100644 presentation/index.html diff --git a/presentation/index.html b/presentation/index.html new file mode 100644 index 0000000..7406767 --- /dev/null +++ b/presentation/index.html @@ -0,0 +1,1589 @@ + + + + + + Claude Code — Complete Onboarding Guide + + + +
+ + +
+ +

Claude Code

+

Complete Onboarding Guide for Developers

+

From First Prompt to Production Workflows

+
+ + +
+

What You'll Learn

+
+

Goal

+

Go beyond vibe coding. Learn to use Claude Code as a professional tool — from basic prompting to custom agents and team workflows.

+
+
+
Getting Started
+
Beyond Vibe Coding
+
Essential Commands
+
Workflows
+
CLAUDE.md & Memory
+
Skills
+
Agents
+
Customization
+
Tips & Next Steps
+
+
+ + +
+

Installing Claude Code

+
+

Prerequisite

+

Homebrew must be installed on your Mac.

+
+
+

Install via Homebrew

+

Run this in your terminal:

+
brew install claude-code
+
+

Verify Installation

+
claude --version
+

Update Later

+
brew upgrade claude-code
+

Run /doctor anytime to check your installation health.

+
+ + +
+

Login Options

+

Two ways to authenticate with Claude Code:

+
+
+

Option A: Subscription (claude.ai)

+

Use your Claude Pro/Team/Enterprise subscription.

+
claude +# Select "Claude.ai" at the login prompt +# Opens browser for OAuth
+

Best for: Individual developers, teams with existing subscriptions

+
+
+

Option B: API Key

+

Use an Anthropic API key (pay per token).

+
export ANTHROPIC_API_KEY=sk-ant-... +claude
+

Best for: CI/CD, automation, pay-as-you-go usage

+
+
+
+ + +
+

Your First Session

+
+

Start Claude Code

+

Navigate to your project and run:

+
cd ~/my-project +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.

+
+ + +
+

The Interface

+
╭──────────────────────────────────────╮ +│ Claude Code v2.1.33 +│ Model: claude-opus-4-6 +│ Project: ~/my-project +╰──────────────────────────────────────╯ + +> 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
+
+
+ + +
+ +

Beyond Vibe Coding

+

Effective prompting that produces real, production-quality results — not AI slop.

+
+ + +
+

Your First Prompt

+
+

Try This

+

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
+
+
+ + +
+

Good vs Bad Prompts

+

The difference between vibe coding and professional usage:

+
+
+

❌ 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.

+
+
+

✅ 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.

+
+
+
+ + +
+

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
+
+

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
+
+
+ + +
+

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

+
+

Key Concept

+

Claude has a context window — a limit on how much conversation it can remember. Think of it as short-term memory.

+
+

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

+
+
+

Project Setup

+

/init — Create CLAUDE.md

+

/memory — Edit memory

+

/config — Settings

+

/doctor — Diagnostics

+
+
+
+ + +
+

/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
+
🏎️
Haiku 4.5Fastest — simple tasks, file reads, quick questions
+
+
+

Keyboard Shortcut

+

Press Option+P (Mac) or Alt+P to quickly switch models.

+
+
+ + +
+

/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
+
+
+

Boris Cherny's Preference

+

The creator of Claude Code uses High for everything.

+
+
+ + +
+

/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.

+
+

Use fast mode when you need quick responses and don't need deep reasoning. Toggle it off for complex tasks.

+
+ + +
+

/plan — Plan Before Code

+
+

Try This

+
> /plan +> Add user authentication with JWT tokens
+
+
+

What It Does

+

Enters read-only plan mode where Claude explores the codebase and proposes an approach — without making any changes.

+
+

Why Plan First?

+
+
🗺️
See the full pictureClaude explores before committing to an approach
+
✅
Approve before changesReview the plan and give the green light
+
💰
Save tokens and timeCatch wrong approaches before Claude writes code
+
+
+ + +
+

/compact — Manage Context

+
+

Try This

+
> /compact +# Or with focus instructions: +> /compact focus on the authentication changes
+
+
+

What It Does

+

Compresses the conversation history to free up context window space. Claude summarizes everything so far and continues from that summary.

+
+
+

Best Practice

+

Run /compact manually at ~50% context usage. Don't wait until it auto-compacts — you lose control over what gets preserved.

+
+
+ + +
+

/context & /cost

+
+
+

/context — Visualize Usage

+
> /context
+

Shows a colored grid of your context window — how much is used, what's taking space. Use this to decide when to /compact.

+
+
+

/cost — Track Spending

+
> /cost
+

Shows token usage and cost for the current session. Useful for monitoring API spending when using an API key.

+
+
+
+ + +
+

/clear & /rewind

+
+
+

/clear — Fresh Start

+
> /clear
+

Clears conversation history completely. Use when switching to a completely different task.

+
+
+

/rewind — Go Back

+
> /rewind
+

Rewinds conversation and/or code to an earlier point. Undo Claude's changes if they went wrong.

+
+
+
+

When to Use Which

+

/clear = new topic entirely. /rewind = same topic, wrong turn. /compact = same topic, running 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.

+
+

Pro Tip

+

Use /rename my-feature to name sessions so they're easy to find later.

+
+
+ + +
+

/memory — Persistent Context

+
+

Try This

+
> /memory
+
+

Opens your CLAUDE.md memory files in an editor. Changes here persist across all sessions.

+

Three Scopes

+
+
🌍
User Memory (~/.claude/CLAUDE.md)Applies to all your projects — personal preferences
+
📁
Project Memory (.claude/CLAUDE.md)Shared with your team via git
+
🔒
Local Memory (.claude/CLAUDE.local.md)Personal, project-specific, git-ignored
+
+
+ + +
+

/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 response tone
+
🔔
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/ +Edit(*.ts) // Edit any TypeScript file + +// Deny patterns +Bash(rm -rf *) // Block destructive commands +Read(.env) // Block reading secrets
+
+

Pro Tip

+

Use /permissions with wildcard patterns instead of --dangerously-skip-permissions. Much safer.

+
+
+ + +
+

/sandbox — Sandboxing

+
+

Try This

+
> /sandbox
+
+
+

What It Does

+

Enables file and network isolation for bash commands. Claude runs commands in a restricted environment — safer, with fewer permission prompts.

+
+

Benefits

+
+
🛡️
SafetyCommands can't access files outside your project
+
⚡
Fewer PromptsSandboxed commands auto-approve, reducing interruptions
+
+
+ + +
+

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

+
+
+
+ + +
+ +

Workflows

+

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.

+
+
+

✅ 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.

+
+
+
+ + +
+

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.

+
+

Best Practice

+

Break subtasks small enough that each can be completed in under 50% context. Commit after each subtask.

+
+
+ + +
+

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
+
+
+

Important

+

Commit often — as soon as a task is completed. This gives you clean rollback points.

+
+
+ + +
+

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
+
+
+ + +
+

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?

+
+

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
+
📐
Coding conventionsStyle guide, patterns to follow
+
🏗️
Key componentsImportant files, directory structure
+
⚠️
Critical rulesThings Claude must always or never do
+
+
+ + +
+

Creating CLAUDE.md

+
+

Try This

+
> /init
+
+

Claude scans your project and generates a CLAUDE.md with:

+
# CLAUDE.md + +## Project Overview +A Node.js REST API for managing user accounts... + +## Key Components +- src/routes/ — API endpoints +- src/models/ — Database models +- src/middleware/ — Auth and validation + +## Development Commands +- npm run dev — Start development server +- npm test — Run test suite + +## Coding Conventions +- Use TypeScript strict mode +- Follow existing error handling patterns in src/utils/errors.ts
+
+ + +
+

What to Include in CLAUDE.md

+
+
+

✅ Include

+

Project architecture overview

+

Build and test commands

+

Key file locations

+

Coding conventions

+

Common patterns to follow

+

Critical do's and don'ts

+
+
+

❌ Avoid

+

Entire API documentation

+

Long code examples

+

Secrets or API keys

+

Information that changes often

+

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.

+
+

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
+
+
+ + +
+

/memory Command

+
+

Try This

+
> /memory
+
+

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 +--- +globs: ["src/**/*.test.ts", "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.

+
+ + +
+

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
+
+
+ + +
+ +

Skills

+

Reusable knowledge and workflows that Claude loads on-demand — like giving it a manual.

+
+ + +
+

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.

+
+

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
+
+
+ + +
+

Skill Directory Structure

+
# Skills live in .claude/skills/ +.claude/ + skills/ + weather-fetcher/ + SKILL.md # Main skill file (required) + examples.md # Supporting file (optional) + weather-transformer/ + SKILL.md + api-conventions/ + SKILL.md + error-patterns.md
+
+

Key Rule

+

Each skill lives in its own directory under .claude/skills/. The SKILL.md file is the entry point.

+
+
+ + +
+

SKILL.md Frontmatter

+
# .claude/skills/weather-fetcher/SKILL.md +--- +name: weather-fetcher +description: Fetch weather data from wttr.in API +--- + +Fetch the current temperature for a city using: + + curl -s "wttr.in/{city}?format=%t" + +Return only the temperature value in Celsius.
+

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
+
+
+ + +
+

Creating Your First Skill

+
+

Try This

+
> 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.

+
+
+ + +
+

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: +skills: + - weather-fetcher + - weather-transformer
+

Skills preloaded into agents are available from the start — no manual invocation needed.

+
+ + +
+

Skills Summary

+
+
+

What They Are

+

Markdown files with domain knowledge

+

Live in .claude/skills/

+

Have SKILL.md + optional supporting files

+
+
+

How to Use

+

/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.

+
+
+ + +
+ +

Agents

+

Custom agents with their own tools, skills, and personality — from simple helpers to complex workflows.

+
+ + +
+

What Are Agents?

+
+

Key Concept

+

Agents are markdown files in .claude/agents/ that define a custom Claude persona with its own tools, model, skills, and behavior.

+
+

Two Ways to Use Agents

+
+
+

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
+
+
+

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" +)
+
+
+
+ + +
+

Agent Frontmatter

+
# .claude/agents/code-reviewer.md +--- +name: code-reviewer +description: Reviews code for quality and best practices +tools: Read, Grep, Glob +model: sonnet +color: green +skills: + - code-review +memory: user +--- + +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.

+
+
+ + +
+

Agent Tools & Model

+

Restricting Tools

+
# Read-only agent — can't modify anything +tools: Read, Grep, Glob + +# Full access agent +tools: Read, Write, Edit, Bash, WebFetch + +# Research-only agent +tools: Read, Grep, Glob, WebSearch, WebFetch
+

Choosing a Model

+
+
🧠
opusComplex reasoning, architecture decisions
+
⚡
sonnetGood balance of speed and capability
+
🏎️
haikuFast, cheap — great for simple, focused tasks
+
+
+ + +
+

Agents with Preloaded Skills

+
+

Key Pattern

+

Skills provide static knowledge (what to do). Agents provide execution context (how to do it, with which tools). Together, they're powerful.

+
+
# Agent with multiple skills preloaded +--- +name: api-developer +tools: Read, Write, Edit, Bash +model: sonnet +skills: + - api-conventions # How we structure APIs + - error-handling # Error patterns to follow + - testing-patterns # How to write tests +--- + +Build API endpoints following the preloaded conventions.
+

The agent gets all three skills injected at startup — it already knows your team's patterns.

+
+ + +
+

Setting a Default Agent

+
+

Via settings.json

+
// .claude/settings.json +{ + "agent": "api-developer" +}
+
+

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.

+
+
+ + +
+

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.

+
+
# Claude spawns a subagent automatically or you can ask: +> Use the code-reviewer agent to review src/api/users.ts + +# Claude uses the Task tool internally: +Task( + subagent_type="code-reviewer", + prompt="Review src/api/users.ts for quality" +)
+

Built-in Subagent Types

+

+ Explore + Plan + Bash + Your Custom Agents +

+
+ + +
+

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) │ +└─────────────────────────────────────────────┘
+
+

Why It Works

+

Commands = entry point. Agents = orchestration. Skills = domain knowledge. Clean separation, maximum reusability.

+
+
+ + +
+

Agent Memory

+
+

Key Feature

+

Agents can learn across sessions. Add memory: user to the frontmatter and the agent builds its own persistent knowledge store.

+
+
# Agent remembers patterns it discovers +~/.claude/agent-memory/code-reviewer/ + MEMORY.md # First 200 lines auto-loaded + react-patterns.md # Topic-specific notes + security-checklist.md # Learned over time
+

Memory Scopes

+

+ user — cross-project + project — team-shared + local — personal +

+
+ + +
+

Agents Summary

+
+
+

Creating Agents

+

Drop .md files in .claude/agents/

+

Set name, tools, model, skills, memory

+

Use /agents to manage interactively

+
+
+

Using Agents

+

Main agent: "agent" in settings.json

+

Subagent: Task tool spawns it

+

CLI: --agent name

+
+
+

Best Practices

+

Feature-specific agents, not generic ones

+

Preload skills for domain knowledge

+

Use haiku model for simple focused tasks

+
+
+

Architecture

+

Command → Agent → Skills

+

Progressive disclosure of knowledge

+

Single execution context per agent

+
+
+
+ + +
+ +

Customization

+

37 settings and 84 environment variables — make Claude Code truly yours.

+
+ + +
+

settings.json Overview

+
+

Settings Hierarchy

+

Settings cascade from most specific to least specific. Higher priority wins.

+
+
# Priority order (highest to lowest): +1. Command line flags # --model opus +2. .claude/settings.local.json # Personal, git-ignored +3. .claude/settings.json # Team-shared, committed +4. ~/.claude/settings.json # Global personal +5. managed-settings.json # Organization policies
+
+

Pro Tip

+

Check your team's .claude/settings.json into git so everyone gets the same experience.

+
+
+ + +
+

Spinner Verbs

+

Customize the loading messages that appear while Claude thinks:

+
// .claude/settings.json +{ + "spinnerVerbs": { + "mode": "replace", + "verbs": [ + "Cooking", + "Brewing", + "Crafting", + "Conjuring", + "Manifesting" + ] + } +}
+

Set mode to "append" to add your verbs to the defaults, or "replace" to use only yours.

+
+

Team Fun

+

Commit your spinner verbs in .claude/settings.json so the whole team sees them.

+
+
+ + +
+

Status Line

+

A custom info bar below the composer showing model, context, cost, git branch, etc.

+
+

Quick Setup

+
> /statusline
+
+

Claude generates a status line script based on your shell config.

+

Manual Configuration

+
// .claude/settings.json +{ + "statusLine": { + "type": "command", + "command": "git branch --show-current 2>/dev/null" + } +}
+

Every team member can have a different status line — customize it in your personal settings.local.json.

+
+ + +
+

Output Styles

+
+

Set via /config

+
> /config +# Navigate to Output Style
+
+
+
📖
ExplanatoryClaude explains code patterns and frameworks as it works — great for learning a new codebase
+
🎓
LearningClaude coaches you through making changes yourself — teaches rather than does
+
✏️
CustomDefine your own output style to adjust Claude's voice and format
+
+
+

Recommendation

+

Use Explanatory when you're new to a codebase. Switch to default once you're comfortable.

+
+
+ + +
+

Keybindings

+
+

Customize Keys

+
> /keybindings
+
+

Every key binding in Claude Code is customizable. Settings live reload — see changes immediately.

+

Default Shortcuts Worth Knowing

+
+
+

Navigation

+

Option+P — Switch model

+

Ctrl+L — Clear screen

+

Esc Esc — Rewind

+
+
+

Editing

+

Ctrl+G — Open in editor

+

Ctrl+V — Paste image

+

Shift+Tab — Toggle permissions

+
+
+
+ + +
+

Terminal Setup & Vim Mode

+
+
+

/terminal-setup

+
> /terminal-setup
+

Enables Shift+Enter for newlines in IDE terminals, Apple Terminal, Warp, and Alacritty.

+

Without this, you need \ + Enter for multiline.

+
+
+

/vim

+
> /vim
+

Enables vim-style editing mode in the Claude Code prompt.

+

Normal mode, insert mode, visual mode — all the vim motions you know.

+
+
+
+ + +
+

Hooks Overview

+
+

What Are Hooks?

+

Custom scripts that run at specific moments in Claude's lifecycle — deterministic, outside the agentic loop.

+
+

Common Hook Events

+
+
🟢
SessionStartLoad context, set environment when Claude starts
+
🔧
PreToolUseValidate or block commands before they run
+
✅
PostToolUseAuto-format code after edits, run linters
+
🛑
StopCheck if tasks are complete before Claude stops
+
+

Claude Code supports 15 hook events. Five of them can block execution (exit code 2).

+
+ + +
+

Plugins & Marketplaces

+
+

Install a Plugin

+
> /plugin
+
+

Plugins bundle skills, agents, hooks, MCPs, and LSPs into installable packages.

+

What You Can Install

+
+
📦
Language Server ProtocolsAvailable for every major language — real-time diagnostics
+
🔌
MCP ServersConnect to databases, APIs, external tools
+
🧠
Skills & AgentsPre-built workflows from the community
+
+
+

Team Marketplaces

+

Create your own marketplace for your company. Add it to settings.json so teammates auto-discover it.

+
+
+ + +
+

MCP Servers

+
+

What is MCP?

+

Model Context Protocol — a standard for connecting Claude to external tools, databases, and APIs.

+
+
+

Manage MCP Servers

+
> /mcp
+
+

Popular MCP Servers

+
+
🌐
PlaywrightBrowser automation — Claude controls a real browser
+
🔍
Chrome DevToolsAccess browser console and network logs
+
💾
MemoryPersistent key-value storage for Claude
+
+
+ + +
+

Customization Summary

+
+
+

Quick Wins

+

spinnerVerbs — Fun loading messages

+

/statusline — Info bar

+

/config → Output Style

+

/keybindings — Custom keys

+
+
+

Power Features

+

Hooks — Custom lifecycle scripts

+

Plugins — Installable packages

+

MCP Servers — External tools

+

Sandbox — Security isolation

+
+
+
+

Boris Cherny's Advice

+

"Claude Code works great out of the box, but when you do customize, check your settings.json into git so your team can benefit too."

+
+
+ + +
+ +

Tips & Next Steps

+

Practical advice from experience and the creator of Claude Code.

+
+ + +
+

Debugging Tips

+
+
🩺
Run /doctorFirst thing to try when something isn't working
+
🖥️
Background tasks for logsAsk Claude to run the server as a background task so you can see logs while working
+
🌐
Browser MCPs for console logsUse Playwright, Chrome DevTools, or Claude in Chrome to let Claude see browser console
+
📸
Screenshots for UI issuesPaste screenshots directly — Ctrl+V. Worth a thousand words.
+
+
+ + +
+

The Golden Rules

+
+
1️⃣
Always start with plan modeFor any non-trivial task. Review the plan before Claude writes code.
+
2️⃣
Keep CLAUDE.md under 150 linesLonger instructions get diluted. Use skills and rules for detail.
+
3️⃣
Manual /compact at ~50%Don't wait for auto-compact. Stay in control of what's preserved.
+
4️⃣
Commit after each subtaskSmall, frequent commits. Clean rollback points.
+
5️⃣
One task at a timeSmall, focused requests get better results than mega-prompts.
+
6️⃣
Be specific about files"Fix the null check in src/api/users.ts line 42" not "fix the bug".
+
+
+ + +
+

Resources

+
+
📖
Claude Code Docscode.claude.com/docs/en
+
💡
Boris Cherny's 12 Tipsreports/claude-boris-tips-feb-26.md — customization tips from the creator
+
🏗️
This RepositoryWorking examples of skills, agents, hooks, and the Command → Agent → Skills pattern
+
🔧
Claude Code Voice Hooksgithub.com/shanraisshan/claude-code-voice-hooks — audio feedback for all 15 hooks
+
📋
Commands Referencereports/claude-commands.md — all slash commands and keyboard shortcuts
+
⚙️
Settings Referencereports/claude-settings.md — all 37 settings and 84 environment variables
+
+
+ + +
+

Your Next Steps

+
+
1️⃣
Install & LoginGet Claude Code running on your machine today
+
2️⃣
Run /init on your projectCreate a CLAUDE.md — give Claude context about your codebase
+
3️⃣
Use plan mode for your first real taskPick a bug or small feature and work through it with planning
+
4️⃣
Set up /permissionsPre-approve safe commands to reduce interruptions
+
5️⃣
Create your first skillDocument a workflow your team repeats and make it a skill
+
6️⃣
Explore customizationTry output styles, status line, spinner verbs — make it yours
+
+
+ + +
+ +

Thank You!

+

Questions?

+

github.com/shanraisshan/claude-code-best-practice

+
+ + + + +
+ + +
+
1 / 81
+
← → or Space to navigate
+ + + +