Storybook Stories
PostHog/code
Write Storybook stories for PostHog UI components. An agent skill from PostHog/code.
Safety rules for the dev toolbar, PostHog client, and feature flags.
Install Dev Toolbar Review
$ npx skills add supabase/supabase --skill dev-toolbar-review -a claude-codeProject install by default; add -g for ~/.claude/skills/.
$ gh skill install supabase/supabase dev-toolbar-review --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/dev-toolbar-review .claude/skills/dev-toolbar-review && 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 "dev-toolbar-review" agent skill from https://github.com/supabase/supabase/tree/master/.agents/skills/dev-toolbar-review into .claude/skills/dev-toolbar-review/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "dev-toolbar-review", 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/dev-toolbar-reviewType 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 dev-toolbar-review -a codexProject install goes to .agents/skills/; add -g for ~/.codex/skills/.
$ gh skill install supabase/supabase dev-toolbar-review --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/dev-toolbar-review .agents/skills/dev-toolbar-review && rm -rf skills-srcUse ~/.agents/skills/ instead of .agents/skills for a personal install.
Codex skills documentation · loads skills from .agents/skills/
Install the "dev-toolbar-review" agent skill from https://github.com/supabase/supabase/tree/master/.agents/skills/dev-toolbar-review into .agents/skills/dev-toolbar-review/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "dev-toolbar-review", 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 dev-toolbar-review -a cursorProject install goes to .agents/skills/; add -g for ~/.cursor/skills/.
$ gh skill install supabase/supabase dev-toolbar-review --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/dev-toolbar-review .cursor/skills/dev-toolbar-review && 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 "dev-toolbar-review" agent skill from https://github.com/supabase/supabase/tree/master/.agents/skills/dev-toolbar-review into .cursor/skills/dev-toolbar-review/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "dev-toolbar-review", 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/dev-toolbar-review--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 dev-toolbar-review -a gemini-cliProject install goes to .agents/skills/; add -g for ~/.gemini/skills/.
$ gh skill install supabase/supabase dev-toolbar-review --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/dev-toolbar-review .gemini/skills/dev-toolbar-review && 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 "dev-toolbar-review" agent skill from https://github.com/supabase/supabase/tree/master/.agents/skills/dev-toolbar-review into .gemini/skills/dev-toolbar-review/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "dev-toolbar-review", 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 dev-toolbar-reviewInstalls 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 dev-toolbar-review -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/dev-toolbar-review .github/skills/dev-toolbar-review && 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 "dev-toolbar-review" agent skill from https://github.com/supabase/supabase/tree/master/.agents/skills/dev-toolbar-review into .github/skills/dev-toolbar-review/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "dev-toolbar-review", 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 dev-toolbar-review -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 dev-toolbar-review --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/dev-toolbar-review .opencode/skills/dev-toolbar-review && 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 "dev-toolbar-review" agent skill from https://github.com/supabase/supabase/tree/master/.agents/skills/dev-toolbar-review into .opencode/skills/dev-toolbar-review/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "dev-toolbar-review", 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
dev-toolbar-review- GitHub stars
- 111k
- Token cost
- ~1.5k tokens
- SKILL.md length
- 630 words
- Files
- 1
- Skills in repo
- 22
- Repo updated
- First seen
- Licence
- Apache-2.0
At a glance
Safety rules for the dev toolbar, PostHog client, and feature flags.
- Works in 5 steps: Environment Guards → Flag Override Cookies → Telemetry Event Subscription → …
- Reviewing any change to packages/dev-tools/
- SKILL.md covers When This Applies, Review Checklist and What Doesn't Need Growth Review
- Instructions only: no scripts, shell commands, URLs or credentials in SKILL.md
What it does
Dev Toolbar Review is an agent skill from supabase/supabase, published by the product's own GitHub organization. Safety rules for the dev toolbar, PostHog client, and feature flags. Use when writing or reviewing any change to packages/dev-tools/, packages/common/posthog-client.ts, or packages/common/feature-flags.tsx. Covers environment guards, flag override cookies, telemetry event subscription, and SSE stream safety.
Its SKILL.md is about 1.5k 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 Frontend & Design, covering React components. It works with PostHog and 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.
When your agent uses it
- Reviewing any change to packages/dev-tools/
- Packages/common/posthog-client.ts
- Packages/common/feature-flags.tsx
Example prompts
- “/dev-toolbar-review”
Workflow steps
5 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 26c838a. 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.
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
Dev Toolbar Review loads about 1.5k tokens when it runs. Until then it costs about 82 tokens; SKILL.md has 630 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 supabase/supabase at commit 26c838a, republished under its Apache-2.0 licence (© supabase). 630 words, ~1,528 tokens.
Download SKILL.mdSave it as
.claude/skills/dev-toolbar-review/SKILL.md (or your agent's skills folder).- name
- dev-toolbar-review
- description
- Safety rules for the dev toolbar, PostHog client, and feature flags. Use when writing or reviewing any change to packages/dev-tools/, packages/common/posthog-client.ts, or packages/common/feature-flags.tsx. Covers environment guards, flag override cookies, telemetry event subscription, and SSE stream safety.
Dev Toolbar Review Guide
Review checklist for PRs touching the dev toolbar (packages/dev-tools/) and its
integration points in packages/common/. The toolbar surfaces telemetry events and
allows feature flag overrides in local and staging environments only.
When This Applies
PRs modifying any of these paths need growth eng review:
packages/dev-tools/**(owned by@supabase/growth-engin CODEOWNERS)packages/common/posthog-client.ts(flag override reads, event subscription)packages/common/feature-flags.tsx(flag override merge logic)- App-level mounting:
DevToolbarProvider/DevToolbar/DevToolbarTriggerinapps/studio/,apps/www/,apps/docs/
Note: posthog-client.ts and feature-flags.tsx are NOT in CODEOWNERS for growth-eng,
so PRs touching only those files won't auto-request review. Watch for these in the PR feed.
Review Checklist
1. Environment Guards
Files: packages/dev-tools/index.ts, DevToolbar.tsx, DevToolbarTrigger.tsx, DevToolbarContext.tsx
The toolbar uses two layers of protection:
- Build-time tree-shaking in
index.ts: the bundler inlinesprocess.env.NEXT_PUBLIC_ENVIRONMENT, soisToolbarEnabled = env === 'local' || env === 'staging'makes the export ternaries static. Outside those two environments every export is a stub (DevToolbarandDevToolbarTriggerrendernull,DevToolbarProviderpasses children through,useDevToolbarreturns a no-op context) and the implementation modules are eliminated from the bundle. The same literalprocess.envcheck is duplicated inDevToolbarContext.tsx,DevToolbar.tsx,DevToolbarTrigger.tsx, andfeature-flags.tsxbecause the bundler must see it directly — keep them in sync. - Runtime guards inside the implementation:
IS_LOCAL_DEV = env === 'local'gates the local-only pieces — the SSE event stream inDevToolbarContext.tsxand local-only UI inDevToolbar.tsx— so staging gets the toolbar without them.
Check for:
- Guards being removed or broadened. The toolbar is enabled only for
localandstaging; preview and production builds must keep getting the stubs. - Tree-shaking ternaries in
index.tsstaying intact — these are the primary production safety mechanism. - New components or exports that bypass the existing guard pattern.
2. Flag Override Cookies
Files: packages/dev-tools/DevToolbar.tsx, packages/common/posthog-client.ts, packages/common/feature-flags.tsx
The toolbar writes two cookies that override feature flags locally:
x-ph-flag-overrides— PostHog flag overridesx-cc-flag-overrides— ConfigCat flag overrides
These are read by:
posthog-client.ts:getFeatureFlag()— checks the PostHog override cookie before querying the SDKfeature-flags.tsx— merges both override cookies into the flag store during initialization
Check for:
- Cookie name changes (must stay in sync across writer and all readers)
- Changes to the merge/precedence logic in
feature-flags.tsx(currently:vercel-flag-overridesfirst, thenx-cc-flag-overridestakes precedence in local dev) - Override cookies being read outside the
IS_LOCAL_DEV/isLocalDevguard — overrides must never affect production flag evaluation - Changes to
parseOverrideValueorvaluesAreEqualinpackages/dev-tools/utils.tsthat could cause type coercion bugs
Show full SKILL.md (251 more words)Show less
3. Telemetry Event Subscription
Files: packages/common/posthog-client.ts, packages/dev-tools/DevToolbarContext.tsx
The toolbar subscribes to client-side PostHog events via posthogClient.subscribeToEvents().
The PostHog client calls emitToDevListeners() after capturePageView, capturePageLeave,
and identify. Note: captureExperimentExposure calls posthog.capture() directly
without emitting to dev listeners — experiment exposure events are invisible in the toolbar.
Check for:
- Changes to
emitToDevListenersorsubscribeToEventsthat could introduce side effects on the actual capture path (e.g., throwing errors, blocking, mutating event data) - The listener set (
devListeners) being iterated synchronously in a way that could delay event dispatch - New PostHog client methods that capture events but don't call
emitToDevListeners(gap in toolbar visibility)
4. SSE Server Telemetry Stream
Files: packages/dev-tools/DevToolbarContext.tsx
The toolbar connects to ${apiUrl}/telemetry/stream via Server-Sent Events to display
server-side telemetry. Uses exponential backoff on connection errors.
Check for:
- Changes to the SSE endpoint URL or
session_idcookie handling - Reconnection logic changes that could cause excessive retries or connection leaks
- Note: the stream endpoint lives in the platform repo — cross-repo changes need coordinated review
5. App-Level Mounting
Provider + toolbar panel (DevToolbarProvider, DevToolbar):
apps/studio/pages/_app.tsxapps/www/pages/_app.tsx,apps/www/app/providers.tsxapps/docs/features/app.providers.tsx
Trigger button (DevToolbarTrigger) — rendered separately in nav/header components:
apps/studio/components/layouts/Navigation/LayoutHeader/LayoutHeader.tsxapps/www/components/Nav/index.tsxapps/docs/components/Navigation/NavigationMenu/TopNavBar.tsx
Check for:
- Provider being added or removed from an app
apiUrlprop changes (must point to the correct platform API)- Rendering order changes that could affect the toolbar's access to PostHog context
What Doesn't Need Growth Review
Changes that are purely UI/UX within the toolbar panel itself — styling, layout, copy changes, drag behavior, popover positioning — don't need growth eng review unless they also touch the integration points above.
© 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
Files
Just SKILL.md in .agents/skills/dev-toolbar-review of supabase/supabase.
Open the folder on GitHubat commit 26c838a
Compare with similar skills
Dev Toolbar Review 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 |
|---|---|---|---|---|---|---|
| Dev Toolbar Review this skillsupabase/supabase | 111k | — | ~1.5k | Automated safety check: Pass | Apache-2.0 | |
| Storybook StoriesPostHog/code | 179 | — | ~929 | Automated safety check: Pass | MIT | |
| Styling Sidebar ProductsPostHog/posthog | 40k | — | ~1.8k | Automated safety check: Pass | Custom licence | |
| Writing Kea LogicsPostHog/posthog | 40k | — | ~2.3k | Automated safety check: Pass | Custom licence | |
| Writing UI ComponentsPostHog/posthog | 40k | — | ~4.1k | Automated safety check: Pass | Custom licence | |
| Building HTML CanvasesPostHog/posthog | 40k | — | ~1.3k | Automated safety check: Pass | Custom licence |
Similar skills
- Official
- Official
Styling Sidebar Products
PostHog/posthog
How products and pages appear in the PostHog sidebar: which category they sit in, which icon and color they get, and which groups share a color gradient.
- Official
Writing Kea Logics
PostHog/posthog
Guide for writing or reviewing PostHog kea logic files (Logic.ts / Logic.tsx).
- Official
Writing UI Components
PostHog/posthog
Structure and abstraction rules for PostHog UI code — any React component or frontend file under frontend/src/ or products//frontend/.
- Official
Building HTML Canvases
PostHog/posthog
Author a PostHog canvas with semantic HTML, CSS, and direct browser APIs — documents, articles, generative graphics, 2D canvas and WebGL experiences, and focused experiments where React components…
South Admin CRUD Generator
southliu/south-admin-react
Generates a full CRUD page - page component, data model and API client - from the south-admin-react project's own VS Code snippet templates.
More from supabase/supabase
All 22 skills in this repo- Official
Vercel Composition Patterns
supabase/supabase
React composition patterns that scale. An agent skill from supabase/supabase.
- Official
Clickhouse Logs Queries
supabase/supabase
Write, review, and migrate Supabase logs queries against the ClickHouse-backed logs table (the logs.all.otel analytics endpoint).
- Official
Review The Docs
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).
- Official
Vitest
supabase/supabase
Vitest API and config reference (Jest-compatible) — mocking with vi., spies, fake timers, coverage configuration, fixtures, snapshots, and test filtering.
- Official
Safe SQL Execution
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…
- Official
Studio E2E Tests
supabase/supabase
Write and run Playwright E2E tests for Supabase Studio (e2e/studio).
Related
Categories
Questions about Dev Toolbar Review
What does Dev Toolbar Review do?
Safety rules for the dev toolbar, PostHog client, and feature flags. Dev Toolbar Review is an agent skill from supabase/supabase, published by the product's own GitHub organization. Safety rules for the dev toolbar, PostHog client, and feature flags.
When should I use Dev Toolbar Review?
Dev Toolbar Review fits situations like: reviewing any change to packages/dev-tools/; packages/common/posthog-client.ts; packages/common/feature-flags.tsx.
How do I install Dev Toolbar Review in Claude Code?
Run `npx skills add supabase/supabase --skill dev-toolbar-review -a claude-code`. Or copy the skill folder (.agents/skills/dev-toolbar-review in supabase/supabase) into .claude/skills/dev-toolbar-review in your project. Claude Code loads it when a task matches its description.
How do I install Dev Toolbar Review in Codex?
Run `npx skills add supabase/supabase --skill dev-toolbar-review -a codex`. Or copy the skill folder (.agents/skills/dev-toolbar-review in supabase/supabase) into .agents/skills/dev-toolbar-review in your project. Codex loads it when a task matches its description.
Can I use Dev Toolbar Review 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 supabase/supabase --skill dev-toolbar-review -a cursor` (or -a gemini-cli, github-copilot or opencode for the others). To copy it by hand, put the folder in .cursor/skills/dev-toolbar-review, .gemini/skills/dev-toolbar-review, .github/skills/dev-toolbar-review and .opencode/skills/dev-toolbar-review in your project.
What does Dev Toolbar Review need to run?
SKILL.md names no scripts, command-line tools or credentials: Dev Toolbar Review is instructions for the agent only.
Does Dev Toolbar Review 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 Dev Toolbar Review 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 Dev Toolbar Review use?
Dev Toolbar Review 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.
How many tokens does Dev Toolbar Review use?
About 1.5k tokens (SKILL.md is roughly 6.1k 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 Dev Toolbar Review?
Skills that share tags, products or a category with Dev Toolbar Review: Storybook Stories (PostHog/code, 179 stars), Styling Sidebar Products (PostHog/posthog, 40k stars), Writing Kea Logics (PostHog/posthog, 40k stars) and Writing UI Components (PostHog/posthog, 40k stars). The comparison table on this page puts their stars, adoption, token cost, safety result and licence side by side.
Who maintains Dev Toolbar Review?
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.