conversion-ux

Name: conversion-ux
Author: ominou5

68stars15forks

How to install conversion-ux?

ominou5/funnel-architect-plugin/conversion-ux

$npx -y skills add ominou5/funnel-architect-plugin --skill conversion-ux

Installs into the current project.

Summary

Conversion-focused UX patterns for sales funnel pages. Apply these patterns to every page to maximize conversion rates. Covers layout, CTA placement, social proof, urgency, and friction reduction.

Files · 1

View on GitHub

SKILL.md

1	# Conversion UX Patterns
2
3	Apply these patterns to every funnel page. These are not suggestions — they are requirements for high-converting funnels.
4
5	## Above the Fold (First Viewport)
6
7	Every page must have these 3 elements visible without scrolling:
8
9	1. Headline — Clear, benefit-driven, addresses the #1 pain point
10	2. Sub-headline — Expands on the headline, introduces the solution
11	3. Primary CTA — Visible, high-contrast button with action-oriented text
12
13	```html
14	<!-- Pattern: Hero Section -->
15	<section class="hero">
16	<h1>Headline: Desired Outcome</h1>
17	<p class="subtitle">Sub-headline: How you'll get there</p>
18	<a href="#action" class="cta-primary">Action-Oriented CTA Text →</a>
19	</section>
20	```
21
22	## CTA Button Rules
23
24	\| Rule \| Good ✅ \| Bad ❌ \|
25	\|---\|---\|---\|
26	\| Action-oriented \| "Get My Free Guide" \| "Submit" \|
27	\| First-person \| "Start My Trial" \| "Start Your Trial" \|
28	\| Benefit-focused \| "Unlock 50% More Sales" \| "Click Here" \|
29	\| Urgency \| "Claim My Spot (Only 12 Left)" \| "Register" \|
30	\| Specificity \| "Download the 7-Step Checklist" \| "Download" \|
31
32	### CTA Placement
33	- Always above the fold
34	- Repeat after every major value block (every 2–3 scroll lengths)
35	- Sticky CTA bar on mobile (bottom of viewport)
36	- Final CTA with full benefit stack at page bottom
37
38	## Social Proof Patterns
39
40	### Testimonial Card
41	```html
42	<div class="testimonial">
43	<img src="avatar.jpg" alt="Customer Name" class="testimonial-avatar">
44	<blockquote>
45	<p>"Specific result they achieved with your product."</p>
46	<cite>
47	<strong>Full Name</strong>
48	<span>Title, Company</span>
49	</cite>
50	</blockquote>
51	</div>
52	```
53
54	### Trust Bar
55	```html
56	<div class="trust-bar">
57	<span>As featured in:</span>
58	<img src="logo1.svg" alt="Publication 1">
59	<img src="logo2.svg" alt="Publication 2">
60	<img src="logo3.svg" alt="Publication 3">
61	</div>
62	```
63
64	### Stats Row
65	```html
66	<div class="stats-row">
67	<div class="stat"><strong>10,000+</strong><span>Customers Served</span></div>
68	<div class="stat"><strong>4.9/5</strong><span>Average Rating</span></div>
69	<div class="stat"><strong>30-Day</strong><span>Money-Back Guarantee</span></div>
70	</div>
71	```
72
73	## Urgency Patterns (Use Authentically)
74
75	- Countdown timer — Only for real deadlines (course enrollment, live event)
76	- Limited spots — Only if genuinely limited ("12 of 50 spots remaining")
77	- Price increase — Only if price is actually changing
78	- Seasonal — "Enroll before [date] to join the spring cohort"
79
80	## Friction Reduction
81
82	### Form Optimization
83	- Minimize fields — Only ask for what you need at this stage
84	- Opt-in: Email only (name optional)
85	- Purchase: Email, name, payment
86	- Application: More fields acceptable
87	- Single-column layout — Never side-by-side fields on forms
88	- Progress indicator — For multi-step forms
89	- Inline validation — Show errors in real-time, not on submit
90
91	### Navigation
92	- Remove top nav on landing pages — No escape routes
93	- Single CTA — One primary action per page (secondary allowed in footer)
94	- Exit intent — Optional popup when cursor moves to close tab
95
96	## Visual Hierarchy
97
98	1. Headline (largest text, bold)
99	2. Sub-headline (medium text)
100	3. CTA button (high contrast, standout color)
101	4. Body copy (readable, 16px+ on desktop, 18px+ on mobile)
102	5. Supporting text (smaller, lighter — fine print, disclaimers)
103
104	## Mobile UX Requirements
105
106	- Touch targets: minimum 44x44px
107	- CTA button: full width on mobile
108	- Font size: minimum 16px (prevents iOS zoom on input focus)
109	- Spacing: generous padding between tap targets
110	- Sticky CTA: fixed bottom bar on scroll

People who liked this also viewed

