// AI · MCP

Supercharge Claude Code with MCP Servers and Skills

2025-11-02

What are MCP Servers and Skills?

Claude Code can be extended with two powerful mechanisms:

MCP (Model Context Protocol) Servers provide Claude with access to external tools, data sources, and APIs. They run as separate processes and expose capabilities through a standardized protocol.

Skills are reusable prompt templates that can be invoked within conversations to perform specialized tasks. Think of them as custom commands that execute complex workflows.

Together, they transform Claude Code from a coding assistant into a fully customizable development platform.

Why Use MCP and Skills?

MCP Servers Enable:

• Database Access - Query your production database directly from Claude
• API Integration - Connect to Slack, GitHub, Jira, or any REST API
• Custom Tools - Build domain-specific tools for your workflow
• Data Sources - Provide Claude with context from your systems

Skills Enable:

• Workflow Automation - Chain multiple operations into single commands
• Code Review Patterns - Standardize review processes across your team
• Testing Strategies - Automated test generation with your conventions
• Documentation - Generate docs that match your style guide

Setting Up Your First MCP Server

1. Install an MCP Server

Let’s start with the official filesystem MCP server:

npm install -g @modelcontextprotocol/server-filesystem

2. Configure Claude Code

Add the MCP server to your Claude Code settings:

Location: ~/.claude/settings.json

{
  "mcpServers": {
    "filesystem": {
      "command": "npx",
      "args": [
        "-y",
        "@modelcontextprotocol/server-filesystem",
        "/Users/yourname/projects"
      ]
    }
  }
}

3. Restart Claude Code

MCP servers are loaded when Claude Code starts. Restart to enable your new server.

4. Verify Installation

Ask Claude: “What MCP tools do you have access to?”

You should see filesystem tools like read_file, list_directory, etc.

Building a Custom MCP Server

Let’s build an MCP server that provides access to your team’s design tokens:

Server Implementation (TypeScript)

import { Server } from '@modelcontextprotocol/sdk/server/index.js'
import { StdioServerTransport } from '@modelcontextprotocol/sdk/server/stdio.js'
import { CallToolRequestSchema } from '@modelcontextprotocol/sdk/types.js'

const designTokens = {
  colors: {
    primary: '#007AFF',
    secondary: '#5856D6',
    success: '#34C759',
    danger: '#FF3B30',
  },
  spacing: {
    xs: '4px',
    sm: '8px',
    md: '16px',
    lg: '24px',
    xl: '32px',
  },
  typography: {
    fontFamily: 'SF Pro Display, -apple-system, sans-serif',
    fontSize: {
      body: '16px',
      heading: '24px',
      title: '32px',
    },
  },
}

const server = new Server(
  {
    name: 'design-tokens',
    version: '1.0.0',
  },
  {
    capabilities: {
      tools: {},
    },
  }
)

// Register tool
server.setRequestHandler(CallToolRequestSchema, async (request) => {
  if (request.params.name === 'get_design_tokens') {
    const category = request.params.arguments?.category

    if (category && designTokens[category]) {
      return {
        content: [
          {
            type: 'text',
            text: JSON.stringify(designTokens[category], null, 2),
          },
        ],
      }
    }

    return {
      content: [
        {
          type: 'text',
          text: JSON.stringify(designTokens, null, 2),
        },
      ],
    }
  }

  throw new Error(`Unknown tool: ${request.params.name}`)
})

// Start server
const transport = new StdioServerTransport()
await server.connect(transport)

Register Your Server

Add to ~/.claude/settings.json:

{
  "mcpServers": {
    "design-tokens": {
      "command": "node",
      "args": ["/path/to/your/design-tokens-server.js"]
    }
  }
}

Use in Claude Code

Now you can ask: “What are our primary and secondary colors?” and Claude will query your design tokens!

Creating Powerful Skills

Skills are stored in .claude/skills/ directory as markdown files.

Example: Code Review Skill

File: ~/.claude/skills/code-review.md

---
description: Perform comprehensive code review with security, performance, and best practices analysis
---

Perform a thorough code review of the current changes:

1. **Security Analysis**
   - Check for SQL injection vulnerabilities
   - Verify input validation
   - Check authentication/authorization
   - Look for exposed secrets or API keys

2. **Performance Review**
   - Identify N+1 queries
   - Check for inefficient algorithms
   - Review caching opportunities
   - Analyze bundle size impact

3. **Best Practices**
   - Verify TypeScript types are strict
   - Check error handling
   - Review naming conventions
   - Ensure code is DRY

