Create Supabase CMS Skill

Let Claude Code handle the full CMS installation — from prerequisite checks to a live dashboard — with zero manual configuration.

Quick Start

The skill file lives at skills/create-supabase-cms.md in this repository. Load it in Claude Code with:

/create-supabase-cms PROJECT_PATH=/home/user/my-app PACKAGE_MANAGER=pnpm

Once the CMS is installed, use the companion seo-expert skill to automate SEO blog publishing.

Required Variables

Set these in your agent environment before invoking the skill. Supabase credentials are available in your project under Settings → API and Settings → Database.

Variable
Description
Example
PROJECT_PATHAbsolute path to your Next.js project/home/user/my-app
PACKAGE_MANAGERPackage manager to usepnpm / npm / yarn
SUPABASE_URLSupabase project URLhttps://xxx.supabase.co
SUPABASE_ANON_KEYSupabase anon/public keyeyJ...
DATABASE_URLPooled Prisma connection (pgbouncer)postgresql://...?pgbouncer=true
DIRECT_URLDirect Prisma connectionpostgresql://...:5432/postgres
BASE_URLLocal dev base URLhttp://localhost:3000
ENABLE_AIInstall AI content featurestrue / false
ENABLE_PAYMENTSInstall Stripe payment featurestrue / false

Optional: ANTHROPIC_API_KEY, OPENAI_API_KEY, STRIPE_SECRET_KEY, STRIPE_PRICE_ID — only needed when the corresponding features are enabled.

7-Phase Workflow

1

Prerequisites Check

Verifies Node.js >= 18, Next.js >= 15, App Router presence, and React >= 19 before touching any files. Stops cleanly on any failure and provides the exact fix command.

2

CLI Execution

Runs npx create-supabase-cms init with your chosen options — AI features, Stripe, package manager. Copies 45+ templates, installs dependencies, and merges tsconfig and Tailwind config.

3

Environment Setup

Presents all Supabase credentials for review before writing a single byte. Merges safely into .env.local — adds new keys without overwriting existing values.

4

Prisma Migration

Runs npx prisma migrate dev --name add_cms against your Supabase database. Handles common connection errors (P1001, P3006) with clear diagnostic guidance.

5

Supabase Config

Guides you through creating the cms-media storage bucket and running the 5 RLS policy statements in the Supabase SQL Editor. Waits for your confirmation at each step.

6

Edge Functions

Optional

Deploys the agent-publish, posts-api, and categories-api Edge Functions — only when you request it. Enables the seo-expert skill to publish posts to your CMS automatically.

7

Verification

Starts the dev server and confirms /cms responds with 200 or 302. Delivers a final checklist: create your admin account, first site, and API key.

Post-Install Configuration

Environment Variables (.env.local)

The agent writes these automatically in Phase 3 (with your approval). For manual setup:

# Supabase (REQUIRED)
NEXT_PUBLIC_SUPABASE_URL=https://yourproject.supabase.co
NEXT_PUBLIC_SUPABASE_ANON_KEY=eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9...

# Database (REQUIRED)
DATABASE_URL="postgresql://postgres.xxx:[email protected]:6543/postgres?pgbouncer=true"
DIRECT_URL="postgresql://postgres.xxx:[email protected]:5432/postgres"

# Application
BASE_URL=http://localhost:3000

# AI (optional — if ENABLE_AI=true)
ANTHROPIC_API_KEY=sk-ant-xxx
OPENAI_API_KEY=sk-xxx

# Stripe (optional — if ENABLE_PAYMENTS=true)
STRIPE_SECRET_KEY=sk_test_xxx
STRIPE_PRICE_ID=price_xxx

RLS Policies (Phase 5)

Run this SQL in your Supabase project under SQL Editor → New query:

-- Allow public read of user profiles
CREATE POLICY "Users are viewable by everyone"
ON "User" FOR SELECT TO public USING (true);

-- Allow authenticated users to read published posts
CREATE POLICY "Published posts are viewable by everyone"
ON "Post" FOR SELECT TO authenticated USING (published = true);

-- Allow authors to manage their own posts
CREATE POLICY "Users can update their own posts"
ON "Post" FOR ALL TO authenticated
USING (auth.uid()::text = "authorId");

-- Allow authenticated users to upload media
CREATE POLICY "Authenticated users can upload"
ON storage.objects FOR INSERT TO authenticated
WITH CHECK (bucket_id = 'cms-media');

-- Allow public to view media
CREATE POLICY "Public can view media"
ON storage.objects FOR SELECT TO public
USING (bucket_id = 'cms-media');

Verification Commands

# Run Prisma migration (Phase 4)
npx prisma migrate dev --name add_cms

# Start the dev server (Phase 7)
npm run dev
# or
pnpm dev

# Open your CMS
open http://localhost:3000/cms

Deploy Edge Functions (Phase 6 — Optional)

Required only if you want to use the seo-expert skill to publish posts programmatically via an AI agent.

# Requires Supabase CLI: npm install -g supabase

supabase functions deploy agent-publish --no-verify-jwt
supabase functions deploy posts-api --no-verify-jwt
supabase functions deploy categories-api --no-verify-jwt

supabase secrets set NEXT_PUBLIC_SITE_URL=https://your-cms.vercel.app

After Installation

1

Create your admin account

Sign up at /cms — your first account is automatically granted Admin role.

2

Create your first site

Go to /cms/new, pick a name and slug. Each site is fully isolated.

3

Generate a CMS API key

Settings → API Keys → New Key. The sk_xxx key is used by the seo-expert skill.

4

Start auto-publishing with the seo-expert skill

Load /seo-expert in Claude Code and set your API_KEY and siteSlug to automate SEO posts.

Ready to scaffold your CMS?

Create your account, then let the agent handle the rest.

Get Started FreeAll Agent Skills
create-supabase-cms Skill — AI Agent CMS Setup | Supabase CMS