Loading skill
Install any skill in seconds. Free to start, no credit card required.
Get Started Free →supabase/explorer
Build and modify Studio Explorer surfaces, including notebooks, chats, SQL snippets, query cells, and their shared toolbar patterns.
Passed 22 of 22 test cases with the skill, and 9 of 22 without it.
and 17 more in the full report
13 fixed9 passed either way0 still failing0 broke
Tokens, turns and time describe resource use, not a dollar price.
One of 13 test cases the skill fixed. Same model, same prompt, with and without the skill.
In a framed `ExplorerQuery` container containing a toolbar, editor, results pane, and footer, which specific region automatically expands to fill all remaining vertical space?
| Checked | Without skill | With skill |
|---|---|---|
| Identifies ExplorerQueryResults as the component that fills remaining vertical space | Missed | Passed |
The instructions your model reads when the skill loads.
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.
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>
--header-height at the md breakpoint.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.className; avoid boolean props for resource-specific variants.test cases passed, vs 9 / 22 without
More skills from the same source and nearby in the registry, with their headline benchmark lift.