Vibe Coding Workshop · Day 2

AI Vibe Coding
Training

Skills · MCP · CLI · Supabase

12 April 2026 9:00AM – 6:00PM

Mastering Antigravity

Skills. MCP. CLI.

Stop explaining the same thing twice. Encode it once. Let the agent run.

The Core Problem

You Are the Context

Every time you start a new session with an AI coding agent, you re-explain everything from scratch:

Your folder structure and where things live
Your tech stack and which versions you use
Your deploy process and environment setup
Your naming rules and code conventions
Your patterns — how you do auth, routing, state

You are the context. And that doesn’t scale.

Skills fix this. MCP extends it. CLI automates it.

Skills Deep Dive

What is a Skill?

I know kung fu. — Neo, The Matrix

⚡

On-Demand Loading

Skills are loaded only when relevant. The agent reads the description and pulls in what it needs — no wasted tokens on context that doesn’t apply.

🛠

Capability Extension

Each skill gives the agent a new superpower: a new framework, a deploy recipe, a testing strategy. Plug-and-play expertise.

📖

Living Documents

Skills are Markdown files you version-control alongside your code. They evolve with your project and stay in sync with reality.

Skills vs System Prompts

Dimension	System Prompt	Skill
Loaded	Always — every request	On-demand — when relevant
Token cost	Constant overhead	Pay only when used
Scope	Global, one-size-fits-all	Targeted, single-purpose
Versioning	Manual, easy to lose track	Git-tracked with your code
Team sharing	Copy-paste across setups	Clone the repo, get the skills
Updates	Edit a long text blob	Edit a focused .md file
Scales to	Hits context limits fast	Hundreds of skills, no cost

System prompts are always-on overhead. Skills are just-in-time specialisation.

Anatomy of a Skill

Directory Structure

.agent/
  skills/
    my-skill/
      SKILL.md        # Description + instructions
      examples/       # Few-shot examples
      templates/      # Code templates
      reference/      # API docs, schemas
        

SKILL.md Format

---
description: "Short, searchable summary
  that helps the agent decide
  whether to load this skill"
---

# Skill Name

## Context
When and why to use this skill.

## Instructions
Step-by-step rules the agent follows.

## Examples
Before/after pairs showing correct output.
        

Tip The description field is SEO for the agent. Make it specific enough to match the right queries, broad enough to not be missed.

Workspace vs Global

📁

Workspace Skills

.agent/skills/
  supabase-auth/SKILL.md
  deploy-vercel/SKILL.md
  api-patterns/SKILL.md
        

Live in your repo. Shared with the team via git. Project-specific knowledge that travels with the codebase.

🌐

Global Skills

~/.gemini/
  skills/
    my-code-style/SKILL.md
    git-workflow/SKILL.md
    review-checklist/SKILL.md
        

Live on your machine. Personal preferences and cross-project conventions that follow you everywhere.

Workspace skills are team knowledge. Global skills are personal muscle memory. Use both.

Skill Patterns

5 Skill Patterns

Router

router/
  SKILL.md
  rules/
    *.md
        

Routes to sub-skills based on task type. The “switchboard” pattern.

Reference

api-ref/
  SKILL.md
  schema.json
  endpoints.md
        

API docs, schemas, type definitions. The agent’s reference shelf.

Few-Shot

few-shot/
  SKILL.md
  examples/
    01.md, 02.md
        

Before/after pairs. Show, don’t tell. Best for code style.

Tool Use

tool-use/
  SKILL.md
  scripts/
    run.sh
        

Wraps CLI tools or scripts the agent can invoke directly.

All-in-One

full-stack/
  SKILL.md
  templates/
  examples/
        

Complete playbook for a domain. Rules + examples + templates.

Model Context Protocol

MCP: Model Context Protocol

Skills teach HOW. MCP gives LIVE DATA.

Category	MCP Server	What It Gives the Agent
Databases	Supabase, Postgres, Neon	Read/write tables, run queries, inspect schemas
Dev Tools	GitHub, GitLab, Linear	Issues, PRs, branch status, CI results
Design	Figma	Component specs, tokens, layout data
Productivity	Notion, Google Docs	Project docs, meeting notes, specs
Payments	Stripe	Product catalogue, subscription logic
Automation	n8n, Zapier	Workflow definitions, trigger configs
Custom	Your own API	Anything you expose via the MCP spec

Supabase Primer

What is Supabase?

You don’t need to know what a database is to build something that uses one. You just need the right analogy.

