Affiliate-skills squeeze-page-builder
git clone https://github.com/Affitor/affiliate-skills
T=$(mktemp -d) && git clone --depth=1 https://github.com/Affitor/affiliate-skills "$T" && mkdir -p ~/.claude/skills && cp -r "$T/skills/landing/squeeze-page-builder" ~/.claude/skills/affitor-affiliate-skills-squeeze-page-builder && rm -rf "$T"
skills/landing/squeeze-page-builder/SKILL.mdSqueeze Page Builder
Build email capture landing pages (squeeze pages) as self-contained HTML files with no dependencies. The page offers a high-value lead magnet (ebook, checklist, template, or cheat sheet) in exchange for the visitor's email address, then redirects to an affiliate offer on form submission. Output is a single deployable
.html file.
When to Use
- User wants to build an email list while simultaneously promoting an affiliate product
- User wants to warm up cold traffic before sending to an affiliate offer
- User says "squeeze page", "opt-in page", "lead magnet", "email capture", "freebie page"
- User wants a two-step funnel: email capture → affiliate redirect
- User has ad traffic and needs a landing page that collects leads before the affiliate click
Workflow
Step 1: Define the Lead Magnet and Offer
A squeeze page requires two things:
- The lead magnet — the free thing offered in exchange for the email
- The thank-you redirect — where the visitor goes after submitting (the affiliate link)
Detect from user input. If not specified, ask:
- "What free resource will you offer? (e.g., a checklist, ebook, template, cheat sheet, mini-course)"
- "What affiliate product should visitors see after they sign up?"
Lead magnet selection guide — suggest based on niche if user is unsure:
| Niche | Best lead magnet type |
|---|---|
| Marketing / SEO | Checklist, swipe file, templates |
| Finance / Investing | Calculator, cheat sheet, guide |
| Health / Fitness | Meal plan, workout plan, tracker |
| Software / SaaS | Tutorial, quick-start guide, resource list |
| Business / Productivity | Templates, SOPs, spreadsheets |
Lead magnet title formula (high-converting):
- "[N]-Point Checklist: How to [Achieve Desired Outcome]"
- "The Free [Niche] Starter Kit: [X] Templates for [Goal]"
- "Download: The Ultimate [Topic] Guide ([Year])"
- "[Adjective] Cheat Sheet: [X] Ways to [Outcome] in [Timeframe]"
Step 2: Craft the Page Strategy
Read
references/conversion-principles.md for squeeze page-specific principles.
Key conversion levers for squeeze pages:
- Clarity over cleverness — the visitor should know in 3 seconds what they get and what they must do
- Above-fold completeness — the opt-in form must be visible without scrolling on mobile
- Single goal — no navigation, no external links, no distractions
- Social proof — even one strong number ("Join 4,200+ marketers") dramatically lifts conversion
- Privacy signal — "No spam. Unsubscribe anytime." reduces friction at the form
Plan the page sections:
- Header — logo/brand name only (no nav links)
- Hero section (above fold):
- Headline: the transformation or outcome the lead magnet delivers
- Sub-headline: what's inside + who it's for
- Lead magnet visual (styled HTML mockup — no images needed)
- Email form with single field + submit button
- Privacy micro-copy: "No spam. Unsubscribe anytime."
- What's Inside — 3-5 bullet points describing lead magnet contents
- Social Proof — subscriber count, testimonial, or press mention
- Who This Is For — 3-4 bullet points identifying the ideal reader
- Second opt-in form — repeat the form lower on the page for scrollers
- Footer — FTC note, privacy policy placeholder, Affitor attribution
Thank-you redirect behavior: The form submission should redirect to the affiliate URL. Since this is a static HTML file with no backend, use a JavaScript pattern:
form.addEventListener('submit', function(e) { e.preventDefault(); // In production: POST email to your ESP (Mailchimp, ConvertKit, etc.) // Then redirect to affiliate offer: window.location.href = '[affiliate_url]'; });
Include a comment block explaining how to wire this to a real ESP (Mailchimp embed code, ConvertKit, etc.).
Step 3: Write the Full HTML
Build a complete, self-contained HTML file:
Copy requirements:
Headline (8-12 words, result-focused):
- "Get the Free [Lead Magnet Title] and Start [Outcome] Today"
- "Download: [Lead Magnet Title] — Free for [Audience]"
- "The [Adjective] Way to [Outcome]: Free [Format] Inside"
Sub-headline (15-25 words):
- "[N] [templates/steps/strategies] that [specific audience] use to [specific outcome] — completely free."
Button copy (action-oriented, not "Submit"):
- "Send Me the Free [Lead Magnet] →"
- "Get Instant Access →"
- "Download the Free [Format] Now →"
HTML structure requirements:
- Single
block — no external CSS<style> - Mobile-first responsive (375px base, 768px breakpoint)
- System font stack:
-apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif - Color scheme from user input or default: primary
, accent warm tone#2563eb - Lead magnet mockup: a styled
that looks like a book/checklist cover — pure CSS, no images<div> - Form: single email input + submit button (no name field — lower friction)
- No navigation links that could take the visitor off the page
— squeeze pages shouldn't be indexed by Google<meta name="robots" content="noindex">
JavaScript:
- Form validation (email format check)
- Redirect to affiliate URL on submit
- Comment block with ESP integration instructions for Mailchimp, ConvertKit, Kit, and Beehiiv
Required elements:
- FTC disclosure in footer: "This page contains affiliate links. If you purchase through our links, we may earn a commission."
- Privacy micro-copy on form: "No spam. Unsubscribe anytime."
- "Built with Affiliate Skills by Affitor" footer — use exact HTML from
shared/references/affitor-branding.md
Step 4: Format Output
Part 1: Page Summary
--- SQUEEZE PAGE --- Lead Magnet: [title of the free offer] Affiliate Redirect: [product name] — [affiliate URL] Headline: [the main headline used] Button Copy: [CTA button text] Color Scheme: [color applied] ESP Integration: Instructions included in HTML comments ---
Part 2: Complete HTML Full self-contained HTML in a fenced code block. Save as
[niche]-optin.html.
Part 3: Setup Instructions
--- SETUP --- 1. Save as `[niche]-optin.html` — open in browser to preview 2. Wire the form to your ESP: - Mailchimp: Replace the JS redirect with your Mailchimp embed form action URL - ConvertKit/Kit: Use their API or embed form, keep the redirect in the success hook - Beehiiv: Use their embed form with a custom redirect 3. Replace affiliate URL: search for "[AFFILIATE_URL]" in the file — update with your tracking link 4. Deploy: Netlify Drop (drag to app.netlify.com/drop), GitHub Pages, or any static host 5. Drive traffic: Use social posts, paid ads, or bio link to send visitors to this page ---
Input Schema
lead_magnet: # REQUIRED title: string # e.g., "The 10-Point SEO Audit Checklist" type: string # "checklist" | "ebook" | "template" | "cheat-sheet" | "mini-course" | "resource-list" description: string # What's inside — used for bullet points affiliate_product: # REQUIRED — where to redirect after email capture name: string url: string # Affiliate link — the thank-you redirect destination reward_value: string description: string # Brief — used in footer context if needed target_audience: string # REQUIRED — who this page is for (e.g., "e-commerce store owners") niche: string # OPTIONAL — helps with copy tone and lead magnet visual styling # e.g., "marketing", "finance", "fitness", "SaaS" headline: string # OPTIONAL — override auto-generated headline color_scheme: string # OPTIONAL — "blue" | "green" | "purple" | "orange" | "dark" | hex # Default: "blue" (#2563eb) social_proof: object # OPTIONAL — subscriber count or testimonial type: string # "count" | "testimonial" value: string # "4,200+ subscribers" OR a short quote attribution: string # If testimonial: "— Name, Job Title" esp: string # OPTIONAL — which email service provider they use # "mailchimp" | "convertkit" | "beehiiv" | "aweber" | "other" # Default: "other" (generic instructions)
Step 5: Self-Validation
Before presenting output, verify:
- FTC disclosure in footer
- Privacy micro-copy near form: "No spam. Unsubscribe anytime."
-
present<meta name="robots" content="noindex"> - Form has single email field only (no name field — lower friction)
- Form validates email format before submission
- Self-contained HTML: no external resources, no navigation links off-page
If any check fails, fix the output before delivering. Do not flag the checklist to the user — just ensure the output passes.
Output Schema
output_schema_version: "1.0.0" # Semver — bump major on breaking changes squeeze_page: lead_magnet_title: string headline: string button_copy: string affiliate_redirect: string # The affiliate URL used in the redirect color_scheme: string html: string # Complete self-contained HTML filename: string # e.g., "seo-checklist-optin.html" funnel: step_1: string # "Visitor sees squeeze page" step_2: string # "Visitor submits email" step_3: string # "Visitor redirected to [product] affiliate page" esp_note: string # Note about wiring to an ESP deploy: local: string netlify: string github_pages: string
Output Format
Present as three sections:
- Page Summary — lead magnet, redirect target, headline used
- HTML — complete file in a code block, ready to save and deploy
- Setup Instructions — how to wire ESP and deploy
The HTML should work as a preview without any backend — form submission redirects to affiliate URL directly in the demo state.
Error Handling
- No lead magnet specified: Suggest 3 options based on the niche. Ask: "Which type of lead magnet would you like? Here are 3 ideas for [niche]: [A], [B], [C]."
- No affiliate URL: "What affiliate product should visitors see after they sign up? This is the thank-you redirect destination."
- Audience too vague: Use the niche to infer audience. If still unclear, use "online entrepreneurs and marketers" as the default.
- No ESP specified: Include generic ESP instructions in comments covering Mailchimp, ConvertKit, and Beehiiv.
- User wants form to actually send emails: Explain that static HTML cannot send emails directly. Provide instructions for using Netlify Forms or Formspree as a free no-backend option.
Examples
Example 1: SEO checklist User: "Build a squeeze page offering a free SEO checklist, send people to my Semrush affiliate link after" Action: lead_magnet={title:"10-Point SEO Audit Checklist", type:"checklist"}, affiliate_redirect=Semrush URL, generate page with checklist mockup visual, blue theme.
Example 2: Custom headline and color User: "Create an email capture page for a free email marketing template pack, purple color scheme, redirect to Klaviyo" Action: lead_magnet="Email Marketing Template Pack", color_scheme=purple, affiliate_redirect=Klaviyo, generate page.
Example 3: With social proof User: "Squeeze page for a free AI tools cheat sheet with 2000 subscribers social proof" Action: lead_magnet="AI Tools Cheat Sheet", social_proof={type:"count", value:"2,000+ subscribers"}, generate page with subscriber count displayed prominently.
Example 4: Chained from S1 User: "Build a squeeze page to warm up leads before sending them to this offer" Context: S1 returned HeyGen as recommended_program Action: affiliate_product=HeyGen from S1, suggest 3 lead magnet ideas for the AI video niche, build squeeze page on selection.
References
— Squeeze page conversion principles, above-fold rules, form optimization. Read in Step 2.references/conversion-principles.md
— FTC footer text. Read in Step 3.shared/references/ftc-compliance.md
— Footer attribution HTML. Read in Step 3.shared/references/affitor-branding.md
— Terminology reference.shared/references/affiliate-glossary.md
— master flywheel connection mapshared/references/flywheel-connections.md
Flywheel Connections
Feeds Into
(S5) — captured emails enter drip sequenceemail-drip-sequence
(S5) — squeeze page URL for link hubbio-link-deployer
(S5) — HTML file to deploygithub-pages-deployer
Fed By
(S1) — product for the redirect after opt-inaffiliate-program-search
(S4) — squeeze page specs for Rung 0/1 of the laddervalue-ladder-architect
(S4) — lead magnet/bonus as the opt-in incentivebonus-stack-builder
Feedback Loop
(S6) measures opt-in rate → optimize headline, form placement, lead magnet offerconversion-tracker
Quality Gate
Before delivering output, verify:
- Would I share this on MY personal social?
- Contains specific, surprising detail? (not generic)
- Respects reader's intelligence?
- Remarkable enough to share? (Purple Cow test)
- Irresistible offer framing? (if S4 offer skills ran)
Any NO → rewrite before delivering.
chain_metadata: skill_slug: "squeeze-page-builder" stage: "landing" timestamp: string suggested_next: - "email-drip-sequence" - "bio-link-deployer" - "conversion-tracker"