Skip to main content

MCP and Skills

What Is MCP​

When you're using AI to write code, have you ever run into this: you want the AI to look up a GitHub issue, query a database, or check what a webpage looks like — but it can't, because it doesn't have access to those tools?

MCP (Model Context Protocol) solves exactly this problem.

In short, MCP is a standard protocol proposed by Anthropic that lets AI connect to external tools and data sources. With MCP, the AI gets "hands" and "eyes" — it's no longer just a mouth that can talk.

Think of it this way: an AI without MCP is like a person locked in a room who can only learn about the outside world through your verbal descriptions. With MCP, the door opens — it can directly operate GitHub, query databases, browse the web, and call all kinds of APIs.

The MCP architecture is straightforward:

┌──────────────┐     MCP Protocol    ┌──────────────────┐
│  AI Client   │  ←──────────────→   │  MCP Server       │
│ (Cursor/     │                     │  (GitHub/DB/      │
│  Claude Code)│                     │   Browser/...)    │
└──────────────┘                     └──────────────────┘

AI clients and MCP servers communicate via a standard protocol. Each MCP server handles a specific external service. You only need to configure it once, and the AI will automatically call the right tool when needed.

Installing MCP in Different IDEs​

Installing MCP in Cursor​

Cursor offers the simplest MCP installation method:

  1. Open Cursor, go to Settings → MCP
  2. Click Add new global MCP server or Add new project MCP server
  3. A .cursor/mcp.json file will open — just paste your config in there

Or create .cursor/mcp.json directly in your project root:

{
  "mcpServers": {
    "github": {
      "command": "npx",
      "args": ["-y", "@modelcontextprotocol/server-github"],
      "env": {
        "GITHUB_PERSONAL_ACCESS_TOKEN": "***"
      }
    },
    "filesystem": {
      "command": "npx",
      "args": ["-y", "@modelcontextprotocol/server-filesystem", "/path/to/dir"]
    }
  }
}

The nice thing about Cursor is that it has a toggle — you can enable or disable any MCP server at any time.

Installing MCP in Claude Code​

Claude Code uses a .mcp.json file in your project root:

{
  "mcpServers": {
    "github": {
      "command": "npx",
      "args": ["-y", "@modelcontextprotocol/server-github"],
      "env": {
        "GITHUB_PERSONAL_ACCESS_TOKEN": "***"
      }
    }
  }
}

You can also add one quickly via the command line:

# Add an MCP server
claude mcp add github -- npx -y @modelcontextprotocol/server-github

# Add an MCP server with environment variables
claude mcp add github -e GITHUB_PERSONAL_ACCESS_TOKEN=ghp_xxx -- npx -y @modelcontextprotocol/server-github

# List installed MCPs
claude mcp list

# Remove an MCP
claude mcp remove github

Configuration Scope​

Whether you're using Cursor or Claude Code, MCP configs come in two levels:

  • Global config: Available across all projects. Best for general-purpose tools like the filesystem MCP.
  • Project config: Only active in the current project. Best for project-specific tools like a particular database MCP.

Project-level configs go in .mcp.json or .cursor/mcp.json at the project root. You can commit them to Git so teammates can use them right away after cloning.

Top 10 Practical MCPs​

Here are the 10 most useful MCPs in my opinion — nearly every indie developer can benefit from them:

1. GitHub MCP​

Purpose: Interact with GitHub repos directly Install: npx -y @modelcontextprotocol/server-github Requires: GitHub Personal Access Token

Lets your AI create issues, review PRs, search code, manage releases, and check Actions status. All those clicks you used to do on the GitHub website? Now just use natural language: "Create an issue titled 'Login page layout broken on mobile' with the bug label."

2. Filesystem MCP​

Purpose: Read and write local files Install: npx -y @modelcontextprotocol/server-filesystem /your/project/path

While AI can already read code files, this MCP enables more complex operations: batch file processing, cross-directory operations, and file metadata inspection. Great for scenarios that require managing files across multiple directories.

3. PostgreSQL / MySQL MCP​

Purpose: Query databases directly Install: npx -y @modelcontextprotocol/server-postgres "postgresql://user:***@localhost:5432/mydb"

