Landing page

Skill nicepkg/ai-workflow/workflows/marketing-pro-workflow/.claude/skills/landing-page

🚀 170+ pre-built skills for Claude Code, Cursor, Codex & 14+ AI tools. Stop re-teaching your AI the same things. One command → instant domain expertise. Marketing, SEO, Trading, Video, PM workflows included.

Install

npx -y skills add nicepkg/ai-workflow --skill landing-page

Assembled from the repository path, not quoted from the project. Check it against their README if it does not work.

What its author says it does

Copied from the file, not written here

Create high-converting landing pages with persuasive copy, clear CTAs, social proof, and optimized structure. Use when building sales pages, product pages, lead capture pages, or conversion-focused pages.

SKILL.md

6.5 KB, ~1.5k tokens by cl100k_base, as published. Nobody here has run it

Landing Page Skill

Instructions

When creating landing pages:

1. Page Structure

┌─────────────────────────────────────┐
│           HERO SECTION              │
│  Headline + Subheadline + CTA       │
│           + Hero Image              │
├─────────────────────────────────────┤
│         SOCIAL PROOF BAR            │
│    Logos / "As seen in" / Stats     │
├─────────────────────────────────────┤
│         PROBLEM SECTION             │
│     Pain points your audience has   │
├─────────────────────────────────────┤
│         SOLUTION SECTION            │
│    How your product solves it       │
├─────────────────────────────────────┤
│         FEATURES/BENEFITS           │
│    3-6 key features with benefits   │
├─────────────────────────────────────┤
│         HOW IT WORKS                │
│       3-step process                │
├─────────────────────────────────────┤
│         TESTIMONIALS                │
│    Customer quotes + photos         │
├─────────────────────────────────────┤
│         PRICING                     │
│    Clear pricing options            │
├─────────────────────────────────────┤
│            FAQ                      │
│    Objection handling               │
├─────────────────────────────────────┤
│         FINAL CTA                   │
│    Last push with urgency           │
├─────────────────────────────────────┤
│           FOOTER                    │
│    Trust badges, links, legal       │
└─────────────────────────────────────┘

2. Hero Section

Headline Formulas:

[Achieve outcome] without [pain point]
The [adjective] way to [desired result]
[Product] that [key benefit]
Stop [bad thing]. Start [good thing].
[Number] [people] use [Product] to [outcome]

Subheadline:

Expand on the headline
Add specificity
Include secondary benefit

Example:

<section class="hero">
  <h1>Build WordPress Themes 10x Faster</h1>
  <p class="subheadline">
    The developer toolkit that eliminates repetitive coding
    so you can focus on what matters — shipping great themes.
  </p>
  <a href="#" class="cta-button">Start Free Trial</a>
  <p class="microcopy">No credit card required • 14-day trial</p>
</section>

3. Social Proof Types

Logo Bar:

<section class="social-proof">
  <p>Trusted by 10,000+ developers at</p>
  <div class="logos">
    <img src="logo1.svg" alt="Company 1">
    <img src="logo2.svg" alt="Company 2">
    ...
  </div>
</section>

Stats Bar:

<div class="stats">
  <div class="stat">
    <span class="number">50,000+</span>
    <span class="label">Active Users</span>
  </div>
  <div class="stat">
    <span class="number">4.9/5</span>
    <span class="label">Average Rating</span>
  </div>
  <div class="stat">
    <span class="number">99.9%</span>
    <span class="label">Uptime</span>
  </div>
</div>

Testimonials:

<blockquote class="testimonial">
  <p>"Quote that highlights specific results..."</p>
  <footer>
    <img src="avatar.jpg" alt="Name">
    <cite>
      <strong>Name</strong>
      <span>Title, Company</span>
    </cite>
  </footer>
</blockquote>

4. Features Section

Format: Feature → Benefit

<div class="feature">
  <div class="feature-icon">🚀</div>
  <h3>One-Click Deployment</h3>
  <p>Deploy to production in seconds, not hours.
     Spend more time building, less time configuring.</p>
</div>

5. Pricing Section

<div class="pricing-card popular">
  <span class="badge">Most Popular</span>
  <h3>Pro Plan</h3>
  <div class="price">
    <span class="currency">$</span>
    <span class="amount">49</span>
    <span class="period">/month</span>
  </div>
  <ul class="features">
    <li>✓ Feature 1</li>
    <li>✓ Feature 2</li>
    <li>✓ Feature 3</li>
  </ul>
  <a href="#" class="cta-button">Get Started</a>
  <p class="guarantee">30-day money-back guarantee</p>
</div>

6. CTA Best Practices

Button Copy:

Start Free Trial
Get Started Now
Download Free Guide
Join 10,000+ Users
Claim Your Discount

Supporting Elements:

Risk reducers (money-back guarantee)
Urgency (limited time)
Scarcity (only X left)
Social proof (join X others)

7. FAQ Section

<details class="faq-item">
  <summary>Common objection as a question?</summary>
  <p>Answer that overcomes the objection with
     specifics and reassurance.</p>
</details>

Common FAQ Topics:

Pricing/refunds
Technical requirements
Support availability
Comparison to alternatives
Getting started process

8. Conversion Optimization

Above the Fold:

Clear value proposition
Primary CTA visible
Trust indicator

Throughout Page:

Multiple CTAs (same action)
Progressive disclosure
Visual hierarchy
Mobile optimization

Reduce Friction:

Minimal form fields
Clear next steps
Fast page load
No distractions

9. Copywriting Tips

Power Words:

Free, New, Proven, Easy
Instant, Guaranteed, Limited
Exclusive, Premium, Ultimate

Avoid:

Jargon and buzzwords
Vague claims
Walls of text
Multiple CTAs