explorer

supabase/supabase · Agent Skill

Builds and modifies Studio Explorer interfaces, including notebooks, chats, SQL snippets, and query cells.

Jump to install ↓

Install options

The review-first prompt is selected by default. You can switch to a direct command.

Install with Claude or Codex

Copy the prompt, paste it into Claude, Codex, or another assistant, and it will review the skill page and install it.

I'd like to install this Claude Code skill:
https://github.com/supabase/supabase/tree/master/apps/studio/.claude/skills/explorer

Please review the SKILL.md file, verify the skill is legitimate, then copy the skill folder into .claude/skills/ of my project.

Review the source files

1 files Download Zip

Read SKILL.md and any companion files before deciding whether to install. Click a file to preview it.

SKILL.md contents

Original author text · read-only

Studio Explorer

Use this skill when working in apps/studio/components/interfaces/Explorer or building notebook, chat, snippet, or query-cell UI for Explorer.

Explorer UI is Studio-specific. Keep its components under apps/studio/components/interfaces/Explorer; do not move them into ui-patterns or duplicate them in the design-system app.

Explorer toolbar

Import the toolbar primitives from:

import {
  ExplorerToolbar,
  ExplorerToolbarAction,
  ExplorerToolbarActions,
  ExplorerToolbarIcon,
  ExplorerToolbarTitle,
} from '@/components/interfaces/Explorer/ExplorerToolbar'

Compose the toolbar from slots rather than adding resource-specific props:

<ExplorerToolbar aria-label="Query toolbar">
  <ExplorerToolbarIcon>{/* decorative resource icon */}</ExplorerToolbarIcon>
  <ExplorerToolbarTitle>{/* static or editable title */}</ExplorerToolbarTitle>
  <ExplorerToolbarActions>
    {/* badges, source controls, display controls, and direct actions */}
    <ExplorerToolbarAction aria-label="Run query" icon={<Play size={16} strokeWidth={2} />} />
  </ExplorerToolbarActions>
</ExplorerToolbar>
  • The row defaults to 40px and follows --header-height at the md breakpoint.
  • Use ExplorerToolbarAction for compact direct actions. Icon-only actions are 28px wide automatically. It defaults to text-tertiary-foreground and hover:text-foreground. Pass size={16} strokeWidth={2} on Lucide icons.
  • Keep execution, persistence, source selection, and other resource state in the consuming Explorer surface.
  • Extend layouts with children and className; avoid boolean props for resource-specific variants.

Explorer query shell

Import the layout regions from:

import {
  ExplorerQuery,
  ExplorerQueryEditor,
  ExplorerQueryFooter,
  ExplorerQueryResults,
  ExplorerQueryViewport,
} from '@/components/interfaces/Explorer/ExplorerQuery'

Use ExplorerQuery for a framed query embedded in a notebook, chat, or another surface. Give it an explicit height when the surrounding surface constrains the cell:

<ExplorerQuery className="h-96">
  <ExplorerToolbar>{/* title and actions */}</ExplorerToolbar>
  <ExplorerQueryEditor>{/* editable or read-only SQL */}</ExplorerQueryEditor>
  <ExplorerQueryResults>{/* idle, loading, error, or result display */}</ExplorerQueryResults>
  <ExplorerQueryFooter>{/* row count or surface metadata */}</ExplorerQueryFooter>
</ExplorerQuery>

Use ExplorerQueryViewport when a query owns the content area of an Explorer tab. Its parent must provide a bounded height and min-h-0:

<div className="min-h-0 flex-1">
  <ExplorerQueryViewport>{/* the same query composition */}</ExplorerQueryViewport>
</div>
  • ExplorerQueryResults is always present and fills the space left by the toolbar, editor, and footer.
  • A result renderer that can grow supplies its own min-h-0 flex-1 overflow-auto container.
  • The shell owns layout only. Query models, source resolution, execution, results, display selection, and saved configuration stay controlled by the consumer.
  • Compose approval prompts, confirmation notices, and other surface-specific content as children between the standard regions.