Claude Code: The Complete Guide Beyond Just Writing Code

Introduction

#

Claude Code has been around for a while now. Most people I know have tried it, but many are still stuck at the “type a prompt, wait for code” stage. Honestly, Claude Code is capable of much more. To truly make it a seamless part of your development workflow, there are quite a few details worth understanding. This article walks through everything I’ve learned from real-world usage, from installation to advanced customization, covering the entire pipeline.

By the way, similar tools like Codex and OpenCode share largely the same architecture and usage patterns. Once you’ve mastered Claude Code, switching to alternatives is nearly frictionless.

Installation and Login

#

Installation is a single command. Head to the Claude Code website, copy the install script, and paste it into your terminal.

Once installed, run claude in your project directory to launch. On first use you’ll be prompted to log in, or you can trigger it manually with /login. Claude Code offers two access options:

• Subscription: If you have a Claude Pro or Max membership, just authorize and go
• API Key (pay-per-use): Charged based on token consumption, suitable for light usage

If you can’t access Claude’s official service, Claude Code isn’t tied to any specific model. By setting a few environment variables, you can connect it to alternative providers like GLM or Minimax¹.

Three Interaction Modes

#

Claude Code has three working modes, cycled through with Shift+Tab. Understanding the differences between them is foundational to using Claude Code well.

Default Mode

#

The mode you start in. The status bar shows only a gray hint ? for shortcuts with no additional mode label. This “nothing labeled” state is the default mode.

In this mode, Claude Code asks for your permission before creating or modifying any file. The three options are:

• Yes: One-time approval for the current operation only
• Yes, allow all edits during this session: All file operations pass automatically for the rest of the conversation
• No: Reject, and you can continue typing your thoughts

Default mode is the safest option, ideal when you want tight control over code changes.

Auto Mode (Accept Edits On)

#

The status bar shows Accept Edits On. In this mode, Claude Code creates and modifies files directly without asking for confirmation one by one. It’s highly efficient for iterative development, especially when you need it to touch dozens of files in one go.

Plan Mode

#

The status bar shows Plan Mode On. This mode is for discussion only, no files are written. It’s ideal for brainstorming approaches and pinning down details before committing to changes. We’ll cover this in detail later.

Plan Mode: Think Before You Act

#

Say you have a small HTML project and want to migrate it to React + TypeScript + Vite. A structural overhaul like this is risky if you just let Claude Code go wild. A better approach is to switch to Plan Mode first and nail down the approach.

Here’s the workflow:

1. Press Shift+Tab to enter Plan Mode
2. Type your requirement, e.g. “Refactor the current project to React + TypeScript + Vite, keep all existing features, maintain the same UI style”

A useful tip: to enter multi-line input, press Shift+Enter for a new line. Pressing Enter submits the prompt. If the terminal input feels clunky, press Ctrl+G to open VS Code as your editor. Save and close it, and the content automatically flows back into Claude Code’s input box.

Claude Code will produce a complete plan with goals, file lists, directory structure, and so on. It then gives you three options:

• Execute plan and enter auto mode: No more file confirmation prompts going forward
• Execute plan and stay in default mode: Each file change still requires your approval
• Continue modifying the plan: Not happy with the plan? Add more requirements

For instance, if you realize the plan is missing “add priority tags (high/medium/low) to each todo item with color coding,” pick the third option and add it. Claude Code will regenerate a revised plan.

Once you’re satisfied, choose to execute, and Claude Code gets to work.

A common gotcha: auto mode only applies to file read/write operations. Terminal commands (like mkdir, npm install) are considered more sensitive, and Claude Code will ask for permission each time by default. If you want to skip all permission checks entirely, launch with the --dangerously-skip-permissions flag. The word “dangerously” is right there in the name. It means Claude Code gets full terminal access with zero confirmation. Maximum efficiency, but you bear the risk.

Terminal Commands and Background Tasks

#

