The Complete Claude Code Guide — Skills, Hooks, MCP, and Subagents: Everything from 10 Months of Daily Use

This is Hamamoto from TIMEWELL Inc.

This article is a Japanese adaptation of the viral Claude Code guide "The Shorthand Guide to Everything Claude Code" by @affaanmustafa.

The author, @affaanmustafa, has used Claude Code every single day since its experimental release in February 2025 — a span of 10 months — and won the Anthropic x Forum Ventures hackathon with a product called Zenith.

Claude Code Configuration Overview

Setting	Overview
Skills	Rules and prompt shortcuts scoped to specific workflows
Commands	Skills executable via slash commands
Hooks	Trigger-based automation tied to tool calls and lifecycle events
Subagents	Processes the main Claude can delegate tasks to with limited scope
Rules	Best practices Claude should always follow
MCPs	Model Context Protocol — connects Claude to external services
Plugins	Packages of tools that are easy to install

---

Skills and Commands

Skills are like rules, scoped to a specific workflow. They act as prompt shortcuts for executing particular workflows.

Use Cases

• After a long coding session with Opus 4.5, want to clean up dead code and unnecessary .md files? → /refactor-clean
• Need tests? → /tdd, /e2e, /test-coverage

Skills and commands can be chained together in a single prompt.

Directory Structure

# Skills structure
~/.claude/skills/
  pmx-guidelines.md      # Project-specific patterns
  coding-standards.md    # Language best practices
  tdd-workflow/          # Multi-file skill with README.md
  security-review/       # Checklist-based skill

Skills vs. Commands

Item	Skills	Commands
Location	~/.claude/skills	~/.claude/commands
Purpose	Broader workflow definitions	Quick executable prompts
How Used	Referenced	Executed via slash command

Practical Skill Example: Updating a Code Map

You can create a skill that updates the code map at checkpoints. This lets Claude navigate the codebase quickly without consuming context.

# ~/.claude/skills/codemap-updater.md
# Skill to periodically update the code map

---

Hooks

Hooks are trigger-based automations that fire on specific events. Unlike Skills, they are limited to tool calls and lifecycle events.

Hook Types

Hook Type	Timing	Example Use
PreToolUse	Before tool execution	Validation, reminders
PostToolUse	After tool completes	Formatting, feedback loops
UserPromptSubmit	When message is sent	Pre-processing input
Stop	When Claude finishes responding	Post-processing, auditing
PreCompact	Before context compression	Saving critical info
Notification	When permission is requested	Approval flows

Practical Example: tmux Reminder Before Long Commands

{
  "PreToolUse": [
    {
      "matcher": "tool == \"Bash\" && tool_input.command matches \"(npm|pnpm|yarn|cargo|pytest)\"",
      "hooks": [
        {
          "type": "command",
          "command": "if [ -z \"$TMUX\" ]; then echo '[Hook] Consider using tmux for session persistence' >&2; fi"
        }
      ]
    }
  ]
}

ProTip

Use the hookify plugin to create Hooks conversationally instead of writing JSON by hand. Just run /hookify and describe what you want.

---

Subagents

Subagents are processes the main orchestrator (main Claude) can delegate tasks to with a limited scope. They can run in the background or foreground and free up the main agent's context.

Benefits of Subagents

• Work with Skills to delegate tasks to subagents running a subset of skills
• Can be sandboxed with specific tool permissions
• Can use skills autonomously

Directory Structure

# Subagent structure
~/.claude/agents/
  planner.md           # Planning feature implementations
  architect.md         # System design decisions
  tdd-guide.md         # Test-driven development
  code-reviewer.md     # Quality and security reviews
  security-reviewer.md # Vulnerability analysis
  build-error-resolver.md
  e2e-runner.md
  refactor-cleaner.md

It is important to properly scope tools, MCPs, and permissions for each subagent.

---

Rules and Memory

The .rules folder contains .md files describing best practices that Claude should always follow.

Two Approaches

1. Single CLAUDE.md — Everything in one file (user-level or project-level)
2. Rules Folder — Modular .md files grouped by concern

Directory Structure

~/.claude/rules/
  security.md      # No hardcoded secrets, input validation
  coding-style.md  # Immutability, file organization
  testing.md       # TDD workflow, 80% coverage
  git-workflow.md  # Commit format, PR process
  agents.md        # When to delegate to subagents
  performance.md   # Model selection, context management

Example Rules

• No emojis in the codebase
• Avoid purple in frontend
• Always test code before deploying
• Prefer modular code over giant files
• Never commit console.log

