mcpbeat

Landing Page

nicepkg/landing-page

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.

2k tokens
context cost
the whole folder, loaded on every use
1
files
instructions only
0
copies elsewhere
how many repositories repackaged it
275
stars on the repo
on the repository, not the skill itself

Install

one command, takes just this skill from the repository
npx skills add https://github.com/nicepkg/ai-workflow --skill landing-page

The instruction itself

12 sections, as written by the author

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

10. Landing Page Checklist

  • [ ] Clear, benefit-focused headline
  • [ ] Single, focused CTA
  • [ ] Social proof present
  • [ ] Mobile responsive
  • [ ] Fast loading (<3s)
  • [ ] Trust signals visible
  • [ ] FAQ addresses objections
  • [ ] Analytics tracking set up

How to use it

Copy the folder

Take nicepkg/landing-page from the repository into ~/.claude/skills for personal use, or into .claude/skills inside a project.

Check the name does not clash

The agent identifies a skill by the name field in its header. Two skills with the same name cannot sit side by side — one of them will be ignored.