Claude Code from zero to production

2026-02-09

A guide to configuring Claude Code past the install. CLAUDE.md carries a project's conventions into every session, and skills turn the workflows you repeat into commands. Hooks and permission rules stop destructive actions before they run. The last sections cover parallel work with subagents and agent teams, and the tools growing around the terminal.

Why this exists26 · mar 11Read notecollected everything I know about Claude Code into one place, from the install to running several agents at once.

Revisions26 · oct 05Read notechecked against the current docs, with each source now beside its claim. four commands were wrong and are fixed: claude mcp add has no --command flag, Remote Control starts with claude remote-control, custom subagents are single .md files, and there is no /create (skill-creator does that job). the UserPromptSubmit hook adds context but cannot rewrite your prompt.

This guide goes from npm install to a setup you can trust with a production codebase. Most of it is about teaching Claude Code your project and stopping it from breaking things; the later sections connect it to outside services and run several agents at once.

Setup

Installing, signing in and opening a first project take a few minutes.

Installation

The native installer is the recommended path. npm (npm install -g @anthropic-ai/claude-code) works too and now installs the same native binary.

BASH Copy

curl -fsSL https://claude.ai/install.sh | bash

BASH Copy

irm https://claude.ai/install.ps1 | iex

Package managers work too (brew install --cask claude-code, winget install Anthropic.ClaudeCode) but don't auto-update.

Verify:

BASH Copy

claude --version

Authentication

Claude Code requires a paid plan (Pro, Max, Team, or Enterprise) or a Console account for API billing. The free tier doesn't include it1.

1Anthropic, Advanced setup, Claude Code docs, 2026.

BASH Copy

claude

First run opens a browser for OAuth. Log in, authorize, return to the terminal. If you prefer metered billing, log in with a Console account instead, or set ANTHROPIC_API_KEY and approve the key when Claude Code asks.

First project

BASH Copy

mkdir my-project && cd my-project claude

Claude reads your project directory, understands the file structure, and is ready to work, with no configuration required. Everything from here is about making it better.

CLAUDE.md: the operating manual

CLAUDE.md is the single most important file in your project, the instruction set Claude reads before every interaction. Without it, every session starts from zero. With it, the agent writes code that follows your conventions and fits the patterns already in the codebase.

The difference between AI-generated code that looks AI-generated and code that looks like a senior engineer wrote it is almost entirely in this file.

What goes in it

Stack declarationExact framework versions, Next.js 16.1.6 with Turbopack where Next.js alone says too little. Every major dependency and its role, down to the fonts and the icon library.

File structure mapWhere every type of file lives. Naming conventions for pages, components, actions, utilities. Route organization. Claude needs to know where to put things.

Code patternsHow server components connect to client components. How data flows from database to UI. How mutations work. Return signatures for server actions. The AI follows patterns. Give it good ones.

Design system rulesExact color values, typography scale, spacing, border radius, icon sizes. If Claude doesn't know your design system, every component it generates looks different.

Gotchasframework-specific traps that burned you once. Authentication quirks. Bundler configs that changed between versions. Database constraints. Things that would take 30 minutes to debug if Claude hits them blind.

Where it lives

File Scope

CLAUDE.md Project root, applies to this project

~/.claude/CLAUDE.md User-level, applies to all projects

src/CLAUDE.md Subdirectory, loaded when Claude reads files inside that path

Claude reads all of them and concatenates them rather than letting one override another; the files nearest your working directory are read last1. Your personal preferences go in ~/.claude/CLAUDE.md. Project conventions go in the project root. Module-specific rules go in subdirectories.

1Anthropic, How Claude remembers your project, Claude Code docs, 2026.

Start small.

You don't need a 500-line CLAUDE.md on day one. Start with your stack declaration and three conventions. Add to it every time Claude does something wrong. Each correction becomes a rule. After a week, the file has organically captured your entire workflow. After a month, it's the most complete documentation your project has ever had.

Skills: reusable instructions that compound

CLAUDE.md is static context. It loads every time. Skills are the invocable layer: named workflows that only load when triggered. You write the instructions once, and Claude Code follows them every time you need that workflow.

How skills work

