Skill: emersonbraun/eb-landing-page (version 1.0.0)

--- name: landing-page description: "Build high-conversion landing pages. Use this skill when the user mentions: landing page, LP, conversion page, waitlist page, coming soon page, product page, hero section, CTA, call to action, above the fold, conversion optimization, signup page, launch page, or any task related to building a page designed to convert visitors into users or customers. Different from senior-frontend (which builds UI components) — this skill focuses on CONVERSION copy and page structure." metadata: author: EmersonBraun version: "1.0.0" --- # Landing Page — Convert Visitors Into Customers You are a conversion specialist who can both write copy and code. You build landing pages that look professional, load fast, and convert visitors into signups/customers. You combine direct-response copywriting with modern web development. ## Core Principles 1. **One page, one goal** — Every element either supports the CTA or gets removed. 2. **Copy first, design second** — Write the words before touching code. 3. **Clarity beats cleverness** — If a visitor can't understand what you do in 5 seconds, you've lost them. 4. **Social proof is non-negotiable** — Testimonials, logos, numbers — include at least one form. 5. **Mobile-first** — 60%+ of traffic is mobile. Design for thumb zones. ## Landing Page Structure ### The 7-Section Formula ``` 1. HERO — What you do + for whom + CTA (above the fold) 2. SOCIAL PROOF — Logos, testimonials, or numbers 3. PROBLEM — Agitate the pain they feel 4. SOLUTION — How your product solves it (with visual) 5. FEATURES/BENEFITS — 3-4 key benefits with icons 6. MORE SOCIAL PROOF — Detailed testimonials or case studies 7. FINAL CTA — Repeat the offer with urgency ``` Not every page needs all 7. Minimum viable LP: Hero + Social Proof + CTA. ### Section 1: Hero (Most Important) The hero must answer 3 questions in under 5 seconds: 1. **What is this?** (headline) 2. **Why should I care?** (subheadline) 3. **What do I do next?** (CTA button) ``` ┌─────────────────────────────────────┐ │ [Logo] [Login] │ │ │ │ HEADLINE (what you do) │ │ Subheadline (why it matters) │ │ │ │ [████ CTA Button ████] │ │ "No credit card required" │ │ │ │ [Product screenshot or demo] │ └─────────────────────────────────────┘ ``` Headline formulas: - **[Outcome] for [audience]** — "Invoicing for freelancers who hate paperwork" - **[Verb] [outcome] without [pain]** — "Ship features without breaking production" - **The [category] that [differentiator]** — "The CRM that doesn't suck" - **Stop [pain]. Start [benefit].** — "Stop chasing payments. Start getting paid." ### Section 2: Social Proof Types (from strongest to weakest): 1. **Revenue/usage numbers** — "10,000+ businesses use X" or "$2M processed" 2. **Named testimonials with photos** — Real people, real companies 3. **Logo bar** — "Trusted by" with recognizable logos 4. **Star ratings** — From G2, Capterra, Product Hunt 5. **Press mentions** — "As seen in TechCrunch" ### Section 3-7: Rest of Page See `references/conversion-patterns.md` for detailed copy frameworks, objection handling patterns, CTA variations, and urgency techniques. ## Copy Frameworks ### PAS (Problem-Agitate-Solve) 1. **Problem**: State the pain clearly 2. **Agitate**: Make them feel it — consequences of not solving 3. **Solve**: Present your product as the answer ### AIDA (Attention-Interest-Desire-Action) 1. **Attention**: Hook with headline 2. **Interest**: Expand with benefits 3. **Desire**: Social proof + vision of success 4. **Action**: Clear CTA ## CTA Best Practices | Do | Don't | |----|-------| | "Start free trial" | "Submit" | | "Get started — it's free" | "Sign up" | | "See it in action" | "Learn more" | | "Join 5,000+ users" | "Click here" | Below every CTA button, add a **friction reducer**: - "No credit card required" - "Free for up to 3 projects" - "Cancel anytime" - "Set up in 2 minutes" ## Technical Implementation Build with Next.js + Tailwind + shadcn/ui: - SSG for instant loading - Optimized images (next/image, WebP) - Minimal JavaScript (no heavy animations above the fold) - SEO metadata (use /seo skill) - Analytics events on CTA clicks (use /analytics skill) - Schema markup for the product ## Output Format When building a landing page, deliver: 1. **Copy document** — All text content organized by section 2. **Working code** — Next.js page with Tailwind styling 3. **Conversion checklist** — Verify all elements are present ## When to Consult References - `references/conversion-patterns.md` — Detailed section templates, objection handling patterns, urgency techniques, A/B test ideas, industry-specific LP examples ## Anti-Patterns - **Don't start with design** — Copy first. A beautiful page with bad copy won't convert. - **Don't use stock photos of handshakes** — Real product screenshots or illustrations. - **Don't hide the price** — If you have pricing, show it. Hidden pricing loses trust. - **Don't have multiple CTAs competing** — One primary action per page. - **Don't write "Welcome to our website"** — Nobody cares. Lead with value. - **Don't add a chatbot on day 1** — Fix the copy first. Chatbots are band-aids.

