Install in Claude Code
Copygit clone --depth 1 https://github.com/FerroxLabs/wayland /tmp/convert-cross-sell-page && cp -r /tmp/convert-cross-sell-page/resources/bundled-extensions/business-conversion/skills/convert-cross-sell-page ~/.claude/skills/convert-cross-sell-pageThen start a new Claude Code session; the skill loads automatically.
Definition
SKILL.md
# Convert Cross-Sell Page - Post-Purchase Lateral Offer
> *"The cross-sell isn't an upsell. The buyer's already mid-implementation on the first thing. The job here is to show them the *next* product they'll naturally need - not to extract more dollars while the wallet's open."*
This skill builds the post-purchase cross-sell page: a related, lateral offer to an existing customer who's already past the OTO/downsell sequence.
## When to Use
Trigger phrases: `cross sell page`, `post-purchase upsell`, `related product page`, `convert cross-sell`, `/convert cross-sell <product>`.
Use when:
- The customer has completed flagship + any immediate OTO/downsell sequence.
- A related (not duplicate, not upgrade) product genuinely fits their next step.
- The user wants to maximize LTV without breaking trust.
Cross-sells fire days-to-weeks after purchase, often from email - not seconds after checkout.
## When NOT to Use
- **Immediate post-checkout upgrade** → `/convert oto-page`.
- **OTO recovery** → `/convert downsell-page`.
- **Pre-purchase cold sales page** → `/convert sales-page`.
- **Thank-you page secondary stack** → `/convert thank-you-page`.
- **Auditing existing cross-sell** → `/convert audit`.
## Inputs
Required:
1. **What they already own** - the flagship + any OTO/downsell items purchased.
2. **The cross-sell product** - must be lateral (not the same thing they own at a higher tier).
3. **Implementation timing** - where the customer is in their journey (week 1? month 3? after the first result?). Cross-sell copy hinges on this.
4. **One person + Nerve, post-purchase version** - the new pain that emerged *because* of the first product's success. *"You implemented [flagship]. Now you've got [new problem the cross-sell solves]."*
Optional:
- **Voice continuity from the flagship + earlier funnel.**
- **Existing customer Snapshot proof.**
- **`out_path`** - defaults via `build_report_path`.
## Workflow - All Eight Method Phases
### Phase 0 - Four Questions
Reframed for cross-sell:
- **Why You?** - Why does this matter *now* that you've used [flagship]?
- **Why Me?** - Inherited fully.
- **Why This?** - How does the cross-sell sit alongside the flagship - what specific gap does it close?
- **Why Now?** - Real reason connected to where they are in implementation.
### Phase 1 - Temperature
**Hot.** They're a customer. Page length 600–1,200 words. Less direct-response, more relationship-pivot.
### Phase 2 - Four-Layer Open (call `convert-open`)
The Open is **anchored to their journey**:
- Layer 1 = a specific Nerve Strike about the new problem that emerged from the first product's success. *"By week three with [flagship], most people hit a different wall - and it's the kind of wall that makes the first thing feel like it stopped working."*
- Layer 2 = casual side-door pivot.
- Layer 3 = "I built [cross-sell] for exactly this stage" Skin in the Game.
- Layer 4 = Fingerprint as one-line aside.
### Phase 3 - Three Locks
- **Want** = the new desired state, *adjacent* to the flagship's promise.
- **Trust** = mostly inherited; one customer Snapshot ("here's how someone past [flagship] used [cross-sell]") seals it.
- **Excuse** = math comparing "buy now bundled" vs. "buy later separately."
### Phase 4 - Bullets
5–8 bullets. Snapshot-heavy (similar customers + their results). One Flip is OK ("you'd think [flagship] alone would do it - and you're not wrong, until...").
### Phase 5 - Proof
One Anecdote (named customer, post-flagship) + one Receipt (specific result they got with the combo). Heavy enough to matter, light enough to not turn into a second sales page.
### Phase 6 - Cascade Close
- Stack - what's added.
- Vision - paint the combined state.
- Math - bundled-vs-separate price.
- Safety Net - guarantee mechanic.
- Door - Yes button + plain decline link.
P.S. is appropriate here (the page has more room than an OTO).
### Phase 7 - Greased Chute
Section transitions should pull forward without manufactured urgency. The customer is already loyal - pretending otherwise breaks voice.
### Phase 8 - Voice + Bullshit Filter
The biggest filter test: *"Would I email this to a customer I genuinely care about?"* If the cross-sell doesn't fit the customer's stage, kill it. Sending the wrong cross-sell trains the buyer to ignore future emails.
## Section Architecture
| # | Section | Purpose |
|---|---------|---------|
| 1 | Anchored open referencing flagship | Open + journey acknowledgment |
| 2 | The new problem (one paragraph) | Want lock - the *new* state |
| 3 | The cross-sell - what it is | Mechanism |
| 4 | 5–8 bullets | convert-bullets, Snapshot-heavy |
| 5 | Customer Anecdote + Receipt | Trust lock |
| 6 | Stack + bundled-vs-separate math | Excuse lock |
| 7 | Cascade Close | Vision → Math → Safety Net → Door |
| 8 | P.S. (recloses on the journey-fit) | Reclose |
## 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>{{HEADLINE}} - {{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 80px}
.anchor{font-size:14px;color:var(--ink-soft);background:#fff;border:1px solid var(--rule);padding:10px 14px;border-radius:6px;margin:0 0 24px}
h1{font-size:clamp(24px,4.5vw,34px);line-height:1.2;margin:0 0 14px}
h2{font-size:22px;margin:32px 0 12px}
p{margin:0 0 16px}
ul.bulletMore from this repository
architectureSkill
|
bump-versionSkill
Use when bumping the Wayland version: update package.json, run checks, branch, commit, push, create PR, wait for merge, tag release.
fix-issuesSkill
|
fix-sentrySkill
|
i18nSkill
|
oss-prSkill
Use when creating a pull request, after committing changes, or when user invokes /oss-pr. Covers branch management, quality checks, commit, push, and PR creation.
pr-automationSkill
|
pr-fixSkill
|