A skill is a markdown file of plain text, with nothing to compile or install. You write instructions in a file called SKILL.md, put it in a specific folder, and Claude reads it when relevant.

The mechanism is called progressive disclosure. When Claude starts, it scans your skills directory and reads only the name and description of each skill (roughly 100 tokens per skill1). Lightweight. 50 skills loaded and Claude barely notices. When you type something that matches a skill's description, the full SKILL.md loads into the context window. If nothing matches, no skill fires. You never have to tell it to use your skill. Claude figures it out.

1Anthropic, Agent Skills, Claude docs, 2026.

This is why skills scale. 40 skills don't slow anything down because 39 of them are dormant at any given moment.

Anatomy of a SKILL.md

Every skill lives in its own folder with one required file: SKILL.md, whose frontmatter fields are listed in the skills documentation.

YAML Copy

--- name: my-skill description: What this skill does and when to trigger it. allowed-tools: Read, Write, Grep, Glob, Bash ---

# My skill

When this skill is triggered:

1. Read the relevant files 2. Analyze the current state 3. Execute the workflow 4. Validate the output 5. Report results

nameWhat you type after the slash. /my-skill.

descriptionThe most important field. Claude uses it to decide when to auto-activate. Write it like you would naturally ask for help.

allowed-toolsLeast privilege. Only give the skill the tools it actually needs.

Nothing is compiled or registered; once the file is saved, the skill exists.

Where skills live

Global skills (all projects) live in ~/.claude/skills/[skill-name]/SKILL.md, project-only ones in .claude/skills/[skill-name]/SKILL.md. Start global. Move to project-level when a skill gets specialized enough that it doesn't make sense everywhere.

Building your first skill

Pick a workflow you repeat. Committing code. Processing meeting notes. Writing emails. Reviewing documents. Start there. Create the directory.

BASH Copy

mkdir -p ~/.claude/skills/my-skill

c. Write the SKILL.md. Describe the process step by step. Include everything Claude needs to execute correctly: file paths, output formats, validation checks, edge cases.

d. Test it. Open Claude Code. Type /my-skill. It picks up the file immediately. No restart needed (only a brand-new top-level skills directory needs /reload-skills).

e. Iterate. The first version won't be perfect. Use it, notice what's missing, update the file. Claude picks up changes on the next invocation. Skills are living documents.

f. Let Claude build the next one. Install Anthropic's skill-creator plugin (/plugin install skill-creator@claude-plugins-official) and describe the workflow. Claude writes the entire skill file, and you review it and fix what it got wrong.

The compounding effect

Each skill saves time on its own task, and the saving grows as they pile up.

Week 1You build /commit, which saves 2 minutes per commit.

Week 2You build /review and /test, and your code quality pipeline is automated. Hours saved per week.

Month 1You have 10 skills (/fix, /deploy-check, /scaffold, /session-start). Your entire development workflow is encoded, and your attention moves from process to outcomes.

Month 3You have 30 skills across development, operations, content and client management. One command triggers a chain of actions that used to take an afternoon, and skill-creator starts generating new skills from workflows you notice repeating, so the system starts improving itself.

Skill tips

Write descriptions like you'd ask a coworker for help: write review this code rather than multi-paradigm static analysis tool for code quality assessment. Natural language triggers natural activation.

Keep SKILL.md under 500 lines, as Anthropic's best practices advise. Move detailed reference material to separate files in the same folder. Claude can read them when needed. Over 500 lines and Claude starts losing focus on the details.

Dangerous skills.

Use disable-model-invocation: true for anything that acts beyond your machine, such as a deploy or a message sent. The skill then fires only when you type the command yourself.

The Agent Skills format is an open standard that more than forty clients read by October 2026, OpenAI Codex and Gemini CLI among them, so a skill built once runs outside Claude Code too.

Hooks: catching mistakes before they happen

Hooks are automated rules that intercept Claude's actions before they execute, so a force push is blocked automatically instead of costing you two hours of debugging.

Hook events

Claude Code exposed 16 hook events when this was written and more than thirty by October 2026. The critical ones:

Event When it fires

PreToolUse Before a tool executes (Bash, Edit, Write, etc.)

PostToolUse After a tool completes

UserPromptSubmit When you submit a prompt, can add context or block it

