Tooling - Plugins and MCP Servers

Claude Code - Tools, Skills & MCP Reference

A practical guide to the plugins, skills, and MCP servers that make Claude Code significantly more capable. Organized by what you're doing, not alphabetically.

This is the companion to the full setup guide. That covers hooks, memory, cron. This covers the tools you use inside sessions.

Plugins to Install

These are first-party or community plugins. Install via /install plugin-name@marketplace in a Claude session.

Essential (install all of these)

Recommended

Optional

MCP Servers

These run as separate processes and give Claude access to external tools. Configure in ~/.claude.json.

21st.dev Magic (UI Component Builder)

The best tool for generating production-quality React components. Give it a description, it returns a polished component using shadcn/ui, Tailwind, and Framer Motion.

{
  "mcpServers": {
    "21st-dev-magic": {
      "command": "npx",
      "args": ["-y", "@21st-dev/magic@latest"],
      "env": {
        "TWENTY_FIRST_API_KEY": "your-api-key"
      }
    }
  }
}

Get your API key at 21st.dev. Tools provided:

• 21st_magic_component_builder - generate components from text descriptions
• 21st_magic_component_inspiration - browse component examples for ideas
• 21st_magic_component_refiner - iterate on existing components
• logo_search - find SVG logos by company name

When to use: Any time you need a UI component. "Build me a pricing card with toggle" produces better results here than hand-prompting Claude to write JSX.

Stitch (Design System Creator)

Creates full design systems and screen layouts. More opinionated than 21st.dev - it generates complete page designs, not individual components.

{
  "mcpServers": {
    "stitch": {
      "command": "npx",
      "args": ["-y", "@stitch-ui/cli@latest"]
    }
  }
}

Tools provided:

• create_design_system - generate colors, typography, spacing from a brief
• generate_screen_from_text - full page layouts from descriptions
• generate_variants - A/B design alternatives
• edit_screens - modify existing designs
• apply_design_system - apply a system to screens

When to use: Starting a new project or redesigning a page. Generate the design system first, then screens. Export to design.md for the implementation phase.

Limitation: Stitch generates design specs, not production code. You still need to build from the spec. The gap between Stitch output and hand-coded result can be significant.

Context7 (Live Documentation)

Fetches current docs for any library, framework, or API. Prevents Claude from using stale training data.

{
  "mcpServers": {
    "context7": {
      "command": "npx",
      "args": ["-y", "@upstash/context7-mcp@latest"]
    }
  }
}

When to use: Any time you're working with a library. Claude will automatically use it when it detects library-related questions, but you can also prompt "check the latest Next.js docs for..." explicitly.

Playwright (Browser Automation)

Full browser control - navigate, click, fill forms, take screenshots, run JavaScript.

{
  "mcpServers": {
    "playwright": {
      "command": "npx",
      "args": ["-y", "@playwright/mcp"]
    }
  }
}

When to use: E2E testing, visual verification ("take a screenshot of the login page"), scraping, form testing.

GitNexus (Code Intelligence)

Indexes your codebase into a knowledge graph. Gives Claude structural understanding (call chains, dependencies, clusters) without burning tokens on file exploration.

npm install -g gitnexus
gitnexus setup
cd ~/dev/your-project && gitnexus analyze

See the setup guide for full details. PolyForm Noncommercial license - free for personal use, paid for commercial.

Figma

Reads Figma designs and generates code. Requires Figma API token.

{
  "mcpServers": {
    "figma": {
      "command": "npx",
      "args": ["-y", "@anthropic-ai/figma-mcp"],
      "env": {
        "FIGMA_ACCESS_TOKEN": "your-token"
      }
    }
  }
}

When to use: Implementing designs from Figma files. Use /figma:figma-implement-design skill for the structured workflow.

Skills - When to Use What

Skills are invoked with /skill-name in a Claude session. Important: most skills come from plugins. You must install the plugin first, then the skills become available.

Built-in Skills (always available, no plugins needed)

Superpowers Plugin Skills (install: /install superpowers@claude-plugins-official)

This is the single biggest quality multiplier. Installs 15+ skills:

Before starting work:

During development:

Before shipping:

Frontend Design Plugin Skills (install: /install frontend-design@claude-plugins-official)

Other Plugin Skills

These come from their respective plugins (install the plugin to get the skill):

Community Skills (available without plugins)

These are community-contributed skills that Claude can access from the skill marketplace:

Note: Community skills are loaded on-demand from the marketplace. They don't require plugin installation but they do consume tokens when loaded. Claude will suggest relevant ones if you have the Superpowers plugin installed.

Website/Design Workflow

The recommended flow for building websites or UI features:

1. Design Phase (never skip this)

/brainstorming          # What are we building? What's the UX?
/frontend-design        # Structured design workflow

Then use MCP tools:

• Stitch create_design_system - generate your design system
• Stitch generate_screen_from_text - generate page layouts
• 21st.dev 21st_magic_component_inspiration - browse component patterns

2. Design Spec

Create a design.md in your project that captures:

• Color palette, typography, spacing
• Component inventory
• Page layouts with responsive breakpoints
• Interaction patterns

3. Build Phase

/react-best-practices   # Load React patterns
/composition-patterns   # For component APIs
/shadcn                 # If using shadcn/ui

Use MCP tools during build:

• 21st.dev 21st_magic_component_builder - generate individual components
• Context7 - check framework docs as needed
• Playwright browser_take_screenshot - visual verification

4. Review Phase

/simplify               # Catch overengineering
/requesting-code-review # Self-review
/deploy-to-vercel       # Ship it

CLAUDE.md Integration

Add this to your project's CLAUDE.md so Claude knows which tools to reach for:

## Workflow Selection
- New features: use /brainstorming before implementation
- UI/design work: use /frontend-design, then 21st.dev + Stitch MCP tools
- Quick tasks: just do the work directly
- Debugging: use /systematic-debugging
- React components: use /composition-patterns for clean APIs
- Code review: use /requesting-code-review before merge
- Deploying: use /deploy-to-vercel

## Tool Preferences
- Always check Context7 for library docs before using training data
- Use 21st.dev for component generation over hand-writing JSX
- Use Playwright screenshots to verify UI changes visually
- Never skip the design phase for UI work

Quick Install

Plugin installs must be done inside an interactive Claude session (not claude -p). Start a session and run these one at a time:

/install superpowers@claude-plugins-official
/install context7@claude-plugins-official
/install playwright@claude-plugins-official
/install commit-commands@claude-plugins-official
/install code-review@claude-plugins-official
/install pr-review-toolkit@claude-plugins-official
/install hookify@claude-plugins-official
/install frontend-design@claude-plugins-official
/install figma@claude-plugins-official
/install claude-md-management@claude-plugins-official

After installing, restart Claude Code for all skills to become available.

Then add MCP servers to ~/.claude.json manually (see sections above for each server's config).

Verify Installation

After restarting, check what's available:

• Type / and you should see skills from each plugin in the autocomplete
• /brainstorming should appear (from Superpowers)
• /frontend-design should appear (from Frontend Design plugin)
• /commit should appear (from Commit Commands)

If a skill is missing, the plugin it depends on isn't installed. Check the skills table above for which plugin provides each skill.

Companion to the full setup guide. Built by nullhex.