explorer

supabase/supabase · Agent Skill

Costruisce e modifica le interfacce di Studio Explorer, inclusi notebook, chat, frammenti SQL e celle di query.

Vai all'installazione ↓

Opzioni di installazione

Il prompt con anteprima è selezionato di default. Puoi passare al comando diretto.

Installa con Claude o Codex

Copia il prompt, incollalo in Claude, Codex o un altro assistente: analizzerà la pagina dello skill e lo installerà.

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.

File dello skill

1 file Scarica ZIP

Leggi SKILL.md e i file correlati prima di installare. Clicca un file per l'anteprima.

Contenuto di SKILL.md

Testo originale dell'autore · sola lettura

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.