Product Showcase Page Agent Skill

Product Showcase Page

Build a long-form, single-product showcase page as a self-contained HTML file. Goes deeper than a standard landing page — includes a full hero section, feature breakdown with icons, use case demonstrations, testimonials, a pricing comparison table, FAQ with accordions, and multiple high-intent affiliate CTAs. Designed for pre-sold traffic (readers who came from a review or comparison) and wants to make the final conversion push.

When to Use

• User wants a dedicated page for one product that covers everything a buyer needs to know
• User says "showcase page", "product spotlight", "deep-dive page", "feature breakdown page"
• User wants a page longer than a standard landing page — for high-ticket products needing more persuasion
• User is sending warm traffic (from a blog post or email) and wants to close the sale
• User wants a page that can double as a product review in page form

Workflow

Step 1: Gather Product Data

If product data is available from S1 or prior conversation, use it directly.

Otherwise, use web_search to research the product:

• Features: "[product name] features" — gather 6-12 distinct capabilities
• Pricing: "[product name] pricing" — all tiers with feature differences
• Use cases: "[product name] use cases" OR "[product name] examples" — concrete applications
• Testimonials: "[product name] reviews" on G2/Capterra — find real sentiment (do not copy verbatim — paraphrase or create realistic representative examples)
• Competitors: "[product name] vs" — 2-3 competitors for the pricing comparison
• FAQ: "[product name] questions" OR check product's own FAQ page

Organize the research into these buckets:

• Core features (6-12, each with a one-sentence benefit statement)
• Use cases (3-5, each framed as a specific problem solved)
• Pricing tiers (2-4 tiers with included features and price)
• Comparison data (the 5-8 dimensions where this product wins vs. competitors)
• Social proof (ratings, user counts, company names using it)
• FAQ answers (6-10 questions)

Step 2: Plan the Page Architecture

Read references/conversion-principles.md for long-form page principles.

A product showcase page is longer than a standard landing page — it must justify the length with value at every section. Plan each section:

• FTC Disclosure — small, above hero
• Hero — headline + sub-headline + primary CTA + hero visual + trust bar
• Problem Statement — 2-3 sentences establishing the pain the product solves
• Product Overview — 3-sentence description + key stats
• Features Grid — 6-12 features with icons (pure CSS) + headline + description
• Use Cases — 3-5 real scenarios (who uses it, how, outcome)
• Social Proof Bar — logos, ratings, subscriber counts
• Pricing Comparison — table comparing this product's tiers against 2 competitors
• Testimonials — 2-3 cards with quote, name, role

10. FAQ Accordion — 6-10 questions with JS-powered expand/collapse

11. Final CTA Section — strong headline + benefits recap + primary CTA button

12. Footer — FTC disclosure full text, Affitor attribution

CTA placement rules:

• Hero: primary CTA (always visible)
• After Features Grid: secondary CTA
• After Pricing Table: high-intent CTA (primed by seeing pricing)
• After Testimonials: social-proof-backed CTA
• Final CTA section: closing CTA
• Total: 4-5 CTAs per page

Angle selection — choose based on what the research shows:

| Angle | Headline formula |

|---|---|

| Best in category | "The [Category] Tool That Actually Works" |

| Price/value | "Get [Competitor]-Level Results for Half the Price" |

| Speed | "From Zero to [Outcome] in [Timeframe]" |

| Simplicity | "The [Category] Tool That Doesn't Require a Manual" |

| Results-focused | "[Specific Outcome]: How [Product] Delivers Where Others Don't" |

Step 3: Write the Full HTML

Build a complete self-contained HTML file. This page is longer than standard (~150-200 lines of HTML) and should feel like a high-quality product page.

Design specifications:

• All CSS inline in a <style> block — no external stylesheets
• System font stack — no Google Fonts
• Mobile-first responsive (375px base, 768px, 1024px breakpoints)
• Feature icons: pure CSS geometric shapes or Unicode symbols — no icon libraries
• FAQ accordion: minimal JavaScript for expand/collapse, gracefully degrades without JS
• Color scheme from input or default blue (#2563eb) with appropriate complementary tones
• Section alternating backgrounds for visual rhythm (white / light gray / white)

Copy requirements per section:

*Hero Headline* (6-12 words, outcome-focused):

• Avoid: "Welcome to [Product]", "[Product] is the best...", generic superlatives
• Use: specific outcomes, target audience callouts, contrarian angles

*Feature headlines* (each feature gets a benefit headline, not a feature name):

• Not: "Advanced Reporting Dashboard"
• Yes: "See Exactly What's Working at a Glance"

*Use case structure* (one per scenario):

<!-- The problem → The solution → The result pattern -->
"[Job title] needed to [task]. With [Product]'s [feature], they [outcome] in [timeframe]."

*Pricing table* (comparison layout):

• Column 1: this product (highlighted as "Recommended")
• Column 2: Competitor A
• Column 3: Competitor B
• Rows: 8-10 comparison features
• Include: "Free trial" row and "Cancel anytime" signal

*Testimonials* (2-3 cards):

Write realistic representative testimonials if real ones unavailable. Each must have:

• A specific, measurable result ("Saved 6 hours a week", "ROI of 340%")
• Name + job title + company type
• Do NOT use made-up full names and companies — use "[First name], [Job title] at a [company type]" format

*FAQ items* (6-10):

Cover the real objections:

• Pricing and cancellation questions
• Technical requirements
• Data security / privacy
• How it compares to [main competitor]
• Onboarding time
• Customer support availability

Required elements:

• FTC disclosure (small, above hero)
• All affiliate links with target="_blank" rel="noopener"
• <meta name="viewport"> and basic SEO meta tags
• <meta name="robots" content="noindex"> (product pages are not for organic search)
• "Built with Affiliate Skills by Affitor" footer from shared/references/affitor-branding.md

Step 4: Format Output

Part 1: Page Summary

---
PRODUCT SHOWCASE PAGE
---
Product: [name]
Angle: [marketing angle used]
Headline: [hero headline]
Sections: [list all sections in order]
CTAs: [count and placement]
Color: [color scheme]
Features covered: [N]
FAQ items: [N]
---

Part 2: Complete HTML

Full file in a fenced code block. Save as [product-slug]-showcase.html.

Part 3: Deploy Instructions

---
DEPLOY
---
1. Save as `[product-slug]-showcase.html`
2. Preview: open in any browser — no server needed
3. Customize: swap testimonial details, add real screenshots, update pricing
4. Deploy: Netlify Drop / Vercel / GitHub Pages
5. Track: Add UTM parameters to your traffic sources targeting this page
   e.g., ?utm_source=email&utm_medium=newsletter&utm_campaign=[product]
---

Input Schema

product:                    # REQUIRED
  name: string
  description: string
  reward_value: string
  url: string               # Affiliate link
  reward_type: string
  cookie_days: number
  tags: string[]

angle: string               # OPTIONAL — marketing angle
                            # "best-in-class" | "price-value" | "speed" | "simplicity" | "results"
                            # Default: auto-detected from product strengths

compare_with: object[]      # OPTIONAL — competitors for pricing comparison table
  - name: string
    pricing: string         # Starting price
    url: string             # Non-affiliate URL

color_scheme: string        # OPTIONAL — "blue" | "green" | "purple" | "orange" | "dark" | hex
                            # Default: "blue"

target_audience: string     # OPTIONAL — specific audience to call out in hero
                            # e.g., "e-commerce store owners", "freelance designers"

social_proof: object        # OPTIONAL — headline social proof signal
  type: string              # "rating" | "user_count" | "company_logos" | "award"
  value: string             # e.g., "4.8/5 on G2", "50,000+ users", "Used by Fortune 500s"

testimonials: object[]      # OPTIONAL — real testimonials to include
  - quote: string
    name: string
    role: string
    result: string          # The specific result they achieved

Step 5: Self-Validation

Before presenting output, verify:

• [ ] FTC disclosure present (small format, above hero)
• [ ] <meta name="robots" content="noindex"> present
• [ ] ≥4 CTAs at: hero, after features, after pricing, after testimonials, final section
• [ ] All affiliate links have target="_blank" rel="noopener"
• [ ] Self-contained HTML: icons are CSS/Unicode only, no external resources
• [ ] "Built with Affiliate Skills by Affitor" footer present

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
showcase_page:
  product_name: string
  angle: string
  headline: string
  color_scheme: string
  html: string
  filename: string          # e.g., "heygen-showcase.html"
  section_count: number
  cta_count: number
  faq_count: number

products_featured:
  - name: string
    url: string
    role: string            # "primary" | "compared"
    cta_count: number

deploy:
  local: string
  netlify: string
  vercel: string

Output Format

Present as three sections:

• Page Summary — product, angle, structure overview, CTA placements
• HTML — complete file in a code block
• Deploy Instructions — preview, customize, deploy steps

The page should be immediately useful as a high-converting standalone URL.

Error Handling

• No product provided: "I need a product to build this showcase for. Run /affiliate-program-search first, or tell me the product name and I'll research it."
• No competitor data for pricing table: Use web_search to find 1-2 competitors. If still unavailable: replace comparison table with single-product pricing tiers table.
• High-ticket product (>$500/mo): Emphasize ROI framing over price framing. Add "Request a Demo" or "Book a Call" CTA alongside the direct sign-up CTA.
• Product has free plan: Feature the free plan prominently — it's the main objection handler. Make "Start free, upgrade when ready" a core CTA pattern.
• Product is B2B enterprise (no public pricing): Replace pricing table with feature comparison. Use "Get a quote" or "Contact sales" CTA. Note in output.

Examples

Example 1: Standard SaaS showcase

User: "Build a product showcase page for HeyGen"

Action: web_search HeyGen features/pricing/reviews, angle=results-focused ("Create Studio-Quality Videos in Minutes"), blue theme, write full showcase with 12 features, 4 use cases, 3 tiers, 3 testimonials, 8-item FAQ.

Example 2: With custom angle

User: "Showcase page for Semrush with a price-value angle vs Ahrefs"

Action: product=Semrush, angle=price-value, compare_with=[Ahrefs, Moz], build pricing comparison table with Semrush as the highlighted winner column.

Example 3: Dark theme for tech audience

User: "Product showcase for GitHub Copilot, dark theme, developer audience"

Action: product=GitHub Copilot, color_scheme=dark, target_audience="software developers", feature copy written in technical voice, code snippet examples in use cases section.

Example 4: Chained from S1

User: "Create a deep-dive showcase page for this product"

Context: S1 returned Klaviyo as recommended_program

Action: Auto-pick up Klaviyo from S1 output, research features, build full showcase page.

References

• references/conversion-principles.md — Long-form page structure, CTA placement density, trust signal placement. Read in Step 2.
• shared/references/ftc-compliance.md — Disclosure text for hero and footer. Read in Step 3.
• shared/references/affitor-branding.md — Footer attribution HTML. Read in Step 3.
• shared/references/affiliate-glossary.md — Terminology reference.
• shared/references/flywheel-connections.md — master flywheel connection map

Flywheel Connections

Feeds Into

• bio-link-deployer (S5) — showcase page URL for link hub
• email-drip-sequence (S5) — showcase page as email destination
• github-pages-deployer (S5) — HTML file to deploy

Fed By

• affiliate-program-search (S1) — recommended_program product data
• grand-slam-offer (S4) — offer framing for the showcase
• bonus-stack-builder (S4) — bonuses to feature on the page

Feedback Loop

• conversion-tracker (S6) measures showcase conversion rate → optimize page elements

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: "product-showcase-page"
  stage: "landing"
  timestamp: string
  suggested_next:
    - "bio-link-deployer"
    - "github-pages-deployer"
    - "conversion-tracker"