Five Add-Ons That Give Claude Code Hands

You ask Claude Code to build a login form. It writes the code. Then you open the browser yourself, click through it, find the broken bit, and paste the error back in.

That last part is work Claude can do too. You just haven't handed it the tools.

Out of the box, Claude Code writes and edits files. It can't read your Figma design, click through your app in a real browser, or run a query against your database. Those aren't hard problems. They are missing connections. Five add-ons close them, and each one installs in a command or two.

Four of the five are MCP servers, which you add from the terminal. The fifth is a Claude Code plugin, which you install from inside Claude Code itself. This guide gives you the exact command, the setup, and the one thing that breaks each one.

Before You Install Anything

Two checks first. Both take ten seconds.

Run claude --version in your terminal. You need v2.1.0 or later. The plugin system arrived in that release, so anything older can't run the frontend design plugin at the end.

Run node --version. You need Node 18 or higher. Every MCP server here runs on Node, and an old version is the single most common reason one shows up disconnected.

If either check fails, fix it before you continue. Update Claude Code, or grab the LTS build of Node from nodejs.org and reopen your terminal.

One Decision Before You Start: Where It Lives

When you add an MCP server, you pick its scope.

No flag means the server is available only in the current project folder. Add --scope user and it's available across every project on your machine.

For all four MCP servers below, use --scope user. You install once and never think about it again. Skip the flag and you reinstall the same server every time you start a new project. The commands below all include it.

After each install, type /mcp inside Claude Code. The server should show up as connected. That is your proof it worked.

1. Context7: Docs That Aren't Out Of Date

What it does. Context7 pulls the current, version-specific documentation for whatever library you're working with and feeds it into the prompt. It reads the real docs, not a memory of them.

Why it earns a slot. Every model has a knowledge cutoff. Ask about React 19, Next.js 15, or any library that shipped a version recently, and you risk getting patterns that were correct two releases ago. You also risk a method that doesn't exist, written confidently. Context7 removes both by fetching the source.

Install. Run this in your terminal:

claude mcp add --scope user context7 -- npx -y @upstash/context7-mcp@latest

Restart Claude Code and run /mcp. You want to see context7 listed as connected.

Use it. Add use context7 to the end of any prompt where current docs matter:

Help me implement authentication with Supabase. use context7

Create a Next.js 15 middleware for JWT validation. use context7

Show me how to set up Stripe webhooks in Express. use context7

If you hit rate limits during a heavy session, get a free key at context7.com/dashboard and reinstall with it:

claude mcp add --scope user context7 -- npx -y @upstash/context7-mcp@latest --api-key YOUR_API_KEY

The mistake that makes it fail. Forgetting the trigger. Context7 does nothing unless use context7 is in the prompt. If it returns nothing, check that first, then check your rate limit.

2. Frontend Design: Kill The Generic AI Look

What it does. This is Anthropic's own plugin. It pushes Claude to produce genuinely distinctive design work instead of the same fonts, the same spacing, the same flat aesthetic every AI tool defaults to. It activates on its own whenever Claude notices you're doing frontend work.

Why it earns a slot. If you build anything a client sees, the default AI look costs you credibility. Same fonts, a safe palette, a flat layout that a prospect can smell from across the room. This plugin nudges the output toward typography and spacing choices that read as deliberate.

Install. This one is different. It isn't a terminal MCP server. You install it from inside Claude Code with two commands:

/plugin marketplace add anthropics/claude-code

/plugin install frontend-design@claude-code-plugins

Verify with /plugin list inside Claude Code. You should see frontend-design in the list.

Use it. You don't call it. Once installed it activates whenever Claude detects frontend work and steers toward bolder typography, real color palettes, stronger hierarchy, responsive layouts by default, and small motion details.

Give it a direction instead of "make it pretty":

Build a landing page for a fintech startup. Go for a bold editorial aesthetic with lots of whitespace and dark mode.

The mistake that makes it fail. Running an old build. The plugin system landed in Claude Code v2.1.0. If the marketplace command errors out, confirm your version with claude --version. If the source itself fails, try the alternative marketplace: /plugin marketplace add claude-plugins-official then /plugin install frontend-design@claude-plugins-official.

3. Figma MCP: Read The Design, Write The Code

What it does. Connects Claude Code to your Figma files. You design a component, and Claude reads the real thing: the spacing, the colors, the layout, the styles. Then it writes code that matches what you drew.

Why it earns a slot. It removes the handoff gap. Normally a developer looks at a mockup and interprets it. Here Claude reads the design system directly, so what you designed is what you get back.

You need at least View access to the Figma file. For the desktop option below, you also need a Figma Dev Mode or Full seat on your plan.

Install, Option A (recommended). The remote server. No desktop app needed:

claude mcp add --scope user --transport http figma https://mcp.figma.com/mcp

Then start Claude Code, type /mcp, select figma, and hit Authenticate. A browser window opens. Click Allow Access to connect your account.

Install, Option B. The desktop server, which uses the Figma desktop app:

claude mcp add --scope user --transport http figma-desktop http://127.0.0.1:3845/mcp

For this one, open Figma Desktop, go to Preferences, and enable "Dev Mode MCP Server" first.