Think of a web app like a restaurant:

Frontend = the dining room — what guests see and interact with
Backend = the kitchen — where orders get processed
Database = the filing cabinet in the office — where all the records live

Supabase gives you the kitchen and the filing cabinet in one service:

Feature	Plain English
Database	Organised tables to store your data — users, products, orders
Auth	Sign up, log in, password reset — handled for you
Storage	Upload and serve images, PDFs, any file
Realtime	Instant updates — when data changes, your app knows immediately
Edge Functions	Small pieces of server code that run close to your users
Auto API	Every table instantly gets a REST + GraphQL API — no code needed

Database Basics

How a Database Works

A database is just a very organised spreadsheet.

users

id	name	email	role
1	Sarah	sarah@mail.com	admin
2	James	james@mail.com	agent
3	Priya	priya@mail.com	buyer

properties

id	address	price	agent_id
101	12 Oak Lane	$450k	2
102	8 River Rd	$620k	2
103	3 Hill St	$380k	2

Rows = Records

Each row is one item — one user, one property, one order. Like one line in a spreadsheet.

Columns = Fields

Each column is one attribute — name, email, price. The shape of your data.

Relationships = Links

The agent_id in properties points to a user. That’s how tables connect.

Key Concepts

Supabase Key Concepts

🔑

Row Level Security (RLS)

Think of it like key cards in a hotel. Your card only opens your room. RLS means each user can only see and edit their own data — the database enforces it automatically, no extra code needed.

⚡

Realtime

Like WhatsApp for your data. When someone adds a row or changes a value, every connected client sees it instantly. No refresh, no polling — just live updates pushed to the browser.

🗃

Storage

A file locker in the cloud. Upload profile pictures, PDFs, property photos. Organise them in buckets. Control who can access what with the same RLS policies as your database.

⚙

Edge Functions

Tiny workers that run server-side code close to your users. Send an email when someone signs up, process a payment, call an external API — without managing a server.

MCP + Supabase

Supabase MCP Unlocks

Without MCP you describe and hope. With MCP the agent reads your actual database.

Action	What the Agent Can Do
Inspect schema	Read every table, column, type, and relationship — no guessing
Query data	Run SELECT queries to understand real content and edge cases
Generate migrations	Write SQL migrations that match your actual schema, not an imagined one
Create RLS policies	Build security rules based on your real auth setup
Scaffold CRUD	Generate type-safe API calls that match your columns exactly
Debug issues	Check live data to find why a query returns empty or wrong results

Before MCP

Copy-paste your schema into the chat
Describe your tables from memory
Hope the generated SQL matches reality
Manually fix column names and types

With MCP

Agent reads the schema directly
Queries real data for context
Generates SQL that works first time
Validates against actual types and constraints

Setup

Connect Supabase MCP

Four steps to give your AI agent direct access to your Supabase project.

01

Get Credentials

Open your Supabase dashboard. Copy two values: Project URL and Service Role Key from Settings → API.

02

Open MCP Settings

In Antigravity IDE, go to Settings → MCP Servers. Click Add Server to open the configuration panel.

03

Add Configuration

Paste this JSON into your MCP config file:

// .antigravity/mcp_servers.json
{
  "mcpServers": {
    "supabase": {
      "command": "npx",
      "args": [
        "-y",
        "@supabase/mcp-server",
        "--supabase-url",
        "https://<your-project>.supabase.co",
        "--supabase-key",
        "<your-service-role-key>"
      ]
    }
  }
}
        

04

Restart and Test

Restart Antigravity. Ask the agent: "List all tables in my Supabase project." If it returns your schema, MCP is connected.

Warning: Never commit your Service Role Key to version control. Use environment variables or .env files and add them to .gitignore.

+

Real Examples

MCP in Action

Three real scenarios showing the difference MCP makes.

1. Building a Saved Properties Feature

Without MCP

You manually describe your schema, column names, relationships, and RLS policies. The agent guesses at types and foreign keys. Multiple rounds of correction follow.

With MCP

The agent reads your properties and profiles tables directly, sees exact types and constraints, and generates a correct saved_properties junction table with proper foreign keys on the first attempt.

2. Debugging an RLS Data Leak

Without MCP

You copy-paste your RLS policies into chat. The agent suggests fixes based on incomplete context. You go back and forth, unsure which policy is actually active.

With MCP

The agent queries pg_policies directly, finds the permissive SELECT policy missing a user_id = auth.uid() check, and writes the corrected policy immediately.

