Error display and troubleshooting pattern for Supabase Studio.
$ npx skills add supabase/supabase --skill studio-error-handling -a claude-codeProject install by default; add -g for ~/.claude/skills/.
$ gh skill install supabase/supabase studio-error-handling --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/supabase/supabase.git skills-src && mkdir -p .claude/skills && cp -r skills-src/.agents/skills/studio-error-handling .claude/skills/studio-error-handling && 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 "studio-error-handling" agent skill from https://github.com/supabase/supabase/tree/master/.agents/skills/studio-error-handling into .claude/skills/studio-error-handling/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "studio-error-handling", 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/supabase/supabase/tree/master/.agents/skills/studio-error-handlingType 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 supabase/supabase --skill studio-error-handling -a codexProject install goes to .agents/skills/; add -g for ~/.codex/skills/.
$ gh skill install supabase/supabase studio-error-handling --agent codexProject scope by default (.agents/skills/); add --scope user for a personal install.
$ git clone --depth 1 https://github.com/supabase/supabase.git skills-src && mkdir -p .agents/skills && cp -r skills-src/.agents/skills/studio-error-handling .agents/skills/studio-error-handling && rm -rf skills-srcUse ~/.agents/skills/ instead of .agents/skills for a personal install.
Codex skills documentation · loads skills from .agents/skills/
Install the "studio-error-handling" agent skill from https://github.com/supabase/supabase/tree/master/.agents/skills/studio-error-handling into .agents/skills/studio-error-handling/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "studio-error-handling", 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 supabase/supabase --skill studio-error-handling -a cursorProject install goes to .agents/skills/; add -g for ~/.cursor/skills/.
$ gh skill install supabase/supabase studio-error-handling --agent cursorProject scope by default (.agents/skills/); add --scope user for a personal install.
$ git clone --depth 1 https://github.com/supabase/supabase.git skills-src && mkdir -p .cursor/skills && cp -r skills-src/.agents/skills/studio-error-handling .cursor/skills/studio-error-handling && 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 "studio-error-handling" agent skill from https://github.com/supabase/supabase/tree/master/.agents/skills/studio-error-handling into .cursor/skills/studio-error-handling/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "studio-error-handling", 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/supabase/supabase.git --path .agents/skills/studio-error-handling--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 supabase/supabase --skill studio-error-handling -a gemini-cliProject install goes to .agents/skills/; add -g for ~/.gemini/skills/.
$ gh skill install supabase/supabase studio-error-handling --agent gemini-cliProject scope by default (.agents/skills/); add --scope user for a personal install.
$ git clone --depth 1 https://github.com/supabase/supabase.git skills-src && mkdir -p .gemini/skills && cp -r skills-src/.agents/skills/studio-error-handling .gemini/skills/studio-error-handling && 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 "studio-error-handling" agent skill from https://github.com/supabase/supabase/tree/master/.agents/skills/studio-error-handling into .gemini/skills/studio-error-handling/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "studio-error-handling", 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 supabase/supabase studio-error-handlingInstalls 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 supabase/supabase --skill studio-error-handling -a github-copilotProject install goes to .agents/skills/; add -g for ~/.copilot/skills/.
$ git clone --depth 1 https://github.com/supabase/supabase.git skills-src && mkdir -p .github/skills && cp -r skills-src/.agents/skills/studio-error-handling .github/skills/studio-error-handling && 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 "studio-error-handling" agent skill from https://github.com/supabase/supabase/tree/master/.agents/skills/studio-error-handling into .github/skills/studio-error-handling/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "studio-error-handling", 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 supabase/supabase --skill studio-error-handling -a opencodeOpenCode documents no install command of its own. Project install goes to .agents/skills/; add -g for ~/.config/opencode/skills/.
$ gh skill install supabase/supabase studio-error-handling --agent opencodeProject scope by default (.agents/skills/); add --scope user for a personal install.
$ git clone --depth 1 https://github.com/supabase/supabase.git skills-src && mkdir -p .opencode/skills && cp -r skills-src/.agents/skills/studio-error-handling .opencode/skills/studio-error-handling && 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 "studio-error-handling" agent skill from https://github.com/supabase/supabase/tree/master/.agents/skills/studio-error-handling into .opencode/skills/studio-error-handling/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "studio-error-handling", 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.
studio-error-handlingError display and troubleshooting pattern for Supabase Studio.
Studio Error Handling is an agent skill from supabase/supabase, published by the product's own GitHub organization. Error display and troubleshooting pattern for Supabase Studio. Use when showing a failed API request or query error in the UI (AlertError, toast, inline message), adding troubleshooting steps for a new error type, or wiring up the AI assistant debug button from an error state.
Its SKILL.md is about 1.3k 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 Development, covering Error handling. It works with Supabase. The repository describes itself as: The Postgres development platform. Supabase gives you a dedicated Postgres database to build your web, mobile, and AI applications. The licence is Apache-2.0.
Read from SKILL.md and the folder at commit 26c838a. It shows what the files ask for, not the result of running them.
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.
No scripts in the folder and no shell commands in SKILL.md (its code samples are typescript).
From the folder's file list and the shell code blocks in SKILL.md.
No URLs in SKILL.md.
From URLs in SKILL.md, links to its own repository left out.
Names no API keys, tokens, secrets or passwords.
From names ending in _API_KEY, _TOKEN, _SECRET, _KEY or _PASSWORD in SKILL.md.
Studio Error Handling loads about 1.3k tokens when it runs. Until then it costs about 75 tokens; SKILL.md has 445 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.
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.
The full file from supabase/supabase at commit 26c838a, republished under its Apache-2.0 licence (© supabase). 445 words, ~1,337 tokens.
.claude/skills/studio-error-handling/SKILL.md (or your agent's skills folder).Full docs and code examples: apps/studio/components/interfaces/ErrorHandling/README.md
Classification happens in the data layer: handleError in data/fetchers.ts tests the error message against ERROR_PATTERNS and throws the matching error subclass (e.g. ConnectionTimeoutError extends ResponseError). The component (ErrorMatcher) reads errorType from the instance and does an O(1) lookup — it never does regex matching.
handleError() → throws ConnectionTimeoutError → React Query catches → ErrorMatcher reads errorType → renders troubleshooting| File | Purpose |
|---|---|
data/error-patterns.ts | Array of { pattern, ErrorClass } — the regex lives here |
types/api-errors.ts | Error classes, KnownErrorType union, ClassifiedError type |
ErrorMatcher.tsx | Component — reads errorType, looks up mapping, renders |
error-mappings.tsx | Record<KnownErrorType, { id, Troubleshooting: ComponentType }> |
errorMappings/ConnectionTimeout.tsx | Reference troubleshooting component |
TroubleshootingSections.tsx | Reusable accordion section components |
TroubleshootingAccordion.tsx | Accordion wrapper with telemetry |
| Situation | Use |
|---|---|
| A query failed and the page/section can't render its data (the default case — most of Studio) | AlertError from components/ui/AlertError |
| The error may be a classified type with its own troubleshooting steps (e.g. connection timeout) | ErrorMatcher from components/interfaces/ErrorHandling/ErrorMatcher — pass a fallback for the unclassified case |
| A mutation failed | The mutation hook's default onError toast (toast.error from sonner) — don't render an alert (see studio-queries) |
AlertError (default)Renders a warning Admonition with the error message, generic "try refreshing / contact support" instructions, and a Contact support button pre-filled with projectRef, subject, and the error message.
if (isError) return <AlertError error={error} subject="Failed to retrieve invoices" />subject is the human-readable title, phrased Failed to <verb> <thing>. Pass projectRef when in a project context so the support form is pre-filled.error is the React Query error object (anything with message); 503 responses are reworded automatically.additionalActions for a retry or navigate button; hideContactSupport only when support genuinely can't help (e.g. a user-input error).{isError && <AlertError … />} for secondary panels that shouldn't block the rest of the page.ErrorMatcher (classified errors)Use when the data layer may have classified the error into a KnownErrorType with dedicated troubleshooting UI. It reads errorType from the error instance and renders the mapped Troubleshooting component, or fallback when there is no mapping. Today this is wired for the table editor sidebar; reach for it when adding troubleshooting for a new error type rather than as a general replacement for AlertError.
ErrorMatcher usagePass the full error object from React Query — not error.message:
{
isError && (
<ErrorMatcher title="Failed to load tables" error={error} supportFormParams={{ projectRef }} />
)
}error.message to ErrorMatcher — pass the full error object so the class is preserved.error-mappings.tsx — they belong in data/error-patterns.ts.Object.assign to stamp errorType — throw a proper subclass instead.supportFormParams={{ projectRef }}.<ErrorMatcher> caller.onDebugWithAI, onRestartProject) to troubleshooting components — use hooks inside them instead.© supabase, Apache-2.0. Rendered from Markdown: HTML in the file is shown as text, images as links, and headings moved down two levels. Raw file
Just SKILL.md in .agents/skills/studio-error-handling of supabase/supabase.
Open the folder on GitHubat commit 26c838a
Studio Error Handling 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 |
|---|---|---|---|---|---|---|
| Studio Error Handling this skillsupabase/supabase | 111k | — | ~1.3k | Automated safety check: Pass | Apache-2.0 | |
| Supabase Reliability Patternsjeremylongshore/tons-of-skills-marketplace | 2.8k | — | ~2.7k | Automated safety check: Pass | MIT | |
| Mole Bug Patternstw93/Mole | 70k | — | ~2k | Automated safety check: Pass | GPL-3.0 | |
| Native Data FetchingCherryHQ/cherry-studio-app | 4k | 6 repos | ~2.9k | Automated safety check: Notes | MIT | |
| Rust Best Practicesfarm-fe/farm | 5.6k | 3 repos | ~1.1k | Automated safety check: Pass | MIT | |
| R Function Input Validationtidyverse/dplyr | 5.1k | 1 repos | ~2.3k | Automated safety check: Pass | Custom licence |
jeremylongshore/tons-of-skills-marketplace
Build resilient Supabase integrations: circuit breakers wrapping createClient calls, offline queue with IndexedDB, graceful degradation with cached fallbacks, health check endpoints, retry with…
tw93/Mole
A catalog of recurring bug shapes in the Mole Mac cleaner, used to review safety-sensitive diffs for deletion safety, unbounded commands, shell traps and weak tests.
CherryHQ/cherry-studio-app
A skill your agent uses when implementing or debugging ANY network request, API call, or data fetching.
farm-fe/farm
Guide for writing idiomatic Rust code based on Apollo GraphQL's best practices handbook.
tidyverse/dplyr
Validates arguments of exported R functions with the standalone check_* type checkers from rlang, in tidyverse style with clear error messages.
vercel-labs/openreview
Next.js best practices - file conventions, RSC boundaries, data patterns, async APIs, metadata, error handling, route handlers, image/font optimization, bundling
supabase/supabase
React composition patterns that scale. An agent skill from supabase/supabase.
supabase/supabase
Write, review, and migrate Supabase logs queries against the ClickHouse-backed logs table (the logs.all.otel analytics endpoint).
supabase/supabase
Review Supabase docs changes locally in your supabase/supabase checkout — either an open PR (triage, classify, verify) or your own branch before opening a PR (local self-review).
supabase/supabase
Vitest API and config reference (Jest-compatible) — mocking with vi., spies, fake timers, coverage configuration, fixtures, snapshots, and test filtering.
supabase/supabase
A skill your agent uses whenever code will build, return, fetch, or execute SQL that runs against a user's real Postgres database — even when the request reads like an ordinary feature or bug fix…
supabase/supabase
Write and run Playwright E2E tests for Supabase Studio (e2e/studio).
Works with
Categories
Error display and troubleshooting pattern for Supabase Studio. Studio Error Handling is an agent skill from supabase/supabase, published by the product's own GitHub organization. Error display and troubleshooting pattern for Supabase Studio.
Studio Error Handling fits situations like: showing a failed API request; query error in the UI (AlertError; inline message); adding troubleshooting steps for a new error type.
Run `npx skills add supabase/supabase --skill studio-error-handling -a claude-code`. Or copy the skill folder (.agents/skills/studio-error-handling in supabase/supabase) into .claude/skills/studio-error-handling in your project. Claude Code loads it when a task matches its description.
Run `npx skills add supabase/supabase --skill studio-error-handling -a codex`. Or copy the skill folder (.agents/skills/studio-error-handling in supabase/supabase) into .agents/skills/studio-error-handling in your project. Codex loads it when a task matches its description.
Cursor, Gemini CLI, GitHub Copilot and OpenCode also load SKILL.md folders. With the skills CLI, run `npx skills add supabase/supabase --skill studio-error-handling -a cursor` (or -a gemini-cli, github-copilot or opencode for the others). To copy it by hand, put the folder in .cursor/skills/studio-error-handling, .gemini/skills/studio-error-handling, .github/skills/studio-error-handling and .opencode/skills/studio-error-handling in your project.
SKILL.md names no scripts, command-line tools or credentials: Studio Error Handling is instructions for the agent only.
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.
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.
Studio Error Handling is published under the Apache-2.0 licence (the repository's licence). It allows redistribution, so the full SKILL.md is shown on this page.
About 1.3k tokens (SKILL.md is roughly 5.3k characters). Agents keep only the skill's name and description in context until a task matches; then they load SKILL.md in full.
Skills that share tags, products or a category with Studio Error Handling: Supabase Reliability Patterns (jeremylongshore/tons-of-skills-marketplace, 2.8k stars), Mole Bug Patterns (tw93/Mole, 70k stars), Native Data Fetching (CherryHQ/cherry-studio-app, 4k stars) and Rust Best Practices (farm-fe/farm, 5.6k stars). The comparison table on this page puts their stars, adoption, token cost, safety result and licence side by side.
supabase (a GitHub organization, an official publisher) maintains it in supabase/supabase, which has 111,222 GitHub stars. The repository holds 22 skills in this directory. The repository was last updated on October 8, 2026.
Source: supabase/supabase on GitHub. Facts on this page come from the repository at the commit we read; the author's words are quoted as theirs.