Here is the short version of which to pick:

Use it. The Figma MCP works off links. Select a frame or component in Figma, right-click, choose Copy link to selection, and paste it in:

Generate a React component based on this Figma design:
[paste your Figma link here]

The mistake that makes it fail. With Option B, closing the desktop app. The MCP only works while Figma Desktop is open and Dev Mode is on. If figma shows disconnected, select it in /mcp and re-authenticate.

4. Playwright MCP: Let Claude Test Its Own Work

What it does. Gives Claude Code a real browser. It opens a window, clicks buttons, fills forms, navigates pages, takes screenshots, and checks whether things break. On its own.

Why it earns a slot. Building is half the job. Testing is the other half, and it's the half people skip. With Playwright, Claude ships a feature and then verifies it works in a live browser, catching the bug before you ever open the code.

Install (Mac / Linux).

claude mcp add --scope user playwright -- npx -y @playwright/mcp@latest

Install (Windows). The format is slightly different:

claude mcp add --scope user playwright -- cmd /c npx -y @playwright/mcp@latest

Playwright downloads Chromium itself the first time it runs, so you never install a browser separately.

Use it. Tell Claude to use Playwright by name, especially the first time, so it doesn't reach for bash instead:

Use playwright mcp to open a browser, go to localhost:3000, and test the login flow. Try valid and invalid credentials.

Claude opens a visible Chrome window, works through your app, and reports back with screenshots. It can navigate any URL, click and fill, read console logs, catch JavaScript errors, and test layouts at different screen sizes.

One thing worth knowing: you can log in yourself. Claude shows you the window. Sign in with your own credentials, then tell it to keep going. Cookies hold for the session, so authenticated pages become testable without handing over a password.

The mistake that makes it fail. Running it where there's no screen. On a Linux server with no desktop environment, headed mode won't work, because there's no display to open a window in. If the browser refuses to start locally, install Chromium by hand with npx playwright install chromium. On Windows, use the cmd /c command above or you get "command not found".

5. Supabase MCP: Your Database, From The Terminal

What it does. Connects Claude Code to your Supabase project. Instead of bouncing between the terminal and the Supabase dashboard to run a query or check a schema, you do it in plain language where you already are.

Why it earns a slot. If Supabase is your backend, this ends the constant context-switching. You stay in the terminal and let Claude handle the database work.

Install. Supabase uses a remote server with automatic OAuth, so you never generate a token:

claude mcp add --scope user --transport http supabase https://mcp.supabase.com/mcp

Start Claude Code, type /mcp, select supabase, and follow the prompt. A browser opens where you log in and grant access. Pick the organization that holds the project you want.

Scope it to one project. By default the server can reach every project in your organization. Restrict it to one, which is safer, by adding the project reference to the URL:

claude mcp add --scope user --transport http supabase https://mcp.supabase.com/mcp?project_ref=YOUR_PROJECT_REF

To find the ref: open the Supabase dashboard, click your project, go to Settings, and read "Project ID" under General. That string is your ref.

Use it. Talk to your data in sentences:

Show me all users who signed up this week

Add a comments table with id, text, and user_id

How do I set up row-level security?

It queries, creates and changes tables, runs migrations, generates TypeScript types from your schema, and searches the Supabase docs.

The mistake that makes it fail. Pointing it at production. Supabase MCP is built for development and testing. Do not connect it to a live database with real user data. Use a dev project. If you only need to read, add --read-only to the URL and it can't change anything.

Quick Reference: All Five Commands

Keep this. It's the whole setup in one block.

After all five: restart Claude Code, run /mcp to confirm the four servers are connected, run /plugin list to confirm the design plugin is in, and authenticate Figma and Supabase when the browser opens.

The Limits You Should Know

None of these are magic. Each has an edge worth naming before you rely on it.

Supabase MCP is for dev and testing only. Real user data does not belong behind it. Scope it to one project and add --read-only when you're just looking.

Playwright needs a display. On a headless server with no desktop, it won't open a browser in headed mode. That rules out some CI setups.

Context7 does nothing without the trigger. No use context7 in the prompt, no fetched docs. And heavy use without a free key runs into rate limits.

The Figma desktop option only runs while the desktop app is open with Dev Mode on. Close the app and the connection drops.

The frontend design plugin needs Claude Code v2.1.0 or newer. On anything older the marketplace command fails with no clear reason.

If a server ever shows disconnected in /mcp, the fix is almost always the same three steps. Check Node is 18 or higher. Remove it with claude mcp remove NAME. Re-add it and restart Claude Code. That clears most of what goes wrong.

If You Only Install One This Week

Here's the order I'd do them in, not the order they're written.

Start with Context7. It costs one command, needs no login, and it quietly makes every other prompt more accurate. Nothing to lose.

Then Playwright, because testing is the step most people cut, and this is the one that hands the work back to Claude.

Figma and Supabase come next, but only if you actually use those tools. There's no point wiring a database connection you don't have.

The frontend design plugin is last only because it's the one that depends on your version being current. Once you're on v2.1.0, put it in and forget it. It works without being asked.

You don't need all five today. Install Context7 now. It takes under a minute, and the next prompt you write will already be better.