3. Writing a Complex JOIN Query

Without MCP

You describe table relationships in prose. The agent writes SQL with wrong column names and missing joins. Debugging requires multiple iterations.

With MCP

The agent inspects foreign keys and indexes, writes an optimized query with correct column names, proper JOIN order, and even suggests adding a missing index for performance.

Your First Skill

supabase-patterns Skill

A Skill tells the agent how to write Supabase code before it starts. Combine it with MCP and the agent knows your patterns AND your live schema.

# SKILL.md — supabase-patterns

## Client Init
- Always use createBrowserClient() for client components
- Always use createServerClient() for server components / route handlers
- Never import createClient from @supabase/supabase-js directly in Next.js

## RLS Rules
- Every table MUST have RLS enabled
- Default deny: no policies = no access
- Always filter by auth.uid() in SELECT policies
- Use security definer functions for admin operations

## Query Patterns
- Use .select('*, relation(*)') for joins, never raw SQL in client
- Always handle { data, error } destructuring
- Use .single() when expecting one row

## Realtime
- Subscribe in useEffect, unsubscribe in cleanup
- Channel names must be unique per component instance

## Storage
- Public buckets for avatars / assets
- Private buckets with RLS for user documents
- Always set cacheControl: '3600' on uploads

## Edge Functions
- Use Deno.serve() pattern
- Always verify JWT with supabase.auth.getUser()
- Return proper CORS headers

## Constraints
- Max 500 rows per request unless paginated
- Always use .range(from, to) for pagination
- Prefer database functions over multiple client queries
    

Definitive Guide

MCP vs Skills

They solve different problems. Here is the definitive comparison.

	Skills	MCP
What it is	A markdown file of rules and patterns	A live server connection to external tools
Lives where	In your project repo (`.antigravity/skills/`)	Runs as a local or remote process
Purpose	Encode how to write code correctly	Give the agent access to live data and actions
Example	"Always use RLS on every table"	"Read my actual table schema from Supabase"
Token cost	Loaded into context once (predictable)	Each tool call adds tokens (variable)
Best for	Consistency, standards, team conventions	Dynamic data, database ops, deployments
Versioned	Yes — lives in Git with your code	No — reflects live state of the service

The power move: run Skills AND Supabase MCP together. Skills set the rules. MCP provides the live context. The agent writes correct code that fits your real schema.

+

CLI

Gemini CLI

The same AI power, right in your terminal. No IDE required.

Key Facts

01 Open-source on GitHub — inspect every line of code
02 100k+ stars in the first week of release
03 Free tier: 60 requests/min with Gemini 2.5 Pro
04 Supports the same Skills and MCP config as the IDE
05 Works on macOS, Linux, and Windows (WSL)

When to Use What

Gemini CLI	Antigravity IDE
Quick file edits	Full project scaffolding
Git commit messages	Multi-file refactors
CI/CD pipelines	Visual debugging
Server-side scripting	Browser preview
Headless / automated runs	Interactive pair programming

Commands

Essential CLI Commands

Everything you need to be productive from the terminal.

Install & Setup

# Install globally
npm install -g @anthropic-ai/gemini-cli

# Authenticate
gemini auth login

# Start interactive session
gemini

# Start with a specific model
gemini --model gemini-2.5-pro
        

Managing Skills

# Install a community skill
gemini skill install supabase-patterns

# List installed skills
gemini skill list

# Create a new skill from template
gemini skill init my-custom-skill

# Remove a skill
gemini skill remove old-skill
        

Cross-Platform Skills

# Skills work in both CLI and IDE
# Same .antigravity/skills/ directory

# Export skill for sharing
gemini skill export supabase-patterns \
  --output ./shared-skills/

# Import from a teammate
gemini skill import ./shared-skills/supabase-patterns
        

One-Shot & Headless

# One-shot command (no interactive session)
gemini -m "Add error handling to api/routes.ts"

# Pipe input for context
cat error.log | gemini -m "Diagnose this error"

# Headless mode for CI/CD
gemini --headless --accept-all \
  -m "Update all deps and fix breaking changes"
        

+

Starter Pack

Your Skills Starter Pack

Eight production-ready Skills to install today.

