StackMCP

Frontend Developer Stack for Cursor

Beginner5 servers19.6K tokens

Configuration

{
  "mcpServers": {
    "magic-mcp": {
      "command": "npx",
      "args": [
        "-y",
        "@21st-dev/magic"
      ],
      "env": {
        "TWENTY_FIRST_API_KEY": "YOUR_TWENTY_FIRST_API_KEY"
      }
    },
    "figma-mcp": {
      "command": "npx",
      "args": [
        "-y",
        "figma-mcp"
      ],
      "env": {
        "FIGMA_ACCESS_TOKEN": "YOUR_FIGMA_ACCESS_TOKEN"
      }
    },
    "playwright-mcp": {
      "command": "npx",
      "args": [
        "-y",
        "@playwright/mcp"
      ]
    },
    "context7-mcp": {
      "command": "npx",
      "args": [
        "-y",
        "@upstash/context7-mcp"
      ]
    },
    "tailwind-mcp": {
      "command": "npx",
      "args": [
        "-y",
        "mcp-tailwindcss"
      ]
    }
  }
}

Where to save

Paste the config above into:

.cursor/mcp.json

Environment Variables

Replace the YOUR_ placeholders with your actual values.

TWENTY_FIRST_API_KEYrequired

21st.dev API key

Used by: Magic MCP (21st.dev)

FIGMA_ACCESS_TOKENrequired

Figma personal access token

Used by: Figma MCP

What’s in this stack

Magic MCP (21st.dev)4 tools

Generate professional React and Tailwind UI components using 21st.dev's component library and AI builder from your editor.

Generate polished UI components from natural language. The fastest way to go from idea to styled React component.

Figma MCP8 tools

Access Figma designs, extract design tokens, inspect layers, and bridge the gap between design and code from your AI editor.

Import design specs, spacing, and color tokens directly from your team's Figma files. Pixel-perfect implementation without guesswork.

Playwright MCP20 tools

Automate browser interactions, take screenshots, fill forms, and test web applications using Microsoft Playwright from your AI editor.

Test your UI in a real browser from your AI assistant. Catch layout bugs, accessibility issues, and responsive breakpoints early.

Context7 MCP2 tools

Pull up-to-date documentation and code examples for any library directly into your prompt context using the Context7 API.

React, Next.js, and Svelte docs evolve constantly. This ensures your AI assistant writes code against the current API, not last year's.

Tailwind CSS MCP4 tools

Full Tailwind CSS v3/v4 context including utilities, config, themes, plugins, and integration guides for your AI editor.

Instant access to the full Tailwind class reference. Eliminates the guesswork and hallucination around utility class names.

Other editors

Claude CodeVS CodeWindsurfClaude DesktopContinue