saas-ui-skills

saas-ui-skills

Production-grade SaaS UI skills for AI coding agents — React, Tailwind CSS & shadcn/ui.

Coding agents are great generalists but make the same UI mistakes over and over: inaccessible <div> dropdowns, forms with no validation or error states, data tables that break on empty/loading, modals that trap nothing, hard-coded colors that shatter in dark mode. saas-ui-skills is a curated pack of 15 battle-tested skills that teach your agent to build SaaS interfaces like a senior product engineer — so it stops shipping janky UI.

Works with Codex, Claude Code, Cursor, and OpenCode.

See the live preview gallery → — all 12 example components rendered in the browser, with light/dark mode and interactive demos (pricing toggle, ⌘K command palette, dashboard chart).

Quick start

Install all skills into your agent with one command — no install, no dependencies:

# Codex
npx saas-ui-skills install --target codex

# Claude Code
npx saas-ui-skills install --target claude

# Cursor
npx saas-ui-skills install --target cursor --scope project

# OpenCode
npx saas-ui-skills install --target opencode

# Everything, everywhere
npx saas-ui-skills install --target all

Browse what's inside first:

npx saas-ui-skills list

Then restart your agent (or start a new session) and it will pick the right skill up automatically when your task matches.

What's a "skill"?

A skill is a single Markdown file with YAML frontmatter telling the agent when to use it and how to do the task well:

---
name: forms-and-validation
description: Use when building forms with react-hook-form + zod and shadcn/ui Form...
---

# Forms & Validation
...workflow, code patterns, pitfalls, hand-off...

Agents that support skills load the description up front and pull in the full body only when the task matches — so you get expert guidance without bloating every prompt.

The skills

Foundations & design system

Skill	Use when…
design-tokens-theming	Setting up color/typography/spacing scales, CSS variables, the shadcn theme + dark mode.
responsive-layout	Building the app shell, sidebar, Tailwind breakpoints, container queries.
accessible-components	Interactive UI must meet WCAG AA — focus, ARIA, keyboard nav, visible focus.
component-architecture	Composing shadcn/ui, cva variants, compound components, when to abstract.

Core SaaS components

Skill	Use when…
forms-and-validation	Forms with react-hook-form + zod + shadcn Form, inline errors, async submit.
data-tables	Sortable/filterable/paginated tables (TanStack Table + shadcn), bulk actions.
navigation-patterns	Sidebar nav, command palette (cmdk), tabs, breadcrumbs.
modals-and-dialogs	Dialog/sheet/drawer, focus trap, destructive-action confirm flows.

SaaS product flows

Skill	Use when…
auth-screens	Login/signup/forgot/reset, OAuth buttons, security-conscious UX.
billing-and-pricing	Pricing tables, plan cards, paywalls, usage meters, upgrade prompts.
onboarding-flows	Multi-step wizards, setup checklists, progressive disclosure.
settings-pages	Account/team/workspace settings, sectioned forms, danger zone.

UX polish & states

Skill	Use when…
empty-and-loading-states	Skeletons, empty states with a CTA, error+retry, optimistic UI.
notifications-and-toasts	Toasts (sonner), inline alerts, a notification center.
dashboard-layout	KPI/stat cards with deltas, chart placement, overview grids.

Examples

See the skills applied. The examples/ folder has real generated components — the kind of output an agent produces when it follows a skill. View them rendered in the live gallery →

Example	From skill
SignInForm.tsx	forms-and-validation
InvoicesTable.tsx	data-tables
PricingTable.tsx	billing-and-pricing
SignInScreen.tsx	auth-screens
DashboardOverview.tsx	dashboard-layout
States.tsx	empty-and-loading-states

Plus a set of modern, archetype-flavored examples — Analytics bento, CRM pipeline, Kanban board, AI chat thread, API usage meter, and a ⌘K command palette — in examples/.

Usage

npx saas-ui-skills <command> [options]

Commands
  list                       List available skills
  install                    Install skills into an agent

Options
  -t, --target <name>        codex | claude | opencode | cursor | all
      --scope <scope>        global (default) | project
      --skills <a,b,c>       comma-separated subset (default: all)
      --dir <path>           install into a custom directory (overrides target)
  -f, --force                overwrite existing skills
  -h, --help                 show this help

Examples

# Just the form + table skills, into the current project
npx saas-ui-skills install --target claude --skills forms-and-validation,data-tables --scope project

# Into a custom agent directory
npx saas-ui-skills install --dir ./my-agent/skills

# Re-install and overwrite
npx saas-ui-skills install --target codex --force

Where skills get installed

Target	Global	Project
Codex	~/.codex/skills	.codex/skills
Claude Code	~/.claude/skills	.claude/skills
OpenCode	~/.config/opencode/skills	.opencode/skills
Cursor	—	.cursor/rules (flat .md rules)

Design principles

• Accessible by default. Every component skill targets WCAG AA — focus, ARIA, keyboard.
• Concrete over abstract. Real React + Tailwind + shadcn/ui code, not vague advice.
• Pitfalls included. Each skill ends with the mistakes agents actually make.
• Composable. Skills hand off to each other (tokens → layout → components → flows → polish).
• Zero-dependency installer. Pure Node, nothing to install, nothing to trust.

Built for the shadcn/ui ecosystem, but the patterns (validation, states, a11y, hierarchy) apply to any React + Tailwind stack.

Contributing

New skills and improvements are very welcome — see CONTRIBUTING.md. Every skill is validated in CI:

node scripts/validate-skills.mjs

Open a skill request if there's a SaaS UI pattern you want your agent to master.

Author

Built by Param Bhavsar — Google Summer of Code '19 @ TensorFlow, ex-HSBC. If this saves you from shipping janky UI, a ⭐ helps others find it.

Part of a family of agent-skill packs: saas-starter-skills (full-stack: Next.js + Drizzle + Stripe) · agent-ml-skills (ML/DS/MLOps).

License

MIT