studio-ui-patterns
Design system UI patterns for Supabase Studio. Use when building or updating pages, forms, tables, charts, empty states, navigation, cards, alerts, or side panels (sheets). Covers layout selection, component choice, and placement conventions.
Install
With your agent
Install OMGSkills skill "supabase/supabase:studio-ui-patterns" into this agent's normal skills directory: call the OMGSkills MCP get_install_plan tool for your agent and run the script it returns (it installs only the pinned commit and verifies SKILL.md), and stop if MCP or the pin is unavailable. Do not overwrite or change existing skills without asking me.
Manual command
git clone https://github.com/supabase/supabase /tmp/supabase && ln -s /tmp/supabase/.agents/skills/studio-ui-patterns ~/.claude/skills/studio-ui-patternsFrom README
Studio UI Patterns The Design System docs and demos are the source of truth. Always check the relevant demo file before composing new UI. Layout Docs: apps/design-system/content/docs/ui-patterns/layout.mdx Build pages with PageContainer, PageHeader, and PageSection.
More from this repo
react-hook-form
Correct React Hook Form usage anywhere in the monorepo — data flow, subscriptions, reset, dirty state, number inputs,...
studio-mock-api-tests
Component tests for Supabase Studio that mock API requests at the network layer with MSW.
studio-e2e-tests
Used to write and run Playwright E2E tests for Supabase Studio (e2e/studio).