SKILL.md
$27
Landing Page Structure (5-Step Flow)
Step
Purpose
Elements
1. Stop the scroll
Capture attention in ~2.6 seconds
Headline, subheadline, hero image or video
2. Earn trust
Social proof before the ask
Logos, testimonials, ratings, customer count
3. Explain value
Benefits, features, use cases
Clear copy; who it's for, what it does
4. Remove doubt
Objection handling
FAQ, guarantees, comparison
5. Make the ask
Single primary CTA
One clear action; repeat at logical points
Every element should serve one of these five functions. Pages with multiple competing offers get ~266% fewer leads.
Headline Formula
[Who it's for] + [Specific outcome] + [Time/qualifier]
- Avoid: Abstract promises ("Unlock your potential," "Transform your business")
- Prefer: Concrete ("Cut invoice processing by 70%—without new software")
CTA Best Practices
- One primary CTA: No competing actions; create a "one-way street" toward conversion
- Above the fold on mobile: Thumb-reachable; ~65%+ traffic is mobile
- Value-focused copy: "Start Free Trial" not "Submit"
- Pair with trust signals: Customer count, logos, or stats next to the button
- Remove or minimize navigation: Can increase conversion 2–28%
Programmatic Landing Pages (Scale)
When you need many landing pages (e.g., city-specific, product-specific, integration-specific), use programmatic-seo: one template + data = hundreds or thousands of LPs. Apply landing page structure (5-step flow, CTA, trust) to the template; see template-page-generator for template design. Example: "[Product] for [City]" LPs with local data; "[App A] + [App B]" integration signup pages.
Page Types
Type
Use
CTA Destination
Click-through
Warm audience before sending to offer; best for SaaS, subscriptions
pricing-page, products-page, signup
Lead capture
Collect email for nurture; forms 5 fields or fewer (longer forms cause ~81% abandonment)
newsletter-signup, contact-page
Product-focused
Deep-dive features and benefits; product launch
products-page, features-page
Comparison
X vs Y; competitor brand keyword ads; commercial intent
alternatives-page, features-page, pricing-page
Use cases / Solutions
For integrated products hard to split into tools
features-page, services-page
Free tools
Standalone utilities; lead gen; same ICP; excerpt from product
tools-page-generator; tool page as LP when gated
Bridge/bonus
Extra incentive to purchase through your link
pricing-page, products-page
Webinar/event
Event registration; collect signups before live
resources-page (webinar as resource)
Landing Page ↔ Page Types (Content & Flow)
Pull content from (step 2–4):
- customer-stories-page-generator: Testimonials, case studies for social proof; Challenge→Solution→Results snippets
- faq-page-generator: Objection-handling FAQ section; reuse conversion-related Q&A
- features-page-generator: Benefit-first feature copy for "Explain value" step
- resources-page-generator: Lead magnet (ebook, template) as exchange for email; webinar as resource
CTA sends to:
- pricing-page-generator: Click-through LP → pricing; signup, trial
- products-page-generator: Product LP → product detail or catalog
- services-page-generator: Service LP → contact, quote, booking
- contact-page-generator: Lead capture LP → contact form; B2B demo request
- affiliate-page-generator, creator-program: Partner signup = landing page type
Internal linking:
- Link LP to homepage (brand anchor); about-page (trust); privacy-page (form compliance)
- Avoid orphan LPs: ensure at least one internal link from sitemap, nav, or campaign hub
Performance and Design
- Load time: Under 2.5 seconds; each extra second can cost ~7% conversion
- Mobile-first: Responsive; CTA visible without scrolling
- Visuals: Hero image or video can improve conversion up to 80%
- Frontend aesthetics: For distinctive typography, motion, spatial composition, backgrounds—see brand-visual-generator Frontend Aesthetics
- Disclosure: FTC-compliant affiliate/paid disclosure when applicable
Pre-Delivery Checklist
Before shipping a landing page, verify:
Category
Check
Visual
No emojis as icons (use SVG); icons from consistent set (Heroicons/Lucide); hover states don't cause layout shift
Interaction
All clickable elements have cursor-pointer; hover provides clear feedback; transitions 150–300ms
Accessibility
Images have alt text; form inputs have labels; color not sole indicator; prefers-reduced-motion respected
Layout
No horizontal scroll on mobile; content not hidden behind fixed nav; responsive at 375px, 768px, 1024px
Performance
Load time under 2.5s; LCP optimized; images use WebP/lazy loading where appropriate
Images
See image-optimization for alt, format, responsive, lazy loading
Output Format
- Headline and subheadline
- Structure (5-step flow sections)
- Trust signals placement
- CTA copy and placement
- Objection handling (FAQ, guarantees)
- Internal links (destination pages)
- SEO metadata (if page is indexed)
Related Skills
- hero-generator: Hero section (step 1)
- grid, list: Content layout below hero; sections, features, testimonials
- cta-generator: CTA button design and placement
- image-optimization: Alt, WebP, LCP, responsive, lazy loading
- pricing-page-generator: Click-through LP destination; signup CTA
- faq-page-generator: Objection-handling FAQ section
- howto-section-generator: How-to step section (e.g. setup flow) before FAQ/CTA
- comparison-table-generator: Competitor / traditional-vs-modern comparison table section; message match with ads
- homepage-generator: Multi-purpose home vs single-goal landing; similar structure
- paid-ads-strategy: Ad-to-page alignment; when to use paid ads
- alternatives-page-generator: Competitor brand keyword ads → comparison LP (not blog)
- programmatic-seo: Scale landing pages via template + data
- template-page-generator: Template structure for programmatic LPs
- title-tag, meta-description, page-metadata: Landing page metadata