Install in Claude Code
Copygit clone --depth 1 https://github.com/FerroxLabs/wayland /tmp/convert-lead-magnet-page && cp -r /tmp/convert-lead-magnet-page/resources/bundled-extensions/business-conversion/skills/convert-lead-magnet-page ~/.claude/skills/convert-lead-magnet-pageThen start a new Claude Code session; the skill loads automatically.
Definition
SKILL.md
# Convert Lead-Magnet Page - Free → Email Opt-In
> *"A lead magnet page is a sales page where the price is the email. Same Method, same locks, same close - but the currency is permission instead of money."*
This skill builds the page that converts visitors into email subscribers in exchange for a substantive free asset. Longer than a squeeze, shorter than a sales page - the full Method, scaled for a lower-friction yes.
## When to Use
Trigger phrases: `lead magnet page`, `free guide page`, `free training page`, `opt-in landing page`, `/convert lead-magnet-page <topic>`.
Use when:
- The user has a *substantive* free asset (15–60 minute training, 20+ page guide, full swipe file, calculator/tool, mini-audit).
- Cold-to-cool traffic needs more persuasion than a squeeze provides.
- The lead magnet is the front of a longer email-driven funnel.
## When NOT to Use
- **Super-short single-promise opt-in** → `/convert squeeze-page` (60–120 words).
- **Pre-sell content for cold traffic** → `/convert bridge-page`.
- **Post-opt-in delivery + secondary offer** → `/convert thank-you-page`.
- **Webinar registration** → `/convert webinar-reg-page`.
## Inputs
Required:
1. **The lead magnet** - what's being given away. Format, length, deliverable.
2. **The promise** - the specific outcome the lead magnet delivers (not "tips" - *"the exact 6-email cold sequence that's pulled $1.4M for our agency clients"*).
3. **One person + Nerve** (One Person Rule).
4. **Form destination + post-opt-in URL.**
Optional:
- **Brand colors / logo + lead-magnet cover image.**
- **One full proof beat** - Anecdote + Receipt.
- **Backend offer hint** - what the email sequence eventually pitches (informs what kind of lead the magnet should attract).
- **`out_path`** - defaults via `build_report_path`.
## Workflow - All Eight Method Phases
### Phase 0 - Four Questions
- **Why You?** - Why this person, today, needs *this* lead magnet.
- **Why Me?** - Drive-By credibility, one beat.
- **Why This?** - Why this lead magnet vs. the dozen other free guides on the same topic.
- **Why Now?** - Often "free + curiosity" + one real-time reason ("course launches Tuesday - this prepares you").
### Phase 1 - Temperature
Lead-magnet pages typically run **Cool to Warm**. Page length 400–900 words. For Ice Cold traffic, place a `/convert bridge-page` upstream.
### Phase 2 - Four-Layer Open (call `convert-open`)
Full Open, but condensed:
- Layer 1 = Nerve Strike headline (the pain the magnet addresses).
- Layer 2 = Side Door subhead/opening paragraph.
- Layer 3 = Skin in the Game in 1–2 sentences.
- Layer 4 = Fingerprint as a one-line aside or distinctive opening phrase.
### Phase 3 - Three Locks
- **Want** = the outcome the magnet delivers.
- **Trust** = one Anecdote + one Drive-By. Lighter than a sales page; the price is just an email.
- **Excuse** = built in (free), but reinforce: "no upsell on the next page" or "no credit card" - whatever's true.
### Phase 4 - Bullets (call `convert-bullets`)
5–8 bullets. Mostly Keyhole + Snapshot ("Inside, you'll see..."). Each bullet sounds like a chapter or module title from the magnet itself.
### Phase 5 - Proof (call `convert-proof`)
One Anecdote (someone who got the magnet and used it) + one Drive-By. The page is too short for a heavy proof block.
### Phase 6 - Cascade Close (call `convert-close`)
Compressed cascade:
- Stack - what's in the magnet.
- Vision - paint the state after using it.
- Math - "free" + the implicit cost-of-not-knowing.
- Safety Net - "if it's not useful, unsubscribe in one click."
- Door - the form button.
### Phase 7 - Greased Chute (call `convert-chute`)
Lead-magnet pages often die in the middle. Section transitions must pull forward. The form should be visible above the fold *and* repeated near the bottom.
### Phase 8 - Voice + Bullshit Filter
Most common failure: the lead magnet over-promises and the page over-claims. Rein in claims to what the magnet actually delivers. Over-promise = unsubscribe by email #2.
## Section Architecture
| # | Section | Purpose |
|---|---------|---------|
| 1 | Headline (Nerve Strike) | Open Layer 1 |
| 2 | Subhead + opening paragraph | Layers 2–3 |
| 3 | Top form + button | First-fold opt-in |
| 4 | What's inside (bullets, 5–8) | Want lock |
| 5 | One Anecdote + Drive-By proof | Trust lock |
| 6 | Mock-up / cover image | Visual anchor |
| 7 | Reassurance line | Excuse lock (no upsell, no credit card, etc.) |
| 8 | Bottom form + button (repeat) | Second close |
| 9 | One-line P.S. | 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">
<meta property="og:image" content="{{OG_IMAGE_URL}}">
<style>
:root{--ink:#0e1116;--ink-soft:#3a3f47;--paper:#fbfaf6;--accent:#c0392b;--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}
h1{font-size:clamp(28px,5vw,40px);line-height:1.18;margin:0 0 14px}
h2{font-size:22px;margin:32px 0 12px}
p{margin:0 0 16px}
p.subhead{font-size:20px;color:var(--ink-soft);margin:0 0 20px}
.form-card{background:#fff;border:1px solid var(--rule);padding:18px;border-radius:8px;margin:0 0 28px}
form{display:grid;grid-template-columns:1fr;gap:10px}
@media(min-width:480px){form{grid-template-columns:1fr auto}}
label.sr{position:absolute;left:-9999px}
input[type=email]{padding:14px;font-size:17px;border:1px solid var(--rule);bordMore 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
|