Get the vibes right (man).

What vibe coding looks like in practice:

1. Start with strategy (Claude) — Describe what you want to build. Discuss architecture, tradeoffs, decisions. Get a plan before writing code.
2. Execute with code (Cursor) — Take the plan to Cursor. Let Cursor write the actual code. Cursor reads your project docs for context.
3. Iterate and refine (both) — Cursor for implementation details. Claude for "should we do it this way or that way?" Back and forth as needed.

Example Session

You (in Claude): "I need to add user authentication to my app. Should I use Supabase Auth or build custom?"

Claude: Discusses options, recommends Supabase Auth for faster MVP, explains security benefits, notes you can migrate later if needed.

You (in Cursor): "Add Supabase authentication to the app. Email/password + Google Sign-In."

Cursor: Reads AGENTS.md for context, writes auth code, updates database schema, adds UI components, updates relevant docs.

Key Insight

Claude for thinking. Cursor for doing. Don't try to make one tool do both jobs.

The magic happens when you use each tool for what it's optimized for:

• Claude excels at strategic thinking, exploring options, critiquing approaches
• Cursor excels at writing code, implementing features, executing plans

Before you begin, make sure you have the following accounts and software ready:

Required Accounts

• GitHub account - For version control and repository hosting
• Vercel account - For deployment and hosting (free tier available)
• Supabase account (optional) - For backend services if you need a database or authentication (free tier available)
• Figma account - For design files (free tier available)

Required Software

