From Zero to Agent Architect — A practical guide for the engineering team
Use → to reveal tips • ← to go back • ↓ next slide • ↑ previous slide
Four levels, from first install to fully autonomous agents.
Install, invoke, navigate, first prompts, basic config
Cost-effective usage, Git / PR flow, CLAUDE.md, tech-stack tips
Slash commands, hooks, MCP servers, skills, plugins
Sub-agents, multi-agent orchestration, SDK, CI/CD, scheduled tasks
Getting everyone on the same page — install, invoke, and understand the basics.
Three team members are on older macOS that may not support the native installer. Here are all options.
curl -fsSL https://claude.ai/install.sh | sh
brew install --cask claude-code
nvm to manage Node versions without system conflicts.
nvm install 20 && npm install -g @anthropic-ai/claude-code
claude --version to confirm. Then claude to start your first session. You'll be prompted to authenticate via your Anthropic account.
Different invocation methods for different situations.
claude in your terminal. Opens a chat session where you converse back and forth. Best for exploratory work.
claude -p "explain the auth middleware in src/middleware/auth.js" — sends a single prompt, prints the answer, and exits. Great for quick questions.
cat error.log | claude -p "what caused this crash?" — pipe any text into Claude for analysis. Perfect for logs, diffs, and outputs.
claude --resume picks up your last conversation. claude --resume SESSION_ID resumes a specific one. Use claude -n "feature-x" to name sessions for easy recall.
claude -p "run all tests and report failures" --allowedTools Bash,Read — use in scripts and CI pipelines with explicit tool permissions.
Cmd+Shift+P → Claude Code). Same power, inline in your editor. Selections can be sent directly to Claude.
claude --add-dir ../shared-lib adds sibling directories as context. claude --system-prompt "You are a Vue expert" sets a custom system prompt.
Commands you'll use every day inside a Claude Code session.
/compact focus on the API changes.
/effort low for fast, /effort high for thorough analysis.
CLAUDE.md file by analysing your project. Run this once per project.
Claude asks before it acts. Here's how to control that flow.
/permissions to see the current trust matrix. You can allow tools globally, per-project, or per-session.
claude --allowedTools "Bash(npm run *)" "Edit" "Read" — allow specific bash patterns. Keeps Claude productive without blanket trust.
claude --dangerously-skip-permissions exists for CI only. Never use in interactive development — it bypasses all safety prompts.
.claude/settings.json (project) and ~/.claude/settings.json (global). Check these into git (project-level) for team consistency.
Have Claude design the approach before writing a single line.
Cost-effective usage, Git mastery, CLAUDE.md, and tech-stack–specific workflows.
10 practices that will stretch your token budget dramatically.
GET /users/:id/orders endpoint to src/routes/users.ts that returns paginated results using the existing OrderService" beats "add an endpoint for orders."
/compact keep the API schema and test results — tells Claude what matters. Reduces context by 50-70%.
/model opus only for deep architectural analysis, complex debugging, or large refactors.
src/services/auth.js and fix the token refresh bug" instead of pasting 200 lines into the chat.
/effort low for simple renames, formatting. /effort high for security reviews, architecture. Match effort to task complexity.
claude -p "what does the --strict flag do in tsc?" — no session overhead, instant answer, minimal tokens.
processOrder() at line 42" is cheaper than "there's a bug somewhere in the order processing."
10 anti-patterns that silently burn through your allocation.
/compact with guidance. Auto-compact may drop important context.
Let Claude handle your routine git operations via the gh CLI.
"what's the git status? any uncommitted changes?" — Claude runs git status, git diff --stat and summarises.
"commit my changes with a good message following conventional commits" — Claude analyses the diff, writes a semantic commit message, and runs git commit.
"create a branch feat/user-orders from main and push it" — Claude handles checkout, branch creation, and push in one go.
"squash the last 3 commits into one with a clean message" — Claude handles the rebase non-interactively, preserving your changes.
"cherry-pick commit abc123 onto the release/2.1 branch" — Claude switches branches, cherry-picks, handles conflicts, and pushes.
"stash my current work, pull latest main, then pop the stash" — Claude handles the full flow and alerts you about conflicts.
From opening a PR to reviewing a colleague's code.
"create a PR to main with a description of what changed and a test plan" — Claude runs gh pr create with a well-structured title, summary, and test plan.
"review PR #142 — focus on security and error handling" — Claude uses gh pr diff 142, reads the changes, and provides inline-style feedback.
"read the review comments on PR #142 and fix them" — Claude fetches comments via gh api, makes fixes, commits, and pushes.
"show me all open PRs assigned to me and their CI status" — Claude runs gh pr list --assignee @me and gh pr checks.
"squash-merge PR #142 after checks pass" — Claude monitors checks with gh pr checks --watch and merges with gh pr merge --squash.
"why is the CI failing on PR #142?" — Claude runs gh run view, reads the logs, identifies the failure, and suggests a fix.
Your team's shared "instruction manual" for Claude, checked into git at the project root.
.editorconfig but for AI behaviour.
# Build & Test - Build: `npm run build` - Test all: `npm test` - Test single: `npm test -- --grep "test name"` - Lint: `npm run lint`
# Code Style - Use TypeScript strict mode - Prefer async/await over .then() chains - Use Zod for request validation, not manual checks - Error responses follow RFC 7807 (Problem Details)
# Architecture - Routes go in src/routes/, services in src/services/ - Every route must have a corresponding OpenAPI spec in api/ - Lambda handlers are in src/handlers/ — use claudia.js conventions - Never import from src/handlers/ in src/services/
# Git - Use Conventional Commits: feat|fix|chore|docs|refactor(scope): message - Always squash-merge PRs to main - Branch naming: feat/*, fix/*, chore/*
# Testing - Use Vitest for unit tests, Supertest for API integration tests - Every new endpoint needs at least: happy path, 400, 401, 404 tests - Mock external services using msw (Mock Service Worker) - Test files live next to source: foo.ts → foo.test.ts
Personal preferences at ~/.claude/CLAUDE.md — applies to every project.
CLAUDE.md at ~/.claude/CLAUDE.md. Applies across all projects. Great for coding style preferences, language, and personal workflow.
# Personal Preferences - I prefer concise explanations — skip the preamble - Always show the file path before code changes - When writing commit messages, include the ticket number from the branch name
# Environment - I use VSCode with Prettier (format on save) - After editing a file, no need to run formatters — it happens automatically - My terminal is iTerm2 with Zsh
# Communication - When unsure, ask before making changes - If a change touches more than 5 files, show me the plan first - Explain trade-offs when suggesting architectural decisions
# Tools - Use gh CLI for all GitHub operations - Prefer npx over global installs - Use jq for JSON processing in bash
# Security - Never commit .env files or secrets - Always check for hardcoded credentials before committing - Flag any use of eval() or unsanitised user input
Prompts and CLAUDE.md tips for the backend team.
"Read api/openapi.yaml and generate the Express route + Zod validation for the POST /orders endpoint" — Claude generates code that matches your spec exactly.
"Create a new Lambda handler in src/handlers/ for the user-notifications service following the existing pattern in src/handlers/orders.js"
Deploy with: claudia update --handler src/lambda.handler. Claude will use the right command.
"Write Supertest integration tests for all endpoints in src/routes/orders.ts, covering 200, 400, 401, and 404 responses"
# Backend Stack - Runtime: Node.js 20 on AWS Lambda via Claudia.js - Framework: Express with OpenAPI 3.1 specs in api/ - Validation: Zod schemas auto-generated from OpenAPI - Deploy: `npx claudia update` (never `claudia create` on existing)
"Help me debug this Lambda timeout — read the CloudWatch log snippet I pasted and suggest fixes"
Prompts and tips for the frontend team.
"Create a Vue 3 Composition API component for a paginated data table in src/components/DataTable.vue using <script setup> with TypeScript"
"Extract the filter logic from OrderList.vue into a composable at src/composables/useOrderFilters.ts"
"Create a Pinia store for the notification system with actions to fetch, mark-read, and dismiss"
# Frontend Stack - Framework: Vue 3 with Composition API (<script setup>) - State: Pinia stores in src/stores/ - Styling: Tailwind CSS — no custom CSS unless absolutely necessary - Testing: Vitest + Vue Test Utils - Always use TypeScript, never plain JS in .vue files
"Refactor src/components/LegacyForm.vue from Options API to Composition API with <script setup>, preserving all functionality"
Prompts and tips for the mobile team.
"Create a new screen at src/screens/OrderDetailScreen.tsx with React Navigation params for orderId, fetching data with React Query"
"Add haptic feedback on iOS and vibration on Android when the user completes a purchase — use Platform.select"
"Read the Metro bundler error log and explain why the native module 'react-native-camera' isn't linking properly"
# Mobile Stack - Framework: React Native 0.74+ with TypeScript - Navigation: React Navigation v6 - State: Zustand for local, React Query for server state - Testing: Jest + React Native Testing Library - Always handle both iOS and Android edge cases
"Analyse why the FlatList in src/screens/Feed.tsx is re-rendering excessively and add memoisation where needed"
Claude can be a powerful testing partner.
"Read the PR diff for #156 and generate test cases covering all changed logic, edge cases, and error paths"
"Write a Playwright E2E test for the user login flow: valid creds → dashboard, invalid → error message, expired session → redirect"
"Here's the bug report: [paste]. Read the relevant code and write a failing test that reproduces this issue."
"Run the test suite, analyse the coverage report, and identify the 5 most critical untested code paths"
"Compare the OpenAPI spec in api/openapi.yaml with the actual API responses and flag any mismatches"
Slash commands, hooks, MCP servers, skills, and plugins — making Claude Code truly yours.
Reusable prompt templates that your whole team shares.
.claude/commands/name.md (project-shared) or ~/.claude/commands/name.md (personal). The filename becomes the /name command.
# .claude/commands/review-security.md Perform a security review of the current changes: 1. Check for SQL injection, XSS, CSRF vulnerabilities 2. Verify all user inputs are validated with Zod 3. Ensure no secrets are hardcoded 4. Check auth middleware is applied to protected routes Focus on: $ARGUMENTS
# .claude/commands/new-endpoint.md Create a new API endpoint following our conventions: 1. Add the OpenAPI spec to api/openapi.yaml 2. Generate the route in src/routes/ 3. Create the service in src/services/ 4. Write tests covering 200, 400, 401, 404 Endpoint: $ARGUMENTS
$ARGUMENTS. E.g., /review-security the auth middleware.
--- allowed-tools: Read, Grep, Glob model: opus --- Deep analysis prompt here...
.claude/commands/ to your repo. Everyone gets the same commands. Personal variants go in ~/.claude/commands/.
Unlike CLAUDE.md (advisory), hooks are guaranteed to run. Use them for things that must happen every time.
.claude/settings.json. They run your scripts at specific points.
SessionStart (session begins), PreToolUse (before a tool runs), PostToolUse (after a tool completes), Stop (agent finishes), Notification, PostCompact.
// .claude/settings.json
{ "hooks": { "PostToolUse": [
{ "matcher": "Write|Edit",
"hooks": [{ "type": "command",
"command": "npx eslint --fix $CLAUDE_FILE_PATH",
"timeout": 15 }] }
] } }
// PreToolUse hook: exit code 2 = BLOCK the action
{ "matcher": "Bash",
"hooks": [{ "type": "command",
"command": "echo $CLAUDE_TOOL_INPUT | grep -qE 'rm -rf|drop table' && exit 2 || exit 0" }] }
{ "matcher": "Write|Edit",
"hooks": [{ "type": "command",
"command": "npm test -- --related $CLAUDE_FILE_PATH",
"timeout": 60 }] }
0 = allow, 2 = block the action (Claude gets notified why). Any other code = error.
Model Context Protocol servers give Claude access to external tools and data sources.
.claude/settings.json or ~/.claude/settings.json:
{
"mcpServers": {
"browser": {
"command": "npx",
"args": ["@anthropic-ai/mcp-server-browser"]
},
"postgres": {
"command": "npx",
"args": ["@anthropic-ai/mcp-server-postgres", "postgresql://..."]
}
}
}
"Query the users table for accounts created this week" — Claude calls the database tool directly.
More powerful than slash commands: skills bundle prompts, scripts, and resources together.
SKILL.md, helper scripts, reference files, and configuration. Use skills when the task needs more than a prompt.
.claude/skills/
deploy-checker/
SKILL.md # Main instructions
scripts/
check-deploy.sh # Helper script
reference/
deploy-checklist.md # Reference doc
--- description: "Verify deployment readiness for Lambda services" allowed-tools: Bash, Read, Grep model: sonnet --- # Deploy Checker Before deploying, verify: 1. All tests pass (npm test) 2. No TODO/FIXME in changed files 3. OpenAPI spec is up to date ...
/deploy-checker. They can also be triggered by Claude automatically when their description matches the task.
.claude/skills/ to your repo for team skills. Use ~/.claude/skills/ for personal ones. Skills can also be distributed via plugins.
api-scaffold (new endpoint from OpenAPI), lambda-debug (analyse CloudWatch logs), rn-screen (new React Native screen), vue-component (new Vue component with tests).
Plugins bundle skills, commands, hooks, and MCP configs into a single installable package.
/plugin install anthropic/code-review /plugin install anthropic/memory
code-review — automated PR review with specialised agents. memory — persistent facts across sessions. todo — task tracking.
my-team-plugin/ plugin.json # Plugin manifest commands/ # Slash commands skills/ # Skills with SKILL.md hooks/ # Hook scripts settings.json # MCP servers + permissions
Sub-agents, multi-agent orchestration, the Claude Code SDK, CI/CD automation, and scheduled tasks.
Specialised AI agents that Claude delegates specific tasks to, each with its own context and tools.
# .claude/agents/security-reviewer.md --- description: "Reviews code changes for security vulnerabilities" allowed-tools: Read, Grep, Glob model: opus --- You are a security reviewer. Analyse the given code for: - Injection vulnerabilities (SQL, NoSQL, command, XSS) - Authentication/authorization flaws - Sensitive data exposure - Insecure dependencies
api-designer (OpenAPI expert), test-writer (generates comprehensive test suites), perf-analyser (profiles and optimises), doc-writer (API docs from code).
Multiple agents working together on complex tasks.
code-writer → test-writer → security-reviewer → doc-writer. Each agent receives the previous agent's output.
test-writer creates tests, doc-writer generates docs — both from the same code change.
"Implement the user notifications feature: 1. Read the spec in docs/notifications-spec.md 2. Implement the backend endpoints 3. Write comprehensive tests 4. Review for security issues 5. Update the OpenAPI spec 6. Create the PR with a full description"Claude orchestrates multiple sub-agents for each step.
Run Claude Code from your own scripts, CI pipelines, and applications.
@anthropic-ai/claude-code npm package lets you invoke Claude Code programmatically from Node.js. Full agent capabilities in your scripts.
import { claude } from "@anthropic-ai/claude-code";
const result = await claude({
prompt: "Run tests and fix any failures",
workingDirectory: "./my-project",
allowedTools: ["Bash", "Read", "Write", "Edit"],
model: "sonnet"
});
# .github/workflows/claude-review.yml
- name: Claude Code Review
uses: anthropics/claude-code-action@v1
with:
prompt: "Review this PR for bugs, security, and style"
allowed_tools: "Read,Grep,Glob"
Put Claude to work in your deployment pipeline.
claude-code-action in GitHub Actions. Every PR gets automatic code review comments — security checks, style issues, potential bugs.
claude -p "Verify this branch is ready to merge: 1. All tests pass 2. No TODO/FIXME markers 3. OpenAPI spec matches implementation 4. No console.log statements in production code" --allowedTools Bash,Read,Grep
claude -p "Generate a changelog from the commits since the last tag, grouped by feat/fix/chore" — automate your release notes.
claude -p "Run npm audit, analyse the vulnerabilities, and create a PR fixing any that can be auto-patched"
--allowedTools to restrict what Claude can do. Never use --dangerously-skip-permissions on shared runners without careful scoping.
Set it and forget it — Claude working on a schedule.
# Every morning at 9am — pull latest, run tests, report failures claude -p "Pull main, run full test suite, and if anything fails, create a GitHub issue with the details" # Weekly on Monday — dependency audit claude -p "Run npm audit and create a PR fixing critical vulnerabilities" # Nightly — code quality report claude -p "Analyse code quality metrics and post a summary to #engineering Slack"
"Monitor the CI pipeline. If a test fails on main, analyse the failure, create a fix, and open a PR." — Claude as your on-call bot.
Level up how you communicate with Claude for better, faster results.
"Using only the existing OrderService methods, no new dependencies, and keeping backward compatibility — add bulk order creation to POST /orders"
"Add input validation. Here's the pattern from our user endpoint: [paste 5-line example]. Apply the same pattern to the /orders endpoint."
"Don't use try/catch for flow control — we use Result types. Don't import from /handlers/ in /services/. Don't use any from TypeScript."
"Walk through the request lifecycle for POST /orders step by step. At each stage, check if the data could be null or malformed."
"Act as a senior backend engineer reviewing a junior's PR. Be thorough but constructive. Focus on security, performance, and maintainability."
How to get the whole team productive with Claude Code.
/init on each project. Learn: interactive mode, one-shot, /clear, /compact, /cost. The 2 experienced members pair with newcomers.
The most useful commands and shortcuts at a glance.
curl -fsSL https://claude.ai/install.sh | sh · Brew: brew install --cask claude-code · npm: npm i -g @anthropic-ai/claude-code
claude · One-shot: claude -p "..." · Pipe: cat file | claude -p "..." · Resume: claude --resume
/clear (reset) · /compact (summarise) · /cost (tokens) · /model (switch) · /effort (depth) · Shift+Tab (plan mode)
~/.claude/CLAUDE.md (global) · ./CLAUDE.md (project) · .claude/settings.json (permissions/hooks) · .claude/commands/ · .claude/skills/
.claude/commands/name.md · Use: /name arguments · Share: commit to repo
SessionStart · PreToolUse · PostToolUse · Stop · Notification · PostCompact
.claude/agents/name.md · Automatic delegation by description match · Scoped tools and model per agent
Official docs, free courses, video tutorials, and community guides to deepen your Claude Code skills.
Level 1 today. Level 4 by the end of the quarter.
The best prompt is the one you don't have to type again.
code.claude.com/docs ·
anthropic.skilljar.com ·
github.com/anthropics/claude-code