Stay Updated!

Get the latest posts and insights delivered directly to your inbox

Skip to content

Understanding Claude Code's Full Stack: MCP, Skills, Subagents, and Hooks Explained

Published: at 

I’ve been using Claude Code for months. Mostly for quick edits and generating boilerplate. The vibe coding tool everyone talks about.

Then I actually explored what it could do. MCP servers. Slash commands. Plugins. Skills. Hooks. Subagents. CLAUDE.md files.

I was blown away. Claude Code isn’t just a coding assistant. It’s a framework for orchestrating AI agents. It speeds up development in ways I’ve never seen before.

Most people use one or two features. They miss how these features stack together. This guide explains each concept in the order they build on each other — from external connections to automatic behaviors.

Claude Code is, with hindsight, poorly named. It’s not purely a coding tool: it’s a tool for general computer automation. Anything you can achieve by typing commands into a computer is something that can now be automated by Claude Code. It’s best described as a general agent. Skills make this a whole lot more obvious and explicit.

— Simon Willison, Claude Skills are awesome, maybe a bigger deal than MCP

TLDR

  • CLAUDE.md files give Claude project memory and context
  • Slash commands are user-triggered, repeatable workflows
  • Subagents handle parallel work in isolated contexts
  • Hooks automatically react to lifecycle events
  • Plugins bundle commands, hooks, and skills for sharing
  • MCP connects external tools through a universal protocol
  • Skills activate automatically based on task context

The feature stack

  1. Model Context Protocol (MCP) — the foundation for connecting external tools and data sources
  2. Claude Code core features — project memory, slash commands, subagents, and hooks
  3. Plugins — shareable packages that bundle commands, hooks, and skills
  4. Agent Skills — automatic, model-invoked capabilities that activate based on task context
Robot Claude Senpai with a knowing expression
Claude Senpai knows all the features!

1) Model Context Protocol (MCP) — connecting external systems

MCPServerClaudeMCPServerClaudeUser/mcp connect githubAuthenticate + requestcapabilitiesReturntools/resources/promptsDisplay /mcp__github__*commandsUser

What it is. The Model Context Protocol What Is the Model Context Protocol (MCP)? How It Works Learn how MCP (Model Context Protocol) standardizes AI tool integration, enabling LLMs to interact with external services, databases, and APIs through a universal protocol similar to USB-C for AI applications. mcptypescriptai connects Claude Code to external tools and data sources. Think universal adapter for GitHub, databases, APIs, and other systems.

How it works. Connect an MCP server, get access to its tools, resources, and prompts as slash commands:

# Install a server
claude mcp add playwright npx @playwright/mcp@latest

# Use it
/mcp__playwright__create-test [args]

🚨 Context Window Management

Each MCP server consumes context. Monitor with /context and remove unused servers.

The gotcha. MCP servers expose their own tools — they don’t inherit Claude’s Read, Write, or Bash unless explicitly provided.


2) Claude Code core features

2.1) Project memory with CLAUDE.md

What it is. Markdown files Claude loads at startup. They give Claude memory about your project’s conventions, architecture, and patterns.

How it works. Files merge hierarchically from enterprise → user (~/.claude/CLAUDE.md) → project (./CLAUDE.md). When you reference @components/Button.vue, Claude also reads CLAUDE.md from that directory and its parents.

Example structure for a Vue app:

When you work on src/components/Button.vue, Claude loads context from:

  1. Enterprise CLAUDE.md (if configured)
  2. User ~/.claude/CLAUDE.md (personal preferences)
  3. Project root CLAUDE.md (project-wide info)
  4. src/components/CLAUDE.md (component-specific patterns)

What goes in. Common commands, coding standards, architectural patterns. Keep it concise — reference guide, not documentation.

Here’s my blog’s CLAUDE.md:

# CLAUDE.md

## Project Overview

Alexander Opalic's personal blog built on AstroPaper - Astro-based blog theme with TypeScript, React, TailwindCSS.

**Tech Stack**: Astro 5, TypeScript, React, TailwindCSS, Shiki, FuseJS, Playwright

## Development Commands

