Supabase Development and Debugging
supabase/agent-skills
General Supabase skill for database, auth, Edge Functions, Realtime and storage work, plus client libraries, migrations, security audits, debugging and reading logs.
A skill your agent uses when enabling WebSocket subscriptions for live database changes, presence/multiplayer state, or when debugging clients that connect but receive no events
Install Realtime
$ npx skills add butterbase-ai/butterbase-skills --skill realtime -a claude-codeProject install by default; add -g for ~/.claude/skills/.
$ gh skill install butterbase-ai/butterbase-skills realtime --agent claude-codeProject scope by default; add --scope user for a personal install. Needs GitHub CLI 2.90.0 or later (public preview).
$ git clone --depth 1 https://github.com/butterbase-ai/butterbase-skills.git skills-src && mkdir -p .claude/skills && cp -r skills-src/skills/realtime .claude/skills/realtime && rm -rf skills-srcUse ~/.claude/skills/ instead of .claude/skills for a personal install. The folder must contain SKILL.md.
Claude Code skills documentation · loads skills from .claude/skills/
Install the "realtime" agent skill from https://github.com/butterbase-ai/butterbase-skills/tree/main/skills/realtime into .claude/skills/realtime/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "realtime", then confirm the skill loads.Claude Code copies the folder itself, the same result as the manual copy. Check what it changed before you commit it.
$skill-installer install https://github.com/butterbase-ai/butterbase-skills/tree/main/skills/realtimeType this inside Codex. $skill-installer <name> installs a curated skill from openai/skills. The installer writes to $CODEX_HOME/skills (default ~/.codex/skills). Restart Codex if the skill does not show up.
$ npx skills add butterbase-ai/butterbase-skills --skill realtime -a codexProject install goes to .agents/skills/; add -g for ~/.codex/skills/.
$ gh skill install butterbase-ai/butterbase-skills realtime --agent codexProject scope by default (.agents/skills/); add --scope user for a personal install.
$ git clone --depth 1 https://github.com/butterbase-ai/butterbase-skills.git skills-src && mkdir -p .agents/skills && cp -r skills-src/skills/realtime .agents/skills/realtime && rm -rf skills-srcUse ~/.agents/skills/ instead of .agents/skills for a personal install.
Codex skills documentation · loads skills from .agents/skills/
Install the "realtime" agent skill from https://github.com/butterbase-ai/butterbase-skills/tree/main/skills/realtime into .agents/skills/realtime/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "realtime", then confirm the skill loads.Codex copies the folder itself, the same result as the manual copy. Check what it changed before you commit it.
$ npx skills add butterbase-ai/butterbase-skills --skill realtime -a cursorProject install goes to .agents/skills/; add -g for ~/.cursor/skills/.
$ gh skill install butterbase-ai/butterbase-skills realtime --agent cursorProject scope by default (.agents/skills/); add --scope user for a personal install.
$ git clone --depth 1 https://github.com/butterbase-ai/butterbase-skills.git skills-src && mkdir -p .cursor/skills && cp -r skills-src/skills/realtime .cursor/skills/realtime && rm -rf skills-srcUse ~/.cursor/skills/ instead of .cursor/skills for a personal install.
Cursor skills documentation · loads skills from .cursor/skills/, .agents/skills/, .claude/skills/, .codex/skills/
Install the "realtime" agent skill from https://github.com/butterbase-ai/butterbase-skills/tree/main/skills/realtime into .cursor/skills/realtime/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "realtime", then confirm the skill loads.Cursor copies the folder itself, the same result as the manual copy. Check what it changed before you commit it.
$ gemini skills install https://github.com/butterbase-ai/butterbase-skills.git --path skills/realtime--scope user (default) or --scope workspace; --path is the subfolder of the repo that holds the skill; --consent skips the security confirmation prompt.
$ npx skills add butterbase-ai/butterbase-skills --skill realtime -a gemini-cliProject install goes to .agents/skills/; add -g for ~/.gemini/skills/.
$ gh skill install butterbase-ai/butterbase-skills realtime --agent gemini-cliProject scope by default (.agents/skills/); add --scope user for a personal install.
$ git clone --depth 1 https://github.com/butterbase-ai/butterbase-skills.git skills-src && mkdir -p .gemini/skills && cp -r skills-src/skills/realtime .gemini/skills/realtime && rm -rf skills-srcUse ~/.gemini/skills/ instead of .gemini/skills for a personal install, then run /skills reload.
Gemini CLI skills documentation · loads skills from .gemini/skills/, .agents/skills/
Install the "realtime" agent skill from https://github.com/butterbase-ai/butterbase-skills/tree/main/skills/realtime into .gemini/skills/realtime/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "realtime", then confirm the skill loads.Gemini CLI copies the folder itself, the same result as the manual copy. Check what it changed before you commit it.
$ gh skill install butterbase-ai/butterbase-skills realtimeInstalls for Copilot at project scope by default; add --scope user for a personal install. Preview a skill first with gh skill preview. Needs GitHub CLI 2.90.0 or later (public preview).
$ npx skills add butterbase-ai/butterbase-skills --skill realtime -a github-copilotProject install goes to .agents/skills/; add -g for ~/.copilot/skills/.
$ git clone --depth 1 https://github.com/butterbase-ai/butterbase-skills.git skills-src && mkdir -p .github/skills && cp -r skills-src/skills/realtime .github/skills/realtime && rm -rf skills-srcUse ~/.copilot/skills/ instead of .github/skills for a personal install. Commit .github/skills so cloud agent and code review can use it.
GitHub Copilot skills documentation · loads skills from .github/skills/, .claude/skills/, .agents/skills/
Install the "realtime" agent skill from https://github.com/butterbase-ai/butterbase-skills/tree/main/skills/realtime into .github/skills/realtime/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "realtime", then confirm the skill loads.GitHub Copilot copies the folder itself, the same result as the manual copy. Check what it changed before you commit it.
$ npx skills add butterbase-ai/butterbase-skills --skill realtime -a opencodeOpenCode documents no install command of its own. Project install goes to .agents/skills/; add -g for ~/.config/opencode/skills/.
$ gh skill install butterbase-ai/butterbase-skills realtime --agent opencodeProject scope by default (.agents/skills/); add --scope user for a personal install.
$ git clone --depth 1 https://github.com/butterbase-ai/butterbase-skills.git skills-src && mkdir -p .opencode/skills && cp -r skills-src/skills/realtime .opencode/skills/realtime && rm -rf skills-srcUse ~/.config/opencode/skills/ instead of .opencode/skills for a personal install.
OpenCode skills documentation · loads skills from .opencode/skills/, .claude/skills/, .agents/skills/
Install the "realtime" agent skill from https://github.com/butterbase-ai/butterbase-skills/tree/main/skills/realtime into .opencode/skills/realtime/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "realtime", then confirm the skill loads.OpenCode copies the folder itself, the same result as the manual copy. Check what it changed before you commit it.
Facts
- Skill name
realtime- GitHub stars
- 534
- Token cost
- ~2.1k tokens
- SKILL.md length
- 852 words
- Files
- 1
- Skills in repo
- 39
- Repo updated
- First seen
- Licence
- MIT
At a glance
A skill your agent uses when enabling WebSocket subscriptions for live database changes, presence/multiplayer state, or when debugging clients that connect but receive no events
- Works in 8 steps: The mental model → Prerequisites → Configure tables → …
- Enabling WebSocket subscriptions for live database changes
- SKILL.md covers 1. The mental model, 2. Prerequisites, 3. Configure tables and 4. Connect from a client, plus 4 more sections
- Instructions only: no scripts, shell commands, URLs or credentials in SKILL.md
What it does
Realtime is an agent skill from butterbase-ai/butterbase-skills. Use when enabling WebSocket subscriptions for live database changes, presence/multiplayer state, or when debugging clients that connect but receive no events
Its SKILL.md is about 2.1k tokens, which your agent loads only when the skill is triggered. It is a single SKILL.md file with no bundled scripts.
It sits in Backend & APIs, covering Realtime and WebSockets and Debugging. The repository describes itself as: Plugin for Butterbase.ai. The licence is MIT.
When your agent uses it
- Enabling WebSocket subscriptions for live database changes
- Presence/multiplayer state
- Debugging clients that connect but receive no events
Example prompts
- “/realtime”
Workflow steps
8 steps, taken from the step headings in SKILL.md.
What it can do on your machine
Read from SKILL.md and the folder at commit aa8ae69. It shows what the files ask for, not the result of running them.
Tool permissions
Pre-approves nothing: there is no allowed-tools line, so your agent's usual permission prompts apply.
From allowed-tools in the SKILL.md frontmatter.
Runs code
No scripts in the folder and no shell commands in SKILL.md (its code samples are javascript, json, typescript and sql).
From the folder's file list and the shell code blocks in SKILL.md.
Network
No URLs in SKILL.md.
From URLs in SKILL.md, links to its own repository left out.
Credentials
Names no API keys, tokens, secrets or passwords.
From names ending in _API_KEY, _TOKEN, _SECRET, _KEY or _PASSWORD in SKILL.md.
Context cost
Realtime loads about 2.1k tokens when it runs. Until then it costs about 42 tokens; SKILL.md has 852 words of instructions outside code blocks.
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
Auto-check passed
The automated check found no risky patterns in SKILL.md.
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 butterbase-ai/butterbase-skills at commit aa8ae69, republished under its MIT licence (© butterbase-ai). 852 words, ~2,148 tokens.
Download SKILL.mdSave it as
.claude/skills/realtime/SKILL.md (or your agent's skills folder).- name
- realtime
- description
- Use when enabling WebSocket subscriptions for live database changes, presence/multiplayer state, or when debugging clients that connect but receive no events
Butterbase Realtime
Live database change notifications over WebSocket, with per-row RLS enforcement. Once a table is enabled, INSERT/UPDATE/DELETE events stream to subscribed clients filtered by the same RLS policies that gate reads.
One tool: manage_realtime with two actions: configure and get.
1. The mental model
Postgres (data plane) Control API Browser
───────────────────── ──────────── ────────
INSERT/UPDATE/DELETE ──trigger──► realtime.changes ──WAL listener─► WebSocket ──► client
│
└── RLS check per (role, user) ──► filter rowsWhen you configure a table:
- A Postgres trigger is installed → writes every change to
realtime.changes. - A LISTEN connection in
RealtimeManagerreads those changes. - For each connected client, the change is RLS-checked as that user before broadcasting.
- Clients only receive events for rows they could read with a regular SELECT.
2. Prerequisites
Before calling configure, the table must:
- Exist. Run
manage_schema(action: "apply") first. Realtime won't auto-create it. - Have RLS configured (if you care about isolation). Realtime respects whatever policies exist via
manage_rls. No policies = all events flow to all users of that role. This is the #1 silent leak. - Have a primary key. RLS checks query by PK. Tables without one can't be realtime-enabled cleanly.
3. Configure tables
manage_realtime({
app_id: "app_abc123",
action: "configure",
tables: ["messages", "presence", "documents"]
})
// → [{ table: "messages", status: "enabled" }, ...]- Idempotent — already-enabled tables are skipped.
- All three events (INSERT / UPDATE / DELETE) are enabled together; per-event filtering happens client-side via subscription
filter. - Validation: every named table must exist or you get
VALIDATION_TABLE_NOT_FOUND.
Inspect current state
manage_realtime({ app_id: "app_abc123", action: "get" })
// → {
// tables: [{ table_name, enabled, trigger_installed, drift, created_at, updated_at }, ...],
// active_connection: true,
// websocket_url: "wss://api.butterbase.dev/v1/app_abc123/realtime"
// }drift: true means the control-plane config says enabled but the data-plane trigger is missing — typically after a schema migration that dropped/recreated the table. Re-run configure to repair.
4. Connect from a client
wss://api.butterbase.dev/v1/{app_id}/realtime?token={JWT_or_API_KEY}Browsers can't set custom headers on WebSocket upgrade, so the JWT goes in the query string. Server clients can use Authorization: Bearer ... instead.
const ws = new WebSocket(
`wss://api.butterbase.dev/v1/${appId}/realtime?token=${userJwt}`
);
ws.onopen = () => {
ws.send(JSON.stringify({ type: "subscribe", table: "messages" }));
};
ws.onmessage = (e) => {
const msg = JSON.parse(e.data);
if (msg.type === "change") handleChange(msg); // { type, table, op, record, old_record, timestamp }
};The Butterbase SDK wraps this:
const realtime = client.realtime(appId, userJwt);
realtime.subscribe("messages", (change) => console.log(change.op, change.record));Welcome and protocol
On connect, the server sends:
{ "type": "connected", "app_id": "app_abc123", "role": "butterbase_user" }Then a heartbeat every 30s:
{ "type": "heartbeat", "timestamp": "..." }Client → server messages
| Type | Body | Purpose |
|---|---|---|
subscribe | { table, filter? } | Subscribe to changes; optional client-side filter { col: value } |
unsubscribe | { table } | Stop receiving |
presence_track | { metadata } | Announce yourself with arbitrary metadata (cursor, status) |
event | { event, payload } | Trigger a function with trigger: { type: "websocket", config: { event } } |
Server → client messages
| Type | Body |
|---|---|
change | { table, op: "INSERT"|"UPDATE"|"DELETE", record, old_record, timestamp } |
presence_state | { clients: [{ client_id, user_id, metadata }] } |
heartbeat | { timestamp } |
5. RLS enforcement (the critical pitfall)
For each broadcast, the server runs (roughly):
SET LOCAL ROLE butterbase_user;
SET LOCAL request.jwt.claim.sub = '{user_id}';
SELECT 1 FROM "{table}" WHERE "{pk}" = {record_pk} LIMIT 1;If the row is not visible under RLS, the change is silently dropped for that client. There is no error.
Common consequences:
- Client connects, sees
connected, subscribes — but receives no events. → RLS too restrictive (or no policies at all + access modeauthenticated). - Client receives some events but not others. → RLS works for those rows; others are filtered out (often correct).
- Service key clients see everything. → Service bypasses RLS. Don't use this to "verify realtime works" if testing user-scoped behaviour.
Always test with a real end-user JWT, not the service key.
Anonymous clients
If manage_app access mode is authenticated, anonymous WebSocket connections are rejected with close code 1008 (Policy Violation). To allow anon, the app must be in public mode AND the table must have a permissive policy for butterbase_anon.
Show full SKILL.md (372 more words)Show less
6. Connection lifecycle
| Close code | Meaning |
|---|---|
1008 | App requires authentication, no token provided |
1013 (try again later) | Plan limit hit (maxRealtimeListenersPerApp) — upgrade |
1013 ("Realtime disabled by plan") | Free / starter tiers may have realtime off entirely |
| Normal close | Heartbeat missed, client disconnected, or server eviction |
The server caches table primary keys for 60s and batches RLS checks per (role, user) group, so connection cost is amortised.
7. Common patterns
Live chat
manage_schemaapply with amessagestable (id,room_id,user_id,body,created_at).manage_rlscreate_user_isolationwithuser_column: "user_id"plus a custom policy that allows reading messages whereroom_id IN (SELECT room_id FROM members WHERE user_id = current_user_id()).manage_realtimeconfigurewithtables: ["messages"].- Client connects, subscribes to
messages, optionally filters{ room_id: "..." }.
Live dashboard / activity feed
- Add a
notificationstable withuser_id. - RLS
create_user_isolationso each user only sees their own. - Realtime configure → notifications stream straight to the right user, no extra filtering needed.
Multiplayer cursor sharing
Use presence, not table changes:
ws.send(JSON.stringify({
type: "presence_track",
metadata: { cursor: { x: 100, y: 50 }, color: "#f00" }
}));Other clients receive presence_state updates with everyone's metadata. No DB writes.
Debugging "client connects but no events"
- Confirm trigger installed:
manage_realtimeget→trigger_installed: true,drift: false. - Confirm RLS allows the user to SELECT the row:
select_rowswithas_role: "user", as_user: "<id>"→ does the row appear? - If yes to both and still no events: check for plan limits in close codes; check that the change actually happened in Postgres (look at
realtime.changes).
8. Anti-patterns
| Don't | Do |
|---|---|
| Enable realtime before configuring RLS | Set up policies first; otherwise events leak across users |
| Use a service key from the frontend "to make it work" | Service bypasses RLS — ship-stopping leak. Use end-user JWTs. |
Trust client-side filter for security | filter is just a convenience to reduce client-side work; RLS is the security boundary |
| Hold thousands of subscriptions per client | One connection, one or two subscribed tables — the server handles fan-out |
Re-call configure in a loop on every page load | It's idempotent but each call still touches the DB. Configure once during app setup. |
| Send custom auth headers from the browser | WebSocket API can't set them — pass the JWT as ?token= query param |
If a docs/butterbase/00-state.md exists in the working directory, prefer invoking via /butterbase-skills:journey-realtime so the journey orchestrator stays in sync.
© butterbase-ai, MIT. Rendered from Markdown: HTML in the file is shown as text, images as links, and headings moved down two levels. Raw file
Files
Just SKILL.md in skills/realtime of butterbase-ai/butterbase-skills.
Open the folder on GitHubat commit aa8ae69
Compare with similar skills
Realtime next to the 5 skills that share the most tags, products or categories with it. Stars are the repository's; “used in” counts other GitHub owners with a copy.
| Skill | Stars | Used in | Tokens | Auto-check | Licence | Repo updated |
|---|---|---|---|---|---|---|
| Realtime this skillbutterbase-ai/butterbase-skills | 534 | — | ~2.1k | Automated safety check: Pass | MIT | |
| Supabase Development and Debuggingsupabase/agent-skills | 2.7k | 3 repos | ~3.6k | Automated safety check: Pass | MIT | |
| Debugging Websocket IssuesAgentWorkforce/relay | 867 | 1 repos | ~1.3k | Automated safety check: Pass | Apache-2.0 | |
| Debug Logsadam-s/intercept | 189 | — | ~1.1k | Automated safety check: Pass | MIT | |
| Gateway Proxy Debugvercel-labs/vercel-openclaw-archived | 117 | — | ~573 | Automated safety check: Pass | MIT | |
| Fullstack Devinfometa/workbuddyskills | 346 | — | ~1k | Automated safety check: Pass | MIT |
Similar skills
- Official
Debugging Websocket Issues
AgentWorkforce/relay
A skill your agent uses when seeing WebSocket errors like "Invalid frame header", "RSV1 must be clear", or "WSERRUNEXPECTEDRSV1" - covers multiple WebSocketServer conflicts, compression issues, and…
Debug Logs
adam-s/intercept
Iterative debugging with targeted logs. An agent skill from adam-s/intercept.
- Official
Gateway Proxy Debug
vercel-labs/vercel-openclaw-archived
Gateway and proxy debugging for vercel-openclaw: /gateway routing, HTML injection, WebSocket rewrite, gateway-token handoff, waiting page, status heartbeat, sandbox port URL cache, and proxy auth.
Fullstack Dev
infometa/workbuddyskills
Full-stack backend architecture and frontend-backend integration guide.
EasyEDA Pro API Bridge
easyeda/easyeda-api-skill
Gives an agent the EasyEDA Pro API reference and a WebSocket bridge to run code in a live EasyEDA client, for PCB, schematic and library work and extension development.
More from butterbase-ai/butterbase-skills
All 39 skills in this repoAI
butterbase-ai/butterbase-skills
A skill your agent uses when calling the app's AI gateway from agent tools — chat completions, embeddings, listing models, configuring defaults or BYOK, reading token/cost usage
Auth Setup
butterbase-ai/butterbase-skills
A skill your agent uses when configuring OAuth providers (Google/GitHub/Apple/X/etc.), setting up post-login auth hooks, tuning JWT lifetimes, or generating service API keys
Build App
butterbase-ai/butterbase-skills
A skill your agent uses when building a new Butterbase app from scratch, creating a full-stack application, or when the user asks to set up a complete backend with database, auth, and deployment
Contributing
butterbase-ai/butterbase-skills
A skill your agent uses when contributing to the Butterbase codebase, adding new MCP tools, creating API routes, writing migrations, or understanding the monorepo architecture
Debug Rls
butterbase-ai/butterbase-skills
A skill your agent uses when users report access denied errors, see wrong data, RLS policies are not working, or when troubleshooting Row-Level Security issues in Butterbase
Deploy Frontend
butterbase-ai/butterbase-skills
A skill your agent uses when deploying a frontend (React, Next.js, or static HTML) to a live URL on Butterbase, or when troubleshooting deployment issues like MIME type errors or blank pages
Related
Categories
Questions about Realtime
What does Realtime do?
A skill your agent uses when enabling WebSocket subscriptions for live database changes, presence/multiplayer state, or when debugging clients that connect but receive no events. Realtime is an agent skill from butterbase-ai/butterbase-skills.
When should I use Realtime?
Realtime fits situations like: enabling WebSocket subscriptions for live database changes; presence/multiplayer state; debugging clients that connect but receive no events.
How do I install Realtime in Claude Code?
Run `npx skills add butterbase-ai/butterbase-skills --skill realtime -a claude-code`. Or copy the skill folder (skills/realtime in butterbase-ai/butterbase-skills) into .claude/skills/realtime in your project. Claude Code loads it when a task matches its description.
How do I install Realtime in Codex?
Run `npx skills add butterbase-ai/butterbase-skills --skill realtime -a codex`. Or copy the skill folder (skills/realtime in butterbase-ai/butterbase-skills) into .agents/skills/realtime in your project. Codex loads it when a task matches its description.
Can I use Realtime in Cursor, Gemini CLI or GitHub Copilot?
Cursor, Gemini CLI, GitHub Copilot and OpenCode also load SKILL.md folders. With the skills CLI, run `npx skills add butterbase-ai/butterbase-skills --skill realtime -a cursor` (or -a gemini-cli, github-copilot or opencode for the others). To copy it by hand, put the folder in .cursor/skills/realtime, .gemini/skills/realtime, .github/skills/realtime and .opencode/skills/realtime in your project.
What does Realtime need to run?
SKILL.md names no scripts, command-line tools or credentials: Realtime is instructions for the agent only.
Does Realtime access the network?
SKILL.md contains no URLs. Any network use would come from the scripts or tools the agent runs. This is read from the text; nothing was executed.
Is Realtime safe to install?
Our automated static check of SKILL.md found no risky patterns, such as piping downloads into a shell, reading credential files or hidden Unicode. It is not a guarantee. Review the folder before installing.
What licence does Realtime use?
Realtime is published under the MIT licence (the repository's licence). It allows redistribution, so the full SKILL.md is shown on this page.
How many tokens does Realtime use?
About 2.1k tokens (SKILL.md is roughly 8.6k characters). Agents keep only the skill's name and description in context until a task matches; then they load SKILL.md in full.
What are the alternatives to Realtime?
Skills that share tags, products or a category with Realtime: Supabase Development and Debugging (supabase/agent-skills, 2.7k stars), Debugging Websocket Issues (AgentWorkforce/relay, 867 stars), Debug Logs (adam-s/intercept, 189 stars) and Gateway Proxy Debug (vercel-labs/vercel-openclaw-archived, 117 stars). The comparison table on this page puts their stars, adoption, token cost, safety result and licence side by side.
Who maintains Realtime?
butterbase-ai (a GitHub organization) maintains it in butterbase-ai/butterbase-skills, which has 534 GitHub stars. The repository holds 39 skills in this directory. The repository was last updated on October 5, 2026.
Source: butterbase-ai/butterbase-skills on GitHub. Facts on this page come from the repository at the commit we read; the author's words are quoted as theirs.