--- name: advertorial-builder description: Activates when the user asks to build an advertorial, reverse-engineer a competitor landing page, create an editorial-style sales page, or convert a winning competitor URL into their own version. Uses Firecrawl or Browserbase MCP to scrape the competitor page, extracts the direct-response framework, then generates a complete HTML page using the user's brand kit. Outputs publish-ready HTML for Shopify, WordPress, or any hosting platform. --- # Advertorial Builder Skill The complete workflow for Pillar 4. Drop in a winning competitor URL. Get a finished HTML advertorial for your brand in one session. Uses the five-beat direct-response framework that every high-converting advertorial follows. ## Activation Rules Activate when: - The user asks to build, create, or generate an advertorial - The user provides a URL and asks to "reverse-engineer this" or "make our version of this" - The user asks for an editorial-style sales page or long-form landing page - The user runs the `/build-advertorial` slash command ## Prerequisites 1. **A web scraping MCP installed.** One of: - Firecrawl MCP (recommended for static pages, faster, cheaper) - Browserbase MCP (better for JavaScript-heavy pages with dynamic loading) 2. **brand-kit.md** in project root with at minimum: brand name, voice, colors, fonts, products, offer details 3. **Real customer testimonials** (3-5 minimum) to use in the social proof section. The skill will not invent testimonials. 4. **A competitor advertorial URL** to use as the structural reference --- ## The Five-Beat Direct-Response Framework Every successful advertorial hits these five beats in this order. The framework is a structural pattern, not intellectual property. ### Beat 1: Authority (first 200 words) Establish credibility before making any claims. Methods: - Expert quotes or credentials - Publication-style header (looks like a magazine or news article) - Cited research, studies, or data - "As featured in [X]" or third-party endorsements ### Beat 2: Pain Escalation (words 200-500) Name the reader's specific problem. Make it feel urgent. Methods: - Specific scenarios (a Tuesday morning, a 3pm crash, a particular frustration) - Lists of symptoms or experiences - "Why what you've tried hasn't worked" framing - Direct address: "you," "your" ### Beat 3: Root Cause Reframe (words 500-900) Explain WHY the problem exists in a way the reader hasn't heard before. Methods: - "The hidden cause most people miss" - Scientific or mechanistic explanation - "What [authority figure] doesn't tell you" - Counterintuitive framing ### Beat 4: Social Proof (words 900-1,300) Prove the product works. Methods: - Customer testimonials (with first name and city, not just "Sarah B.") - Before/after results (specific numbers) - Clinical studies or third-party validation - Usage statistics ("used by X people") ### Beat 5: Offer (words 1,300-1,800) Present the product and the specific deal. Methods: - Clear product introduction - Specific offer elements (discount, bundle, guarantee, urgency, bonuses) - Multiple CTAs (after social proof, mid-offer, end of page) - Risk reversal ("60-day guarantee, no questions") --- ## Slash Commands ### `/build-advertorial [URL]` The primary command. End-to-end workflow. **Usage:** ``` /build-advertorial https://competitor.com/articles/morning-energy-secret ``` **Workflow:** 1. **Scrape the competitor URL** using the connected web scraping MCP 2. **Extract the DR framework** — analyze the page structure and identify each of the five beats 3. **Show the user the extracted blueprint** — let them confirm or adjust before generating 4. **Generate the new advertorial** using: - The blueprint structure - brand-kit.md for brand identity - User-provided testimonials - User-specified offer details 5. **Save the HTML file** to `./output/advertorial-[timestamp].html` 6. **Show preview instructions** — how to open the file in a browser and review ### `/extract-framework [URL]` Just the analysis step. Returns the DR framework blueprint without generating a new page. Useful for studying multiple competitor pages before producing your own version. **Returns:** - Page structure analysis (5-beat breakdown) - Visual layout notes (header style, image placement, CTA styling) - Tone and reading level assessment - Persuasion techniques identified - Word count and section breakdown - A structured "Advertorial Blueprint" document saved to `./blueprints/[domain]-[date].md` ### `/build-from-blueprint [blueprint-path]` Generate an advertorial from a previously-extracted blueprint. **Usage:** ``` /build-from-blueprint ./blueprints/competitor-com-2026-08-04.md ``` Useful when you want to test multiple advertorial variants from the same blueprint. ### `/build-variants [URL]` Generate three advertorial variants from one competitor URL, each leading with a different beat. **Variants produced:** 1. **The Story version** — Leads with social proof (Beat 4 first), then pain, then offer 2. **The Science version** — Leads with root cause reframe (Beat 3 first), then pain, then offer 3. **The Comparison version** — Leads with pain (Beat 2 first), then "what you've tried," then offer Each variant is optimized for a different ad hook type: - Story version → pairs best with social-proof ads - Science version → pairs best with curiosity-hook ads - Comparison version → pairs best with problem-centric ads ### `/refresh-advertorial [URL] [days]` Re-scrape a competitor page that you've previously analyzed and check what's changed. Competitors update their advertorials. This command surfaces the diff. **Usage:** ``` /refresh-advertorial https://competitor.com/articles/morning-energy-secret 30 ``` Compares current version to the version scraped 30 days ago. Reports: - Headline changes - Section additions or removals - New testimonials added - Offer changes - Image swaps - Word count delta --- ## Generation Rules ### Always include When generating the advertorial HTML: 1. **Brand context (from brand-kit.md):** - Brand name and product - Brand voice and tone - Brand colors (primary, secondary, accent, background, text) - Brand fonts - Required phrases (must appear) - Banned phrases (must not appear) 2. **The user's actual content:** - Real testimonials (with first name and city, never invented) - Specific offer details (price, discount code, guarantee terms) - Product description (from brand-kit.md) - Destination URL (the link the CTAs point to) 3. **Structural fidelity to the framework:** - All five beats present, in order - Word count target: 1,200-1,800 words - 3-4 CTAs spaced throughout (not just at the end) - Reading level: 8th grade (clear, accessible, no jargon) - Mobile-responsive HTML with inline CSS ### Output format A single HTML file with inline CSS, ready to paste into Shopify, WordPress, or upload to any hosting service. ```html [Headline matching the page] ``` ### Things to avoid Apply these filters to all generated copy: - No "amazing," "incredible," "game-changing," "revolutionary" - No "in today's fast-paced world" - No "let's dive in" - No invented testimonials (only use real ones the user provided) - No invented statistics or studies (only cite real ones the user provided or that are in brand-kit.md) - No "BUY NOW" in all caps as a CTA (use brand voice instead: "Try [Product]," "See the Offer") - No aggressive popups, exit intents, or scarcity timers - No false urgency ("only 3 left!" when there's unlimited inventory) --- ## Troubleshooting Common Issues ### The generated copy feels generic ``` The opening paragraph is too generic. Rewrite it as a specific scene: a real person, a specific morning, a specific frustration. Don't open with a stat or a question. Open mid-scene, like a magazine feature. ``` ### The page looks too "sales-y" ``` Tone down the sales language. Remove any sentence using "amazing," "incredible," "life-changing," or "breakthrough." Replace with specific, understated claims. The page should read like a friend explaining why she switched brands, not like an infomercial. ``` ### The testimonials sound fake The skill should never invent testimonials. If the generated testimonials sound off, it usually means the user-provided testimonials need editing. Real testimonials have: - First name and city (e.g., "Rachel, Austin TX") - Imperfect, conversational language (trailing thoughts, casual phrases) - Specific details about routine or context - A clear before-and-after arc If user-provided testimonials are too polished or too short, prompt the user to provide fuller, more natural quotes. ### Mobile layout is broken ``` Check the mobile layout. Body text should be 16px minimum on mobile. Images should stack vertically. CTA buttons should be full-width on screens under 768px. Fix any horizontal overflow. ``` ### CTAs are too aggressive ``` Soften the CTA buttons. Instead of "BUY NOW" use "Try [Product Name]" or "See the Offer." The button color should be the brand accent color from brand-kit.md, not red. The button should feel like an invitation, not a demand. ``` --- ## Cross-Skill Integration **Calls into this skill:** - The user (directly) - impressions-spy (Pillar 5) — when a winning competitor advertorial is identified, the spy can pass the URL to this skill **This skill calls:** - Firecrawl or Browserbase MCP (for scraping) - brand-kit (for brand identity) **Output flows to:** - The user's CMS (Shopify, WordPress, etc.) — paste the HTML - Pillar 2 (Bulk Uploader) — the new advertorial URL becomes the destination_url for matching ads - Pillar 3 (Creative Analytics) — once ads point to the new advertorial, Claude analyzes which advertorial+ad combinations convert best --- ## Building an Advertorial Library (the compound move) Different ad hooks perform best with different advertorial leads. Don't make one advertorial. Make four: 1. **The Original** (balanced, all five beats in standard order) → use with benefit-centric ads 2. **The Story** (leads with social proof) → use with social-proof ads 3. **The Science** (leads with root cause reframe) → use with curiosity ads 4. **The Comparison** (leads with pain + "what you've tried") → use with problem-centric ads Run `/build-variants [URL]` to produce all four from the same source. Then in Pillar 2's bulk upload spreadsheet, set the destination_url field to match the ad hook: | Ad hook | Best advertorial | |---|---| | Problem-centric | The Comparison | | Benefit-centric | The Original | | Social proof | The Story | | Curiosity | The Science | This is the funnel architecture that separates amateur DTC brands from the ones spending $40K/month profitably. --- ## Notes - The skill produces structurally sound first drafts. Always edit the output before publishing. The bones are right; the voice needs your fingerprints. - Test the page on a real mobile device before going live. Most Meta ad traffic is mobile, and small layout issues kill conversion. - A/B test the new advertorial against your existing product page with split traffic for 14 days before fully committing. Use Pillar 3's creative-analyzer to compare conversion rates by destination URL. - The skill respects copyright by extracting structural patterns (which are not protected) rather than copying text. The output uses your brand's words, your testimonials, your offer.