Landing Craft

--- name: landing-craft description: Build conversion-optimized landing pages with CRO frameworks (Conversion Research, LIFT Model), scroll effects, A/B testing, personalization, form optimization, and Core Web Vitals (INP, LCP, CLS). Use when user asks to create a landing page, sales page, lead generation page, or improve conversion rates. Do NOT use for full product design (use component-forge), animation-specific (use motion-craft), or brand identity (use design). triggers: - "landing page" - "sales page" - "conversion" - "CRO" - "A/B test" - "conversion rate" - "lead generation" - "signup page" - "marketing page" - "pricing page" - "LIFT model" negatives: - "full product design" - "component library" - "animations only" - "brand identity" - "dashboard" - "app UI" license: MIT compatibility: opencode metadata: workflow: marketing audience: developers version: "4.0.0" author: shokunin

Landing Craft

Landing pages that convert. Based on Unbounce (44,000+ A/B tests), GoodUI, CXL Institute, and WiderFunnel LIFT Model.

Creative Variance Engine

Before writing code, select ONE combination based on the brief. This prevents every landing page from looking the same.

Vibe Archetypes (pick 1)

Layout Archetypes (pick 1)

Mobile override (universal): Any asymmetric layout above md: (768px) must collapse to single-column (w-full, px-4, py-8) on viewports below 768px.

Workflow

Step 1: Select creative archetype

Pick one vibe + layout from the Creative Variance Engine. Every page must feel distinct.

Step 2: Wireframe the sections

Block out all 10 sections (Hero through Final CTA). Each section answers: what does the visitor need to hear RIGHT NOW to move forward?

Step 3: Draft copy

Headline under 10 words. One CTA above fold. Social proof near top. Use PAS framework for problem section.

Step 4: Implement with mobile-first HTML/CSS

8px grid. clamp() for fluid typography. No centered hero text. Grain overlay (opacity 0.03-0.06).

Step 5: Optimize for Core Web Vitals

Preload hero image. Inline critical CSS. Lazy-load below-fold images. Target LCP < 2.5s, INP < 200ms.

Step 6: A/B test and iterate

Test highest-impact element first (headline). 95% significance. Min 1,000 visitors per variant.

The Structure

Hero: headline + sub + CTA (above the fold)
Social proof: logos, metrics, testimonials (~100px below hero)
Problem: framed for empathy, names the pain
Solution: 3 steps max, benefit-focused
Features: 3-6 items, each with one clear benefit
Testimonials: real people, specific results
Pricing: 3 tiers, middle is the offer
FAQ: answers top 5 objections
Final CTA: same ask, different context, near scroll bottom

Every section answers: what does the visitor need to hear RIGHT NOW to move to the next section?

Hero Rules (from Unbounce data)

1. Value in 3 seconds: headline must communicate core benefit. A/B test headline first - highest-impact element.
2. CTA visible without scroll: primary button above the fold. Above 600px vh.
3. One CTA: one primary action. Secondary links are text only.
4. Headline under 10 words: "Ship 3x faster with automated deployments" not "Welcome to DeployPro - the fastest way to ship code"
5. Never center text: Left-aligned text + right-aligned visual (Split Screen). Centered hero is the #1 AI clich-.
6. Supporting visual: product screenshot, illustration, or demo - never a generic stock photo.

Hero alt-layouts (not all center)

Design Palette

CRO Methodology

LIFT Model (WiderFunnel)

Evaluate every element against these six factors:

High-Impact Test Elements (in order of ROI)

Test one element at a time. 95% statistical significance. Min 1,000 visitors per variant.

Hero Architecture (Exact CSS)

.hero {
  min-height: 100dvh;
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: center;
  padding: 0 clamp(2rem, 5vw, 6rem);
  background: #080c1a;
}

.hero-text {
  max-width: 650px;
}

.hero-text h1 {
  font-family: 'Cabinet Grotesk', 'Geist', sans-serif;
  font-size: clamp(2.5rem, 5vw, 4.5rem);
  font-weight: 700;
  line-height: 1.05;
  letter-spacing: -0.02em;
  color: #f0ede8;
}

.hero-text p {
  font-size: clamp(1rem, 1.2vw, 1.25rem);
  line-height: 1.6;
  color: #a09c96;
  max-width: 480px;
  margin-top: 1.5rem;
}

.hero-cta {
  display: inline-flex;
  align-items: center;
  gap: 0.75rem;
  padding: 16px 48px;
  background: #1B365D;
  color: #f0ede8;
  font-size: 0.9rem;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  border: none;
  border-radius: 0;
  margin-top: 2rem;
  transition: transform 160ms cubic-bezier(0.23, 1, 0.32, 1),
              background 200ms ease;
}

.hero-cta:hover {
  background: #e05a20;
  transform: translateY(-2px);
}

.hero-cta:active {
  transform: scale(0.97);
}

Social Proof

Place near the top (within first 2 sections). Types by effectiveness:

1. Logos of recognizable companies (3-12, grayscale, hover color. Never use without permission.)
2. Specific user metrics: "Join 10,000+ paying customers" - number must be real
3. Relevant testimonial: quote with name, title, photo, specific result
4. Award/certification badge: only if recognizable (SOC 2, YC, Product Hunt)

