7 Claude Code Extensions I Tested. These Are the Ones I Kept.
I tested 15 Claude Code extensions. These 7 MCP servers and Skills are the ones that stayed in my config.
Key Takeaways
- Claude Code ships with zero extensions — you need Skills and MCP servers to unlock its full potential
- MCP servers connect Claude to external tools (GitHub, Figma, databases) through a standardized protocol
- Skills are reusable prompt templates that add domain expertise without consuming context
- 7 extensions worth installing: GitHub MCP, Figma MCP, Context7, Playwright, Notion MCP, plus 2 custom Skills
- Setup takes under 10 minutes per server — one CLI command plus optional OAuth
Claude Code Out of the Box Is Only Half the Tool
A fresh Claude Code installation connects to exactly one thing: your filesystem. No GitHub access. No design tool integration. No database queries. Every external service requires explicit configuration — and that's by design.
The Model Context Protocol (MCP) is how you fix that. It's an open standard that gives Claude Code a unified interface to external tools, databases, and APIs. Think of it as USB-C for AI — one protocol, hundreds of devices. We covered the protocol itself in our MCP explainer; this guide is about what to plug in and how.
Skills are the other half. Where MCP servers connect to external services, Skills add domain knowledge and workflow templates. A Figma MCP server lets Claude read your design files. A frontend-design Skill tells Claude how to turn those designs into production code.
After testing 15 extensions over the past two months, here are the 7 that stayed in my configuration.
5 MCP Servers That Changed My Workflow
1. GitHub MCP — Your Repo, Claude's Playground
Setup:
claude mcp add --transport http github https://api.githubcopilot.com/mcp/What it does: gives Claude direct access to issues, pull requests, code search, and repository metadata without leaving the terminal. Before this, I'd copy-paste issue descriptions into prompts. Now I say "read issue #47 and implement it" and Claude pulls the full context — labels, comments, linked PRs — automatically.
Where it shines: triaging bugs. Claude reads the issue, searches the codebase for related code, proposes a fix, creates a branch, and opens a draft PR. A workflow that took 30 minutes now takes 5.
One caveat: the OAuth flow requires a GitHub account with repo access. For private repos, you'll need to authorize the MCP server through GitHub's OAuth prompt when you first run /mcp in Claude Code.
2. Figma MCP — Design to Code Without Screenshots
Setup:
claude plugin install figma@claude-plugins-officialOr manually:
claude mcp add --transport http figma https://mcp.figma.com/mcpWhat it does: Claude reads layout data, component structures, design tokens, and variables directly from your Figma files. No more screenshotting designs and pasting them into prompts. No more guessing padding values from eyeballing a mockup.
Where it shines: converting a Figma component to React. Claude reads the component's constraints, spacing, and color tokens, then generates code that matches the design system — not a pixel-perfect copy, but a structurally accurate implementation that respects your existing CSS variables.
Tested accuracy: on 10 component conversions, 7 needed zero manual adjustment. The other 3 required minor spacing tweaks. Compare that to the old workflow of manually translating designs, where every component needed at least 2-3 rounds of visual QA.
3. Context7 — Always-Current Documentation
Setup:
claude mcp add context7 -- npx -y @context7/mcpWhat it does: delivers version-specific library documentation into your Claude Code session in real time. Instead of Claude relying on training data that might be months old, Context7 fetches the actual docs for the exact version of React, Next.js, Prisma, or whatever library your project uses.
Why this matters: Claude's training data includes React 18 patterns, but your project might use React 19's new use() hook or the updated ref callback syntax. Without Context7, Claude generates code for the wrong version. With it, Claude reads the docs for your pinned version and generates correct code on the first try.
I tested this with Next.js 16's App Router — a pattern that changed significantly from Next.js 15. Without Context7, Claude used the old generateStaticParams syntax. With Context7, it used the correct 2026 API. That single fix saved 20 minutes of debugging.
4. Playwright MCP — Browser Automation Built In
Setup:
claude mcp add playwright -- npx -y @anthropic/mcp-playwrightWhat it does: gives Claude the ability to navigate web pages, fill forms, click buttons, take screenshots, and extract data using Playwright's accessibility tree. This turns Claude Code into a browser automation agent.
The practical use cases I've found most valuable:
- E2E test writing: "Write Playwright tests for the checkout flow" — Claude navigates the app, identifies interactive elements, and writes tests that actually run
- Visual regression: Claude takes screenshots before and after a code change and compares them
- Data extraction: scraping structured data from web pages without writing custom scrapers
5. Notion MCP — Your Knowledge Base in Context
Setup:
claude mcp add --transport http notion https://mcp.notion.com/mcpWhat it does: connects Claude to your Notion workspace — pages, databases, comments. Useful when your project specs, ADRs, or meeting notes live in Notion.
My setup: I keep architecture decision records in a Notion database. When Claude needs context on why we chose PostgreSQL over MongoDB, or why the auth flow uses JWT instead of sessions, it reads the relevant ADR directly. No copy-pasting. No stale context.
2 Custom Skills Worth Building
MCP servers connect to external services. Skills add internal knowledge. The distinction matters.
A Skill is a markdown file in ~/.claude/commands/ or .claude/commands/ that Claude loads when triggered by a slash command or keyword match. Skills don't consume context until activated — they use a three-level loading system (metadata always loaded, full instructions on trigger, bundled resources on demand).
6. A Code Review Skill
Every team has review standards that aren't captured in a linter. Error handling patterns. Naming conventions. Security checks. A code review Skill encodes these as instructions Claude follows when reviewing PRs.
Example structure:
# In .claude/commands/review.md
---
name: code-review
description: Review code for team standards
---
Check the following:
- Error handling: all async functions use try/catch with specific error types
- Naming: camelCase for functions, PascalCase for components, UPPER_SNAKE for constants
- Security: no raw SQL queries, all user input validated with zod schemas
- Performance: no N+1 queries, database calls use proper indexingThis is better than a generic "review my code" prompt because it carries your team's specific standards. Claude checks against your rules, not generic best practices from its training data.
Anthropic's own Claude Code Review feature (launched March 2026) does multi-agent review, but a custom Skill lets you add the rules that no automated tool knows about — your team's conventions, your architecture's constraints.
7. A Deploy Checklist Skill
The other Skill I use daily is a deployment checklist that Claude runs through before any PR is merged:
# In .claude/commands/pre-deploy.md
---
name: pre-deploy
description: Pre-deployment verification checklist
---
Before merging, verify:
1. All tests pass (run the test suite, don't just check CI)
2. Database migrations are reversible
3. Environment variables documented in .env.example
4. No console.log statements in production code
5. API rate limits configured for new endpoints
6. Error monitoring (Sentry tags) added to new error pathsThis catches the things that slip through code review — the environment variable you forgot to add to staging, the migration that can't roll back, the monitoring gap that would make debugging production issues impossible.
Configuration Tips That Save Time
After two months of tuning, here's what I wish I'd known on day one.
Use scopes wisely. MCP servers support three scopes: local (current project only, default), project (shared via .mcp.json, checked into Git), and user (available everywhere). GitHub MCP belongs at user scope. Figma MCP belongs at project scope. A database-specific server belongs at local scope.
# User scope (available everywhere)
claude mcp add --scope user --transport http github https://api.githubcopilot.com/mcp/
# Project scope (shared with team via .mcp.json)
claude mcp add --scope project --transport http figma https://mcp.figma.com/mcpUse Tool Search to save context. Claude Code's MCP Tool Search feature enables lazy loading — tool schemas aren't loaded into context until Claude actually needs them. This reduces context usage by up to 95% for large MCP configurations. With 5 servers running, my context overhead dropped from ~15K tokens to under 1K.
Check server health. Run /mcp in Claude Code to see all connected servers, their status, and reconnect any that disconnected. I check this at the start of each session — a disconnected Figma server means Claude silently falls back to guessing layout values instead of reading them.
For a deeper look at how these tools connect, see our Claude AI guide which covers the broader platform, and the AI coding tools comparison for how MCP fits into the competitive landscape.
What I Tested and Removed
Not everything I tried was worth keeping. A few servers that didn't survive:
- Slack MCP: Connected fine, but Claude reading my Slack messages during coding sessions was more distracting than helpful. The context was rarely relevant to the code I was writing.
- Google Drive MCP: Slow response times (2-3 seconds per query) made it impractical for real-time coding. Better to download the file locally first.
- Generic "web search" MCP servers: Claude Code already has WebSearch built in. Adding another search layer just created duplicate results and wasted context.
The pattern: MCP servers work best when they provide structured data that Claude can act on (GitHub issues, Figma layouts, database schemas). They work poorly when they provide unstructured text that Claude has to interpret (Slack messages, Google Docs, web pages).
Frequently Asked Questions
What's the difference between MCP servers, Skills, and Plugins?
MCP servers connect to external services through a standardized protocol. Skills are local markdown files that add domain knowledge and workflow templates. Plugins (introduced March 2026) bundle both — a Figma plugin includes the MCP server plus Skills for design-to-code workflows. For a complete breakdown, MorphLLM's guide covers the taxonomy well.
How many MCP servers should I run simultaneously?
Most developers need 2-3 (GitHub, one domain-specific, Context7). With Tool Search's lazy loading, you can configure 10+ without context overhead — but realistically, more than 5 active servers means Claude spends too much time deciding which tool to use. Start with 2, add only when you hit a clear workflow gap.
Do MCP servers work with Cursor or other AI coding tools?
MCP is an open standard backed by Anthropic and now the Linux Foundation. Cursor, VS Code Copilot, and other tools are adopting it. However, Claude Code's implementation is the most mature — particularly the lazy loading and OAuth integration. Other tools may require more manual configuration.
Can I build my own MCP server?
Yes. The MCP SDK is open source and available in TypeScript and Python. A basic server that wraps a REST API can be built in under an hour. The official docs include starter templates. For most use cases, though, an existing server or a custom Skill is faster to set up.
Do Skills consume context when not in use?
Only the name and description (roughly 100 words) are always in context. The full Skill body loads only when triggered, and bundled resource files load only when referenced. A well-structured Skill adds almost zero overhead until you need it.
The Setup That Matters
Claude Code's power isn't in the base installation — it's in what you connect to it. After testing 15 extensions, my production configuration uses 5 MCP servers and 2 custom Skills. Total setup time: about 45 minutes. Time saved per week: roughly 6-8 hours.
Start with GitHub MCP and Context7. Add Figma if you work with designers. Build a code review Skill for your team's standards. That covers 80% of what most developers need.
The rest is refinement. And the best part: every extension you add works through the same protocol, the same CLI, the same configuration pattern. Install once, use everywhere.
Related Reading