Running Terminal Commands

#

Typing ! at the beginning of the input box enters Bash mode, where you can run any terminal command. For example, ! ls to list files, or ! open index.html to open a page in the browser.

Background Tasks

#

One thing that’s easy to overlook: certain commands (like npm run dev to start a dev server) will block Claude Code. While the server is running, Claude Code can’t process new requests.

The fix is Ctrl+B to send the task to the background. After that, you can continue interacting with Claude Code. Use /tasks to see running background tasks, and press K in the task list to stop a specific service.

Rewind Operations

#

Claude Code automatically creates a restore point every time you submit a request. Press Esc twice to enter the rewind page. After selecting a restore point, you have four options:

• Rewind code and conversation: Both files and chat history are restored
• Rewind conversation only: Chat history is restored, files stay as-is
• Rewind code only: Files are restored, chat history preserved
• Cancel rewind

Rewind is convenient, but there’s a limitation: it can only roll back files that Claude Code wrote itself. Directories created via terminal commands, installed dependencies, and so on cannot be automatically cleaned up. For precise rollbacks, Git is still your best bet.

Image Input and Figma MCP

#

Direct Image Input

#

Want Claude Code to build a page from a design mockup? Just drag the image into the terminal, or copy it and press Ctrl+V to paste. Note that even on macOS, you must use Ctrl+V; Cmd+V doesn’t work.

After pasting the image, continue typing your request, and Claude Code will reference the image when generating code. That said, UI restoration from images alone has limited accuracy. Font sizes, spacing, and similar details are hard to nail pixel-perfectly.

Connecting Figma MCP

#

If the design is in Figma, there’s a more precise approach: connect the Figma MCP Server².

MCP (Model Context Protocol) is a protocol for communication between large language models and external tools. Through Figma MCP, Claude Code doesn’t just get a screenshot of the design; it receives structured information including component spacing, font styles, color values, and more.

Setup steps:

1. Install the Figma MCP Server (one command, see the official docs)
2. Restart Claude Code with the -c flag (claude -c) to resume the previous conversation
3. Run /mcp, select the Figma tool, and authenticate
4. Once authenticated, type your request, e.g. “Modify the current page to match the Figma design,” and include the Figma design link

Claude Code will automatically detect the Figma MCP, call tools like get_design_context and get_screenshot to retrieve design information, and then modify the code based on this structured data. The restoration accuracy is significantly better than working from an image alone.

Context Management

#

As a conversation progresses, the context accumulates code snippets, tool call results, and other information. Useful and useless content gets mixed together, which affects model performance and wastes tokens.

/compact: Compress Context

#

Running /compact performs intelligent compression on the context. Claude Code trims redundant information while preserving the essentials. After compression, press Ctrl+O to view the result. You’ll see that a lengthy conversation has been distilled into a few lines of key information.

You can append specific compression strategies, like /compact focus on user requirements, to steer the result toward what matters to you.

That said, compression controllability is limited. You can’t directly edit the compressed content.

/clear: Clear Context

#

More drastic than compression. /clear wipes all context entirely. Useful when the upcoming task has no connection to what came before.

CLAUDE.md: Making Claude Code Understand You Better

#

Whether you compress or clear, context is always tied to a specific session. Start a new session, and Claude Code knows nothing. Is there a way to have Claude Code automatically load some preset information every time it starts?

That’s what CLAUDE.md is for. You can document your project’s tech stack, code style preferences, special notes, and so on. Claude Code loads this file automatically on every launch.

Use /init to auto-generate an initial CLAUDE.md, then customize it. For example, I added a rule at the end: “Always append ‘Happy Coding’ at the end of every response.” After restarting, I asked a random question, and sure enough, Claude Code added “Happy Coding” at the end.

CLAUDE.md comes in two levels:

• Project-level: Placed in the project root, applies to this project only, can be committed to Git for team sharing
• User-level: Placed in your home directory, applies to all projects

