Skip to main content
ClaudeWave
Skill596 repo starsupdated 3d ago

convert-thank-you-page

|

Install in Claude Code
Copy
git clone --depth 1 https://github.com/FerroxLabs/wayland /tmp/convert-thank-you-page && cp -r /tmp/convert-thank-you-page/resources/bundled-extensions/business-conversion/skills/convert-thank-you-page ~/.claude/skills/convert-thank-you-page
Then start a new Claude Code session; the skill loads automatically.

SKILL.md

# Convert Thank-You Page - Delivery + Secondary Offer Stack

> *"The thank-you page is the most under-leveraged surface in most funnels. The visitor just said yes. They trust you more in this five-second window than they will at any point until they get a result. Use it."*

This skill builds the thank-you page: deliver the promise, set the next-step expectation, and stack a secondary offer or invitation that fits the moment.

## When to Use

Trigger phrases: `thank you page`, `thanks page`, `post-opt-in page`, `confirmation page`, `delivery page`, `/convert thank-you <context>`.

Use when:
- A visitor just submitted a form (lead magnet, squeeze, webinar reg) or completed a purchase.
- The page needs to (1) deliver/confirm the promise and (2) carry forward toward the next funnel step.
- The user wants to use the post-conversion attention window.

## When NOT to Use

- **Immediate post-checkout upgrade** → `/convert oto-page`.
- **OTO recovery** → `/convert downsell-page`.
- **Days-later lateral offer** → `/convert cross-sell-page`.
- **The lead-magnet opt-in page itself** → `/convert lead-magnet-page`.
- **Auditing existing thank-you page** → `/convert audit`.

## Inputs

Required:
1. **What just happened** - opt-in for a lead magnet? Webinar registration? Purchase confirmation?
2. **The deliverable** - what they should expect (download link visible, email arrived, calendar invite, etc.) and within what time window.
3. **The next step** - what's the *one* thing the user should do next? (Watch a welcome video, book a call, join a community, browse a related offer.)
4. **One person + Nerve** (One Person Rule, post-conversion version).

Optional:
- **Secondary offer** - if there's a relevant tripwire / book / micro-course / call booking.
- **Brand voice notes from the prior page.**
- **Calendar booking embed code** (if the next step is a call).
- **`out_path`** - defaults via `build_report_path`.

## Workflow - All Eight Method Phases (compressed; this is a confirmation page first, conversion page second)

### Phase 0 - Four Questions (call `convert-four-questions`)

For thank-you pages, the Four Questions reframe:
- **Why You?** - Why does the next step matter for *you* given what you just did?
- **Why Me?** - Inherited.
- **Why This?** - Why this *specific* next step (and not "follow us on social").
- **Why Now?** - The window matters: "while you're here..." or "before the email arrives..."

### Phase 1 - Temperature

The visitor is **Hot** - they just converted. Page length 200–600 words. Focus is delivery + one calibrated next step, not a second sales pitch.

### Phase 2 - Four-Layer Open (call `convert-open`)

Compressed and confirmation-led:
- Layer 1 = explicit confirmation. *"You're in. Here's what happens next."*
- Layer 2 = side-door pivot to the next step.
- Layer 3 = light Skin in the Game.
- Layer 4 = Fingerprint as one-line aside.

### Phase 3 - Three Locks

- **Want** = the next-step state ("by Friday, you'll have implemented step 1").
- **Trust** = inherited fully.
- **Excuse** = the next step is usually low-friction (watch a video, book a call) so the Excuse is built in.

### Phase 4 - Bullets

3–5 bullets only, listing what the visitor should expect. Mostly utility bullets (when the email arrives, what to look for, what to do first).

### Phase 5 - Proof

Optional. One Drive-By is enough if there's a secondary offer. If the page is delivery-only, no proof needed.

### Phase 6 - Cascade Close

The "next step" CTA is the close:
- Vision close on what the next step delivers.
- Door = the button.

If a secondary offer exists, a compact Stack + Math + Safety Net block sits below the next-step CTA - *clearly subordinated visually* so it doesn't compete with delivery.

### Phase 7 - Greased Chute

Top half = delivery + next step. Bottom half = optional secondary offer. The two halves should not blur together.

### Phase 8 - Voice + Bullshit Filter

The biggest filter test: *"Does the secondary offer actually serve the visitor at this moment, or am I just refusing to leave money on the table?"* If the latter, drop the secondary offer entirely and let the page be a clean thank-you.

## Section Architecture

| # | Section | Purpose |
|---|---------|---------|
| 1 | Confirmation headline | Layer 1 |
| 2 | What happens next (3-5 bullets) | Delivery clarity |
| 3 | Inline delivery (download link / video / instructions) | Promise fulfilled |
| 4 | Next-step CTA (the *one* action) | Cascade Close core |
| 5 | (Optional) Secondary offer block | Calibrated stack |
| 6 | One-line Fingerprint aside | Voice anchor |

## HTML/CSS Reference Implementation

```html
<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>You're in - {{BRAND}}</title>
  <meta name="description" content="{{META_DESCRIPTION}}">
  <meta property="og:title" content="{{HEADLINE}}">
  <meta property="og:description" content="{{META_DESCRIPTION}}">
  <meta property="og:type" content="website">
  <style>
    :root{--ink:#0e1116;--ink-soft:#3a3f47;--paper:#fbfaf6;--accent:#1f7a3a;--accent-ink:#fff;--rule:#e6e2d8;--max:680px}
    *,*::before,*::after{box-sizing:border-box}
    body{margin:0;font:18px/1.6 -apple-system,BlinkMacSystemFont,"Helvetica Neue",Arial,sans-serif;color:var(--ink);background:var(--paper)}
    main{max-width:var(--max);margin:0 auto;padding:24px 20px 64px}
    .confirm{background:#e8f5ec;border:1px solid #b6dec3;color:#0f3c1f;padding:14px 18px;border-radius:6px;font-weight:600;margin:0 0 24px}
    h1{font-size:clamp(26px,5vw,36px);line-height:1.18;margin:0 0 14px}
    h2{font-size:22px;margin:32px 0 12px}
    p{margin:0 0 16px}
    ul.bullets{list-style:none;padding:0;margin:0 0 24px}
    ul.bullets li{padding:8px 0 8px 26px;position:relative;border-bottom:1px solid var(--rule)}
    ul.bullets li::before{content:"";position:absolute;left:6px;top:16px;width:8px;height:8px;background:var(--accent);border-radius:50%}