Claude Feature Guides

What it does

• Read, write, and edit files across your entire codebase
• Run terminal commands and interpret output
• Search code with grep, glob, and semantic understanding
• Create commits, branches, and pull requests
• Install packages, run tests, and debug errors
• Work with any language, framework, or tool

Step-by-step setup

1. 1Install Claude Code globally

   npm install -g @anthropic-ai/claude-code

2. 2Navigate to your project

   cd your-project

3. 3Start Claude Code

   claude

4. 4Authenticate with your Anthropic API key when prompted
5. 5Start asking Claude to help with your code

Tips & tricks

• Use `/help` to see all available commands
• Press `Esc` to cancel a running operation
• Use `claude --resume` to continue a previous conversation
• Add a `CLAUDE.md` file to your project root with project-specific instructions

What it does

• Give Claude specialized knowledge for specific frameworks and tools
• Provide step-by-step workflows Claude follows precisely
• Include real code snippets, commands, and best practices
• Work automatically — no need to reference them in prompts
• Stack together — install multiple skills for compound expertise

Step-by-step setup

1. 1Create the skills directory

   mkdir -p ~/.claude/skills

2. 2Browse skills at clskills.in and download one
3. 3Or install via curl

   curl -o ~/.claude/skills/react-testing.md https://clskills.in/skills/testing/react-testing.md

4. 4Start Claude Code — the skill is loaded automatically

   claude

5. 5Ask Claude to do the task the skill covers

Tips & tricks

• Skills are project-agnostic — install once, use everywhere
• You can also put skills in your project's `.claude/skills/` folder for project-specific ones
• Keep skills focused — one skill per task works better than mega-skills
• Browse 789+ skills at clskills.in across 71 categories

What it does

• Connect Claude to databases (PostgreSQL, SQLite, MongoDB)
• Access external APIs (GitHub, Slack, Jira, Linear)
• Read from file systems, Google Drive, or S3
• Query knowledge bases and documentation
• Execute actions in external systems
• Create custom tool integrations for any service

Step-by-step setup

1. 1MCP servers are configured in Claude Code settings

   claude mcp add my-server -- npx @modelcontextprotocol/server-name

2. 2Or add to your project's .mcp.json file
3. 3Example: Add a filesystem MCP server

   claude mcp add filesystem -- npx @modelcontextprotocol/server-filesystem /path/to/allowed/dir

4. 4Example: Add a PostgreSQL MCP server

   claude mcp add postgres -- npx @modelcontextprotocol/server-postgres postgresql://localhost/mydb

5. 5Restart Claude Code to load the new MCP server
6. 6Claude can now use the tools provided by the MCP server

Tips & tricks

• Use `claude mcp list` to see all configured MCP servers
• MCP servers run locally — your data never leaves your machine
• Check npmjs.com for `@modelcontextprotocol/server-*` packages
• You can build custom MCP servers in Python or TypeScript
• Use `.mcp.json` in your project root for project-specific MCP servers

What it does

• Define project-specific coding standards and conventions
• Document architecture decisions Claude should follow
• Specify testing requirements and patterns
• List common commands (build, test, lint, deploy)
• Set guardrails — things Claude should never do in your project
• Provide context about the tech stack and dependencies

Step-by-step setup

1. 1Create CLAUDE.md in your project root

   touch CLAUDE.md

2. 2Add project context
3. 3Example CLAUDE.md content:

   # Project: My App
   
   ## Tech Stack
   - Next.js 15 with App Router
   - TypeScript strict mode
   - Tailwind CSS + shadcn/ui
   - PostgreSQL with Drizzle ORM
   
   ## Commands
   - Build: npm run build
   - Test: npm run test
   - Lint: npm run lint
   
   ## Rules
   - Always use server components by default
   - Never use `any` type
   - All API routes must validate input with zod
   - Write tests for all new features

4. 4Start Claude Code — it reads CLAUDE.md automatically

   claude

Tips & tricks

• Keep it concise — Claude reads it every session, so don't make it a novel
• You can also create `~/.claude/CLAUDE.md` for global instructions across all projects
• Use `@AGENTS.md` syntax to reference other instruction files
• Update it as your project evolves — it's a living document

