MCP-Agent-Skill Core Trio

Foundations of AI Development Tools

MCP, Agent, and Skill are the core concepts of modern AI development tools. They work together to form the bridge between AI and developers. Understanding their relationships is key to mastering modern AI development tools.

┌─────────────────────────────────────────────────────────┐
│                    Claude Code (Your AI Partner)             │
└─────────────────────────────────────────────────────────┘
                              │
            ┌─────────────────┼─────────────────┐
            ▼                 ▼                 ▼
    ┌───────────────┐ ┌───────────────┐ ┌───────────────┐
    │     Skill     │ │    Agent      │ │     Tool      │
    │  (Extend)     │ │  (Execute)   │ │  (Use)        │
    └───────────────┘ └───────────────┘ └───────────────┘
            │                 │                 │
            └─────────────────┴─────────────────┘
                              │
                              ▼
                    ┌───────────────────┐
                    │        MCP        │
                    │  (Protocol Std)   │
                    └───────────────────┘
                              │
                              ▼
                    ┌───────────────────┐
                    │External Tools/Data │
                    │(Files/Git/DB)      │
                    └───────────────────┘

🔗

MCP - Model Context Protocol

Connection Layer Protocol

MCP is an open standard protocol introduced by Anthropic that defines how AI models interact with the external world. It solves the problem: every tool has different APIs, making it hard for AI to use them uniformly. MCP is like the "USB-C interface" for AI—regardless of device type, everything can connect through the same standard.

What is MCP?

MCP is a communication protocol that defines how AI can: • Request to execute an operation • Get external data • Interact with local applications

How It Works

1. MCP client (Claude Code) sends request 2. MCP server receives request 3. Server calls external tool/API 4. Result returns to AI model

Config Example

# MCP Server Config Example
{
  "mcpServers": {
    "filesystem": {
      "command": "npx",
      "args": ["-y", "@anthropic-ai/mcp-filesystem"]
    },
    "git": {
      "command": "npx", 
      "args": ["-y", "@anthropic-ai/mcp-git"]
    }
  }
}

🤖

Agent - AI Agent

Task Execution Layer

Agent is an AI system capable of autonomously planning and executing complex tasks. Unlike simple Q&A, Agent can: understand goals → make plans → take actions → evaluate results → adjust strategy

Core Capabilities

• Understand complex instructions
• Break large tasks into small steps
• Autonomously decide next steps
• Use tools to complete operations
• Learn from execution results

Usage Example

# Claude Agent Conversation Example

User: Help me refactor the error handling in this project

Claude Agent:
I'll help you refactor the error handling. Let me first analyze the current code structure...

1. Scan error handling code in the project
2. Identify repeated patterns
3. Design unified error handling approach
4. Implement refactoring module by module
5. Run tests to ensure nothing is broken

[Agent autonomously executes all above steps]

vs GitHub Copilot

| Feature | GitHub Copilot | Claude Agent |
|----------|---------------|
| Interaction | Real-time suggestions | Conversational execution |
| Task scope | Lines/functions | Complex project tasks |
| Autonomy | Passive response | Proactive planning |
| Context | Current file | Entire codebase |

🛠️

Skill - Capability Extension

Capability Enhancement Layer

Skill is a custom module that extends Claude Code capabilities. Through Skills, you can: define common commands, encapsulate complex workflows, add domain knowledge

Skill Types

• **Slash Commands**: like /test, /refactor, /review • **Automated Workflows**: like auto-generate docs, batch rename • **Domain Knowledge**: like best practices for specific frameworks • **Template Generation**: like component templates, test templates

Definition Example

# Skill Definition Example (~/.claude/skills/custom-skill.md)

---
name: my-custom-skill
description: Auto-generate component documentation
---

# Custom Skill

This Skill generates detailed documentation for Vue components.

## Usage

Type /docgen in conversation to invoke.

How to Use

# Using Skills 1. Built-in Skills (like /test, /lint) 2. Custom Skills (user-created) 3. Project-specific Skills (in project .claude/skills/)

Built-in Skills

Common Built-in Skills in Claude Code: • /test - Generate test code • /explain - Explain code • /refactor - Refactor code • /review - Code review • /fix - Fix bugs

The Relationship Between the Three

MCP + Agent

MCP + Agent: Agent uses MCP protocol to call external tools. For example: when Agent needs to read/write files, it completes via MCP filesystem server.

Agent + Skill

Agent + Skill: Skills are Agent's "skill packs". When user invokes a specific Skill, Agent uses corresponding prompt templates and workflows.

Skill + MCP

Skill + MCP: Skills can encapsulate complex MCP calls. For example: a "Deploy Skill" might call MCP's Git + Docker + CLI tools.

**MCP** is the底层协议, enabling Agent to communicate with external world
**Agent** is the execution主体, planning and executing tasks based on user needs
**Skill** is the能力扩展, making specific tasks more efficient and professional

The three work together, forming the foundation of modern AI development tools.