---

MCP (Model Context Protocol)

MCP connects Claude directly to external services. It's not a replacement for APIs — it's a prompt-driven wrapper around APIs, offering more flexibility when navigating information.

Use Cases

• Supabase MCP: Claude retrieves specific data and runs SQL directly without copy-pasting
• Chrome in Claude: Claude autonomously operates the browser and observes behavior

Important: Context Window Management

Choose MCPs carefully. It is recommended to keep all MCPs in your user settings while disabling those not in use.

Watch out for:

• A 200k context window before compression can shrink to 70k if too many tools are enabled
• Significant performance degradation

Recommendations

Item	Recommended Value
MCPs in settings	20–30
Enabled MCPs	Under 10
Active tools	Under 80

Navigate with /plugins or run /mcp to see installed MCPs and their status.

---

Plugins

Plugins are packaged tools that are easy to install — replacing tedious manual setup. They can bundle Skills + MCPs, Hooks, or tools together.

Installing a Plugin

# Add a marketplace
claude plugin marketplace add https://github.com/mixedbread-ai/mgrep

# Open Claude, run /plugins, find the new marketplace and install

LSP Plugin

Especially useful if you frequently run Claude Code outside an editor. Language Server Protocol allows Claude to get real-time type checking, jump-to-definition, and intelligent completions without opening an IDE.

# Example enabled plugins
typescript-lsp@claude-plugins-official  # TypeScript intelligence
pyright-lsp@claude-plugins-official     # Python type checking
hookify@claude-plugins-official         # Conversational Hook creation
mgrep@Mixedbread-Grep                   # Better search than ripgrep

Like MCPs, watch your context window.

---

Tips & Tricks

Keyboard Shortcuts

Shortcut	Function
Ctrl+U	Delete entire line (faster than backspace)
!	Quick bash command prefix
@	File search
/	Start a slash command
Shift+Enter	Multi-line input
Tab	Toggle thinking display
Esc Esc	Interrupt Claude / restore code

Parallel Workflows

/fork — Fork a conversation to run non-overlapping tasks in parallel. Use instead of queuing up multiple messages back to back.

Git Worktrees — Work with parallel Claude instances without conflicts. Each worktree is an independent checkout.

git worktree add ../feature-branch feature-branch
# Run separate Claude instances in each worktree

Running Long Commands with tmux

Stream and monitor logs and bash processes that Claude executes.

tmux new -s dev
# Claude runs commands here; detach and reattach as needed
tmux attach -t dev

mgrep > grep

mgrep is a major improvement over ripgrep/grep. Install it from the plugin marketplace and use the /mgrep skill. Supports both local and web search.

mgrep "function handleSubmit"  # Local search
mgrep --web "Next.js 15 app router changes"  # Web search

Other Useful Commands

Command	Function
/rewind	Revert to a previous state
/statusline	Customize with branch, context %, todos
/checkpoints	File-level undo points
/compact	Manually trigger context compression

---

Editor Setup

An editor isn't required, but it can positively or negatively impact your Claude Code workflow. A good editor paired with Claude Code enables real-time file tracking, quick navigation, and integrated command execution.

