Agent skill · supabase
explorer
Build and modify Studio Explorer surfaces, including notebooks, chats, SQL snippets, query cells, and their shared toolbar patterns.
What it needs
About 2k tokens when loaded.
What this skill does
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: Compose the toolbar from slots rather than adding resource-specific props: 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: 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: Use ExplorerQueryViewport when a query owns the content area of an Explorer tab. Its parent must provide a bounded height and min-h-0: 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.
How to use it
Reference it in AdaL, Claude Code, Cursor or any coding agent — nothing to install:
@skills supabase/explorer