product-showcase-page

Name: product-showcase-page
Author: Affitor

4installs184forks

How to install product-showcase-page?

affitor/affiliate-skills/product-showcase-page

$npx -y skills add Affitor/affiliate-skills --skill product-showcase-page

Installs into the current project.

Summary

Build a single-product deep-dive showcase page as a self-contained HTML file. Triggers on: "build a product showcase page", "deep dive landing page for [product]", "create a product spotlight page", "product feature page", "single product page", "detailed page about [product]", "

Files · 1

View on GitHub

SKILL.md

1	# Product Showcase Page
2
3	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.
4
5	## When to Use
6
7	- User wants a dedicated page for one product that covers everything a buyer needs to know
8	- User says "showcase page", "product spotlight", "deep-dive page", "feature breakdown page"
9	- User wants a page longer than a standard landing page — for high-ticket products needing more persuasion
10	- User is sending warm traffic (from a blog post or email) and wants to close the sale
11	- User wants a page that can double as a product review in page form
12
13	## Workflow
14
15	### Step 1: Gather Product Data
16
17	If `product` data is available from S1 or prior conversation, use it directly.
18
19	Otherwise, use `web_search` to research the product:
20	1. Features: `"[product name] features"` — gather 6-12 distinct capabilities
21	2. Pricing: `"[product name] pricing"` — all tiers with feature differences
22	3. Use cases: `"[product name] use cases"` OR `"[product name] examples"` — concrete applications
23	4. Testimonials: `"[product name] reviews"` on G2/Capterra — find real sentiment (do not copy verbatim — paraphrase or create realistic representative examples)
24	5. Competitors: `"[product name] vs"` — 2-3 competitors for the pricing comparison
25	6. FAQ: `"[product name] questions"` OR check product's own FAQ page
26
27	Organize the research into these buckets:
28	- Core features (6-12, each with a one-sentence benefit statement)
29	- Use cases (3-5, each framed as a specific problem solved)
30	- Pricing tiers (2-4 tiers with included features and price)
31	- Comparison data (the 5-8 dimensions where this product wins vs. competitors)
32	- Social proof (ratings, user counts, company names using it)
33	- FAQ answers (6-10 questions)
34
35	### Step 2: Plan the Page Architecture
36
37	Read `references/conversion-principles.md` for long-form page principles.
38
39	A product showcase page is longer than a standard landing page — it must justify the length with value at every section. Plan each section:
40
41	1. FTC Disclosure — small, above hero
42	2. Hero — headline + sub-headline + primary CTA + hero visual + trust bar
43	3. Problem Statement — 2-3 sentences establishing the pain the product solves
44	4. Product Overview — 3-sentence description + key stats
45	5. Features Grid — 6-12 features with icons (pure CSS) + headline + description
46	6. Use Cases — 3-5 real scenarios (who uses it, how, outcome)
47	7. Social Proof Bar — logos, ratings, subscriber counts
48	8. Pricing Comparison — table comparing this product's tiers against 2 competitors
49	9. Testimonials — 2-3 cards with quote, name, role
50	10. FAQ Accordion — 6-10 questions with JS-powered expand/collapse
51	11. Final CTA Section — strong headline + benefits recap + primary CTA button
52	12. Footer — FTC disclosure full text, Affitor attribution
53
54	CTA placement rules:
55	- Hero: primary CTA (always visible)
56	- After Features Grid: secondary CTA
57	- After Pricing Table: high-intent CTA (primed by seeing pricing)
58	- After Testimonials: social-proof-backed CTA
59	- Final CTA section: closing CTA
60	- Total: 4-5 CTAs per page
61
62	Angle selection — choose based on what the research shows:
63	\| Angle \| Headline formula \|
64	\|---\|---\|
65	\| Best in category \| "The [Category] Tool That Actually Works" \|
66	\| Price/value \| "Get [Competitor]-Level Results for Half the Price" \|
67	\| Speed \| "From Zero to [Outcome] in [Timeframe]" \|
68	\| Simplicity \| "The [Category] Tool That Doesn't Require a Manual" \|
69	\| Results-focused \| "[Specific Outcome]: How [Product] Delivers Where Others Don't" \|
70
71	### Step 3: Write the Full HTML
72
73	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.
74
75	Design specifications:
76	- All CSS inline in a `<style>` block — no external stylesheets