What it does

• Set custom instructions that apply to every conversation in the project
• Upload files as persistent knowledge (docs, code, data)
• Share projects with team members
• Maintain context across multiple conversations
• Organize work by project, client, or domain

Step-by-step setup

1. 1Go to claude.ai and click 'Projects' in the sidebar
2. 2Click 'Create Project' and give it a name
3. 3Add custom instructions — these apply to every conversation in this project
4. 4Upload relevant files (documentation, code, schemas, etc.)
5. 5Start a new conversation within the project — Claude has full context

Tips & tricks

• Upload your API documentation so Claude always has it as reference
• Custom instructions work like CLAUDE.md but for the web interface
• Each project can hold up to ~500 pages of uploaded content
• Share projects with your team for consistent AI assistance

What it does

• Generate runnable code with live preview
• Create interactive HTML/CSS/JS pages
• Build React components you can preview in the browser
• Generate SVG diagrams and visualizations
• Create documents in markdown format
• Produce Mermaid diagrams for architecture and flows

Step-by-step setup

1. 1Go to claude.ai — artifacts are enabled by default
2. 2Ask Claude to create something visual or interactive
3. 3Example: 'Create a React component for a pricing table'
4. 4The artifact appears in a panel on the right side
5. 5Click 'Copy' or 'Download' to save the output
6. 6Click 'Remix' to create variations

Tips & tricks

• Say 'create an artifact' explicitly if Claude gives plain text instead
• Artifacts support React, HTML, SVG, Mermaid, and Markdown
• You can iterate — 'make the header bigger' or 'add dark mode'
• Use artifacts for prototyping UI before building it for real

What it does

• See your screen via screenshots
• Move the mouse and click on elements
• Type text and use keyboard shortcuts
• Navigate websites and fill forms
• Interact with desktop applications
• Automate repetitive UI workflows

Step-by-step setup

1. 1Computer Use is available via the API
2. 2Use the official reference implementation

   docker pull ghcr.io/anthropics/anthropic-quickstarts:computer-use-demo

3. 3Run the container

   docker run -p 8080:8080 ghcr.io/anthropics/anthropic-quickstarts:computer-use-demo

4. 4Open http://localhost:8080 in your browser
5. 5Give Claude a task — it will control the virtual desktop

Tips & tricks

• Always run Computer Use in a sandboxed environment (Docker/VM)
• It works best with clear, specific instructions
• Computer Use is in beta — expect some rough edges
• Great for automating browser-based testing and form filling

What it does

• Send messages and get responses programmatically
• Stream responses in real-time
• Use system prompts to control behavior
• Process images and documents (vision)
• Use tool calling for structured outputs
• Build multi-turn conversations

Step-by-step setup

1. 1Get an API key at console.anthropic.com
2. 2Install the SDK

   npm install @anthropic-ai/sdk

3. 3Set your API key

   export ANTHROPIC_API_KEY=sk-ant-...

4. 4Make your first API call

   import Anthropic from "@anthropic-ai/sdk";
   
   const client = new Anthropic();
   
   const message = await client.messages.create({
     model: "claude-sonnet-4-6",
     max_tokens: 1024,
     messages: [
       { role: "user", content: "Hello, Claude!" }
     ],
   });
   
   console.log(message.content[0].text);

Tips & tricks

• Use `claude-haiku-4-5-20251001` for fast, cheap tasks
• Use `claude-sonnet-4-6` for the best balance of speed and quality
• Use `claude-opus-4-6` for the most complex reasoning tasks
• Enable streaming for better UX in chat applications
• Use system prompts to set Claude's role and behavior

What it does

• Run commands before/after file edits
• Auto-lint or format code after Claude makes changes
• Block certain operations with pre-hooks
• Log or audit Claude's actions
• Trigger builds or tests automatically
• Customize Claude Code's behavior per-project

Step-by-step setup

1. 1Hooks are configured in Claude Code settings.json
2. 2Open settings

   claude config

3. 3Add a hook that runs eslint after every file edit:

   {
     "hooks": {
       "afterEdit": "npx eslint --fix {file}",
       "afterWrite": "npx prettier --write {file}"
     }
   }

