What the skills actually produce
Each card below is a static render of an example component an agent generates when it follows one of the saas-ui-skills. shadcn/ui patterns, accessible by default, light + dark. Toggle the theme top-right.
Dashboard overview
KPI row that reflows 1 → 2 → 4, chart + activity split.
dashboard-layoutAnalytics bento
Responsive bento grid with a gradient hero metric.
dashboard-layoutInvoices table
Row selection, sortable headers, and a bulk-action bar.
data-tablesCRM pipeline
Stage badges, owner avatars, weighted open-value total.
data-tablesPricing table
Monthly/annual toggle with a single highlighted plan.
billing-and-pricingUsage meter
Metered bars that warm to amber → red near the cap.
billing-and-pricingSign-in form
react-hook-form + zod with a server error on a field.
forms-and-validationSign-in screen
Auth shell with OAuth button and a labelled divider.
auth-screensEmpty & loading states
Loading, empty, error, and ready — all four at once.
empty-and-loading-statesAI chat thread
Prompt starters, message bubbles, typing indicator.
empty-and-loading-statesKanban board
Compound Board / Column / Card composition pattern.
component-architectureCommand palette
⌘K, grouped results, keyboard-navigable, shortcut hints.
navigation-patterns