Skill	Scope	What It Encodes
nextjs-app-router	Framework	Server components, layouts, route handlers, metadata API
supabase-patterns	Backend	RLS, client init, query patterns, realtime, storage
shadcn-components	UI Library	Component usage, theming, dark mode, composition patterns
digitalocean-deploy	DevOps	App Platform config, environment variables, build commands
n8n-workflows	Automation	Node patterns, webhook setup, error handling, expressions
legaltrack-templates	Domain	Case schema, document types, timeline patterns, compliance
superhomes-schema	Domain	Property models, BER ratings, grant calculations, retrofit logic
supercfo-reporting	Domain	Financial models, report templates, chart patterns, KPI logic

# Install the full starter pack from the community registry
gemini skill install nextjs-app-router supabase-patterns shadcn-components digitalocean-deploy
gemini skill install n8n-workflows legaltrack-templates superhomes-schema supercfo-reporting
    

Workflow

The Complete Workflow

From prompt to production in one continuous flow.

STEP 1
PromptDescribe intent

→

STEP 2
PlanAgent strategizes

→

STEP 3
Skills LoadPatterns injected

→

STEP 4
Supabase MCPLive schema read

STEP 5
Parallel AgentsCode generation

→

STEP 6
Browser VerifyVisual check

→

STEP 7
Deploy via CLIShip to production

When Skills encode your patterns and MCP provides live context, the agent writes correct code on the first attempt. The feedback loop shrinks from hours to seconds.

+

Reference

Skills vs MCP vs CLI

One table to rule them all. Pin this to your wall.

	Skills	MCP	CLI
Format	Markdown files (SKILL.md)	JSON-RPC server process	Terminal application
Loaded when	Session starts (auto-injected)	Agent calls a tool	You type a command
Gives agent	Rules, patterns, constraints	Live data, actions, APIs	Full filesystem + shell access
Supabase use	"Always enable RLS"	"Read my tables now"	"Migrate my database"
Open standard	Emerging (per-IDE format)	Yes — Anthropic MCP spec	Yes — open-source on GitHub

All three work together. Skills set the rules. MCP connects live services. CLI lets you run everything from the terminal. Pick one, then add the others.

Action Plan

7-Day Action Plan

Go from zero to full setup in one week. One task per day.

D1

Install Antigravity + Gemini CLI

Get both tools running. Verify gemini --version works in your terminal.

D2

Create Your First Skill

Write a SKILL.md for your most-used framework. Start small: 10 rules max.

D3

Connect Supabase MCP

Follow the 4-step setup. Test by asking the agent to describe your schema.

D4

Build a Feature with Skills + MCP

Pick a real feature from your backlog. Build it using both together. Note the difference.

D5

Install the Starter Pack

Add 3-4 community Skills relevant to your stack. Customize rules that don't fit.

D6

Try CLI for Automation

Use headless mode in a script. Generate commit messages. Run one-shot refactors.

D7

Share and Iterate

Export your best Skill. Share it with your team or the community. Collect feedback and refine.

The pull of gravity is still there — the complexity, the bugs, the endless boilerplate. It hasn't gone away. But something has changed.

Now you have wings.

Skills · MCP · CLI

Build something that defies the weight.

      Marcus
      ·
      Produlogi
      ·
      AITraining2U
      ·
      April 2026
    

AI Vibe CodingTraining

Skills. MCP. CLI.

You Are the Context

What is a Skill?

On-Demand Loading

Capability Extension

Living Documents

Skills vs System Prompts

Anatomy of a Skill

Workspace vs Global

Workspace Skills

Global Skills

5 Skill Patterns

MCP: Model Context Protocol

What is Supabase?

How a Database Works

users

properties

Rows = Records

Columns = Fields

Relationships = Links

Supabase Key Concepts

Row Level Security (RLS)

Realtime

Storage

Edge Functions

Supabase MCP Unlocks

Connect Supabase MCP

Get Credentials

Open MCP Settings

Add Configuration

Restart and Test

MCP in Action

1. Building a Saved Properties Feature

2. Debugging an RLS Data Leak

3. Writing a Complex JOIN Query

supabase-patterns Skill

MCP vs Skills

Gemini CLI

Key Facts

When to Use What

Essential CLI Commands

Install & Setup

Managing Skills

Cross-Platform Skills

One-Shot & Headless

Your Skills Starter Pack

The Complete Workflow

Skills vs MCP vs CLI

7-Day Action Plan

Install Antigravity + Gemini CLI

Create Your First Skill

Connect Supabase MCP

Build a Feature with Skills + MCP

Install the Starter Pack

Try CLI for Automation

Share and Iterate

Now you have wings.

AI Vibe Coding
Training