• Cursor - AI-powered code editor (download from cursor.sh)
• Node.js (optional) - Version 18 or higher (only needed if you're using Next.js or React)

Use Claude for strategy and planning before you write code. No special setup required—just create an account and start a conversation.

Memory / Project Context

For ongoing projects, start each Claude session by pasting or uploading a short summary of your project (tech stack, what you're building, key decisions). You can use the same AGENTS.md summary you use for Cursor. This gives Claude context so you don't re-explain everything.

Tip: Keep a project context note (or link to AGENTS.md) and paste it into Claude when you start a planning session. "Here's my project context. I need to decide..."

GitHub will serve as your version control system and the source of truth for your code. It also integrates seamlessly with Vercel for automatic deployments.

Creating a New Repository

1. Go to github.com/new
2. Choose a repository name (e.g., "my-vibe-project")
3. Set it to Public or Private based on your preference
4. Initialize with a README if you want a starting point
5. Click "Create repository"

Connecting GitHub to Cursor via MCP

Once you have your repository, connect it to Cursor so you can work with it directly:

1. In Cursor, open Settings (Cmd/Ctrl + ,)
2. Navigate to "Features" → "Model Context Protocol"
3. Click "Add Server" or edit existing configuration
4. Add the GitHub MCP server configuration

You'll need a GitHub Personal Access Token. Ask Cursor to help you create one, or follow these steps:

1. Go to GitHub → Settings → Developer settings → Personal access tokens → Tokens (classic)
2. Click "Generate new token (classic)"
3. Give it a name (e.g., "Cursor MCP")
4. Select scopes: repo, read:org, read:user
5. Generate and copy the token
6. Add it to Cursor's MCP configuration

Example GitHub MCP configuration (Cursor can help you set this up):

{
  "mcpServers": {
    "github": {
      "command": "npx",
      "args": [
        "-y",
        "@modelcontextprotocol/server-github"
      ],
      "env": {
        "GITHUB_PERSONAL_ACCESS_TOKEN": "your-github-token-here"
      }
    }
  }
}

Pro tip: Instead of manually cloning repositories, ask Cursor to help you clone your GitHub repo. Just paste the repository URL and ask Cursor to clone it for you.

Vercel provides seamless deployment from GitHub with automatic previews for every push. It works with different types of projects, and it's important to understand the differences.

Understanding Project Types

Vercel can deploy different kinds of projects:

• Static Sites - Simple HTML, CSS, and JavaScript files. No server needed. Perfect for landing pages, portfolios, or simple websites. Just upload your files and they're live.
• React Apps - Interactive web applications built with React. These need to be built (compiled) before deployment. Vercel handles this automatically.
• Next.js Apps - A framework built on React that adds features like server-side rendering, routing, and API routes. Next.js projects can be more complex but offer more features out of the box.

For vibe coding, you can start with a simple static site (just HTML/CSS/JS) or jump into Next.js if you want more features. Cursor can help you decide which is right for your project.

Connecting GitHub Repository

1. Go to vercel.com and sign in with GitHub
2. Click "Add New Project"
3. Select your GitHub repository from the list
4. Vercel will auto-detect your project type (Next.js, React, or static site)
5. Click "Deploy"

Environment Variables

If your project needs API keys or other secrets (like Supabase keys), you'll need to add them as environment variables. Instead of doing this manually, ask Cursor to help you set up environment variables. Just tell Cursor what keys you need, and it can guide you through the process or even help you create the configuration files.

In Vercel dashboard:

1. Go to your project settings
2. Navigate to "Environment Variables"
3. Add variables for each environment (Production, Preview, Development)

Then access them in your code (Cursor can help you with this syntax):

// Next.js
const apiKey = process.env.NEXT_PUBLIC_API_KEY;

Deployment Process

Once connected, every push to your main branch triggers a production deployment. Pull requests get preview deployments automatically. You'll receive:

• Production URL: your-project.vercel.app
• Preview URLs: your-project-git-branch.vercel.app
• Deployment status notifications

Connecting Vercel to Cursor via MCP

You can connect Vercel to Cursor via MCP to manage deployments, check build status, and configure environment variables directly from Cursor:

1. In Cursor, open Settings (Cmd/Ctrl + ,)
2. Navigate to "Features" → "Model Context Protocol"
3. Click "Add Server" or edit existing configuration
4. Add the Vercel MCP server configuration

You'll need a Vercel Access Token. To create one:

1. Go to Vercel → Settings → Tokens
2. Click "Create Token"
3. Give it a name (e.g., "Cursor MCP")
4. Copy the token immediately

Example Vercel MCP configuration:

{
  "mcpServers": {
    "vercel": {
      "command": "npx",
      "args": [
        "-y",
        "@vercel/mcp"
      ],
      "env": {
        "VERCEL_ACCESS_TOKEN": "your-vercel-token-here"
      }
    }
  }
}

Custom Domain Setup

Adding a custom domain gives your project a professional URL and makes it easier to share. This is completely optional - your Vercel URL works perfectly fine.

DNS Configuration

In your domain registrar (where you bought your domain):

1. Add a CNAME record pointing to cname.vercel-dns.com
2. Or add A records pointing to Vercel's IP addresses (if CNAME not supported)
3. Wait for DNS propagation (can take up to 48 hours, usually much faster)

Vercel Domain Settings

1. In Vercel dashboard, go to your project settings
2. Navigate to "Domains"
3. Enter your domain name (e.g., example.com or www.example.com)
4. Vercel will verify DNS configuration
5. Once verified, your site will be live on your custom domain

Cursor is an AI-powered code editor that integrates with Figma, GitHub, and other tools to streamline your development workflow. This is where the magic happens.

Installing Cursor

1. Go to cursor.sh
2. Download for your operating system (macOS, Windows, Linux)
3. Install the application
4. Open Cursor and sign in (or create an account)

That's it! Cursor comes ready to use. You can start asking it questions and writing code right away.

Rules for AI (Cursor Settings)

Add project-agnostic instructions via Settings → Cursor Settings → Rules for AI. One rule we recommend: tell Cursor to use tools directly instead of giving you manual instructions.

When you have access to tools via MCP or other integrations, ALWAYS use them directly instead of giving me instructions.

If you can execute an action yourself (create files, run SQL, make API calls, etc.), do it immediately. Never say "go to X and do Y" - just do Y yourself.

Only give me manual instructions when you literally cannot perform the action (e.g., requires physical access, external authentication you don't have).

Default to action, not explanation.

Example .cursorrules

Here's a real .cursorrules file that demonstrates "concise, action-oriented":

# Project: [Your App Name]
# Stack: [Your tech stack]

## Before Making Changes
- Read AGENTS.md for current context
- Show me your plan before executing
- Ask about tradeoffs when multiple approaches exist
- Wait for approval

## After Completing Work
- Update AGENTS.md with what changed and why
- Note new patterns
- Clean up only your changes

## Code Quality
- [Your language/framework] best practices
- Prefer simplicity over cleverness
- Comment only when code isn't self-explanatory

## Communication Style
- Direct and concise
- Code-first: show code, explain when asked
- Default to action, not explanation

## Project Context
- Current phase: [e.g., MVP v1]
- Key constraints: [e.g., Solo builder, 3-month timeline]
- Team: [e.g., Solo with 2 advisors]

## Anti-Patterns to Avoid
- Don't suggest [deferred features]
- Don't add [libraries we don't need yet]
- Don't over-engineer for scale we don't have

Why this works: Cursor knows what to do by default. You don't have to remember prompts or paste instructions every time. The file tells Cursor: what to read for context (AGENTS.md), how to behave (ask before big changes, update docs after), what quality standards to follow, and what to avoid. Once configured, you just open Cursor and start working.

Connecting Figma to Cursor via MCP

The Figma MCP (Model Context Protocol) server allows Cursor to access your Figma designs, extract design details, and generate code based on your designs. This is the magic that makes vibe coding work.

Getting Your Figma Personal Access Token

First, you need to create a token that lets Cursor access your Figma files:

1. Open Figma (desktop app or web)
2. Go to Figma → Settings → Account
3. Scroll down to "Personal access tokens"
4. Click "Create new token"
5. Give it a name (e.g., "Cursor MCP")
6. Copy the token immediately - you won't be able to see it again!

Configuring Figma MCP in Cursor

Now let's connect it to Cursor:

1. Open Cursor settings (Cmd/Ctrl + ,)
2. Navigate to "Features" → "Model Context Protocol"
3. Click "Add Server" or edit existing configuration
4. Add the Figma MCP server configuration

You'll need to add configuration that looks like this (Cursor can help you set this up if you ask):

{
  "mcpServers": {
    "figma": {
      "command": "npx",
      "args": [
        "-y",
        "@modelcontextprotocol/server-figma"
      ],
      "env": {
        "FIGMA_PERSONAL_ACCESS_TOKEN": "paste-your-token-here"
      }
    }
  }
}

Sharing Your Figma File

For Cursor to access your designs, your Figma file needs to be accessible:

1. Open your Figma file
2. Click "Share" in the top right
3. Set permissions to "Can view" (this is enough for MCP access)
4. Copy the file URL - you can paste this in Cursor when asking about designs

Testing the Connection

Once configured, test the connection in Cursor:

• Open a chat in Cursor
• Paste a Figma URL and ask: "Can you access this Figma design?"
• Or try: "Get the design context for this Figma file" (with the URL)
• If working, Cursor should be able to describe your designs and extract design details

Troubleshooting: If it's not working, make sure your Figma file is shared (even if just with "Can view" permission) and that you've restarted Cursor after adding the MCP configuration.

These best practices will help you get the most out of vibe coding: project memory, when to use which tool, and common mistakes to avoid.

The problem: AI forgets everything between sessions.

The solution: Documentation files that AI reads automatically.

The System

AGENTS.md — Quick reference. Current decisions and tech stack, what's built so far, active context AI needs. AI reads this FIRST every session.

DECISIONS.md — Decision log. Full rationale for choices made, alternatives considered, when and why. "Why did we choose X over Y?"

.cursorrules — Behavioral defaults. How Cursor should act, project-specific conventions, quality standards. Cursor reads this automatically.

How It Works

1. You open Cursor
2. Cursor reads .cursorrules (knows how to behave)
3. Cursor reads AGENTS.md (knows project context)
4. You start working with full context loaded

You don't explain the project every time. You just start working.

Example AGENTS.md

# Project Context

**Last Updated**: 2026-01-30

## Tech Stack
- React Native + Expo (iOS/Android)
- Supabase (database, auth, storage)
- TypeScript

## What's Built
- ✅ Authentication (email/password + Google)
- ✅ User profiles
- ✅ Basic dashboard
- 🚧 Friend management (in progress)

## Current Focus
Building friend orbit visualization for MVP v1

## Key Decisions
- Using Supabase Auth (not custom)
- iOS first, Android later
- Manual friend entry (no contact import yet)

See DECISIONS.md for full rationale

Best Practices

Keep AGENTS.md current — Update when you build new features. Keep it concise. Link to detailed docs for more.

Don't over-document — Start with just AGENTS.md. Add DECISIONS.md when you have decisions. Don't create empty files "for later".

Let Cursor update them — After finishing work: "Update AGENTS.md with what we just built." Cursor will update the file. You don't manually maintain it. The system works when it's frictionless.

Use Claude for

• Strategy and planning — "Should we build this feature?" "What's the best approach for X?"
• Architecture decisions — "Supabase or Firebase?" "REST API or GraphQL?"
• Exploring tradeoffs — "What are the pros and cons?" "What will we regret in 6 months?"
• Learning new concepts — "Explain how OAuth works" "JWT vs sessions?"
• Reviewing and critiquing — "Review this code for security" "Is this architecture sound?"
• "Is this a good idea?" — "Should we add this dependency?" "Am I overthinking this?"

Use Cursor for

• Writing actual code — "Add user authentication" "Create a dashboard component"
• Implementing features from a plan — After discussing with Claude, execute in Cursor. Cursor reads your docs and writes the code.
• Debugging and fixing errors — "Fix this TypeScript error" "Why isn't this API call working?"
• Refactoring existing code — "Extract this into a reusable component" "Add error handling here"
• Creating files and project structure — "Create a new React component" "Set up the database schema"
• Running commands (when MCP configured) — "Run the tests" "Create the Supabase table" "Deploy to staging"

The Pattern

1. Think in Claude → Get a plan, discuss tradeoffs, make decisions
2. Build in Cursor → Execute the plan, write the code
3. Iterate → Back and forth as needed

Example flow: Claude: "Let's use Supabase Auth with row-level security. Here's why..." You: "Sounds good." Cursor: "Add Supabase Auth with RLS policies for users table" → implements it. Claude: "Review this auth implementation for security issues" → suggests improvements. Cursor: "Apply those security improvements" → updates code.

Don't try to do everything in one tool. They're optimized for different jobs.

❌ Mistake 1: Making AI explain instead of do — Wrong: "How would I add authentication?" Right: "Add Supabase authentication with email/password and Google Sign-In". The AI can do it. Let it.

❌ Mistake 2: Not using project memory — Wrong: Re-explaining your project every session. Right: Create AGENTS.md once; AI reads it automatically. Every session starts with full context.

❌ Mistake 3: Using one tool for everything — Wrong: All planning in Cursor or all coding in Claude. Right: Claude for strategy, Cursor for execution.

❌ Mistake 4: Not configuring tools properly — Wrong: Default settings; AI gives instructions instead of acting. Right: Configure MCP, set behavioral defaults, connect to your tools. Action over explanation.

❌ Mistake 5: Over-documenting — Wrong: Creating 20 empty docs "for later". Right: Create docs when you have content. Start with AGENTS.md and .cursorrules. Empty files are noise.

❌ Mistake 6: Under-specifying — Wrong: "Make it better". Right: "Add error handling for failed API calls with user-friendly messages". Be specific. AI can't read your mind.

❌ Mistake 7: Not reviewing AI output — Wrong: Blindly accepting everything. Right: Review code, test features, verify logic. You're still the developer.

❌ Mistake 8: Fighting with AI instead of redirecting — Wrong: "No that's not what I meant" → "No still wrong". Right: "Actually, I want X instead of Y. Here's why..." Clarify. It's a conversation.

❌ Mistake 9: Not leveraging AI's strengths — Wrong: Writing boilerplate manually. Right: "Create all CRUD operations for the users table". AI excels at boilerplate, repetitive tasks, well-known solutions. Save your brain for the interesting problems.

❌ Mistake 10: Forgetting you're still the architect — Wrong: "Just build me an app that does X". Right: "Here's my plan: [architecture]. Start with authentication using Supabase." You make the decisions. AI implements them. You're the senior engineer. AI is the junior dev who codes fast.

The magic happens when Figma and Cursor work together. Here's how to translate your designs into code effectively.

Example Workflow

Let's say you have a button design in Figma and want to code it:

1. In Figma, select the button frame or component you want to code
2. Copy the Figma URL (or the node ID from the URL)
3. In Cursor, paste the URL and ask: "Create an HTML button that matches this Figma design"
4. Cursor will access the Figma design, extract the colors, spacing, typography, and generate the code
5. Review the code, make adjustments if needed, and ask Cursor to refine it

Example prompts you can try:

• "Create a React component based on this Figma design: [paste URL]"
• "What are the exact colors and spacing used in this Figma frame?"
• "Generate CSS for this button design from Figma"
• "Create a Next.js page that matches this Figma layout"
• "Extract the design tokens (colors, fonts, spacing) from this Figma file"

Best Practices in Figma

To make vibe coding easier, use these Figma features:

• Auto Layout - Use Auto Layout for frames so Cursor can better understand spacing and relationships between elements
• Name layers clearly - Use descriptive names that match your component structure (e.g., "Button", "Card", "Header")
• Use components - Create reusable components for buttons, cards, etc. This helps Cursor understand your design system
• Organize with frames - Group related elements in frames so Cursor can understand the layout structure

Design Best Practices for .cursorrules

Add these rules to your .cursorrules file to ensure consistent design implementation:

# Design Best Practices

## Before Building UI
- Always read the design best practices file (e.g., docs/design-best-practices.md) before implementing any UI
- Extract and reference design tokens (colors, spacing, typography) from the design system
- Check for existing components that match or can be extended

## During Implementation
- Match Figma designs pixel-perfectly unless responsive adjustments are needed
- Use semantic HTML elements (button, nav, article, etc.)
- Implement mobile-first responsive design
- Ensure all interactive elements have proper hover/focus/active states

## Accessibility
- Include proper alt text for images
- Ensure sufficient color contrast (WCAG AA minimum)
- Support keyboard navigation
- Use ARIA labels where semantic HTML is insufficient

Creating a Design Best Practices File

For larger projects, create a dedicated docs/design-best-practices.md file that Cursor reads before implementing UI. This gives you a single source of truth for design decisions. Here's an example structure:

# Design Best Practices (Builder Guide)

**Purpose**: Internal guide for Cursor to translate sparse product requirements into consistent, modern UI choices.

---

## Decision Order (Highest Priority Wins)

1. **Brand voice**: `docs/brand/voice.md`
2. **Platform**: iOS-first (HIG defaults), Android later (Material defaults)
3. **Existing screens**: match current typography, spacing, and button styles
4. **Accessibility**: minimum touch target + contrast
5. **Performance**: avoid heavy animations unless asked

---

## Default UI Choices (When User Gives Minimal Input)

### Layout Defaults
- **Page padding**: 20px horizontal, 20px vertical
- **Section spacing**: 24px between major blocks
- **Title -> subtitle**: 8px
- **Subtitle -> content**: 32-40px
- **Background**: white (`#fff`)

### Typography Defaults
- **Title**: 32px, bold, `#000`
- **Subtitle**: 16px, regular, `#666`
- **Body**: 16px, regular, `#000`
- **Small**: 14px, regular, `#666`

### Button Defaults
- **Primary**: full-width, `#000` bg, `#fff` text, 16px padding, radius 8
- **Secondary**: full-width, outline `#000`, radius 8, 16px padding
- **Destructive**: `#ff3b30` bg, white text

### Input Defaults
- **TextInput**: 1px border `#ddd`, radius 8, padding 16, font 16

---

## Motion Defaults

- **Tap feedback**: scale 0.98 or opacity 0.8 (200ms)
- **Screen transitions**: standard stack push
- **List items**: simple fade-in (200-300ms)
- **Avoid**: heavy shared-element transitions unless asked

---

## State Defaults

- **Loading**: spinner for simple screens, skeleton for lists
- **Empty**: title + short helper text + primary CTA
- **Error**: short error text + retry action

---

## Accessibility Defaults

- **Touch targets**: minimum 44x44
- **Contrast**: WCAG AA for text on backgrounds
- **Labels**: add accessibility labels on icon-only buttons

Then in your .cursorrules, add: Before implementing any UI, read docs/design-best-practices.md. This ensures Cursor applies your design system consistently without you having to repeat specifications.

One of the most powerful ways to improve your vibe coding workflow is to make your AI assistant autonomous when handling errors. Instead of copying and pasting error messages back and forth, configure your assistant to debug independently.

Autonomous Error Resolution

Add this to your .cursorrules file:

# Autonomous Error Resolution

When you encounter an error after attempting a solution:
1. DO NOT wait for me to copy-paste errors or ask you to fix them
2. Automatically read error messages, logs, or console output
3. Analyze the root cause
4. Implement a fix
5. Test the fix
6. If still broken, iterate autonomously up to 3 times
7. Only stop to ask if you've tried 3 approaches without success

Default mode: Keep going until it works. Don't ask permission to debug.

Exception: If the error suggests a fundamental misunderstanding of requirements, stop and clarify.

Why This Works

• Faster iteration - No waiting for you to copy errors back into the chat
• Better context - The AI can see the full error message and surrounding code
• Compound fixes - Sometimes fixing one error reveals another; autonomous mode handles the chain
• Less context pollution - Error messages don't fill up your chat history

When to Intervene

The AI should stop and ask you when:

• It has tried 3 different approaches without success
• The error suggests a misunderstanding of what you're trying to build
• The fix requires access to external systems (databases, APIs) it can't reach
• The error is in a file or area you haven't given it permission to modify

When your AI assistant has access to tools via MCP or other integrations, it should use them directly instead of giving you instructions. This is one of the most impactful rules you can add.

The Rule

Add this to your Cursor Settings → Rules for AI (or .cursorrules):

When you have access to tools via MCP or other integrations, ALWAYS use them directly instead of giving me instructions.

If you can execute an action yourself (create files, run SQL, make API calls, etc.), do it immediately. Never say "go to X and do Y" - just do Y yourself.

Only give me manual instructions when you literally cannot perform the action (e.g., requires physical access, external authentication you don't have).

Default to action, not explanation.

Why This Matters

• Faster workflow - No copy-pasting commands or navigating to external tools
• Fewer errors - The AI executes precisely; you might make typos or miss steps
• True automation - You're leveraging the full power of MCP integrations
• Less context switching - Stay in your editor instead of jumping between apps

Examples

Without this rule: "Go to Vercel and check your deployment status..."

With this rule: The AI uses the Vercel MCP to check status and reports back directly.

Without this rule: "Run this SQL query in Supabase..."

With this rule: The AI executes the query via Supabase MCP and shows you the results.

To see your changes in real-time, you'll need to run a local development server. The good news: Cursor can help you set this up and fix any issues that come up.

Setting Up Your Project

Instead of running commands manually, ask Cursor to help you:

• For Next.js: "Help me create a new Next.js project" or "Set up a Next.js development server"
• For static sites: "Help me set up a local server for my HTML files"
• For React: "Create a new React project" or "Set up a React development environment"

Cursor can create the project structure, install dependencies, and get everything running for you.

When Things Go Wrong

If your server won't start or you see errors, Cursor can help:

1. Open the terminal in Cursor (View → Terminal, or the terminal panel at the bottom)
2. If you see an error message, select it (highlight the text)
3. Ask Cursor: "This error appeared when I tried to start my dev server. Can you help fix it?"
4. Or paste the error and ask: "What does this error mean and how do I fix it?"

Common issues Cursor can help with:

• Port already in use (e.g., "Address already in use" error) - Cursor can help you find what's using the port or switch to a different one
• Missing dependencies - Cursor can help install what's needed
• Configuration errors - Cursor can help fix config files
• Build errors - Select the error message and ask Cursor to explain and fix it

The key is: if Cursor can do it, let it. Don't struggle with command line errors when you can just ask for help.

Extensions can enhance your Cursor experience. Here are some that might be useful for vibe coding and web development. (Note: I haven't used all of these, so I'm curious how well they work!)

Recommended Extensions List

• Prettier - Code formatter for consistent styling
• ESLint - JavaScript linter for code quality
• Tailwind CSS IntelliSense - Autocomplete for Tailwind classes
• GitLens - Enhanced Git capabilities and blame annotations
• Error Lens - Inline error highlighting
• Auto Rename Tag - Automatically rename paired HTML/JSX tags
• Path Intellisense - Autocomplete for file paths
• Color Highlight - Highlight color codes in your code
• Bracket Pair Colorizer - Color matching brackets
• Live Server - Launch a development server with live reload

Installation Instructions

1. Open Cursor
2. Press Cmd/Ctrl + Shift + X to open Extensions view
3. Search for the extension name
4. Click "Install"
5. Some extensions may require a reload (click "Reload" when prompted)

Tip: Ask Cursor to help you set up extensions if you're not sure which ones you need or how to configure them.

This is the difference between vibe coding and regular coding.

Instead of:

1. Writing SQL in Cursor
2. Copying it
3. Opening Supabase dashboard
4. Pasting into SQL editor
5. Running it manually
6. Going back to Cursor

You do this:

1. "Create a users table with email and name columns"
2. Cursor does it

What Supabase MCP Enables

• Cursor can read your database schema
• Cursor can execute SQL directly
• Cursor can create tables, add columns, run migrations
• Cursor can add RLS (Row Level Security) policies
• You never leave your editor

Setup (5 minutes)

Step 1: Get your Supabase credentials

Go to your Supabase project: Settings → API. Copy Project URL (e.g. https://xxxxx.supabase.co) and the service_role key (NOT the anon key).

Step 2: Add to Cursor MCP config

Mac: ~/Library/Application Support/Cursor/User/globalStorage/saoudrizwan.claude-dev/settings/cline_mcp_settings.json

Windows: %APPDATA%\Cursor\User\globalStorage\saoudrizwan.claude-dev\settings\cline_mcp_settings.json

{
  "mcpServers": {
    "supabase": {
      "command": "npx",
      "args": [
        "-y",
        "@modelcontextprotocol/server-supabase",
        "YOUR_PROJECT_URL",
        "YOUR_SERVICE_ROLE_KEY"
      ]
    }
  }
}

Replace YOUR_PROJECT_URL and YOUR_SERVICE_ROLE_KEY with your actual values.

Step 3: Restart Cursor

Close and reopen Cursor completely.

Now You Can Say

• "Create a users table with email and name columns" → Cursor creates it in Supabase
• "Add RLS policies to the people table so users can only see their own data" → Cursor adds the policies
• "Show me all tables in the database" → Cursor shows you the schema
• "Add a profile_photo_url column to users table" → Cursor runs the migration
• "Create a hangouts table with user_id, date, and notes columns" → Cursor creates it with proper foreign keys

Why This Matters

Without MCP: You're a translator between AI and tools. With MCP: AI operates the tools directly. This is vibe coding. You describe what you want. The AI does it. No more copying and pasting SQL, switching between windows, or manual migrations. Just: "Make it so" and it happens.

Troubleshooting

"MCP server not found" — Restart Cursor completely. Check the file path for your OS. Verify the JSON is valid (no trailing commas).

"Authentication failed" — Use service_role key, not anon key. Check project URL has no trailing slash.

"Command not found: npx" — Install Node.js from nodejs.org and restart terminal/Cursor.

Common issues and their solutions when setting up your vibe coding environment.

Common Issues

Figma MCP Not Connecting

• Verify your Figma Personal Access Token is correct and not expired
• Check that the file URL is accessible (not private without proper permissions)
• Restart Cursor after MCP configuration changes
• Check Cursor's MCP logs for error messages

GitHub MCP Issues

• Ensure your GitHub token has the correct scopes (repo, read:org)
• Check token expiration date
• Verify repository permissions if accessing private repos

Vercel Deployment Fails

• Check build logs in Vercel dashboard for specific errors
• Verify environment variables are set correctly
• Ensure package.json has correct build scripts
• Check Node.js version compatibility

Supabase Connection Issues (Optional)

• Verify API URL and keys are correct
• Check Supabase project status (not paused)
• Verify Row Level Security (RLS) policies if data isn't accessible
• Check browser console for CORS errors
• Better yet: Select the error message and ask Cursor to help fix it

Local Dev Server Not Starting

Instead of troubleshooting manually, try this:

• Open the terminal in Cursor
• Select the error message
• Ask Cursor: "This error appeared when I tried to start my dev server. Can you help fix it?"
• Common issues Cursor can help with: port conflicts, missing dependencies, configuration errors

Solutions

General troubleshooting steps:

1. Check logs - Most tools provide detailed error logs
2. Restart services - Often fixes transient issues
3. Update dependencies - npm update or check for updates
4. Clear caches - Browser cache, npm cache, Next.js cache
5. Verify credentials - Tokens, API keys, passwords
6. Check documentation - Official docs often have troubleshooting sections

Now that your environment is set up, here are some resources and next steps to continue your vibe coding journey.

Resources

• Cursor Documentation - Official Cursor docs
• Figma Developer Resources - API and plugin docs
• Vercel Documentation - Deployment guides
• Supabase Documentation (Optional) - Database and auth guides
• Next.js Documentation - Framework reference
• MCP GitHub - Model Context Protocol resources

Further Reading

• Design Systems - Learn about creating reusable design components
• Component Architecture - Best practices for organizing React/Next.js components
• API Design - How to structure your Supabase database and APIs
• Performance Optimization - Tips for fast-loading web applications
• Accessibility - Making your sites usable for everyone

Happy vibe coding! Remember, the best workflow is the one that works for you. Experiment, iterate, and refine your setup as you go.

Links to real examples built with vibe coding:

• Cursor Documentation
• Figma Developer Resources
• Vercel Documentation
• Supabase Documentation
• MCP GitHub

Here's what vibe coding looks like for a real feature.

Step 1: Strategy in Claude

You: "I need to add authentication to my React Native app. Should I use Supabase Auth or build custom?"

Claude: For an MVP, use Supabase Auth. Production-ready security, email/password + OAuth built-in, Row Level Security, generous free tier. 5 minutes to implement vs 5 days custom. You can migrate later if you outgrow it.

You: "Sold. What's the implementation plan?"

Claude: 1) Install Supabase client. 2) Configure Supabase in your app. 3) Create login/signup screens. 4) Add Google Sign-In. 5) Set up auth state management. 6) Add protected routes. 7) Test the flow.