Use /memory to quickly open the corresponding CLAUDE.md file without digging through the file manager.

Hooks: Automating Your Workflow

#

Hooks let you run custom logic at specific moments (before/after tool execution, on failure, etc.). A typical use case is code formatting: have Claude Code automatically run Prettier every time it finishes writing a file.

Configuration:

1. Run /hooks to enter the Hook configuration page
2. Select the trigger timing, e.g. Post Tool Use (after a tool runs)
3. Select the tool to match, e.g. Write or Edit
4. Enter the command to execute

The command looks something like this:

echo '$TOOL_INPUT' | jq -r '.file_path' | xargs prettier --write

When triggering a Hook, Claude Code passes in a JSON where file_path is the path to the file just edited. Use jq to extract the path, then pipe it to Prettier for formatting.

Hook storage has three options:

• Local project-level (settings.local.json): Only works on this machine for this project, not committed to Git
• Project-level (settings.json): Applies to everyone using this project, distributed via Git
• User-level: Applies to all projects for the current user

Agent Skill: Reusable Prompt Templates

#

If you frequently need Claude Code to output content in a specific format (e.g. a daily dev log with date, summary, and details), pasting the format requirements every time is tedious. This is where Agent Skill shines³.

Agent Skill is essentially a dynamically loaded prompt. You write the format requirements in a skill.md file, and Claude Code automatically matches and loads the relevant Skill based on user requests. You can also invoke it manually via /skill-name, skipping the model’s intent recognition step.

SubAgent: Independent Context Powerhouse

#

Agent Skills run while fully sharing the current conversation’s context. This means all logs and reasoning from the Skill’s execution get stuffed into your context window. For lightweight tasks this is fine, but if you ask a Skill to review a codebase with tens of thousands of lines, the intermediate process will bloat the context, spike token costs, and slow the model down.

SubAgent solves this. It has a completely independent context. When launched, it opens a brand-new conversation window where all intermediate processing happens. Only the final result is reported back to the main conversation.

The difference in context handling determines their ideal use cases:

Creating a SubAgent: run /agent, select “Create New Agent,” describe its responsibilities, configure available tools (e.g. read-only access), and choose the model. Claude Code generates an initial description file that you can customize. After that, just mention the relevant need in conversation, and Claude Code will automatically invoke the appropriate SubAgent.

Plugins: One-Click Capability Bundles

#

Plugins bundle Skills, SubAgents, Hooks, MCP connections, and more into a single installable package, giving Claude Code a full suite of advanced capabilities in one click.

Run /plugin to open the plugin manager where you can browse, install, and view installed plugins. Choose the scope (user-level, project-level, etc.) during installation, then restart Claude Code.

For example, Anthropic offers an official frontend-design plugin with a built-in UI design specification. Once installed, when you ask Claude Code to build a frontend page, it automatically loads these guidelines, producing interfaces with noticeably better color schemes, layout, and interaction design compared to the default output.

The Plugin marketplace is growing fast. Beyond UI design plugins, there are LSP plugins for specific programming languages and more. If you’ve built up a mature configuration, you can package it as a Plugin to share with your team or the community.

Summary

#

This article covered the full pipeline from basics to advanced usage of Claude Code:

• Three modes (default/auto/plan) flexibly switch to suit different scenarios
• Plan Mode for thinking before acting, reducing the risk of major changes
• Background tasks to handle long-running commands without blocking
• Rewind as a safety net, though Git is still needed for complex rollbacks
• Images and Figma MCP for converting designs to code
• Context management (/compact, /clear) to control token consumption
• CLAUDE.md for auto-loading project configuration on every launch
• Hooks to run custom logic at key moments automatically
• Agent Skill and SubAgent for lightweight and heavyweight tasks respectively
• Plugins for one-click installation of complete capability extensions

Each feature is straightforward on its own, but combined they form a fairly complete development workflow. Hope this guide helps.