carolmonroe22/vibe-coding-setup

Overview

This skill sets up a complete vibe coding workflow in Claude Code after migrating from an all-in-one platform. It walks through configuring MCPs for Supabase, Netlify, and Vercel, wiring API keys, and integrating GitHub so Claude Code can operate on your local repo. It also provides a decision framework for when to stay on a platform versus fully migrating.

How this skill works

The skill adds MCP (Model Context Protocol) server entries to your Claude Code configuration so Claude Code can manage database, hosting, and file operations. It shows the exact MCP snippets for Supabase (database, auth, storage), Netlify (deploys, env vars), and Vercel (read-only metadata), plus optional MCPs like Postgres and GitHub. It explains where to store API keys and how Claude Code interacts with your local git repository and project files.

When to use it

• You are migrating from an all-in-one platform (Lovable, Replit, Bolt) to Claude Code.
• You need to configure database, auth, and storage via Supabase MCP.
• You want hosting and preview deploys via Netlify or Vercel MCPs.
• You need to connect API keys and local git so Claude Code can operate on your repo.
• You want a combined workflow where Claude Code handles backend, migrations, and edge functions.

Best practices

• Store secrets in your shell config or a .env file and add .env to .gitignore.
• Keep MCP entries in ~/.claude/mcp.json and optionally in project .mcp.json for reproducible setup.
• Use Netlify MCP for full deploy control; use Vercel MCP for read-only metadata and debugging.
• Start with the combo approach: retain platform UI for non-technical collaboration and use Claude Code for backend precision.
• Run migrations and generate types from Supabase MCP to keep DB and code in sync.

Example use cases

• Migrate a prototype from a hosted IDE to an extensible Claude Code workflow with Supabase and Netlify.
• Set up a new project where Claude Code runs SQL migrations, manages edge functions, and deploys previews.
• Connect GitHub and local files so Claude Code can open PRs, run tests, and deploy builds.
• Combine platform-hosted UI for design with Claude Code-managed backend and staging environments.