Landing Page Builder skill

Landing Page Builder

Take a product or offer and ship a complete, accessible, fast, high-converting landing page: intake → copy → layout → runnable code → conversion QA. This skill carries the full section template library and conversion principles inline — there are no external reference files to fetch.

This skill owns the whole page build. For deeper specialization, hand off to siblings:

• Headline/body copy frameworks at scale → copywriting
• Iterating an existing page's conversion rate → page-cro; exit-intent/popups → popup-cro; signup/checkout flow → signup-flow-cro
• Running the experiment once live → ab-testing
• Reusable design tokens/components → design-system; visual polish → ui-ux-pro-max
• Performance budgets and CWV tuning → web-performance / nextjs-performance
• Pricing-page strategy and tier design → pricing-optimization; Stripe checkout wiring → stripe-billing
• SEO/AI-search optimization of the page → seo-geo

---

0. Intake — never build blind

A landing page is an argument to one audience for one action. Get these before writing a word. If the user hasn't supplied them, ask for the starred ones; infer the rest and state your assumptions.

Decision: how long should the page be? Long enough to close the specific objection set for that traffic temperature, no longer. Cold paid traffic to a considered B2B purchase → long-form with heavy proof. Warm traffic to a free tool → hero + one proof strip + CTA. Don't pad; every section must earn its scroll.

---

1. Page blueprint (a menu, not a mandate)

There is no single structure every page must follow. Below is the canonical superset for a considered SaaS/product purchase from cold-ish traffic. Add, drop, and reorder by intake:

• Lead-gen / waitlist: Hero + 1 proof strip + short form. Cut features/pricing.
• Free tool / PLG: Hero (the tool itself or a live demo) + benefits + social proof + CTA.
• High-intent / branded search: Shorter; proof + pricing/CTA early.
• Cold paid (expensive product): Full long-form; message-match the ad's promise in the H1; heavy proof; risk reversal.
• Event/webinar: Hero with date/time/CTA, agenda, speakers (real bios/photos), registration form. See webinar-events.

Canonical section order (reorder freely):

1. Hero — value prop + primary CTA + trust signal, above the fold
2. Problem / stakes — the cost of the status quo (skip for warm traffic that already feels the pain)
3. Solution / benefits — outcomes, not features
4. Social proof — logos, testimonials, metrics, ratings
5. How it works — 3 steps to reduce perceived effort
6. Features grid — for buyers who need the spec sheet
7. Pricing — only if self-serve; otherwise a "Book a demo" band
8. FAQ — neutralize the top objections
9. Final CTA — restate value + risk reversal

Ordering principles: put the strongest proof nearest the biggest claim and nearest each CTA; lead with the dominant motivation (pain-led vs aspiration-led) for that audience; repeat the primary CTA roughly every 1.5 viewports so the visitor can convert the moment they're sold.

---

2. Copy frameworks (fill-in formulas)

Copy is the product of the page. Layout just gets out of its way. Use these formulas; if you need depth on long-form sales copy, see copywriting.

Value proposition (the H1)

The H1 must answer what it is + who it's for + the payoff within ~10 words. Patterns:

• Outcome: {Achieve desired outcome} without {pain/cost} → "Ship features faster without breaking production."
• Category + diff: The {category} that {key differentiator} → "The CRM that updates itself."
• For-whom: {Outcome} for {specific ICP} → "Invoicing built for freelance designers."

Rules: concrete > clever; name the audience or the outcome, not your features; no jargon a cold visitor won't parse in 2 seconds. Subhead = the how or the proof in one sentence ("Connect your repo and get test coverage on every PR — no config.").

Benefit > feature translation

Buyers buy outcomes; the spec sheet only reassures. Translate every feature with "so that":

Hero/solution sections lead with benefit; features grid can be more literal.

CTA copy by intent

Buttons should name the value or next step, never "Submit." Match friction to commitment:

One primary action per page; a secondary CTA ("See how it works", "Watch 2-min demo") may sit beside it but must look visually subordinate. Keep button label identical at hero and final CTA so the decision feels consistent.

Objection-handling FAQ