Step 2: Implementation in Cursor

You (in Cursor): "Add Supabase authentication with email/password and Google Sign-In to the app. Use the plan from Claude."

Cursor (reads AGENTS.md, sees React Native + Expo + Supabase): Installs @supabase/supabase-js, creates lib/supabase.ts, screens/LoginScreen.tsx, SignupScreen.tsx, adds Google Sign-In button, sets up auth state in App.tsx, adds protected route logic, updates AGENTS.md.

5 minutes later: Working authentication.

Step 3: Test and Refine

You test it. Login works. Signup works. Google Sign-In works. You notice error messages are generic.

You (in Cursor): "Improve error messages to be user-friendly. 'Invalid credentials' instead of error codes."

Cursor: Updates error handling with friendly messages. Done.

What Just Happened

• Planning: 2 minutes with Claude
• Implementation: 5 minutes with Cursor
• Refinement: 1 minute with Cursor
• Total: 8 minutes

Traditional approach: 2–4 hours minimum. That's vibe coding. You focused on the decision (which auth to use). AI handled implementation. Now you can ship.

This section provides a comprehensive overview of the tech stack, tool relationships, costs, and design system used in the vibe coding workflow.

Technologies

Relationship Between Apps

The vibe coding workflow creates a seamless pipeline from design to deployment:

1. Figma → Cursor: Design files are accessed via Figma MCP, allowing Cursor to extract design tokens, colors, typography, spacing, and component structures.
2. Cursor → GitHub: Code is written in Cursor and committed to GitHub repositories via GitHub MCP integration, enabling version control and collaboration.
3. GitHub → Vercel: Every push to GitHub automatically triggers deployments on Vercel, creating production and preview URLs.
4. Supabase (Optional): Provides backend services that can be accessed from frontend code deployed on Vercel, completing the full-stack workflow.

This creates a continuous workflow: Design → Code → Deploy → Iterate, all powered by AI assistance in Cursor.

Cost

Total Free Tier Cost: $0/month - You can build and deploy projects completely free using the free tiers of all services. Paid plans unlock additional features, higher limits, and team collaboration tools.

Design System

Type

Font Family: System font stack for optimal performance and native feel:

-apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen', 'Ubuntu', 'Cantarell', sans-serif

This ensures the site uses the native system font on each platform (San Francisco on macOS, Segoe UI on Windows, etc.).

Type Scale

• H1: 42px, font-weight: 700, line-height: 1.2
• H2: 28px, font-weight: 600, line-height: 1.2
• H3: 20px, font-weight: 600, line-height: 1.3
• H4: 16px, font-weight: 600, line-height: 1.4
• Body: 16px (default), line-height: 1.7
• Small: 14px, line-height: 1.6
• Code: 14px (in code blocks), 0.9em (inline), font-family: 'SF Mono', 'Monaco', 'Inconsolata', 'Fira Code', 'Droid Sans Mono', monospace

Color

Light Mode:

Dark Mode:

Other Design System Elements

• Border Radius: 4px (small elements), 6px (buttons, inputs), 8px (cards, modals)
• Spacing Scale: 4px base unit (4px, 8px, 12px, 16px, 24px, 32px, 48px)
• Shadows: Minimal, used for modals and elevated elements
• Transitions: 0.2s-0.3s ease for interactive elements
• Code Blocks: Light background (#f6f8fa light / #161b22 dark) with border
• Sidebar Width: 240px fixed
• Content Max Width: 900px
• Header Height: 60px fixed

This section is password protected. Click "Contribute" in the sidebar and enter the password to access.