4. **Testing Coverage**
   - Identify missing test cases
   - Suggest edge cases
   - Review test quality

Provide specific line numbers and actionable recommendations.

Using Skills

Invoke with /code-review in any conversation. Skills automatically execute with the current context.

Example: API Client Generator Skill

File: ~/.claude/skills/generate-api-client.md

---
description: Generate TypeScript API client with proper error handling and types
---

Generate a TypeScript API client for the endpoint specifications provided:

**Requirements:**
- Use fetch API with proper TypeScript types
- Include retry logic with exponential backoff
- Add request/response interceptors
- Implement proper error handling
- Generate Zod schemas for validation
- Include JSDoc comments
- Add usage examples

**Structure:**

Advanced MCP Examples

GitHub Integration MCP

Access GitHub directly from Claude:

{
  "mcpServers": {
    "github": {
      "command": "npx",
      "args": [
        "-y",
        "@modelcontextprotocol/server-github",
        "--token",
        "ghp_your_token_here"
      ]
    }
  }
}

Now ask: “Show me all open PRs in the cuppa-web repo” and Claude will fetch them!

Database Query MCP

Query your database from Claude:

{
  "mcpServers": {
    "postgres": {
      "command": "npx",
      "args": [
        "-y",
        "@modelcontextprotocol/server-postgres",
        "--connection-string",
        "postgresql://user:pass@localhost:5432/mydb"
      ]
    }
  }
}

Ask: “How many active users do we have?” and get real data!

Best Practices

MCP Server Development

1. Use TypeScript - Strong typing prevents runtime errors
2. Validate Inputs - Always validate tool arguments
3. Handle Errors Gracefully - Return helpful error messages
4. Add Rate Limiting - Prevent API abuse
5. Log Operations - Track tool usage for debugging
6. Secure Credentials - Never hardcode API keys

Skills Development

1. Be Specific - Clear instructions produce better results
2. Include Examples - Show Claude what you expect
3. Chain Operations - Break complex tasks into steps
4. Use Templates - Create reusable patterns
5. Test Thoroughly - Try skills in different contexts
6. Document Dependencies - Note required MCP servers

Troubleshooting

MCP Server Not Loading

# Check Claude Code logs
tail -f ~/.claude/logs/mcp-servers.log

# Verify server command works
node /path/to/your/server.js

# Check JSON syntax
cat ~/.claude/settings.json | jq

Skills Not Found

# Check skills directory
ls ~/.claude/skills/

# Verify frontmatter format
cat ~/.claude/skills/your-skill.md

# Reload Claude Code
# MCP servers require restart, skills reload automatically

Permission Errors

# Fix file permissions
chmod +x /path/to/server.js

# Check environment variables
echo $HOME/.claude/settings.json

Real-World Use Cases

1. Automated PR Reviews

MCP: GitHub server Skill: /review-pr [number] Workflow: Fetch PR, analyze code, check tests, suggest improvements

2. Production Debugging

MCP: Database + Logging server Skill: /debug-issue [error-id] Workflow: Query logs, check database state, analyze error patterns

3. Documentation Generation

MCP: Filesystem server Skill: /generate-docs Workflow: Scan codebase, extract types, generate markdown

4. Deployment Automation

MCP: CI/CD server Skill: /deploy [environment] Workflow: Run tests, build, deploy, verify

Ecosystem Resources

Official MCP Servers

• Filesystem - File operations
• GitHub - Repository management
• Slack - Team communication
• PostgreSQL - Database queries
• Puppeteer - Browser automation

Community Skills

• Code review patterns
• Testing strategies
• Documentation generators
• Refactoring workflows
• Security audits

Building Your Own

The MCP SDK provides everything needed to build custom servers:

npm create @modelcontextprotocol/server my-server

Next Steps

1. Install a basic MCP server - Start with filesystem
2. Create your first skill - Automate a common task
3. Build a custom MCP server - Connect to your tools
4. Share with your team - Standardize workflows
5. Join the community - Contribute and learn

Conclusion

MCP servers and Skills transform Claude Code into a programmable development environment. By connecting to your tools, data sources, and workflows, you create a personalized AI assistant that understands your specific context and requirements.

Start simple, experiment often, and gradually build a toolkit that amplifies your productivity.

Ready to get started?

Try this: Create a simple skill that generates a TypeScript interface from a JSON object. Then build an MCP server that validates data against your database schema. Combine them to create an automated API contract testing workflow.

The possibilities are endless! 🚀