agentsclimarketplace

Supabase hello world

Skill jeremylongshore/claude-code-plugins-plus-skills/plugins/saas-packs/supabase-pack/skills/supabase-hello-world

Run your first Supabase query \u2014 insert a row and read it back. \ Use when starting a new Supabase project, verifying your connection works, or learning\ \ the basic insert-then-select pattern with @supabase/supabase-js. Trigger with\ \ phrases like "supabase hello world", "first supabase query", "supabase quick\ \ start", "test supabase connection", "supabase insert and select".From its SKILL.md

Install
npx -y skills add jeremylongshore/claude-code-plugins-plus-skills --skill supabase-hello-world

Assembled from the repository path, not quoted from the project. Check it against their README if it does not work.

What its file declares

Copied from the file, not written here

The file declares its own license as MIT. That is the author’s claim about this one file, and it is not the same thing as the license GitHub reports for the repository, which is listed with the other numbers below.

SKILL.md

5.5 KB, ~1.2k tokens by cl100k_base, as published. Nobody here has run it

Supabase Hello World — First Query

Overview

Execute your first real Supabase query: create a todos table in the dashboard, insert a row with the JS client, and read it back. This validates that your project URL, anon key, and Row Level Security are configured correctly before you build anything else.

Prerequisites

  • Completed supabase-install-auth setup (project URL + anon key in .env)
  • @supabase/supabase-js v2+ installed (npm install @supabase/supabase-js)
  • A Supabase project at supabase.com/dashboard

Instructions

The workflow is three steps: create the table (dashboard SQL), insert a row with the JS client, and read it back to prove the round-trip. The skeleton below is enough to follow along; the fully annotated code for every step — including the error-branch comments and expected console output — lives in the full implementation walkthrough.

Step 1: Create the todos Table

In the Supabase dashboard SQL Editor, create the table, enable Row Level Security (required for anon-key access), and add permissive read + insert policies for the hello-world exercise:

create table public.todos (
  id bigint generated always as identity primary key,
  task text not null,
  is_complete boolean default false,
  inserted_at timestamptz default now()
);

alter table public.todos enable row level security;

create policy "Allow public read" on public.todos
  for select using (true);

create policy "Allow public insert" on public.todos
  for insert with check (true);

Lock these policies down before production. Verify the table appears under Table Editor before continuing.

Step 2: Insert a Row

Create the client from your env vars, then insert. Chain .select() to get the inserted row back — .insert() alone returns { data: null }:

import { createClient } from '@supabase/supabase-js'

const supabase = createClient(
  process.env.SUPABASE_URL!,
  process.env.SUPABASE_ANON_KEY!
)

const { data, error } = await supabase
  .from('todos')
  .insert({ task: 'Hello from Supabase!' })
  .select()

Step 3: Read It Back

Select all rows and confirm the row you inserted is present:

const { data: todos } = await supabase.from('todos').select('*')
// [{ id: 1, task: "Hello from Supabase!", is_complete: false, ... }]

Open the Table Editor in the dashboard to visually confirm the row is there. See implementation.md for the fully error-handled version of each step.

Output

  • todos table created with RLS enabled
  • One row inserted via the JS client
  • Same row read back with .select('*')
  • Dashboard confirms the data round-trip

Error Handling

ErrorCauseSolution
relation "public.todos" does not existTable not createdRun the Step 1 SQL in the dashboard SQL Editor
new row violates row-level security policyRLS blocks the insertAdd the permissive insert policy from Step 1
Invalid API keyWrong anon key in .envCopy from Settings > API in the dashboard
FetchError: request to https://... failedWrong project URLVerify SUPABASE_URL matches dashboard URL
data is null after insertMissing .select() chainAdd .select() after .insert()
Empty array returned from selectRLS blocks readsAdd the select policy from Step 1

Examples

Complete, runnable end-to-end scripts live in references/examples.md — a full TypeScript script (insert with .single(), then an ordered/limited read-back) and the Python equivalent. Minimal TypeScript shape:

const { data } = await supabase
  .from('todos')
  .insert({ task: 'Hello!' })
  .select()
  .single()

Resources

Next Steps

Once the round-trip works, proceed to supabase-local-dev-loop for the local development workflow with the Supabase CLI — running Postgres locally, applying migrations, and syncing schema to your hosted project. Before shipping, replace the permissive using (true) / with check (true) policies from Step 1 with real per-user Row Level Security rules, since the hello-world policies expose the table to anyone holding the anon key.

What ships with it: 2 files

3.9 KB alongside SKILL.md

references/

Keep looking

Skills are one crate of 326,144. Ordering is by how many stacks a row turns up in, so the top of any crate is what has actually been picked rather than what has the most stars.