Lets the AI connect directly to your database to query data, analyze table schemas, and write SQL. Incredibly handy for debugging: "Show me the last 10 user registrations" — no need to open a separate database client.

4. Brave Search MCP​

Purpose: Let AI search the internet Install: npx -y @modelcontextprotocol/server-brave-search Requires: Brave Search API Key (free tier is sufficient)

AI has a knowledge cutoff, but with a search MCP, it can look up the latest information in real time. For example: "Search for the breaking changes in Next.js 15."

5. Browser MCP / Puppeteer​

Purpose: Let AI control a browser Install: npx -y @modelcontextprotocol/server-puppeteer

Lets AI open web pages, take screenshots, read page content, and fill out forms. Great for checking page rendering during frontend development or automatically scraping data.

6. Memory MCP​

Purpose: Let AI remember information across sessions Install: npx -y @modelcontextprotocol/server-memory

Gives AI persistent "memory." You can have it remember your project architecture, tech preferences, common commands, etc., so you don't have to repeat yourself every time.

7. Linear MCP​

Purpose: Operate Linear project management Install: npx -y mcp-remote https://mcp.linear.app/sse Requires: Linear account authorization

If you use Linear for project management, you can have AI create tasks, update statuses, and add comments directly. "Create three tasks for the user system backlog."

8. Supabase MCP​

Purpose: Operate Supabase backend services Install: npx -y @supabase/mcp-server-supabase Requires: Supabase Access Token

Lets AI manage Supabase databases, Auth, storage, and more. If your project uses Supabase as a backend, this MCP can dramatically boost development speed.

9. Notion MCP​

Purpose: Read and write Notion pages and databases Install: npx -y @anthropic/notion-mcp Requires: Notion Integration Token

Lets AI help you organize Notion notes, update documents, and query databases. "Add three tasks to the TODO page in Notion."

10. Figma MCP​

Purpose: Read Figma design files Install: npx -y @anthropic/figma-mcp Requires: Figma Access Token

Lets AI directly read your Figma designs and generate the corresponding frontend code. Massively improves collaboration between designers and developers.

What Are Skills​

If MCP is about giving AI tools, then Skills are the "instruction manuals" that teach AI how to use those tools.

A Skill is essentially a reusable set of instructions that tells the AI what to do in a specific scenario. For example, you could define a "Code Review" Skill that specifies: check type safety, check error handling, check for hardcoded values, check naming conventions. From then on, every time you ask AI to review code, it follows that standard instead of relying on "vibes."

The key benefit of Skills is consistency. You might phrase a question differently today versus tomorrow and get completely different answers. But if you package best practices into a Skill, the results become much more stable.

How to Configure Skills​

Different IDEs have different ways to configure Skills:

Claude Code: CLAUDE.md​

Create a CLAUDE.md file in your project root. Claude Code reads it automatically every time it starts:

# Project Standards

## Tech Stack
- Framework: Next.js 14 App Router
- Styling: Tailwind CSS
- Database: Supabase (PostgreSQL)
- Deployment: Vercel

## Code Standards
- Use TypeScript strict mode
- Functional components only, no classes
- All API requests must have error handling
- No `any` types
- Naming: PascalCase for components, camelCase for utility functions

## Project Structure
- `/app` — Page routes
- `/components` — Reusable components
- `/lib` — Utility functions and configs
- `/types` — TypeScript type definitions

You can also place CLAUDE.md files in subdirectories — rules in those files override the parent. For instance, put a CLAUDE.md in /app/api with API-specific standards.

Cursor: .cursorrules​

Create a .cursorrules file in your project root with a similar purpose:

You are a Next.js full-stack development expert.

Code standards:
1. Use TypeScript with strict mode enabled
2. React components use functional style
3. Use Tailwind CSS, no custom CSS
4. API routes return JSON in { data, error } format
5. Database operations use Supabase Client, no raw SQL
6. All user input must be validated (use Zod)

Project structure:
- Pages in /app directory
- Shared components in /components
- Utility functions in /lib

VS Code + Continue: .continue/config.json​

If you use the Continue extension for VS Code, there's a similar system prompt configuration.

Creating Custom Skills​

Beyond basic project standards, you can create more specialized Skills for specific scenarios.