Zed (Author's Recommendation)

A Rust-based editor — lightweight, fast, and highly customizable.

Why Zed Works Well with Claude Code:

Feature	Detail
Agent Panel Integration	Track Claude's file edits in real time
Performance	Built in Rust — instant startup, no lag on large codebases
CMD+Shift+R	Quick access to all custom slash commands
Minimal Resource Use	Doesn't compete with Claude for resources during heavy operations
Vim Mode	Full vim keybindings

Best Practices:

• Split screen — terminal with Claude Code on one side, editor on the other
• Ctrl + G — Quickly open in Zed the file Claude is currently working on
• Auto-save — Enable so Claude always reads the latest version of files
• Git integration — Review Claude's changes before committing
• File watcher — Confirm auto-reload of changed files is enabled

VSCode / Cursor

Also a viable option. Can be used in terminal mode, with \ide to auto-sync with the editor and enable LSP features (slightly verbose with plugins). Or choose an extension with a matching UI that integrates more deeply with the editor.

---

The Author's Actual Setup

Enabled Plugins (typically only 4–5 active)

ralph-wiggum@claude-code-plugins       # Loop automation
frontend-design@claude-code-plugins    # UI/UX patterns
commit-commands@claude-code-plugins    # Git workflow
security-guidance@claude-code-plugins  # Security checks
pr-review-toolkit@claude-code-plugins  # PR automation
typescript-lsp@claude-plugins-official # TS intelligence
hookify@claude-plugins-official        # Hook creation
code-simplifier@claude-plugins-official
feature-dev@claude-code-plugins
explanatory-output-style@claude-code-plugins
code-review@claude-code-plugins
context7@claude-plugins-official       # Live documentation
pyright-lsp@claude-plugins-official    # Python types
mgrep@Mixedbread-Grep                  # Better search

MCP Servers (user-level config)

{
  "github": { "command": "npx", "args": ["-y", "@modelcontextprotocol/server-github"] },
  "firecrawl": { "command": "npx", "args": ["-y", "firecrawl-mcp"] },
  "supabase": {
    "command": "npx",
    "args": ["-y", "@supabase/mcp-server-supabase@latest", "--project-ref=YOUR_REF"]
  },
  "memory": { "command": "npx", "args": ["-y", "@modelcontextprotocol/server-memory"] },
  "sequential-thinking": {
    "command": "npx",
    "args": ["-y", "@modelcontextprotocol/server-sequential-thinking"]
  },
  "vercel": { "type": "http", "url": "https://mcp.vercel.com" },
  "railway": { "command": "npx", "args": ["-y", "@railway/mcp-server"] },
  "cloudflare-docs": { "type": "http", "url": "https://docs.mcp.cloudflare.com/mcp" }
}

Important: 14 MCPs are configured, but only 5–6 are enabled per project to keep the context window healthy.

Key Hooks Configuration

{
  "PreToolUse": [
    // tmux reminder for long-running commands
    { "matcher": "npm|pnpm|yarn|cargo|pytest", "hooks": ["tmux reminder"] },
    // Block unnecessary .md file creation
    { "matcher": "Write && .md file", "hooks": ["block unless README/CLAUDE"] },
    // Review before git push
    { "matcher": "git push", "hooks": ["open editor for review"] }
  ],
  "PostToolUse": [
    // Auto-format JS/TS with Prettier
    { "matcher": "Edit && .ts/.tsx/.js/.jsx", "hooks": ["prettier --write"] },
    // TypeScript check after editing
    { "matcher": "Edit && .ts/.tsx", "hooks": ["tsc --noEmit"] },
    // Warn about console.log
    { "matcher": "Edit", "hooks": ["grep console.log warning"] }
  ],
  "Stop": [
    // Audit console.logs before session ends
    { "matcher": "*", "hooks": ["check modified files for console.log"] }
  ]
}

Subagent Configuration

~/.claude/agents/
  planner.md           # Break down features
  architect.md         # System design
  tdd-guide.md         # Write tests first
  code-reviewer.md     # Quality review
  security-reviewer.md # Vulnerability scan
  build-error-resolver.md
  e2e-runner.md        # Playwright tests
  refactor-cleaner.md  # Remove dead code
  doc-updater.md       # Sync documentation

---

GitHub Actions CI/CD

You can set up automated PR code reviews with GitHub Actions. Once configured, Claude will automatically review PRs.

---

Sandbox

Use sandbox mode for risky operations. Claude runs in a restricted environment that does not affect your real system.

Conversely, --dangerously-skip-permissions lets Claude operate freely — but it can become destructive if you're not careful.

---

Key Takeaways

Point	Detail
Don't over-engineer	Treat configuration as fine-tuning, not architecture
Context window is precious	Disable unused MCPs and plugins
Run in parallel	Fork conversations, use git worktrees
Automate the repetitive	Hooks for formatting, linting, and reminders
Scope subagents tightly	Limited tools = focused execution

---

Summary

Claude Code is more than just an AI coding assistant. By combining Skills, Hooks, Subagents, MCPs, and Plugins, you can build a development environment tailored to you.

Key points from this article:

• Use Skills/Commands to shortcut your workflow
• Use Hooks to automate before and after tool calls
• Delegate tasks to subagents to free up context
• Connect to external services via MCP (but be selective about what you enable)
• Context window management is the most important discipline
• Zed editor pairs particularly well with Claude Code

Use this guide as a starting point to optimize your own Claude Code environment.

---

Source: @affaanmustafa — The Shorthand Guide to Everything Claude Code

Related Articles

• Working Part-Time After Two Maternity Leaves — A Real Story of How Work Shapes Identity | TIMEWELL
• Before Parental Leave (Part 2): Three Things You Must Do to Take Leave During Peak Season
• A Fifth-Generation Builder Finds His Own Path at a Hands-On Architecture Firm — Fujita Construction