People who liked this also viewed

6 picks

Type

product-showcase-page

4installs184forks

View on GitHub

How to install product-showcase-page?

affitor/affiliate-skills/product-showcase-page

$npx -y skills add Affitor/affiliate-skills --skill product-showcase-page

Installs into the current project.

Summary

Files · 1

View on GitHub

SKILL.md

1	# Product Showcase Page
2
3	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.
4
5	## When to Use
6
7	- User wants a dedicated page for one product that covers everything a buyer needs to know
8	- User says "showcase page", "product spotlight", "deep-dive page", "feature breakdown page"
9	- User wants a page longer than a standard landing page — for high-ticket products needing more persuasion
10	- User is sending warm traffic (from a blog post or email) and wants to close the sale
11	- User wants a page that can double as a product review in page form
12
13	## Workflow
14
15	### Step 1: Gather Product Data
16
17	If `product` data is available from S1 or prior conversation, use it directly.
18
19	Otherwise, use `web_search` to research the product:
20	1. Features: `"[product name] features"` — gather 6-12 distinct capabilities
21	2. Pricing: `"[product name] pricing"` — all tiers with feature differences
22	3. Use cases: `"[product name] use cases"` OR `"[product name] examples"` — concrete applications
23	4. Testimonials: `"[product name] reviews"` on G2/Capterra — find real sentiment (do not copy verbatim — paraphrase or create realistic representative examples)
24	5. Competitors: `"[product name] vs"` — 2-3 competitors for the pricing comparison
25	6. FAQ: `"[product name] questions"` OR check product's own FAQ page
26
27	Organize the research into these buckets:
28	- Core features (6-12, each with a one-sentence benefit statement)
29	- Use cases (3-5, each framed as a specific problem solved)
30	- Pricing tiers (2-4 tiers with included features and price)
31	- Comparison data (the 5-8 dimensions where this product wins vs. competitors)
32	- Social proof (ratings, user counts, company names using it)
33	- FAQ answers (6-10 questions)
34
35	### Step 2: Plan the Page Architecture
36
37	Read `references/conversion-principles.md` for long-form page principles.
38
39	A product showcase page is longer than a standard landing page — it must justify the length with value at every section. Plan each section:
40
41	1. FTC Disclosure — small, above hero
42	2. Hero — headline + sub-headline + primary CTA + hero visual + trust bar
43	3. Problem Statement — 2-3 sentences establishing the pain the product solves
44	4. Product Overview — 3-sentence description + key stats
45	5. Features Grid — 6-12 features with icons (pure CSS) + headline + description
46	6. Use Cases — 3-5 real scenarios (who uses it, how, outcome)
47	7. Social Proof Bar — logos, ratings, subscriber counts
48	8. Pricing Comparison — table comparing this product's tiers against 2 competitors
49	9. Testimonials — 2-3 cards with quote, name, role
50	10. FAQ Accordion — 6-10 questions with JS-powered expand/collapse
51	11. Final CTA Section — strong headline + benefits recap + primary CTA button
52	12. Footer — FTC disclosure full text, Affitor attribution
53
54	CTA placement rules:
55	- Hero: primary CTA (always visible)
56	- After Features Grid: secondary CTA
57	- After Pricing Table: high-intent CTA (primed by seeing pricing)
58	- After Testimonials: social-proof-backed CTA
59	- Final CTA section: closing CTA
60	- Total: 4-5 CTAs per page
61
62	Angle selection — choose based on what the research shows:
63	\| Angle \| Headline formula \|
64	\|---\|---\|
65	\| Best in category \| "The [Category] Tool That Actually Works" \|
66	\| Price/value \| "Get [Competitor]-Level Results for Half the Price" \|
67	\| Speed \| "From Zero to [Outcome] in [Timeframe]" \|
68	\| Simplicity \| "The [Category] Tool That Doesn't Require a Manual" \|
69	\| Results-focused \| "[Specific Outcome]: How [Product] Delivers Where Others Don't" \|
70
71	### Step 3: Write the Full HTML
72
73	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.
74
75	Design specifications:
76	- All CSS inline in a `<style>` block — no external stylesheets

People who liked this also viewed

6 picks

Type