ui-patterns
UI Patterns
This skill covers how to build pages and compose components for SaaS applications. It provides the structural decisions — which components to use, how to lay out pages, and how to handle every UI state. For visual styling (colors, typography, spacing systems), see the beautify skill. For user flow design, see ux-design. For accessibility requirements (semantic HTML, keyboard nav, ARIA), see ux-design/ACCESSIBILITY.md.
Component Library Selection
Default: shadcn/ui + Tailwind CSS. This is the correct choice for 90% of founder-built SaaS apps. shadcn/ui provides copy-paste components built on Radix primitives — you own the code, can customize freely, and avoid dependency lock-in.
Decision framework:
| Situation | Choice | Why |
|---|---|---|
| Public-facing SaaS product | shadcn/ui + Tailwind | Full design control, great defaults, accessible |
| Internal admin tool / back-office | Ant Design or MUI | Dense data display, built-in table/form patterns, faster to ship |
| Need one specific primitive (tooltip, dialog) | Radix directly | Skip the styling layer, use just the behavior |
| Existing MUI/Chakra codebase | Stay with current lib | Migration cost rarely worth it mid-project |
| React Native / mobile app | React Native Paper or Tamagui | Web component libs don't apply |
When using shadcn/ui: install components individually (npx shadcn-ui@latest add button), don't install everything upfront. Configure the components.json path aliases to match the project structure.
More from whawkinsiv/claude-code-skills
accounting
Use this skill when the user needs to set up bookkeeping, track revenue and expenses, prepare for taxes, choose accounting software, understand SaaS revenue recognition, or manage the financial operations of their bootstrapped business. Covers bookkeeping setup, tax preparation, accounting tools, and financial hygiene for solo founders.
380hiring
Use this skill when the user needs to hire a developer, find a technical contractor, vet engineering talent, manage freelancers, write a job brief, decide between hiring and contracting, or bring on their first technical team member. Also use when the user says 'I need a developer,' 'should I hire someone,' 'how do I find a contractor,' 'I need technical help I can't do myself,' or 'AI keeps getting this wrong, I need a human.' Covers contractor sourcing, vetting, management, and the founder-developer working relationship for non-technical founders.
21payments
Use this skill when the user needs to set up Stripe, implement subscriptions, handle billing, configure payment plans, manage failed payments, deal with refunds, set up tax collection, or troubleshoot payment issues. Covers Stripe configuration, subscription lifecycle, dunning, tax compliance, and billing operations for bootstrapped SaaS.
21market-research
Use this skill when the user needs to size a market, analyze competitors, calculate TAM/SAM/SOM, or validate a business idea. Covers market sizing, competitive analysis frameworks, napkin math, and bottom-up revenue estimation.
19copywriting
Use this skill when the user needs to write headlines, CTAs, button text, error messages, onboarding copy, or any UI text. Also use when the user says 'write copy for,' 'what should this say,' 'help me with the wording,' or is building any page or component that needs text. Covers headline formulas, microcopy best practices, benefit-driven copy, and SaaS writing style.
17legal
Use this skill when the user needs to form a business entity, choose between LLC and C-Corp, create Terms of Service, write a Privacy Policy, or handle legal compliance. Covers entity selection, legal documents, contracts, and compliance for solo-founded SaaS.
17