List the real reasons people don't buy, then answer each plainly. Common buckets: price/ROI, switching cost, security/compliance, "will it work for my case", contract/cancellation, support. Answer the question directly in the first sentence (also helps AI-search citation — see §6).

Above-the-fold checklist

Within the first viewport (test at 360×640 mobile and 1440×900 desktop) a stranger must learn: (1) what this is, (2) who it's for, (3) the payoff, (4) one trust signal, (5) the primary action. If any is missing, the hero is incomplete.

---

3. Implementation defaults

• Stack: semantic HTML + Tailwind utility classes. Portable to JSX by swapping class→className. For a React/Next.js project, see nextjs-stack.
• Mobile-first: author base styles for mobile; layer sm:/md:/lg: up. ~60%+ of landing-page traffic is mobile — design the mobile hero first, not last.
• Accessibility (target WCAG 2.2 AA): one <h1>; logical heading order; alt on meaningful images (alt="" on decorative); visible :focus-visible rings; label every input; 4.5:1 text contrast (3:1 for large text/UI); buttons are <button>/<a>, never <div onclick>; respect prefers-reduced-motion.
• Performance / Core Web Vitals (mid-2026 "good" thresholds, 75th-percentile real-user data): LCP < 2.5s, INP < 200ms (INP replaced FID as a Core Web Vital in March 2024; do not cite FID), CLS < 0.1. Practices: give the hero image explicit width/height (kills CLS), loading="lazy" everything below the fold but never the LCP/hero image, fetchpriority="high" on the hero image, serve modern formats (AVIF/WebP) with srcset, preconnect to font origins and use font-display: swap, defer non-critical JS. Verify with PageSpeed Insights (pagespeed.web.dev); deeper budgets in web-performance.
• Forms: ask for the minimum (email-only out-converts long forms for most lead-gen); inline validation; honeypot or CAPTCHA for spam; show success state without a full reload where possible.

---

4. Section templates (runnable HTML + Tailwind)

Drop-in, responsive, accessible. Replace bracketed placeholders. Tailwind v3+/v4 utility names; assumes Tailwind is loaded. Swap class→className for JSX.

4.1 Hero