<div class="social-proof">
  <p class="text-sm uppercase tracking-wider text-slate-400 mb-6">Trusted by teams at</p>
  <div class="flex flex-wrap gap-8 items-center opacity-60">
    <img src="stripe.svg" alt="Stripe" class="h-8 grayscale hover:grayscale-0 transition" />
    <img src="vercel.svg" alt="Vercel" class="h-8 grayscale hover:grayscale-0 transition" />
    <img src="shopify.svg" alt="Shopify" class="h-8 grayscale hover:grayscale-0 transition" />
  </div>
</div>

Problem Section (PAS Framework)

Problem: name the exact pain with specific numbers. "Your landing page converts at 0.8%. The industry average is 3.2%." Agitate: explore consequences of NOT solving it. Money lost. Growth stalled. Competitors winning. Solution: present your approach. "DeployPro uses conversion science from 44,000+ A/B tests to lift conversion rates."

Features Grid

3-6 features. Each one gets:

• Icon (meaningful, not decorative). Single color, consistent stroke width.
• Benefit-led headline: "Ship 3x faster" not "Automated CI/CD"
• 1-2 sentence explanation. No fluff.

<div class="grid grid-cols-1 md:grid-cols-3 gap-8">
  <div class="feature">
    <Icon icon="zap" class="w-8 h-8 text-amber-500 mb-4" />
    <h3 class="text-lg font-semibold mb-2">Ship 3x faster</h3>
    <p class="text-slate-400">Automated build and deploy pipeline. One command to production.</p>
  </div>
</div>

Testimonials

Pricing

3 tiers. Middle is your real offer.

.pricing-card-featured {
  border: 2px solid var(--accent);
  transform: scale(1.05);
  position: relative;
  z-index: 1;
}

.pricing-card-featured::before {
  content: 'Most popular';
  position: absolute;
  top: 0;
  left: 50%;
  transform: translate(-50%, -50%);
  background: var(--accent);
  color: white;
  padding: 4px 16px;
  border-radius: 9999px;
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

Rules:

• Annual/monthly toggle (annual = 17-20% discount)
• Every tier lists features explicitly
• Include money-back guarantee near pricing
• No fake scarcity. No "Only 3 spots left" when unlimited.

Form Optimization (exact specs)

<form class="space-y-4 max-w-md">
  <div>
    <label for="email" class="block text-sm font-medium mb-1">Work email</label>
    <input
      id="email"
      type="email"
      autocomplete="email"
      required
      class="w-full h-12 px-4 border border-slate-200 text-base rounded-md"
      placeholder="you@company.com"
    />
  </div>
  <button
    type="submit"
    class="w-full h-12 bg-slate-900 text-white font-medium rounded-md
           transition-all duration-160 ease-out
           active:scale-[0.97]"
  >
    Get my free guide
  </button>
  <p class="text-xs text-slate-400 text-center">
    No spam. Unsubscribe anytime.
  </p>
</form>

Performance (Core Web Vitals 2026)

Achievement checklist:

• No render-blocking resources above fold
• Hero image preloaded: <link rel="preload" as="image" href="hero.webp">
• Critical CSS inlined in <style> tag. Async load for rest.
• Images lazy-loaded (loading="lazy") with explicit width/height
• Fonts self-hosted or preloaded with font-display: swap
• Third-party scripts loaded with defer or async
• Minimal JS. No frameworks for simple landing pages.

Mobile Optimization

CRO Audit Checklist

Before launching, verify:

• Value proposition clear in 3 seconds (show to someone new, ask "what is this?")
• CTA visible without scrolling on mobile and desktop
• Only one primary CTA above fold
• Headline under 10 words with specific benefit
• Hero text NOT centered (left-aligned + right visual)
• Social proof above fold (logos or metrics)
• Real testimonials with attribution and specific results
• LIFT Model: all 6 factors score 4/5 or higher
• Form: minimum fields, 16px+ font, 48px+ input height
• Privacy reassurance near form
• Money-back guarantee near pricing
• FAQ addresses top 5 real objections
• Lighthouse Performance > 90
• Core Web Vitals pass (LCP < 2.5s, INP < 200ms, CLS < 0.1)
• Mobile: all touch targets = 44-44px, no horizontal scroll
• A/B test plan: identify highest-impact element, document hypothesis
• No fake urgency or scarcity
• No generic stock photos - real product, real people, or illustration

Error Handling

Anti-Patterns

Sources

• Unbounce Conversion Benchmark Report (44,000+ A/B tests analyzed)
• GoodUI.org - A/B tested UI patterns database
• CXL Institute - Conversion optimization research
• WiderFunnel LIFT Model
• NN Group - Conversion studies and usability research
• Refactoring UI - Adam Wathan, Steve Schoger
• Google Web Vitals (web.dev)
• Copyhackers - Conversion copywriting

Checklist

• Skill loads without errors in the AI agent
• YAML frontmatter is valid (description, compatibility, audience)
• Workflow section provides clear step-by-step instructions
• Error handling section covers common failure modes
• All referenced files (references/, scripts/, assets/) exist
• Skill triggers correctly for intended use cases
• No broken links or missing resources