Full-Stack Web Dev Stack
The complete toolkit for full-stack developers. Database, auth, payments, testing, and deployment all wired up.
Token Budget
Moderate token usage. You will have good room for prompts but watch if adding more servers.
Config
Paste in ~/.claude.json
{
"mcpServers": {
"supabase-mcp": {
"command": "npx",
"args": [
"-y",
"@supabase/mcp-server-supabase"
],
"env": {
"SUPABASE_ACCESS_TOKEN": "YOUR_SUPABASE_ACCESS_TOKEN"
}
},
"github-mcp": {
"command": "npx",
"args": [
"-y",
"@modelcontextprotocol/server-github"
],
"env": {
"GITHUB_PERSONAL_ACCESS_TOKEN": "YOUR_GITHUB_PERSONAL_ACCESS_TOKEN"
}
},
"playwright-mcp": {
"command": "npx",
"args": [
"-y",
"@playwright/mcp"
]
},
"stripe-mcp": {
"command": "npx",
"args": [
"-y",
"@stripe/mcp",
"--tools=all"
],
"env": {
"STRIPE_SECRET_KEY": "YOUR_STRIPE_SECRET_KEY"
}
},
"vercel-mcp": {
"command": "npx",
"args": [
"-y",
"vercel-mcp"
],
"env": {
"VERCEL_API_TOKEN": "YOUR_VERCEL_API_TOKEN"
}
},
"context7-mcp": {
"command": "npx",
"args": [
"-y",
"@upstash/context7-mcp"
]
}
}
}Included Servers
Supabase MCP
Supabase
Query your Supabase database, manage tables, run migrations, deploy edge functions, and manage branches directly from your AI editor.
Database, auth, and storage in one service. The full-stack developer's shortcut to a production-ready backend.
Stripe MCP
Stripe
Integrate Stripe APIs for payments, subscriptions, customers, and invoices directly from your AI editor using the official Stripe agent toolkit.
Most web apps need payments eventually. Having Stripe wired in from day one saves a painful integration later.
GitHub MCP
Anthropic
Access the GitHub API to manage repositories, issues, pull requests, branches, and workflows directly from your AI editor.
Full-stack means more moving parts — PRs, branches, and code reviews keep everything from falling apart.
Playwright MCP
Microsoft
Automate browser interactions, take screenshots, fill forms, and test web applications using Microsoft Playwright from your AI editor.
End-to-end testing across the entire stack. Verify that your frontend, API, and database all work together correctly.
Vercel MCP
Community
Connect to the Vercel API to manage deployments, projects, domains, and environment variables from your AI editor.
One-command deployments with preview URLs for every PR. Full-stack shipping without DevOps overhead.
Context7 MCP
Upstash
Pull up-to-date documentation and code examples for any library directly into your prompt context using the Context7 API.
You're touching multiple frameworks per day. Up-to-date docs for Next.js, Supabase, and Stripe keep context switches painless.
Recommended Skills
Skills that pair with the servers in this stack. Learn more
For Supabase MCP
Official Supabase skill covering PostgreSQL optimization, query performance, RLS policies, schema design, and connection management.
npx skillsadd supabase/agent-skills/supabase-postgres-best-practicesSupabase Auth integration patterns with Next.js App Router. Covers SSR auth, middleware, and protected routes.
npx skillsadd sickn33/antigravity-awesome-skills/nextjs-supabase-authFor Stripe MCP
Official Stripe skill covering payment API patterns, Checkout Sessions, PaymentIntents, PCI compliance, and idempotency.
npx skillsadd stripe/ai/stripe-best-practicesOfficial Stripe skill for upgrading API versions, SDKs, Stripe.js, and mobile SDKs safely.
npx skillsadd stripe/ai/upgrade-stripeFor GitHub MCP
Use gh CLI for all GitHub operations including stacked PR workflows, issue management, and CI/CD automation.
npx skillsadd callstackincubator/agent-skills/githubDebug and fix failing GitHub PR checks in GitHub Actions. Automatically diagnoses CI issues and suggests fixes.
npx skillsadd openai/skills/gh-fix-ciAddress PR review comments using GitHub CLI. Streamlines the code review response workflow.
npx skillsadd openai/skills/gh-address-commentsAutomated code review for TypeScript, JavaScript, Python, Go. Analyzes PRs for complexity, SOLID violations, and code smells.
For Playwright MCP
Official Microsoft Playwright CLI skill for browser automation, E2E testing, and web scraping workflows.
npx skillsadd microsoft/playwright-cliTest generation, coverage analysis, and E2E testing patterns. Pairs with Playwright MCP for automated browser testing.
For Vercel MCP
Official Vercel skill for React and Next.js performance optimization, based on Vercel Engineering guidelines.
npx skillsadd vercel-labs/agent-skills/vercel-react-best-practicesOfficial Vercel skill covering Web Interface Guidelines, accessibility audits, and responsive design standards.
npx skillsadd vercel-labs/agent-skills/web-design-guidelinesDeploy applications to Vercel with preview URLs and production environments via Vercel CLI.
npx skillsadd vercel-labs/agent-skills/vercel-deploy