4. 4Hooks run automatically — no manual trigger needed

Tips & tricks

• Use `afterEdit` hooks for auto-formatting
• Keep hooks fast — slow hooks degrade the experience
• Test hooks manually before adding them to settings
• Use `{file}` placeholder for the affected file path

What it does

• Remember your role, preferences, and working style
• Store feedback — corrections and confirmations
• Track project context, decisions, and constraints
• Save references to external resources
• Automatically recall relevant memories in future sessions

Step-by-step setup

1. 1Memory works automatically — no setup needed
2. 2Tell Claude to remember something

   Remember that we use pnpm, not npm, in this project

3. 3Claude saves it to ~/.claude/projects/<project>/memory/
4. 4In future sessions, Claude automatically loads relevant memories
5. 5Tell Claude to forget something if needed

   Forget about the pnpm preference

Tips & tricks

• Memories persist across conversations, not just within one session
• Claude stores different types: user preferences, feedback, project context, references
• You can manually browse memories in ~/.claude/projects/
• Say 'remember this' to explicitly save important context

What it does

• Solve complex math and logic problems with step-by-step reasoning
• Plan multi-file code changes before making them
• Analyze trade-offs between different approaches
• Debug complex issues by reasoning through the code flow
• Produce more accurate and well-thought-out responses

Step-by-step setup

1. 1In Claude Code, extended thinking is used automatically for complex tasks
2. 2Via the API, enable it with the thinking parameter:

   const message = await client.messages.create({
     model: "claude-sonnet-4-6",
     max_tokens: 16000,
     thinking: {
       type: "enabled",
       budget_tokens: 10000,
     },
     messages: [
       { role: "user", content: "Solve this complex problem..." }
     ],
   });

3. 3The thinking output appears in the response alongside the answer

Tips & tricks

• Higher budget_tokens = more thinking time = better answers for hard problems
• Extended thinking is most useful for math, logic, architecture decisions, and debugging
• In Claude Code, you don't need to configure it — it activates automatically when needed
• Thinking tokens count toward your usage but produce significantly better results

What it does

• Let Claude call your custom functions
• Get structured JSON output instead of free text
• Connect Claude to databases, APIs, and external services
• Build agentic workflows with multiple tool calls
• Chain tools together for complex multi-step tasks

Step-by-step setup

1. 1Define tools in your API request:

   const message = await client.messages.create({
     model: "claude-sonnet-4-6",
     max_tokens: 1024,
     tools: [
       {
         name: "get_weather",
         description: "Get the current weather for a city",
         input_schema: {
           type: "object",
           properties: {
             city: { type: "string", description: "City name" },
           },
           required: ["city"],
         },
       },
     ],
     messages: [
       { role: "user", content: "What's the weather in Tokyo?" }
     ],
   });

2. 2Claude responds with a tool_use block containing the function name and arguments
3. 3Execute the function with the provided arguments
4. 4Send the result back as a tool_result message
5. 5Claude uses the result to formulate its final response

Tips & tricks

• Write clear, specific tool descriptions — Claude uses them to decide when to call each tool
• Use JSON Schema for input validation
• You can provide multiple tools — Claude picks the right one
• Tool use works with all Claude models

What it does

• Analyze screenshots and describe UI elements
• Read and extract text from images (OCR)
• Understand charts, graphs, and diagrams
• Compare multiple images
• Convert designs/mockups into code
• Debug UI issues from screenshots

Step-by-step setup

1. 1In Claude.ai: just paste or upload an image
2. 2In Claude Code: Claude can view images referenced in your project
3. 3Via the API:

   const message = await client.messages.create({
     model: "claude-sonnet-4-6",
     max_tokens: 1024,
     messages: [
       {
         role: "user",
         content: [
           {
             type: "image",
             source: {
               type: "base64",
               media_type: "image/png",
               data: "<base64-encoded-image>",
             },
           },
           { type: "text", text: "What's in this image?" },
         ],
       },
     ],
   });

Tips & tricks

• Supports PNG, JPEG, GIF, and WebP
• Max image size is ~5MB
• You can send multiple images in one message
• Great for 'convert this design to code' workflows