{"id":"a5ac13d3-04b6-41cc-a5e4-88aa50fdf233","slug":"saas-ui-skills","kind":"skill","name":"saas-ui-skills","summary":"Production-grade SaaS UI skills for AI coding agents (React + Tailwind + shadcn/ui) — Codex, Claude Code, Cursor, OpenCode. One npx command to install.","owner":"param087","repoUrl":"https://github.com/param087/saas-ui-skills","license":"MIT","licenseTier":"permissive","trust":"community","stars":3,"match":null,"fewStars":true,"format":"skill","createdAt":"2026-06-06T02:41:39.000Z","addedAt":"2026-10-14T06:14:38.030Z","logoUrl":"https://avatars.githubusercontent.com/u/26374564?u=b59602409c4b5f36a5770d1c99aff3ad833de3e1&v=4","linkOnly":false,"collection":null,"skillPath":null,"categories":["design-media","developer-tools"],"tags":["ai-agents","claude-code","codex","cursor","design-system","frontend","opencode","react"],"runtime":"node","local":true,"cloudCapable":false,"cloudCapability":"unknown","cloudReadyOnPlatform":false,"needsApiKey":false,"reviewed":false,"syncedAt":"2026-10-14T10:41:19.767Z","sample":false,"url":"https://conduits.dev/tools/saas-ui-skills","language":"HTML","transports":["stdio"],"install":{"npm":"saas-ui-skills"},"requirements":{"env":[],"upstreamMayCharge":false},"tools":null,"readme":"# saas-ui-skills\n\n**Production-grade SaaS UI skills for AI coding agents — React, Tailwind CSS & shadcn/ui.**\n\n[![CI](https://github.com/param087/saas-ui-skills/actions/workflows/ci.yml/badge.svg)](https://github.com/param087/saas-ui-skills/actions/workflows/ci.yml)\n[![Live preview](https://img.shields.io/badge/live-preview-6d28d9)](https://param087.github.io/saas-ui-skills/)\n[![License: MIT](https://img.shields.io/badge/License-MIT-blue.svg)](./LICENSE)\n![Skills](https://img.shields.io/badge/skills-15-success)\n![Node](https://img.shields.io/badge/node-%3E%3D18-43853d)\n![PRs welcome](https://img.shields.io/badge/PRs-welcome-brightgreen)\n\nCoding 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.\n\nWorks with **Codex, Claude Code, Cursor, and OpenCode**.\n\n> **[See the live preview gallery →](https://param087.github.io/saas-ui-skills/)** — all 12 example components rendered in the browser, with light/dark mode and interactive demos (pricing toggle, ⌘K command palette, dashboard chart).\n\n---\n\n## Quick start\n\nInstall all skills into your agent with one command — **no install, no dependencies**:\n\n```bash\n# Codex\nnpx saas-ui-skills install --target codex\n\n# Claude Code\nnpx saas-ui-skills install --target claude\n\n# Cursor\nnpx saas-ui-skills install --target cursor --scope project\n\n# OpenCode\nnpx saas-ui-skills install --target opencode\n\n# Everything, everywhere\nnpx saas-ui-skills install --target all\n```\n\nBrowse what's inside first:\n\n```bash\nnpx saas-ui-skills list\n```\n\nThen restart your agent (or start a new session) and it will pick the right skill up automatically when your task matches.\n\n---\n\n## What's a \"skill\"?\n\nA skill is a single Markdown file with YAML frontmatter telling the agent **when** to use it and **how** to do the task well:\n\n```markdown\n---\nname: forms-and-validation\ndescription: Use when building forms with react-hook-form + zod and shadcn/ui Form...\n---\n\n# Forms & Validation\n...workflow, code patterns, pitfalls, hand-off...\n```\n\nAgents 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**.\n\n---\n\n## The skills\n\n### Foundations & design system\n| Skill | Use when… |\n|---|---|\n| **design-tokens-theming** | Setting up color/typography/spacing scales, CSS variables, the shadcn theme + dark mode. |\n| **responsive-layout** | Building the app shell, sidebar, Tailwind breakpoints, container queries. |\n| **accessible-components** | Interactive UI must meet WCAG AA — focus, ARIA, keyboard nav, visible focus. |\n| **component-architecture** | Composing shadcn/ui, `cva` variants, compound components, when to abstract. |\n\n### Core SaaS components\n| Skill | Use when… |\n|---|---|\n| **forms-and-validation** | Forms with react-hook-form + zod + shadcn `Form`, inline errors, async submit. |\n| **data-tables** | Sortable/filterable/paginated tables (TanStack Table + shadcn), bulk actions. |\n| **navigation-patterns** | Sidebar nav, command palette (cmdk), tabs, breadcrumbs. |\n| **modals-and-dialogs** | Dialog/sheet/drawer, focus trap, destructive-action confirm flows. |\n\n### SaaS product flows\n| Skill | Use when… |\n|---|---|\n| **auth-screens** | Login/signup/forgot/reset, OAuth buttons, security-conscious UX. |\n| **billing-and-pricing** | Pricing tables, plan cards, paywalls, usage meters, upgrade prompts. |\n| **onboarding-flows** | Multi-step wizards, setup checklists, progressive disclosure. |\n| **settings-pages** | Account/team/workspace settings, sectioned forms, danger zone. |\n\n### UX polish & states\n| Skill | Use when… |\n|---|---|\n| **empty-and-loading-states** | Skeletons, empty states with a CTA, error+retry, optimistic UI. |\n| **notifications-and-toasts** | Toasts (sonner), inline alerts, a notification center. |\n| **dashboard-layout** | KPI/stat cards with deltas, chart placement, overview grids. |\n\n---\n\n## Examples\n\nSee the skills applied. The [`examples/`](./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 →](https://param087.github.io/saas-ui-skills/)**\n\n| Example | From skill |\n|---|---|\n| [`SignInForm.tsx`](./examples/forms-and-validation) | forms-and-validation |\n| [`InvoicesTable.tsx`](./examples/data-tables) | data-tables |\n| [`PricingTable.tsx`](./examples/billing-and-pricing) | billing-and-pricing |\n| [`SignInScreen.tsx`](./examples/auth-screens) | auth-screens |\n| [`DashboardOverview.tsx`](./examples/dashboard-layout) | dashboard-layout |\n| [`States.tsx`](./examples/empty-and-loading-states) | empty-and-loading-states |\n\nPlus 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/`](./examples#modern-examples-by-saas-archetype).\n\n---\n\n## Usage\n\n```\nnpx saas-ui-skills <command> [options]\n\nCommands\n  list                       List available skills\n  install                    Install skills into an agent\n\nOptions\n  -t, --target <name>        codex | claude | opencode | cursor | all\n      --scope <scope>        global (default) | project\n      --skills <a,b,c>       comma-separated subset (default: all)\n      --dir <path>           install into a custom directory (overrides target)\n  -f, --force                overwrite existing skills\n  -h, --help                 show this help\n```\n\n**Examples**\n\n```bash\n# Just the form + table skills, into the current project\nnpx saas-ui-skills install --target claude --skills forms-and-validation,data-tables --scope project\n\n# Into a custom agent directory\nnpx saas-ui-skills install --dir ./my-agent/skills\n\n# Re-install and overwrite\nnpx saas-ui-skills install --target codex --force\n```\n\n### Where skills get installed\n\n| Target | Global | Project |\n|---|---|---|\n| Codex | `~/.codex/skills` | `.codex/skills` |\n| Claude Code | `~/.claude/skills` | `.claude/skills` |\n| OpenCode | `~/.config/opencode/skills` | `.opencode/skills` |\n| Cursor | — | `.cursor/rules` (flat `.md` rules) |\n\n---\n\n## Design principles\n\n- **Accessible by default.** Every component skill targets WCAG AA — focus, ARIA, keyboard.\n- **Concrete over abstract.** Real React + Tailwind + shadcn/ui code, not vague advice.\n- **Pitfalls included.** Each skill ends with the mistakes agents actually make.\n- **Composable.** Skills hand off to each other (tokens → layout → components → flows → polish).\n- **Zero-dependency installer.** Pure Node, nothing to install, nothing to trust.\n\n> Built for the shadcn/ui ecosystem, but the patterns (validation, states, a11y, hierarchy) apply to any React + Tailwind stack.\n\n---\n\n## Contributing\n\nNew skills and improvements are very welcome — see **[CONTRIBUTING.md](./CONTRIBUTING.md)**. Every skill is validated in CI:\n\n```bash\nnode scripts/validate-skills.mjs\n```\n\nOpen a [skill request](https://github.com/param087/saas-ui-skills/issues/new?template=skill_request.md) if there's a SaaS UI pattern you want your agent to master.\n\n---\n\n## Author\n\nBuilt by **[Param Bhavsar](https://github.com/param087)** — Google Summer of Code '19 @ TensorFlow, ex-HSBC. If this saves you from shipping janky UI, a ⭐ helps others find it.\n\nPart of a family of agent-skill packs: **[saas-starter-skills](https://github.com/param087/saas-starter-skills)** (full-stack: Next.js + Drizzle + Stripe) · **[agent-ml-skills](https://github.com/param087/agent-ml-skills)** (ML/DS/MLOps).\n\n## License\n\n[MIT](./LICENSE)\n"}