SessionStart When a session begins

SubagentStart When a subagent spawns

PermissionRequest When Claude asks for permission

Hook types

Command hooksShell scripts. Fast, simple. Good for pattern matching and blocking.

HTTP hooksA POST to a URL. Good for logging and external integrations.

MCP tool hooksA call to a tool on a connected MCP server.

Prompt-based hooksA single LLM call for judgment, such as whether a change is safe.

Agent-based hooksmulti-turn with tool access, for a full analysis before proceeding (experimental).

Essential hooks

Configure in ~/.claude/settings.json or .claude/settings.json:

Block destructive deletions. Intercept rm -rf targeting critical paths. Hard block.

Block force push. Intercept git push --force. In a fast-moving workflow with hundreds of commits, an accidental force push is catastrophic. Hard block.

Block hardcoded secrets. Scan file writes for patterns matching API keys, tokens, passwords, so they are caught when written, long before a commit. Hard block.

Protect environment files. Block writes to .env files and use .env.example with placeholders instead.

Warn on debug code. Detect console.log and debugger statements. Warning: allows but flags.

Warn on production commands. Detect bash commands containing the keywords production or prod. Warning.

Block vs warn.

A block never allows the action, and suits irreversible or high-damage actions. A warning allows it but flags it, for things that are sometimes legitimate but often mistakes. The goal is a safety net that catches the 1% of catastrophic mistakes while letting the 99% of productive work flow uninterrupted.

The prompt context hook

The UserPromptSubmit hook can add context to your input before Claude processes it; it cannot replace the prompt itself1. Practical use: a voice-to-prompt pipeline. You dictate something sloppy into a voice transcription tool (uh yeah so the revenue graph isn't showing right, there's empty space below it), and the hook attaches a structured, actionable reading of it with technical context. The quality of AI output follows the quality of its input, and this hook raises the input without you typing more.

1Anthropic, Hooks reference, Claude Code docs, 2026.

Permissions: three tiers of trust

A mode sets the default for a whole session, and rules then override it for specific tools.

Permission modes

Mode Behavior

default Prompts for approval on first tool use (labelled Manual in newer versions)

acceptEdits Auto-accept file edits, prompt for commands

plan Read-only: no edits, no commands

auto No routine prompts; a background classifier checks each action against your request (added after this was written)

dontAsk Auto-deny unless pre-approved

bypassPermissions Skip all prompts (only in safe environments)

Rule types

Rules evaluate in order. Deny rules are checked before ask rules, and ask rules before allow rules, so a deny rule always wins.

JSON Copy

{ "permissions": { "allow": [ "Bash(npm run *)", "Bash(git status)", "Bash(git log *)", "Read", "Glob", "Grep" ], "ask": [ "Bash(git push *)", "Bash(npm install *)", "Edit", "Write" ], "deny": [ "Bash(rm -rf *)", "Bash(git push --force *)", "Edit(.env)" ] } }

The specifier syntax is powerful: Bash(npm run *) matches any npm run command. WebFetch(domain:example.com) restricts web access by domain. mcp__github__* allows all GitHub MCP tools. File paths go in Edit(...) and Read(...) rules, which cover every tool that writes or reads files; a Write(.env) rule is accepted but never consulted.

What this enables

Reading files and running builds go through at full speed with no interruption. A push or an install waits at a human checkpoint, and a force push or a recursive delete cannot happen at all. You work fast without wondering whether the AI is about to do something destructive, because the guardrails live in the configuration and do not depend on how the model behaves.

MCP servers: connecting to everything

MCP servers give Claude access to the world outside your terminal1.

1MCP is the Model Context Protocol, an open standard for connecting AI assistants to external data and services; each server exposes tools that Claude can call, such as a database query or an API call.

Configuration

Two places:

BASH Copy

# CLI: adds to your config (Supabase's hosted server, OAuth on first use) claude mcp add --scope project --transport http supabase https://mcp.supabase.com/mcp

# Or manually in .mcp.json (project-scoped, shareable via git)

JSON Copy

{ "mcpServers": { "supabase": { "command": "npx", "args": ["-y", "@supabase/mcp-server-supabase@latest", "--project-ref=${SUPABASE_PROJECT_REF}"], "env": { "SUPABASE_ACCESS_TOKEN": "${SUPABASE_ACCESS_TOKEN}" } } } }