```bash
npm run dev              # Build + Pagefind + dev server (localhost:4321)
npm run build            # Production build
npm run lint             # ESLint for .astro, .ts, .tsx
---

2.2) Slash Commands — explicit, reusable prompts

/my-command args

Pre-execution Bash Steps

Markdown prompt

Claude processes

Result

What they are. Markdown files in .claude/commands/ you trigger manually by typing /name [args]. User-controlled workflows.

Key features:

When to use. Repeatable workflows you trigger on demand — code reviews, commit messages, scaffolding.

Example structure:

---
description: Create new slash commands
argument-hint: [name] [purpose]
allowed-tools: Bash(mkdir:*), Bash(tee:*)
---

# /create-command

Generate slash command files with proper structure.

**Inputs:** `$1` = name, `$2` = purpose
**Outputs:** `STATUS=WROTE PATH=.claude/commands/{name}.md`

[... instructions ...]

Commands can create commands. Meta, but powerful.


2.3) Subagents — specialized AI personalities for delegation

SubBSubAMainSubBSubAMainpar[Parallel execution]task: security analysistask: test generationresultsresults

What they are. Pre-configured AI personalities with specific expertise areas. Each subagent has its own system prompt, allowed tools, and separate context window. When Claude encounters a task matching a subagent’s expertise, it delegates automatically.

Why use them. Keep your main conversation clean while offloading specialized work. Each subagent works independently in its own context window, preventing token bloat. Run multiple subagents in parallel for concurrent analysis.

💪 Avoiding Context Poisoning

Subagents prevent “context poisoning” — when detailed implementation work clutters your main conversation. Use subagents for deep dives (security audits, test generation, refactoring) that would otherwise fill your primary context with noise.

Example structure:

---
name: security-auditor
description: Analyzes code for security vulnerabilities
tools: Read, Grep, Bash  # Controls what this personality can access
model: sonnet  # Optional: sonnet, opus, haiku, inherit
---

You are a security-focused code auditor.

Identify vulnerabilities (XSS, SQL injection, CSRF, etc.)
Check dependencies and packages
Verify auth/authorization
Review data validation

Provide severity levels: Critical, High, Medium, Low.
Focus on OWASP Top 10.

The system prompt shapes the subagent’s behavior. The description helps Claude know when to delegate. The tools restrict what the personality can access.

Best practices: One expertise area per subagent. Grant minimal tool access. Use haiku for simple tasks, sonnet for complex analysis. Run independent work in parallel.


2.4) Hooks — automatic event-driven actions

Lifecycle Event

Hook 1

Hook 2

Hook 3

What they are. JSON-configured handlers in .claude/settings.json that trigger automatically on lifecycle events. No manual invocation.

Available events: PreToolUse, PostToolUse, UserPromptSubmit, Notification, Stop, SubagentStop, SessionStart

Two modes:

Example: Auto-lint after file edits.

{
  "hooks": {
    "PostToolUse": [{
      "matcher": "Edit|Write",
      "hooks": [{
        "type": "command",
        "command": "\"$CLAUDE_PROJECT_DIR\"/.claude/hooks/run-oxlint.sh"
      }]
    }]
  }
}
#!/usr/bin/env bash
file_path="$(jq -r '.tool_input.file_path // ""')"

if [[ "$file_path" =~ \.(js|jsx|ts|tsx|vue)$ ]]; then
  pnpm lint:fast
fi

Common uses: Auto-format after edits, require approval for bash commands, validate writes, initialize sessions.


3) Plugins — shareable, packaged configurations

Plugin

name

version

author

Commands

Hooks

Skills

What they are. Distributable bundles of commands, hooks, skills, and metadata. Share your setup with teammates or install pre-built configurations.

Basic structure:

When to use. Share team configurations, package domain workflows Building My First Claude Code Plugin How I built a Claude Code plugin to generate skills, agents, commands, and more—and stopped copy-pasting boilerplate. claude-codeaitooling +1 , distribute opinionated patterns, install community tooling.

How it works. Install a plugin, get instant access. Components merge seamlessly — hooks combine, commands appear in autocomplete, skills activate automatically.


4) Agent Skills — automatic, task-driven capabilities

yes

ok

blocked

no

Task context

Match SKILL.md
description?

Available skills
(personal / project / plugin)

Check allowed-tools

Run skill

Skip

Return result

What they are. Folders with SKILL.md descriptors plus optional scripts. Unlike slash commands, skills activate automatically when their description matches the task context.

How Claude discovers them. When you give Claude a task, it reviews available skill descriptions to find relevant ones. If a skill’s description field matches the task context, Claude loads the full skill instructions and applies them. This happens transparently — you never explicitly invoke skills.

Official Example Skills

Check out the official Anthropic skills repository for ready-to-use examples.

Claude Skills are awesome, maybe a bigger deal than MCP

— Simon Willison, Claude Skills are awesome, maybe a bigger deal than MCP

💪 Advanced Skills: Superpowers Library

Want rigorous, spec-driven development? Check out obra’s superpowers — a comprehensive skills library that enforces systematic workflows.

What it provides: TDD workflows (RED-GREEN-REFACTOR), systematic debugging, code review processes, git worktree management, and brainstorming frameworks. Each skill pushes you toward verification-based development instead of “trust me, it works.”

The philosophy: Test before implementation. Verify with evidence. Debug systematically through four phases. Plan before coding. No shortcuts.

These skills work together to prevent common mistakes. The brainstorming skill activates before implementation. The TDD skill enforces writing tests first. The verification skill blocks completion claims without proof.

Use when: You want Claude to be more disciplined about development practices, especially for production code.

Where to put them:

What you need:

Why they’re powerful. Skills package expertise Claude applies automatically. Style enforcement, doc updates, test hygiene, framework patterns — all without manual triggering.

Skills vs CLAUDE.md. Think of skills as modular chunks of a CLAUDE.md file. Instead of Claude reviewing a massive document every time, skills let Claude access specific expertise only when needed. This improves context efficiency while maintaining automatic behavior.

Key difference. Skills are “always on.” Claude activates them based on context. Commands require manual invocation.

🚨 Skills vs Commands: The Gray Area

Some workflows could be either a skill or a command. Example: git worktree management.

Make it a skill if: You want Claude to automatically consider git worktrees whenever relevant to the conversation.

Make it a command if: You want explicit control over when worktree logic runs (e.g., /create-worktree feature-branch).

The overlap is real — choose based on whether you prefer automatic activation or manual control.

Automatic vs Manual Triggering

Subagents and Skills activate automatically when Claude determines they’re relevant to the task. You don’t need to invoke them manually — Claude uses them proactively when it thinks they’re useful.

Slash commands require manual triggering — you type /command-name to run them.

This is the fundamental difference: automation vs explicit control.


Putting it all together

Here’s how these features work together in practice:

  1. Memory (CLAUDE.md) — Establish project context and conventions that Claude always knows
  2. Slash commands — Create explicit shortcuts for workflows you want to trigger on demand
  3. Subagents — Offload parallel or isolated work to specialized agents
  4. Hooks — Enforce rules and automate repetitive actions at key lifecycle events
  5. Plugins — Package and distribute your entire setup to others
  6. MCP — Connect external systems and make their capabilities available as commands
  7. Skills — Define automatic behaviors that activate based on task context

Example: A Task-Based Development Workflow

Here’s a real-world workflow that combines multiple features:

Setup phase:

Planning phase (Chat 1):

Implementation phase (Chat 2):

Why this works: Main context stays focused on planning. Heavy implementation work happens in isolated context. Skills handle documentation. Hooks enforce quality standards. No context pollution.

Decision guide: choosing the right tool

Quick Reference Cheat Sheet

For a comprehensive visual guide to all Claude Code features, check out the Awesome Claude Code Cheat Sheet.

Feature comparison

Source

CategorySkillMCPSubagentSlash Command
Triggered ByAgentBothBothEngineer
Context EfficiencyHighLowHighHigh
Context Persistence
Parallelizable
Specializable
Sharable
ModularityHighHighMidMid
Tool Permissions
Can Use Prompts
Can Use SkillsKind of
Can Use MCP Servers
Can Use Subagents

Real-world examples

Use CaseBest ToolWhy
”Always use Pinia for state management in Vue apps”CLAUDE.mdPersistent context that applies to all conversations
Generate standardized commit messagesSlash CommandExplicit action you trigger when ready to commit
Check Jira tickets and analyze security simultaneouslySubagentsParallel execution with isolated contexts
Run linter after every file editHookAutomatic reaction to lifecycle event
Share your team’s Vue testing patternsPluginDistributable package with commands + skills
Query PostgreSQL database for reportsMCPExternal system integration
Detect style guide violations during any editSkillAutomatic behavior based on task context
Create React components from templatesSlash CommandManual workflow with repeatable structure
”Never use any type in TypeScript”HookAutomatic enforcement after code changes
Auto-format code on saveHookEvent-driven automation
Connect to GitHub for issue managementMCPExternal API integration
Run comprehensive test suite in parallelSubagentIsolated, resource-intensive work
Deploy to staging environmentSlash CommandManual trigger with safeguards
Enforce TDD workflow automaticallySkillContext-aware automatic behavior
Initialize new projects with team standardsPluginShareable, complete configuration

Stay Updated!

Subscribe to my newsletter for more TypeScript, Vue, and web dev insights directly in your inbox.

  • Background information about the articles
  • Weekly Summary of all the interesting blog posts that I read
  • Small tips and trick
Subscribe Now

Most Related Posts