<header class="relative isolate px-6 pt-6 lg:px-8">
  <!-- Minimal nav -->
  <nav class="mx-auto flex max-w-6xl items-center justify-between py-4" aria-label="Primary">
    <a href="/" class="flex items-center gap-2 font-semibold text-gray-900">
      <img src="/logo.svg" alt="[Brand] logo" width="28" height="28" class="h-7 w-7" />
      [Brand]
    </a>
    <div class="hidden items-center gap-8 md:flex">
      <a href="#features" class="text-sm text-gray-600 hover:text-gray-900">Features</a>
      <a href="#pricing" class="text-sm text-gray-600 hover:text-gray-900">Pricing</a>
      <a href="#faq" class="text-sm text-gray-600 hover:text-gray-900">FAQ</a>
    </div>
    <a href="#cta"
       class="rounded-lg bg-indigo-600 px-4 py-2 text-sm font-semibold text-white shadow-sm hover:bg-indigo-500 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-indigo-600">
      Start free
    </a>
  </nav>

  <!-- Hero content -->
  <div class="mx-auto max-w-3xl py-20 text-center sm:py-28">
    <p class="mb-4 text-sm font-medium text-indigo-600">[Optional eyebrow / category]</p>
    <h1 class="text-4xl font-bold tracking-tight text-gray-900 sm:text-6xl">
      [What it is + who it's for + payoff, ~10 words]
    </h1>
    <p class="mt-6 text-lg leading-8 text-gray-600">
      [Subhead: the "how" or the proof, one sentence]
    </p>
    <div class="mt-10 flex items-center justify-center gap-4">
      <a href="#cta"
         class="rounded-lg bg-indigo-600 px-5 py-3 text-base font-semibold text-white shadow-sm hover:bg-indigo-500 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-indigo-600">
        [Start free — no card]
      </a>
      <a href="#how" class="text-base font-semibold text-gray-900 hover:text-gray-700">
        See how it works <span aria-hidden="true">→</span>
      </a>
    </div>
    <!-- Trust signal: use ONLY real numbers/logos (see §5) -->
    <p class="mt-8 text-sm text-gray-500">Trusted by [N]+ teams · ★ 4.8 on [G2/Trustpilot]</p>
  </div>

  <!-- LCP image: explicit dimensions + high priority, NOT lazy -->
  <div class="mx-auto max-w-5xl px-2">
    <img src="/hero.avif" alt="[Concrete description of the product screenshot]"
         width="1600" height="900" fetchpriority="high"
         class="rounded-xl shadow-2xl ring-1 ring-gray-900/10" />
  </div>
</header>

4.2 Problem / stakes

<section class="mx-auto max-w-6xl px-6 py-20" aria-labelledby="problem-h">
  <h2 id="problem-h" class="text-center text-3xl font-bold tracking-tight text-gray-900">
    [The problem with the current approach]
  </h2>
  <div class="mt-12 grid gap-8 sm:grid-cols-3">
    <!-- Repeat per pain point; icon is decorative -> aria-hidden -->
    <div class="rounded-2xl bg-gray-50 p-6">
      <svg class="h-8 w-8 text-rose-500" aria-hidden="true" viewBox="0 0 24 24" fill="currentColor"><circle cx="12" cy="12" r="10"/></svg>
      <h3 class="mt-4 font-semibold text-gray-900">[Specific frustration]</h3>
      <p class="mt-2 text-gray-600">[One concrete sentence on the cost of this pain.]</p>
    </div>
    <!-- … pain 2, pain 3 … -->
  </div>
</section>

4.3 Solution / benefits (alternating rows)

<section id="how" class="mx-auto max-w-6xl px-6 py-20" aria-labelledby="solution-h">
  <h2 id="solution-h" class="text-center text-3xl font-bold tracking-tight text-gray-900">
    [How [Product] solves this]
  </h2>
  <div class="mt-16 space-y-20">
    <!-- Benefit row: image + copy, reverses on alternating rows -->
    <div class="grid items-center gap-10 lg:grid-cols-2">
      <img src="/benefit-1.avif" alt="[What this screenshot shows]" width="1200" height="800"
           loading="lazy" class="rounded-xl shadow-lg ring-1 ring-gray-900/10" />
      <div>
        <h3 class="text-2xl font-semibold text-gray-900">[Outcome they get]</h3>
        <p class="mt-4 text-gray-600">[Benefit framed as "so that …". Lead with the result, not the mechanism.]</p>
      </div>
    </div>
    <div class="grid items-center gap-10 lg:grid-cols-2">
      <div class="lg:order-2">
        <img src="/benefit-2.avif" alt="[What this shows]" width="1200" height="800" loading="lazy"
             class="rounded-xl shadow-lg ring-1 ring-gray-900/10" />
      </div>
      <div class="lg:order-1">
        <h3 class="text-2xl font-semibold text-gray-900">[Outcome they get]</h3>
        <p class="mt-4 text-gray-600">[Benefit 2.]</p>
      </div>
    </div>
  </div>
</section>

4.4 Social proof (logo wall + testimonials + metric)

<section class="bg-gray-50 py-20" aria-labelledby="proof-h">
  <div class="mx-auto max-w-6xl px-6">
    <h2 id="proof-h" class="text-center text-sm font-semibold uppercase tracking-wide text-gray-500">
      Trusted by teams at
    </h2>
    <!-- REAL logos only. If none yet, delete this strip — do not invent brands (see §5). -->
    <div class="mt-8 grid grid-cols-2 items-center gap-8 sm:grid-cols-3 lg:grid-cols-6">
      <img src="/logos/acme.svg" alt="Acme" height="32" class="col-span-1 max-h-8 w-full object-contain opacity-70" />
      <!-- … real customer logos … -->
    </div>

    <div class="mt-16 grid gap-6 lg:grid-cols-3">
      <!-- Testimonial card: attribute to a REAL person who said it -->
      <figure class="rounded-2xl bg-white p-6 shadow-sm ring-1 ring-gray-900/5">
        <blockquote class="text-gray-900">"[Exact quote the customer actually gave you.]"</blockquote>
        <figcaption class="mt-4 flex items-center gap-3">
          <img src="/people/jane.jpg" alt="" width="40" height="40" class="h-10 w-10 rounded-full" />
          <div class="text-sm">
            <div class="font-semibold text-gray-900">[Real name]</div>
            <div class="text-gray-500">[Title], [Company]</div>
          </div>
        </figcaption>
      </figure>
      <!-- … more real testimonials … -->
    </div>

    <!-- Metric: cite a real, defensible number with its source/period -->
    <p class="mt-12 text-center text-2xl font-semibold text-gray-900">
      [Real metric, e.g. "Cuts onboarding time 40%"] <span class="text-base font-normal text-gray-500">— [source/sample]</span>
    </p>
  </div>
</section>

4.5 How it works (3 steps)

<section class="mx-auto max-w-5xl px-6 py-20" aria-labelledby="steps-h">
  <h2 id="steps-h" class="text-center text-3xl font-bold tracking-tight text-gray-900">Get started in 3 steps</h2>
  <ol class="mt-12 grid gap-8 sm:grid-cols-3">
    <li class="rounded-2xl border border-gray-200 p-6">
      <span class="flex h-9 w-9 items-center justify-center rounded-full bg-indigo-600 font-semibold text-white">1</span>
      <h3 class="mt-4 font-semibold text-gray-900">[Step title]</h3>
      <p class="mt-2 text-gray-600">[What the user does. Make it sound effortless.]</p>
    </li>
    <!-- … steps 2 and 3 … -->
  </ol>
</section>

4.6 Features grid

<section id="features" class="mx-auto max-w-6xl px-6 py-20" aria-labelledby="features-h">
  <h2 id="features-h" class="text-center text-3xl font-bold tracking-tight text-gray-900">
    [Everything you need to {outcome}]
  </h2>
  <div class="mt-12 grid gap-8 sm:grid-cols-2 lg:grid-cols-3">
    <div class="flex gap-4">
      <svg class="h-6 w-6 flex-none text-indigo-600" aria-hidden="true" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M5 13l4 4L19 7"/></svg>
      <div>
        <h3 class="font-semibold text-gray-900">[Feature]</h3>
        <p class="mt-1 text-sm text-gray-600">[One-line benefit.]</p>
      </div>
    </div>
    <!-- … repeat 5–8× … -->
  </div>
</section>

4.7 Pricing (self-serve)

For tier strategy/anchoring, see pricing-optimization; for live Stripe checkout, stripe-billing.

<section id="pricing" class="mx-auto max-w-5xl px-6 py-20" aria-labelledby="pricing-h">
  <h2 id="pricing-h" class="text-center text-3xl font-bold tracking-tight text-gray-900">Simple, transparent pricing</h2>
  <div class="mt-12 grid gap-8 lg:grid-cols-3">
    <!-- Standard plan -->
    <div class="rounded-3xl border border-gray-200 p-8">
      <h3 class="font-semibold text-gray-900">Starter</h3>
      <p class="mt-4"><span class="text-4xl font-bold text-gray-900">$X</span><span class="text-gray-500">/mo</span></p>
      <ul class="mt-6 space-y-3 text-sm text-gray-600">
        <li>✓ [Feature]</li><li>✓ [Feature]</li>
      </ul>
      <a href="#cta" class="mt-8 block rounded-lg border border-indigo-600 px-4 py-2.5 text-center text-sm font-semibold text-indigo-600 hover:bg-indigo-50">Choose Starter</a>
    </div>
    <!-- Recommended plan — visually emphasized -->
    <div class="relative rounded-3xl bg-gray-900 p-8 text-white ring-2 ring-indigo-500">
      <span class="absolute -top-3 left-1/2 -translate-x-1/2 rounded-full bg-indigo-500 px-3 py-1 text-xs font-semibold">Most popular</span>
      <h3 class="font-semibold">Pro</h3>
      <p class="mt-4"><span class="text-4xl font-bold">$Y</span><span class="text-gray-400">/mo</span></p>
      <ul class="mt-6 space-y-3 text-sm text-gray-300">
        <li>✓ Everything in Starter</li><li>✓ [Feature]</li><li>✓ [Feature]</li>
      </ul>
      <a href="#cta" class="mt-8 block rounded-lg bg-indigo-500 px-4 py-2.5 text-center text-sm font-semibold text-white hover:bg-indigo-400">Choose Pro</a>
    </div>
    <!-- Enterprise -->
    <div class="rounded-3xl border border-gray-200 p-8">
      <h3 class="font-semibold text-gray-900">Enterprise</h3>
      <p class="mt-4 text-2xl font-bold text-gray-900">Custom</p>
      <ul class="mt-6 space-y-3 text-sm text-gray-600"><li>✓ SSO/SAML</li><li>✓ Dedicated support</li></ul>
      <a href="#cta" class="mt-8 block rounded-lg border border-gray-300 px-4 py-2.5 text-center text-sm font-semibold text-gray-900 hover:bg-gray-50">Contact sales</a>
    </div>
  </div>
</section>

4.8 FAQ accordion (native <details>, no JS)

Uses native <details>/<summary> so it works without JavaScript and is keyboard-accessible by default. For JSON-LD, see §6.

<section id="faq" class="mx-auto max-w-3xl px-6 py-20" aria-labelledby="faq-h">
  <h2 id="faq-h" class="text-center text-3xl font-bold tracking-tight text-gray-900">Frequently asked questions</h2>
  <div class="mt-10 divide-y divide-gray-200">
    <details class="group py-5">
      <summary class="flex cursor-pointer list-none items-center justify-between font-medium text-gray-900">
        [Real objection phrased as a question, e.g. "Do I need a credit card to start?"]
        <span class="ml-4 transition group-open:rotate-180" aria-hidden="true">▾</span>
      </summary>
      <p class="mt-3 text-gray-600">[Answer the question directly in the first sentence, then add detail.]</p>
    </details>
    <!-- … 5–8 items … -->
  </div>
</section>

4.9 Final CTA

<section id="cta" class="bg-indigo-600">
  <div class="mx-auto max-w-3xl px-6 py-20 text-center">
    <h2 class="text-3xl font-bold tracking-tight text-white sm:text-4xl">[Restate the core value proposition]</h2>
    <p class="mt-4 text-lg text-indigo-100">[Risk reversal: "No card required. Cancel anytime." / "30-day money-back guarantee."]</p>
    <a href="[signup-url]"
       class="mt-8 inline-block rounded-lg bg-white px-6 py-3 text-base font-semibold text-indigo-600 shadow-sm hover:bg-indigo-50 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-white">
      [Start free — no card]  <!-- identical label to hero CTA -->
    </a>
  </div>
</section>

4.10 Mobile nav (progressive enhancement)

<details> gives a working hamburger menu with zero JS; enhance with a framework's state if you have one.

<details class="md:hidden">
  <summary class="list-none cursor-pointer p-2" aria-label="Open menu">
    <svg class="h-6 w-6" aria-hidden="true" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M4 6h16M4 12h16M4 18h16"/></svg>
  </summary>
  <nav class="mt-2 flex flex-col gap-2 rounded-lg border border-gray-200 bg-white p-4 shadow-lg" aria-label="Mobile">
    <a href="#features" class="py-1 text-gray-700">Features</a>
    <a href="#pricing" class="py-1 text-gray-700">Pricing</a>
    <a href="#faq" class="py-1 text-gray-700">FAQ</a>
    <a href="#cta" class="mt-2 rounded-lg bg-indigo-600 px-4 py-2 text-center font-semibold text-white">Start free</a>
  </nav>
</details>

4.11 <head> — metadata, Open Graph, social cards

Critical for shareability and click-through; do this on every landing page.

<title>[Outcome-led title, 50–60 chars] — [Brand]</title>
<meta name="description" content="[Compelling 150–160 char summary that matches the H1 promise]" />
<link rel="canonical" href="https://example.com/page" />
<!-- Open Graph (LinkedIn, Slack, FB) -->
<meta property="og:title" content="[Same as title or sharper]" />
<meta property="og:description" content="[~2 lines]" />
<meta property="og:image" content="https://example.com/og.png" /> <!-- 1200×630, < 1MB -->
<meta property="og:type" content="website" />
<meta property="og:url" content="https://example.com/page" />
<!-- Twitter/X -->
<meta name="twitter:card" content="summary_large_image" />
<meta name="viewport" content="width=device-width, initial-scale=1" />

---

5. Anti-fabrication safety rules (non-negotiable)

A landing page is a public marketing claim; fake proof is a legal and trust liability (false advertising, FTC-style endorsement rules in the US, comparable EU consumer law).

• Logos, testimonials, names, photos, ratings, customer counts, and performance metrics MUST be real and supplied/approved by the user. Never invent a brand logo, fabricate a quote, attach a stock photo to a made-up person, or write "Trusted by 10,000+ teams" / "40% faster" without a real source.
• If the user has no proof assets yet, do one of:
  1. Delete the proof section entirely (a missing section beats a fake one), or
  2. Insert an obvious placeholder the user must replace, clearly marked — e.g. [PLACEHOLDER: replace with real customer logo], [TESTIMONIAL — get written permission before publishing], [METRIC — cite real source]. Never let a placeholder read as a finished claim.
• Comparison/superlative claims ("the fastest", "#1", "best") need substantiation — flag them for the user to verify or soften to defensible language.
• Regulated claims (health outcomes, financial returns, "secure"/"compliant", "GDPR/SOC 2/HIPAA") must reflect the user's actual certifications. Don't print a SOC 2 badge they don't hold. Flag for legal review when in doubt.
• Star ratings/review counts must match the real profile and ideally link to the source (G2, Trustpilot, App Store).

State explicitly in your handoff which items are placeholders awaiting real assets.

---

6. SEO / structured data / AI-search

• FAQPage JSON-LD — read this before adding it. As of May 7, 2026, Google no longer shows FAQ rich results in Search for any site (the appearance, the rich-results report, and Rich Results Test support were retired in mid-2026; from Aug 2023 it had already been limited to authoritative government/health sites). So do not promise the user FAQ rich snippets. FAQPage is still a valid schema.org type, causes no harm, and still gets cited disproportionately by AI answer engines (ChatGPT, Perplexity, Google AI Overviews). Keep it for AI-search/AEO value, not for Google rich results. Verify current status at https://developers.google.com/search/docs/appearance/structured-data/faqpage. Mark up only Q&As that genuinely appear visibly on the page:

<script type="application/ld+json">
{
  "@context": "https://schema.org",
  "@type": "FAQPage",
  "mainEntity": [
    {
      "@type": "Question",
      "name": "Do I need a credit card to start?",
      "acceptedAnswer": { "@type": "Answer", "text": "No. The free plan needs no card; add one only when you upgrade." }
    },
    {
      "@type": "Question",
      "name": "Can I cancel anytime?",
      "acceptedAnswer": { "@type": "Answer", "text": "Yes — cancel from your dashboard with one click; you keep access through the end of the billing period." }
    }
  ]
}
</script>

Rules: questions/answers in JSON-LD must match the visible page text; don't stuff promotional copy or links into answers; one FAQPage per page. Add Organization + Product/SoftwareApplication schema where it fits.

• On-page SEO basics: one keyword-aligned <h1>; descriptive <title> (50–60 chars) and meta description (150–160); canonical; semantic headings; descriptive alt text; fast LCP (rank factor). Deeper SEO/AI-search optimization → seo-geo.

---

7. Conversion principles (the why behind the template)

Layout and copy decisions should trace to a principle, not taste. To iterate conversion on a live page, use page-cro.

1. One page, one goal. Every element either drives the primary action or builds trust toward it. Competing CTAs split intent and lower conversion — remove or subordinate secondary asks.
2. Message match. The H1 must echo the promise of whatever the visitor clicked (ad headline, email subject, search query). A mismatch spikes bounce regardless of page quality.
3. Clarity beats persuasion. Confused visitors leave. Plain language, concrete nouns, scannable structure. Clever wordplay that delays comprehension costs conversions.
4. Visual hierarchy guides the eye. Size, weight, color, and whitespace rank importance: H1 → subhead → CTA. The primary CTA should be the highest-contrast element in its viewport. Generous whitespace raises comprehension and perceived value.
5. Proof next to claims. Put a testimonial/metric/logo adjacent to the boldest claim it supports — proof at the moment of doubt, not quarantined in one section.
6. Reduce friction at the ask. Every form field, every required decision, every "create account" lowers completion. Default to the smallest commitment (email-only, "no card"), defer the rest.
7. Risk reversal. Money-back guarantee, free trial, "cancel anytime", "no card required" — shift perceived risk off the visitor, especially at the final CTA.
8. Specificity sells. "Cuts reporting time 40%" beats "save time"; "Trusted by 1,200 dev teams" beats "trusted by many" — only if real (§5).
9. Single primary CTA, repeated. Same action, same wording, surfaced ~every 1.5 viewports so a sold visitor never has to scroll back.
10. Direction of attention. Faces/eyes in images looking toward the CTA, arrows, and contrasting buttons steer the gaze where you want the click.
11. Speed is conversion. Each extra second of LCP measurably drops conversion; a fast page is a conversion feature, not just an SEO one (§3).
12. Mobile is the default. Most landing traffic is mobile — if the mobile hero doesn't convert, the page doesn't convert.

---

8. Pre-ship conversion QA checklist

Run before declaring the page done.

Message & copy

• H1 states what + for whom + payoff; readable in ~2s
• H1 message-matches the intended traffic source (ad/email/search)
• Benefits lead over features in hero/solution; features grid carries the spec detail
• Subhead clarifies the "how" or proof

CTA

• Exactly one primary action; secondary CTAs visually subordinate
• Primary CTA wording identical at hero and final CTA
• CTA repeats roughly every 1.5 viewports
• Button labels name value/next step (no bare "Submit")

Proof (and honesty)

• Every logo/quote/name/photo/metric/rating is REAL and approved, or clearly a marked placeholder (§5)
• No fabricated superlatives or unsubstantiated comparison claims
• Proof sits adjacent to the claims it supports
• Regulated/compliance badges reflect actual certifications

Layout & responsive

• Mobile (360×640) hero shows value + CTA above the fold
• Layout verified at 360 / 768 / 1440 widths; no overflow or tap-target crowding (≥44px)
• Primary CTA is the highest-contrast element in its viewport

Accessibility (WCAG 2.2 AA)

• One <h1>, logical heading order
• Meaningful images have alt; decorative use alt=""
• Visible focus states; full keyboard operability; inputs labeled
• Text contrast ≥ 4.5:1; prefers-reduced-motion respected

Performance (Core Web Vitals)

• LCP < 2.5s, INP < 200ms, CLS < 0.1 (PageSpeed Insights)
• Hero image has explicit dimensions + fetchpriority="high", not lazy; below-fold images lazy
• Modern image formats (AVIF/WebP) + srcset; fonts display: swap

Forms

• Minimum necessary fields; inline validation; spam protection; clear success state

SEO / structured data

• <title>, meta description, canonical, Open Graph + Twitter card, 1200×630 OG image
• FAQPage JSON-LD matches visible Q&A (for AI-search, not Google rich results — §6)

Analytics & legal

• Conversion event fires on the primary action (form submit / button click) in GA4/PostHog/Plausible
• Cookie/consent banner present where required (GDPR/ePrivacy); analytics respects consent
• Footer has privacy policy, terms, and required legal/company info
• Define the A/B test hypothesis for the riskiest element (headline / CTA / hero) and hand to ab-testing

---

9. Build workflow (how to actually run this skill)

1. Run intake (§0); state assumptions for anything the user didn't give.
2. Pick the section set for that traffic temperature / offer (§1).
3. Draft copy first (§2) — H1, subhead, CTA, benefits, FAQ — then place it into the templates (§4).
4. Wire proof with the user's real assets, or insert marked placeholders + flag them (§5).
5. Add <head> metadata + FAQPage JSON-LD (§4.11, §6).
6. Run the QA checklist (§8); fix every failing box.
7. Hand off: name the placeholders awaiting real assets, the A/B hypothesis for ab-testing, and any compliance items needing legal review.