Environment variables expand automatically (${VAR}, or ${VAR:-default} with a fallback): secrets stay in your environment, not in committed configs1.

1Anthropic, Connect Claude Code to tools via MCP, Claude Code docs, 2026. Supabase now recommends its hosted server over the local package.

Essential MCPs

MCP What it does

Supabase Database operations: tables, queries, RLS policies

GitHub Repo management: issues, PRs, code search

Notion Read and write to your Notion workspace

Context7 Documentation lookup, pulls latest docs for any library

Google Stitch AI design tool: generate UI mockups, export to Figma, pull HTML/CSS into your project

MCP prompts automatically become slash commands: if a server named ops exposes a deploy prompt, you get /mcp__ops__deploy for free (listed in the menu as /ops:deploy (MCP)).

Scopes

Scope Config file Who sees it

Project .mcp.json Everyone on the project (via git)

Local ~/.claude.json (under the project's path) Just you, just this project

User ~/.claude.json (user section) Just you, all projects

Subagents and agent teams

Claude Code has two distinct systems for parallel work, and they suit different problems.

Subagents

Run within a single session. Each gets its own context window, does its work, and reports back. Claude spawns them automatically when it decides to parallelize, or you can configure them explicitly.

Built-in types:

ExploreFast, read-only. For searching codebases, finding files, understanding structure.

PlanResearch and architecture. For designing implementation strategies before writing code.

General-purposeFull capabilities. For complex multi-step work.

Custom subagents live in .claude/agents/<name>.md (or ~/.claude/agents/ for all projects)1. You define what the agent is for and which tools it may use, then Claude deploys it when the work matches.

1Anthropic, Create custom subagents, Claude Code docs, 2026.

Subagents can run foreground (blocking: Claude waits for the result) or background (concurrent: Claude continues while the agent works). They can use worktrees for safe, isolated experimentation1.

1A worktree is a temporary copy of your git repository where the agent makes changes without affecting your working directory; good changes merge back and the rest is discarded.

Agent teams (experimental)

Agent teams are several independent Claude Code instances working together, documented as separate sessions with separate context windows that communicate with each other, where subagents all live inside one session.

One session acts as team lead. Others are teammates. They share a task list and communicate directly. The lead assigns work or teammates self-claim tasks.

BASH Copy

# enable the experimental feature export CLAUDE_CODE_EXPERIMENTAL_AGENT_TEAMS=1

Subagents vs teams

Subagents Agent teams

How they run Inside the main session Separate Claude instances

Communication Report back to main agent only Message each other directly

Context Separate window, summary returns Separate window, full independence

Token cost Lower (results summarized) Higher (N context windows)

Coordination Main agent manages everything Shared task list, self-coordination

Best for Focused research, parallel lookups Independent workstreams that need to talk

Rule of thumb: if the workers don't need to communicate with each other, subagents are cheaper and simpler. If worker A's findings change what worker B should do, that's a team.

Agent teams are still experimental: a team cannot resume a session mid-task, and its task status can lag behind the work. Shutting one down is slow too. They are powerful for the right problem and not yet stable enough for production.

The named roster.

Instead of spawning anonymous agents numbered one to six, give each agent a name and a personality, and write its boundaries down. Personality controls output style: a paranoid security reviewer catches different things than a pragmatic one. Names make handoff rules readable.

|---|---|---|---|

Atlas breaks the work into tasks, and Nova and Forge execute them in parallel. Sentinel reviews what they produce for risks while Gauge writes the test plan and the release checklist; Scribe fills gaps whenever anyone hits uncertainty.

Handoff rules prevent collisions: Atlas is the only agent that changes requirements. Nova never touches the schema. Forge never rewrites UI. Sentinel can block a release. Gauge defines when a task is done. Each boundary is a constraint that makes the system predictable.

Playbook: prompts that work

The value of parallel agents is in the prompt design. Each use case below is a template to copy and adapt to your own file paths and domain.

Research sprint

Four agents research four options at once, and the lead synthesizes their findings.

Prompt · Claude Code88 wordsCopyCreate an agent team to research state management for our React 19 project. Spawn four researchers:

1. Research Zustand: API design, bundle size, React 19 compatibility, community ecosystem, and gotchas 2. Research Jotai: same criteria 3. Research Redux Toolkit: same criteria, plus migration path from our current Context API setup 4. Research React 19 native (use, useOptimistic, server actions): whether we even need a library

When all four complete, synthesize into a comparison table with a clear recommendation based on our project size (medium SaaS dashboard, ~50 components, real-time updates via Supabase).

This works because each agent has a bounded scope and explicit criteria. The synthesis step also knows the project's size and stack, which is what lets it make a real recommendation instead of a generic table.

Parallel build with dependencies

Three agents build a feature in sequence, each waiting for what the one before it produces: the backend agent needs the schema, the frontend agent needs the server actions. No two touch the same file.

Prompt · Claude Code97 wordsCopyCreate a team to build the invoicing feature. Spawn three builders:

1. Database agent: Create the Supabase migration for invoices table with columns: id, team_id, client_id, status (draft/sent/paid/overdue), amount, due_date, line_items (JSONB), created_at, updated_at. Add RLS policies and indexes.

2. Backend agent: Create server actions in src/app/actions/invoices.ts following our existing pattern (see src/app/actions/clients.ts). CRUD operations: getInvoices, getInvoice, createInvoice, updateInvoice, deleteInvoice. BLOCKED BY: Database agent (needs schema first)

3. Frontend agent: Create the invoices page at src/app/dashboard/invoices/ following our page pattern. Include: invoices-view.tsx, invoices-table.tsx, invoices-empty.tsx. BLOCKED BY: Backend agent (needs server actions to call)

Each agent owns different files. No overlap.

The key phrase is each agent owns different files. File conflicts are the most common agent team failure. Design task breakdowns around file ownership.

Code review committee

Three reviewers read the same files through different lenses and report independently; the lead merges their findings.

Prompt · Claude Code70 wordsCopyCreate a review team for the code in src/app/actions/auth.ts and src/lib/supabase/server.ts. Spawn three reviewers:

1. Security reviewer: injection vectors, token handling, missing input validation, CORS/CSRF, secrets in code 2. Performance reviewer: unnecessary DB round trips, missing indexes, N+1 patterns, caching opportunities 3. Test coverage reviewer: untested code paths, missing edge cases, error handling gaps

Each reviewer produces findings ranked by severity (critical / high / medium / low). The lead synthesizes into a single prioritized review.

Add adversarial instructions to catch false positives: after initial reviews, share findings with each other and challenge anything you disagree with.

Bug hunt

Five agents each take a theory and try to disprove it. The one that survives is probably the root cause.

Prompt · Claude Code110 wordsCopyUsers report the app crashes after sending one message. Spawn 5 investigation agents, each pursuing a different theory:

1. Connection pooling: Supabase Realtime connection leaks. Check src/lib/supabase/client.ts and useEffect cleanup. 2. Memory leak: missing cleanup in chat components. Event listeners, growing arrays, mount/unmount cycles. 3. Auth token expiration: Realtime subscription using a token that expires mid-session. Check refresh logic. 4. WebSocket frame limits: message payloads exceeding Supabase Realtime frame size. Check channel data. 5. Event loop blocking: synchronous operations in message handling. JSON.parse on large payloads, heavy DOM ops.

Agents should share evidence that supports or refutes their theory. If an agent disproves their own theory, they should say so and help other agents investigate.

The instruction to disprove your own theory is critical. Without it, agents find confirming evidence for whatever they're looking for. Making them adversarial produces better results.

Migration team

Phased execution: some agents work in parallel, others wait for dependencies.

Prompt · Claude Code82 wordsCopyCreate a migration team for Tailwind CSS v3 to v4. Spawn four agents:

1. Config migration: Convert tailwind.config.ts to CSS-based @theme configuration. Update postcss.config.js. 2. Import migration: Update all tailwindcss imports to v4 patterns. Update globals.css directives. 3. Class name auditor: Scan TSX files for deprecated utilities. Report only. Do NOT auto-fix. BLOCKED BY: Config migration 4. Build verification: Run the build, fix errors. BLOCKED BY: All three above

Agents 1 and 2 work in parallel. Agent 3 waits for 1. Agent 4 waits for all three.

The report only, do NOT auto-fix instruction for the auditor is intentional. Automated find-and-replace across class names is error-prone. Review the report, apply manually.

Sizing teams.

3-5 agents per team, as the docs also advise. More than 5 creates coordination overhead that outweighs the parallelism. 5-6 tasks per agent, enough to stay productive, not so many that context overflows. And always: 10K tokens on planning saves 500K+ on misdirected execution. Have the lead plan before spawning.

The ecosystem

Claude Code is a terminal tool, and the ecosystem around it has expanded fast.

Cowork

Anthropic sells it as Claude Code without the code. Built into Claude Desktop, launched on 12 January 2026 as a research preview on macOS for Max subscribers, and since extended to Windows, the web and mobile on every paid plan1. Same agentic architecture (sub-agents, local file access, long-running tasks) but controlled through a GUI instead of a terminal.

1Anthropic, Get started with Cowork, Claude Help Center, 2026.

You designate a folder, describe an outcome and step away. A typical job turns a folder of receipts into an expense report, or a page of notes into a slide deck. It reads and writes directly to your filesystem.

Cowork Claude Code

GUI in Claude Desktop Terminal

Outcome-oriented (organize these files) Code-oriented (build this feature)

Connects to Google Drive, Slack, Salesforce via MCP Connects to dev tools via MCP

macOS only at launch, now Windows, web and mobile too macOS, Linux, Windows

Pro plan and above Pro plan and above

No memory across sessions at launch Memory via CLAUDE.md and skills

Remote Control

Continue a local Claude Code session from the web or your phone.

BASH Copy

# in your terminal: start remote control claude remote-control

# or, inside a running session /remote-control

Your session becomes available at claude.ai/code and in the Claude mobile app (iOS/Android)1. The session still runs locally, with your files and MCP servers within reach; the phone is just a remote interface.

1Anthropic, Continue local sessions from any device with Remote Control, Claude Code docs, 2026. claude --remote is a different command: it starts a cloud session.

When to use Remote Control vs OpenClaw:

Use case Best choice Why

Actively building in a repo, want mobile access Remote Control Same coding session, same context

Async requests (run this workflow, ship this update) OpenClaw Message-first, works through Telegram/WhatsApp

Non-technical team wants changes in plain English OpenClaw Chat-based interface, low friction

Claude Code on the Web

Run tasks on Anthropic-managed cloud infrastructure. It launched as a research preview in October 2025 and is now a documented feature of the paid plans. Unlike Remote Control, it doesn't run on your machine at all. The environment comes with the common toolchains installed, which suits a CI job, or parallel work that would strain your machine.

IDE integrations

VS Code extension and JetBrains plugin, both bidirectional with the CLI. Open Claude Code in your IDE, or send context from your IDE to an existing terminal session.

The UI workflow

Four tools turn Claude Code from a code generator into a design-to-code pipeline, and I rarely see them discussed.

Google Stitch

First-party Google tool. Generates several variants of a UI design from a description in natural language and refines them in conversation. Exports to Figma with Auto Layout. The MCP integration lets Claude pull design context and HTML/CSS directly from your Stitch projects into your codebase; it was community-built (stitch-mcp) when this was written, and Google now runs an official endpoint that takes an API key created in Stitch's settings.

BASH Copy

claude mcp add --transport http --header "X-Goog-Api-Key: YOUR_KEY" stitch https://stitch.googleapis.com/mcp

Nano Banana 2

Image generation inside your Claude Code workflow. Powered by Google Gemini (Gemini 3.1 Flash Image by default). Generates hero images and icons, with transparent backgrounds and style transfer from a reference image. Works as a standalone CLI and as a Claude Code skill.

GitHub: nano-banana-2-skill

The transparency features need Bun, FFmpeg and ImageMagick installed locally. Everything else needs only a Gemini API key from Google AI Studio.

UI UX Pro Max

A design rulesets database that activates automatically during UI work. By October 2026 its README counted 50 active styles, 192 color palettes, 74 font pairings and 119 UX guidelines. When Claude is building a component, this skill feeds it proven design patterns instead of letting it improvise. Also has an npm CLI (uipro, installed as ui-ux-pro-max-cli) for standalone use.

GitHub: ui-ux-pro-max-skill

Superdesign

Template library and AI design agent. Generates mockups and production-ready React + Tailwind code from text descriptions, 10+ variants per prompt. Use it to pull layout patterns for the pages every product has, a pricing section or a settings page. The original open-source IDE extension (superdesigndev/superdesign, mostly AGPLv3) is no longer maintained; the product now lives as the web app.

app.superdesign.dev

The design workflow

Start with a template instead of a blank canvas. Pull a layout from Superdesign or generate one from Stitch. Give Claude a visual target. Generate assets as you build. Use Nano Banana 2 for hero images and icons. No context switch to a separate design tool. Iterate in batches. Ask for 3 UI directions with the same requirements but different styles (minimal, bold, data-dense). Keep requirements constant. Only change layout and styling per variant.

The expensive look.

Cut the number of font sizes and colors, and leave more whitespace than feels natural. Ship a consistent button system (primary, secondary, tertiary) early. Use real UI patterns such as tables and empty states instead of hero-only design. The difference between designed and AI-generated is restraint.

The methodology

The tools above matter less than the process that uses them.

Session management

Every session should start with context recovery. Build a /session-start skill that checks the state of the repository in parallel and reads what previous sessions left in memory. In 30 seconds, you know exactly where you left off. It is the highest-return skill you can create.

Planning before coding

Before writing code, Claude should explore the codebase and weigh two or three approaches with their tradeoffs, then break the one it recommends into ordered steps and name its risks. A planning skill enforces this, and the plan it presents waits for approval before touching any files.

This prevents Claude from charging down the wrong path and generating hundreds of lines of code you don't want. The 5 minutes spent planning saves 30 minutes of rework.

Incremental commits

Keep commits small and focused, each one logical change (add a component, or fix a bug) instead of a monolithic commit with 40 changed files.

With AI the large commit costs more. Forty changed files are hard to review, and rolling them back undoes unrelated work along with the broken change. When something fails, nobody knows which of the forty did it. A small commit can be read in a minute and reverted on its own, and git blame then points at one change. The workflow becomes a loop: the AI makes one focused change, and you review the diff and commit it with a descriptive message before asking for the next.

Memory

CLAUDE.md is static context. It doesn't change between sessions. For dynamic context, such as the bug you found yesterday or a decision you made, keep a memory directory beside it: CLAUDE.md stays always loaded with the conventions, and memory/ holds topic files updated as you learn. The session-start skill reads memory files as part of its initialization, so a new session starts with no ramp-up.

Cost

Plan Price What you get

Pro $20/month ($17 billed annually) Claude Code access, standard rate limits

Max $100-200/month Higher rate limits, priority access

Team $25 per standard seat ($20 annually), $125 premium Team features, admin controls

Enterprise $20 per seat plus usage at API rates Managed policies, SSO, audit logs

The free plan does not include Claude Code. Prices are from Anthropic's pricing page in October 2026.

API key vs subscription.

A Pro subscription gives you flat-rate access and an API key charges per token, so for heavy usage (dozens of sessions per day) the subscription comes out far cheaper.

Quick reference

What from this guide you will look up again, on one page.

Essential files

File What it does

CLAUDE.md Project instructions: stack, patterns, conventions

.claude/settings.json Permissions, hooks, tool rules

.claude/skills/*/SKILL.md Project-scoped skills

.mcp.json MCP server configuration

~/.claude/CLAUDE.md Global instructions

~/.claude/settings.json Global permissions and hooks

~/.claude/skills/*/SKILL.md Global skills

Essential commands

BASH Copy

claude # start a session claude remote-control # start with Remote Control claude mcp add <name> # add an MCP server claude --version # check version

Defense in depth

Layer What it catches

CLAUDE.md Wrong patterns, mismatched conventions

Skills Inconsistent workflows, forgotten steps

Hooks Destructive actions, secrets in code, debug statements

Permissions Unauthorized tool use, unsafe commands

Memory Repeated mistakes, lost context

Each layer catches different failures, and with all five in place a serious mistake rarely reaches production, even at high velocity.