← ClaudeAtlas

landing-page-generatorlisted

Use when asked to create a landing page, marketing page, homepage, lead-capture page, campaign page, or conversion-optimised web page. Outputs complete Next.js/React (TSX) + Tailwind CSS components with proven copy frameworks (PAS/AIDA/BAB), SEO meta tags, and Core Web Vitals targets. Triggers on "create a landing page", "marketing page", "homepage", "lead gen page", or "conversion page".
tmj-90/gaffer · ★ 0 · Web & Frontend · score 69
Install: claude install-skill tmj-90/gaffer
# Generate high-converting landing pages Not lorem ipsum — actual copy and structure that converts. Output complete, ready-to-ship TSX components with Tailwind. **Performance targets:** LCP ≤ 2.5s · CLS < 0.1 · INP < 200ms ## Copy frameworks Pick one per page — don't mix: | Framework | Structure | Best for | |-----------|-----------|---------| | **PAS** | Problem → Agitate → Solution | Pain-aware traffic; problem-first messaging | | **AIDA** | Attention → Interest → Desire → Action | Cold traffic; brand-new product | | **BAB** | Before → After → Bridge | Transformation products; outcome-led | ## Section blueprint (in order) 1. **Hero** — headline (value prop in ≤ 10 words) + subheadline (1 sentence expanding on the outcome) + primary CTA + social proof signal (count or logo strip). 2. **Problem / Pain** — articulate the cost of the status quo in the user's own language. 3. **Solution / Features** — 3–6 benefits (not feature names); each benefit has a one-line explanation. 4. **Social proof** — testimonials with name, role, company; star ratings if applicable; logos. 5. **Pricing** (if applicable) — 2–4 tiers; highlight the recommended one; FAQ accordion. 6. **FAQ** — answer the 5 objections that would stop a user converting; include FAQ schema markup. 7. **Footer CTA** — repeat the primary CTA; reduced friction (email-only, not full form). ## Steps 1. **Gather inputs.** Before writing: product name, tagline, primary audience, key pain point, main benefit, primary CTA