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/solo-founder-superpowers
about-me
Use this skill when the user wants to create a founder profile, establish their personal voice for content, or set up context so other skills produce personalized output instead of generic AI copy. Also use when the user says 'set up my voice,' 'create my profile,' 'who am I,' 'about me,' 'my background,' 'make content sound like me,' or 'founder profile.' Creates ABOUT-ME.md in the project root — a reference file that other skills naturally use to personalize copy, strategy advice, and outreach. NOT for customer personas or ICP (see customer-research). NOT for editing existing text to sound human (see humanize). NOT for visual brand identity (see brand-identity-generator).
2landing-page
Use this skill when the user needs to create or improve a landing page, write above-the-fold copy, structure a sales page, or increase landing page conversion rates. Also use when the user says 'build my landing page,' 'homepage copy,' 'hero section,' or 'marketing site.' Covers page structure, headline formulas, buyer psychology, and conversion elements.
2focus
Use this skill when the user suspects an activity isn't worth their time, feels stuck on something, or wants to know if they should keep doing X or try something else. Also use when the user mentions '80/20,' 'Pareto,' 'is this worth my time,' 'should I keep doing X,' 'not getting results from X,' 'spending too much time on X,' or 'what should I focus on instead.' Delivers a kill/refine/pivot verdict with a concrete weekly action plan.
1seo
Use this skill when the user needs to plan SEO content, do keyword research, build a content calendar, map search intent to page types, or create an internal linking strategy. Also use when the user says 'how do I rank higher,' 'what should I write about for SEO,' 'SEO plan,' 'what keywords should I target,' or 'how to get organic traffic.' This is the strategy and planning skill — for writing content see seo-content, for technical implementation see technical-seo, for auditing see seo-audit.
1beautify
Use this skill when the user wants to make their app look better, says it looks like a template, asks how to achieve Stripe/Linear quality, or says something looks off. Covers visual hierarchy, whitespace, composition, color application, and typography in practice.
1growth
Use this skill when the user needs to design a product-led growth strategy, build viral loops, improve activation metrics, or reduce churn. Covers PLG funnels, activation metrics, viral mechanics, retention strategies, and growth systems.
1