spb/ultra-sharp-agent-skills Public

1---2name: creating-landing-pages3description: Composes landing pages that convert — hero thesis, section flow, one primary call to action, disciplined visual boldness, and benefit-first copy. Use when the user asks to create, design, or rewrite a landing page, homepage, product page, marketing page, hero section, or signup/waitlist page, or asks why a page is not converting. Do not use for CSS layout mechanics (designing-responsive-layouts), design-token systems (theming-design-tokens), or user-facing release notes (writing-release-notes).4---56<!--7Author: Simon-Pierre Boucher8Contact: contact@spboucher.ai9-->1011# Creating Landing Pages1213## When to use / when NOT to use14- **Use for:** landing pages, homepages, product/marketing pages, hero sections, waitlist and signup pages — structure, visual direction, and copy.15- **Do NOT use for:** grid/flexbox/breakpoint mechanics (designing-responsive-layouts), token/theming systems (theming-design-tokens), full app UI, or documentation pages.1617## Core rules18191. **Open with a hero thesis, not a template.** The first screen shows the page's single most characteristic element — a headline, product image, demo, or interactive moment chosen for THIS subject.20   - ✅ a live 10-second product demo as the hero for a screen-recording tool21   - ❌ generic gradient background + stat trio + stock illustration22232. **One primary CTA per page, repeated in rhythm.** Same verb, same destination, after the hero and after each proof section; secondary actions are visually quiet links.24   - ✅ "Start recording — free" (hero, mid-page, footer)25   - ❌ "Sign up", "Book a demo", "Learn more", and "Contact us" all competing above the fold26273. **Section flow: problem → proof → product → action.** Name the visitor's pain, prove you solve it (numbers, logos, testimonials), show the product doing it, then ask once more.28294. **Spend boldness in ONE signature element.** One memorable move — an unusual type treatment, a signature interaction, a striking image — and keep everything around it quiet and disciplined.30   - ❌ animated gradient + parallax + marquee + glassmorphism on one page31325. **Avoid the AI-default palettes.** Cream background + serif display + terracotta accents, and near-black + acid-green/vermilion, read as templated. Derive the palette from the product's actual subject and brand.33346. **Benefit-first, specific copy in active voice.** Headlines state what the visitor gets, with concrete nouns and numbers; button labels are specific verbs.35   - ✅ "Ship your changelog in 5 minutes" / button: "Create my changelog"36   - ❌ "Empowering seamless productivity solutions" / button: "Submit"37387. **Social proof is placed, not piled.** Logos directly under the hero; one strong testimonial (with name, face, role) per proof section; numbers only when true and impressive.39408. **Every section earns scroll.** If a section restates the previous one or exists "because landing pages have one" (generic feature grid, filler FAQ), cut it.4142## Workflow43441. Write the one-sentence thesis: who the page is for and the single action they should take.452. Draft the section outline per rule 3; assign each section one job and one message.463. Define the visual direction: palette (4–6 named colors, rule 5), display + body typefaces, and the ONE signature element (rule 4).474. Write copy headline-first (rule 6); place CTAs and proof (rules 2, 7).485. Build the page (hand off layout mechanics to designing-responsive-layouts if needed).496. Self-critique pass: check the hero against rule 1, count CTAs (rule 2), hunt template smells (rules 4–5), cut dead sections (rule 8). Revise anything that reads templated rather than subject-specific.5051## Edge cases & failure modes52- **No brand or palette exists** → derive 4–6 colors from the product's domain (a finance tool and a kids' app must not share a palette); never fall back to the defaults in rule 5.53- **Multiple audiences with different CTAs** → split into separate landing pages; one page, one primary action.54- **No social proof yet (pre-launch)** → substitute concrete specificity: exact feature claims, a real demo, founder's note; never fabricate logos, counts, or testimonials.55- **Client insists on many CTAs** → keep one primary visually dominant; demote the rest to text links, and say why.5657## References58Section templates, copy formulas, and gotchas: see [references/patterns.md](references/patterns.md)59