Beginner

Frontend Developer Stack

Build beautiful, accessible UIs with AI-powered component generation, design integration, browser testing, and documentation.

5 servers19.6K tokens10% of context

Token Budget

19.6K used (9.8%)180.4K remaining

Playwright MCP10.3K (5.1%)

Figma MCP4.1K (2.1%)

Magic MCP (21st.dev)2.1K (1.0%)

Tailwind CSS MCP2.1K (1.0%)

Context7 MCP1.0K (0.5%)

This stack is lightweight. Plenty of room for your prompts and code context.

Config

Paste in ~/.claude.json

json

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

Included Servers

Magic MCP (21st.dev)

21st.dev

ui-design

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

4.3k2.3k/wk2.1K tokens(1%)Official5d ago

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

Figma MCP

Community

ui-design

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

28954/wk4.1K tokens(2%)1y ago

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

Playwright MCP

Microsoft

testing

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

27.5k1433.4k/wk10.3K tokens(5%)Officialyesterday

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

Context7 MCP

Upstash

documentation

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

46.5k213.3k/wk1.0K tokens(0.5%)Official2d ago

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 MCP

Community

frontend

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

500189/wk2.1K tokens(1%)4mo ago

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

Read the guide