Skill Example 1: API Development​

# API Development Standards

## All API endpoints must:
1. Validate request parameters with Zod
2. Check user authentication status
3. Return a unified format: { success: boolean, data?: T, error?: string }
4. Set appropriate HTTP status codes
5. Add proper cache headers

## Error handling template:
try {
  // Business logic
} catch (error) {
  if (error instanceof ZodError) {
    return Response.json({ success: false, error: 'Invalid parameters' }, { status: 400 })
  }
  console.error(error)
  return Response.json({ success: false, error: 'Internal server error' }, { status: 500 })
}

Skill Example 2: UI Component Development​

# UI Component Standards

Every component must:
1. Have a TypeScript Props interface
2. Use forwardRef to support ref forwarding
3. Support className for custom styling
4. Use skeleton or spinner for loading states
5. Show friendly messages for empty states
6. Be tested on both mobile and desktop

Component template:
interface XxxProps {
  className?: string
  // other props
}

export function Xxx({ className, ...props }: XxxProps) {
  return (
    <div className={cn("base-styles", className)} {...props}>
      {/* Content */}
    </div>
  )
}

Skill Example 3: Git Commit Convention​

# Git Commit Convention

Commit message format:
<type>(<scope>): <description>

Type values:
- feat: New feature
- fix: Bug fix
- refactor: Refactoring
- docs: Documentation
- style: Styling changes
- test: Tests
- chore: Build/tools

Examples:
feat(auth): add WeChat login
fix(api): fix user list pagination issue
refactor(utils): refactor date formatting function

Real Workflow Examples​

Here's a complete development workflow showing how MCP and Skills work together:

Scenario: Developing a New Feature​

You: Look up the details of GitHub issue #42

AI: (Calls GitHub MCP) The issue description is: users report the login page
    has layout issues on mobile. Labeled as bug, priority high.

AI: Help me locate the problem and fix it.

AI: (Reads project code, follows CLAUDE.md standards)
    Found it — the login page inputs don't have responsive handling on small screens.
    (Generates fix code that fully matches your defined standards)

You: Write a test, then commit the code.

AI: (Writes tests following .cursorrules test standards)
    Tests written, all passing.
    (Follows Git commit convention) commit message: fix(auth): fix login page mobile layout

You: Create a PR and link it to issue #42

AI: (Calls GitHub MCP) PR created with title "Fix login page mobile layout",
    linked to issue #42, awaiting review.

Throughout this entire flow, you barely leave the conversation window. MCP provides the ability to operate external tools, while Skills ensure consistent code quality and standards.

Scenario: Research + Development​

You: Search for the mainstream rate limiting solutions available today

AI: (Calls Brave Search MCP) Here are the main approaches:
    1. Token bucket algorithm...
    2. Sliding window...
    3. Upstash Rate Limit...

You: Our project uses Supabase. Build a rate limiting middleware with Upstash Redis.

AI: (Generates code following CLAUDE.md tech stack and code standards)
    Here's a rate limiting middleware based on Upstash Redis...
    (Code style, error handling, and type definitions all follow project standards)

MCP Ecosystem: Current State and Outlook​

The MCP ecosystem is still in its early stages but growing fast. Currently:

  • Officially maintained MCP servers already cover major tools (GitHub, databases, browser, filesystem, etc.)
  • Community-contributed MCPs are growing rapidly, covering Figma, Notion, Linear, Supabase, and more
  • Enterprise MCPs are starting to appear — some SaaS products are offering official MCP integrations

Future trends:

  1. More SaaS products will offer MCP: Every tool you use may have a corresponding MCP
  2. MCP will be built into products: Not just dev tools — regular products will let users operate them via natural language through MCP
  3. The Skills ecosystem will mature: We may see Skills marketplaces where people share and reuse best practices

My recommendation for what to do now:

  1. Install two or three of the most common MCPs (GitHub, filesystem, search) to get a feel for them
  2. Write your project's CLAUDE.md or .cursorrules — this is the lowest-cost, highest-return thing you can do
  3. As your project evolves, gradually add more MCPs and custom Skills

The sooner you start, the sooner you benefit. MCP and Skills will become a core part of your AI development workflow.