Agent skill · supabase
studio-ui-patterns
Design system UI patterns for Supabase Studio. Use when building or updating
What it needs
About 3k tokens when loaded.
What this skill does
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. Content type size ----------------- ----------- Settings / config "default" Lists / tables "large" Full-screen views "full" If filters/search exist on a list page, align table actions with the filters (don't use PageHeaderAside/PageSectionAside for those actions) If no filters, actions can go in PageHeaderAside or PageSectionAside Demos: page-layout-settings.tsx, page-layout-list.tsx, page-layout-list-simple.tsx, page-layout-detail.tsx (all in apps/design-system/registry/default/example/) Forms Docs: apps/design-system/content/docs/ui-patterns/forms.mdx Use react-hook-form + zod Use FormItemLayout instead of manually composing FormItem/FormLabel/FormMessage/FormDescription Wrap inputs with FormControl; import primitives from ui Layout selection: Context Layout Container ------------------------------------------ ------------------------------------------ ---------------------------------------------------------- Page (settings/config) FormItemLayout layout="flex-row-reverse" Card (CardContent per field; CardFooter for actions) Side panel — wide FormItemLayout layout="horizontal" SheetSection Side panel — narrow (size="sm" or below) FormItemLayout layout="vertical" SheetSection Dirty state / submit: Use isDirty to show Cancel and disable Save. …
How to use it
Reference it in AdaL, Claude Code, Cursor or any coding agent — nothing to install:
@skills supabase/studio-ui-patterns--70e01d