Supabase Architecture Variants

What it does

When your agent uses it

• Choosing how to integrate Supabase into a specific stack — setting up Next.js SSR auth flows
• React Native client
• Configuring mobile deep links
• Designing multi-tenant data isolation

Example prompts

• “supabase next.js”
• “supabase SSR”
• “supabase react native”
• “/supabase-architecture-variants”

Requirements

• A credential in NEXT_PUBLIC_SUPABASE_ANON_KEY
• A credential in VITE_SUPABASE_ANON_KEY
• Compatibility (from SKILL.md): Designed for Claude Code
• Pre-approved tools (allowed-tools): Read, Write, Edit, Bash(supabase:*), Bash(npx:*), Grep

Workflow steps

3 steps, taken from the step headings in SKILL.md.

1. 1Next.js SSR (App Router)
2. 2SPA (React/Vue) and Mobile (React Native)
3. 3Serverless (Edge Functions) and Multi-Tenant

What it can do on your machine

Read from SKILL.md and the folder at commit cfae287. It shows what the files ask for, not the result of running them.

• Tool permissions

  Pre-approves these tools, so the agent can use them without asking each time:

  • Read
  • Write
  • Edit
  • Bash(supabase:*)
  • Bash(npx:*)
  • Grep

  From allowed-tools in the SKILL.md frontmatter.

• Runs code

  Shell commands in SKILL.md call:

  • supabase

  From the folder's file list and the shell code blocks in SKILL.md.

• Network

  Links to these hosts (documentation or services it may open):

  • supabase.com

  From URLs in SKILL.md, links to its own repository left out.

• Credentials

  Names these keys or tokens, usually read from environment variables:

  • NEXT_PUBLIC_SUPABASE_ANON_KEY
  • VITE_SUPABASE_ANON_KEY

  From names ending in _API_KEY, _TOKEN, _SECRET, _KEY or _PASSWORD in SKILL.md.

• Compatibility

  Designed for Claude Code

  From compatibility in the SKILL.md frontmatter.

Context cost

Supabase Architecture Variants loads about 1.9k tokens when it runs, and up to ~7.8k if it reads all its reference files. Until then it costs about 150 tokens; SKILL.md has 655 words of instructions outside code blocks.

Always · name and description, kept in context so the agent knows when to use it

~150

When it runs · the whole SKILL.md, loaded when a task matches

~1.9k

With references · SKILL.md plus every file in references/, read only if the agent opens them

~7.8k

Estimates: characters ÷ 4, the usual rule of thumb; real counts depend on the model's tokenizer. Scripts and assets cost tokens only if the agent reads them.

Safety

Automated static check — not a guarantee. Review scripts before installing. It scans the text of SKILL.md for risky patterns (piping downloads into a shell, reading credential files, hidden Unicode, destructive commands); files beside SKILL.md are not scanned.

SKILL.md

The full file from jeremylongshore/tons-of-skills-marketplace at commit cfae287, republished under its MIT licence (© jeremylongshore). 655 words, ~1,903 tokens.

name

supabase-architecture-variants

description

Use when choosing how to integrate Supabase into a specific stack — setting up Next.js SSR auth flows, wiring an SPA or React Native client, configuring mobile deep links, or designing multi-tenant data isolation. Covers where the client runs (browser vs server) and which key it uses (anon respects RLS, service_role bypasses it). Trigger with phrases like "supabase next.js", "supabase SSR", "supabase react native", "supabase SPA", "supabase serverless", "supabase multi-tenant", "supabase server component", "supabase architecture", "supabase service_role server".

allowed-tools

Read, Write, Edit, Bash(supabase:*), Bash(npx:*), Grep

compatibility

Designed for Claude Code

version

1.54.0

license

MIT

author

Jeremy Longshore <jeremy@intentsolutions.io>

tags

saas, supabase, architecture, nextjs, ssr, spa, mobile, multi-tenant, serverless

// lib/supabase/client.ts
'use client'
import { createBrowserClient } from '@supabase/ssr'
import type { Database } from '../database.types'

export function createSupabaseBrowser() {
  return createBrowserClient<Database>(
    process.env.NEXT_PUBLIC_SUPABASE_URL!,
    process.env.NEXT_PUBLIC_SUPABASE_ANON_KEY!  // anon key only — respects RLS
  )
}

// src/lib/supabase.ts
import { createClient } from '@supabase/supabase-js'
import type { Database } from './database.types'

export const supabase = createClient<Database>(
  import.meta.env.VITE_SUPABASE_URL,
  import.meta.env.VITE_SUPABASE_ANON_KEY,
  { auth: { autoRefreshToken: true, persistSession: true, detectSessionInUrl: true } }
)

-- Test that RLS properly isolates tenants
SET request.jwt.claims = '{"sub": "user-uuid-1"}';

-- Should only return projects for user-uuid-1's tenant
SELECT * FROM public.projects;

© jeremylongshore, MIT. Rendered from Markdown: HTML in the file is shown as text, images as links, and headings moved down two levels. Raw file

Files

SKILL.md and 8 other files (references) in skills/.curated/supabase-architecture-variants of jeremylongshore/tons-of-skills-marketplace.

• SKILL.md
• references/errors.md
• references/examples.md
• references/nextjs-ssr.md
• references/serverless-and-multi-tenant.md
• references/spa-and-mobile.md
• references/variant-a-monolith-(simple).md
• references/variant-b-service-layer-(moderate).md
• references/variant-c-microservice-(complex).md

Open the folder on GitHubat commit cfae287