cro-landing-page

star 12

Generates conversion-optimized landing pages using a 9-section framework. Produces mobile-first, fast-loading pages with strategic CTA placement and social proof.

adi0900 By adi0900 schedule Updated 2/10/2026

name: cro-landing-page description: > Generates conversion-optimized landing pages using a 9-section framework. Produces mobile-first, fast-loading pages with strategic CTA placement and social proof. version: 2.0 author: Motion_Viz tags: [cro, landing-page, conversion, web]

CRO Landing Page Builder

Purpose

Build landing pages that convert visitors into leads/customers. INPUT: Product description, target audience, value proposition. OUTPUT: Complete landing page with 9 CRO-optimized sections.

When to Use This Skill

  • When building a new landing page
  • When redesigning an existing page for better conversions
  • When a client says "I need a page that converts"

Rules (Non-Negotiable)

  1. Mobile-first: Design for phone screens, then scale up
  2. One primary CTA per viewport (no competing actions)
  3. Social proof must appear before the fold ends
  4. Page load target: under 2 seconds
  5. Maximum 3 font weights across entire page
  6. Every section must have a clear purpose (no filler)
  7. CTA button text must be action-specific, not generic BAD: "Submit" "Click Here" "Learn More" GOOD: "Start Free Trial" "Get My Audit" "Book a Call"

Architecture (9-Section Framework)

Section 1: Hero

  • Headline: 8 words max. States the transformation
  • Subheadline: 1 sentence. Who it's for + outcome
  • Primary CTA button
  • Social proof snippet (logos, stats, or testimonial)
  • Optional: Hero image/video (right side on desktop)

Section 2: Problem

  • 3 pain points the audience experiences
  • Use their language, not industry jargon
  • Create tension before the solution

Section 3: Solution

  • How your product/service solves the problems
  • 3 benefits (not features)
  • Each benefit: icon + headline + 1 sentence

Section 4: How It Works

  • 3-step process (numbered)
  • Each step: number + title + description
  • Makes the path to value feel simple

Section 5: Social Proof

  • Testimonials with name, role, company, photo
  • Metrics/results if available
  • Logos of recognizable clients

Section 6: Features (Detail)

  • Deeper feature breakdown for informed buyers
  • Feature cards with icons
  • Comparison table if competitors exist

Section 7: Pricing / Offer

  • Clear pricing tiers (if applicable)
  • Highlight recommended tier
  • What's included in each tier
  • Money-back guarantee or risk reversal

Section 8: FAQ

  • 5-7 questions. Address objections, not just info
  • Accordion format (expandable)
  • Last FAQ should address pricing/value

Section 9: Final CTA

  • Restate the transformation
  • Urgency or scarcity (if authentic)
  • Same primary CTA as hero
  • Secondary option (e.g., "Not ready? Join newsletter")

Checklist (AI Self-Verification)

  • All 9 sections present and in correct order
  • Mobile responsive (test at 375px width)
  • Primary CTA visible in every viewport
  • Social proof appears before the fold
  • No generic CTA text used
  • Page loads under 2 seconds (no unoptimized images)
  • Meta title and description generated
  • Open Graph tags included
Install via CLI
npx skills add https://github.com/adi0900/CmcS-Workflow --skill cro-landing-page
Repository Details
star Stars 12
call_split Forks 3
navigation Branch main
article Path SKILL.md
More from Creator