6 picks

Type

conversion-ux

68stars15forks

View on GitHub

How to install conversion-ux?

ominou5/funnel-architect-plugin/conversion-ux

$npx -y skills add ominou5/funnel-architect-plugin --skill conversion-ux

Installs into the current project.

Summary

Conversion-focused UX patterns for sales funnel pages. Apply these patterns to every page to maximize conversion rates. Covers layout, CTA placement, social proof, urgency, and friction reduction.

Files · 1

View on GitHub

SKILL.md

1	# Conversion UX Patterns
2
3	Apply these patterns to every funnel page. These are not suggestions — they are requirements for high-converting funnels.
4
5	## Above the Fold (First Viewport)
6
7	Every page must have these 3 elements visible without scrolling:
8
9	1. Headline — Clear, benefit-driven, addresses the #1 pain point
10	2. Sub-headline — Expands on the headline, introduces the solution
11	3. Primary CTA — Visible, high-contrast button with action-oriented text
12
13	```html
14	<!-- Pattern: Hero Section -->
15	<section class="hero">
16	<h1>Headline: Desired Outcome</h1>
17	<p class="subtitle">Sub-headline: How you'll get there</p>
18	<a href="#action" class="cta-primary">Action-Oriented CTA Text →</a>
19	</section>
20	```
21
22	## CTA Button Rules
23
24	\| Rule \| Good ✅ \| Bad ❌ \|
25	\|---\|---\|---\|
26	\| Action-oriented \| "Get My Free Guide" \| "Submit" \|
27	\| First-person \| "Start My Trial" \| "Start Your Trial" \|
28	\| Benefit-focused \| "Unlock 50% More Sales" \| "Click Here" \|
29	\| Urgency \| "Claim My Spot (Only 12 Left)" \| "Register" \|
30	\| Specificity \| "Download the 7-Step Checklist" \| "Download" \|
31
32	### CTA Placement
33	- Always above the fold
34	- Repeat after every major value block (every 2–3 scroll lengths)
35	- Sticky CTA bar on mobile (bottom of viewport)
36	- Final CTA with full benefit stack at page bottom
37
38	## Social Proof Patterns
39
40	### Testimonial Card
41	```html
42	<div class="testimonial">
43	<img src="avatar.jpg" alt="Customer Name" class="testimonial-avatar">
44	<blockquote>
45	<p>"Specific result they achieved with your product."</p>
46	<cite>
47	<strong>Full Name</strong>
48	<span>Title, Company</span>
49	</cite>
50	</blockquote>
51	</div>
52	```
53
54	### Trust Bar
55	```html
56	<div class="trust-bar">
57	<span>As featured in:</span>
58	<img src="logo1.svg" alt="Publication 1">
59	<img src="logo2.svg" alt="Publication 2">
60	<img src="logo3.svg" alt="Publication 3">
61	</div>
62	```
63
64	### Stats Row
65	```html
66	<div class="stats-row">
67	<div class="stat"><strong>10,000+</strong><span>Customers Served</span></div>
68	<div class="stat"><strong>4.9/5</strong><span>Average Rating</span></div>
69	<div class="stat"><strong>30-Day</strong><span>Money-Back Guarantee</span></div>
70	</div>
71	```
72
73	## Urgency Patterns (Use Authentically)
74
75	- Countdown timer — Only for real deadlines (course enrollment, live event)
76	- Limited spots — Only if genuinely limited ("12 of 50 spots remaining")
77	- Price increase — Only if price is actually changing
78	- Seasonal — "Enroll before [date] to join the spring cohort"
79
80	## Friction Reduction
81
82	### Form Optimization
83	- Minimize fields — Only ask for what you need at this stage
84	- Opt-in: Email only (name optional)
85	- Purchase: Email, name, payment
86	- Application: More fields acceptable
87	- Single-column layout — Never side-by-side fields on forms
88	- Progress indicator — For multi-step forms
89	- Inline validation — Show errors in real-time, not on submit
90
91	### Navigation
92	- Remove top nav on landing pages — No escape routes
93	- Single CTA — One primary action per page (secondary allowed in footer)
94	- Exit intent — Optional popup when cursor moves to close tab
95
96	## Visual Hierarchy
97
98	1. Headline (largest text, bold)
99	2. Sub-headline (medium text)
100	3. CTA button (high contrast, standout color)
101	4. Body copy (readable, 16px+ on desktop, 18px+ on mobile)
102	5. Supporting text (smaller, lighter — fine print, disclaimers)
103
104	## Mobile UX Requirements
105
106	- Touch targets: minimum 44x44px
107	- CTA button: full width on mobile
108	- Font size: minimum 16px (prevents iOS zoom on input focus)
109	- Spacing: generous padding between tap targets
110	- Sticky CTA: fixed bottom bar on scroll

People who liked this also viewed

6 picks

Type