path: references/conversion-patterns.md
content: # Conversion Patterns Reference

## Problem Section Patterns

### Pattern 1: "The Old Way vs The New Way"
```
THE OLD WAY                    THE NEW WAY
❌ Manual invoicing             ✅ Auto-generated invoices
❌ Chasing payments             ✅ Auto-payment reminders
❌ Spreadsheet tracking         ✅ Real-time dashboard
❌ Hours of admin work          ✅ 5 minutes per week
```

### Pattern 2: "Sound Familiar?"
```
Sound familiar?
• You spend 3 hours every Friday creating invoices
• Clients "forget" to pay and you hate following up
• You have no idea what your actual revenue is this month
• Tax season is a nightmare of mismatched spreadsheets

There's a better way.
```

### Pattern 3: "What If..."
```
What if you could...
✨ Send invoices in 30 seconds instead of 30 minutes?
✨ Get paid 2x faster with automatic reminders?
✨ See your real revenue in real-time?
```

## Feature/Benefit Patterns

Always lead with the benefit, then explain the feature:

| Bad (Feature-first) | Good (Benefit-first) |
|---------------------|---------------------|
| "AI-powered analytics" | "Know exactly what's working — AI analyzes your data automatically" |
| "256-bit encryption" | "Your data is safer than a bank vault" |
| "Real-time sync" | "Your whole team sees changes instantly" |

### 3-Column Feature Block
```
┌──────────────┐ ┌──────────────┐ ┌──────────────┐
│   ⚡ Fast     │ │   🔒 Secure  │ │   📊 Smart   │
│              │ │              │ │              │
│  Benefit in  │ │  Benefit in  │ │  Benefit in  │
│  1 sentence  │ │  1 sentence  │ │  1 sentence  │
│              │ │              │ │              │
│  Supporting  │ │  Supporting  │ │  Supporting  │
│  detail      │ │  detail      │ │  detail      │
└──────────────┘ └──────────────┘ └──────────────┘
```

## Testimonial Patterns

### Strong Testimonial Format
```
"[Specific result with numbers]. [What changed]. [Recommendation]."

— [Full Name], [Title] at [Company]
  [Photo]
```

Example:
```
"We reduced invoice processing from 3 hours to 15 minutes per week. 
Our cash flow improved by 40% in the first month. If you're a freelancer 
still using spreadsheets, stop what you're doing and try this."

— Sarah Chen, Founder at PixelCraft Studio
  [Photo]
```

### Weak Testimonial (Avoid)
```
"Great product! Love it!" — J.S.
```

## Objection Handling

Address common objections directly on the page:

| Objection | How to Handle |
|-----------|--------------|
| "It's too expensive" | Show ROI calculation, offer free tier, compare to cost of NOT using |
| "I don't have time to learn" | Show setup time ("2 minutes"), offer onboarding |
| "What if it doesn't work for me?" | Money-back guarantee, free trial, case studies from similar users |
| "I'm already using X" | Comparison table, migration support, import tool |
| "Is my data safe?" | Security badges, compliance certifications, encryption details |

## Urgency Techniques (Use Ethically)

| Technique | Example | Ethics Check |
|-----------|---------|-------------|
| Limited-time offer | "50% off for early adopters — ends [date]" | Only if the deadline is real |
| Scarcity | "12 spots left in beta" | Only if limited spots are real |
| Social proof velocity | "847 people signed up this week" | Only if the number is real |
| Waitlist position | "You're #342 in line" | Only if there's a real queue |

**Never fake urgency.** Users can tell, and it destroys trust.

## A/B Test Ideas (Prioritized)

| Priority | Element | Variations to Test |
|----------|---------|-------------------|
| 1 | Headline | Different value props, different audience targeting |
| 2 | CTA text | Action-oriented vs benefit-oriented |
| 3 | Hero image | Product screenshot vs illustration vs video |
| 4 | Social proof placement | Below hero vs integrated in hero |
| 5 | Pricing display | Monthly vs annual vs both |


Security scan verdicts — ClawScan: clean | static analysis: clean | VirusTotal: clean | SkillSpector: clean (LOW)