beautify
Beautify
Make web apps look intentionally designed rather than AI-generated. This skill covers the visual principles that separate premium-feeling apps (Stripe, Linear, Vercel) from generic template output. Apply these principles when building new UI or when the user says something "looks off" but can't articulate why.
Reference AI-SLOP-FIXES.md for specific antipattern remediation. Reference REFERENCE-TEARDOWNS.md for concrete examples from production apps.
Core Principles
- Restraint is the primary aesthetic. Premium apps use fewer colors, fewer font weights, fewer borders, fewer shadows. When in doubt, remove rather than add.
- Every visual difference must communicate a difference in meaning. If two elements look different, they should BE different. If they're the same type of thing, they must look identical.
- Hierarchy is not optional. Every screen has exactly one primary focal point, 2-3 secondary elements, and everything else recedes. If everything is emphasized, nothing is.
- Whitespace is a design element, not empty space. It creates grouping, hierarchy, and breathing room. Increasing whitespace almost always improves perceived quality.
- Color is information, not decoration. Each color in the palette should have a job. If a color doesn't communicate status, action, or brand, remove it.
- Consistency compounds. One slightly-off spacing value is invisible. Twenty slightly-off values make an app feel broken. Nail the system, not individual screens.
- The eye follows contrast. The highest-contrast element on screen gets attention first. Use this deliberately — never accidentally.
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.
370hiring
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.
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.
19payments
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.
18copywriting
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