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