popup

Name: popup
Author: kostja94

753stars109forks

How to install popup?

kostja94/marketing-skills/popup

$npx -y skills add kostja94/marketing-skills --skill popup

Installs into the current project.

Summary

When the user wants to add, optimize, or audit popups or modals for lead capture or offers. Also use when the user mentions "popup," "modal," "lightbox," "overlay," "exit-intent," "popup form," "modal design," "lead popup," "popup timing," or "popup triggers." For CRO, use conver

Files · 1

View on GitHub

SKILL.md

1	# Components: Popup / Modal
2
3	Guides popup and modal design for conversion. Well-designed popups can achieve up to 25% conversion; poorly timed or intrusive ones hurt UX and SEO. Google penalizes intrusive mobile popups.
4
5	When invoking: On first use, if helpful, open with 1-2 sentences on what this skill covers and why it matters, then provide the main output. On subsequent use or when the user asks to skip, go directly to the main output.
6
7	## Initial Assessment
8
9	Check for project context first: If `.claude/project-context.md` or `.cursor/project-context.md` exists, read it for offers and audience.
10
11	Identify:
12	1. Goal: Newsletter, discount, lead magnet, demo
13	2. Trigger: Time delay, scroll %, exit intent, click
14	3. Mobile: Critical; smaller screens = easier to interrupt
15
16	## Best Practices
17
18	### Timing and Context
19
20	- Avoid: Popup on page load; users hate it
21	- Prefer: After engagement (scroll 25-50%, time on page, exit intent)
22	- Personalize: Returning visitors, cart abandoners, discount users
23	- Value-first: Offer genuine value; act as "helpful teammate" not spam
24
25	### Design
26
27	- Short copy: Clear headline, one benefit, single CTA
28	- Visual hierarchy: Guide attention to CTA; don't distract
29	- Easy exit: Clear X, visible "No Thanks"; friction-free exit increases trust and conversion
30	- Brand consistency: Build instant comfort
31
32	### Mobile
33
34	- Size: Fit screen; thumb-friendly close
35	- Lightweight: Avoid heavy assets; affects LCP
36	- SEO: Google penalizes intrusive interstitials; avoid full-page takeover on mobile
37
38	### Avoid
39
40	- Dark patterns (fake close, hidden options)
41	- Too early or too frequent
42	- Multiple popups in one session
43	- Blocking content without clear value
44
45	## Triggers
46
47	\| Trigger \| Use \|
48	\|---------\|-----\|
49	\| Time delay \| 5-15s typical; after some engagement \|
50	\| Scroll % \| 25-50% read; user invested \|
51	\| Exit intent \| Mouse leaving viewport; last chance \|
52	\| Click \| User-initiated; least intrusive \|
53
54	## Output Format
55
56	- Offer and copy
57	- Trigger (timing, scroll, exit intent)
58	- Design (size, CTA, exit)
59	- Mobile checklist
60
61	## Related Skills
62
63	- signup-login-page-generator: Full account signup → dedicated page preferred; popup for lightweight capture
64	- landing-page-generator: Lead capture popups on landing pages; popup as alternative to full-page form
65	- newsletter-signup-generator: Popup often contains signup form
66	- cta-generator: Popup CTA design
67	- top-banner-generator: Alternative to popup; less intrusive for announcements
68	- sidebar-generator: Alternative for CTAs; in-content often converts better
69	- brand-visual-generator: Popup styling

People who liked this also viewed

6 picks

Type

popup

753stars109forks

View on GitHub

How to install popup?

kostja94/marketing-skills/popup

$npx -y skills add kostja94/marketing-skills --skill popup

Installs into the current project.

Summary

Files · 1

View on GitHub

SKILL.md

1	# Components: Popup / Modal
2
3	Guides popup and modal design for conversion. Well-designed popups can achieve up to 25% conversion; poorly timed or intrusive ones hurt UX and SEO. Google penalizes intrusive mobile popups.
4
5	When invoking: On first use, if helpful, open with 1-2 sentences on what this skill covers and why it matters, then provide the main output. On subsequent use or when the user asks to skip, go directly to the main output.
6
7	## Initial Assessment
8
9	Check for project context first: If `.claude/project-context.md` or `.cursor/project-context.md` exists, read it for offers and audience.
10
11	Identify:
12	1. Goal: Newsletter, discount, lead magnet, demo
13	2. Trigger: Time delay, scroll %, exit intent, click
14	3. Mobile: Critical; smaller screens = easier to interrupt
15
16	## Best Practices
17
18	### Timing and Context
19
20	- Avoid: Popup on page load; users hate it
21	- Prefer: After engagement (scroll 25-50%, time on page, exit intent)
22	- Personalize: Returning visitors, cart abandoners, discount users
23	- Value-first: Offer genuine value; act as "helpful teammate" not spam
24
25	### Design
26
27	- Short copy: Clear headline, one benefit, single CTA
28	- Visual hierarchy: Guide attention to CTA; don't distract
29	- Easy exit: Clear X, visible "No Thanks"; friction-free exit increases trust and conversion
30	- Brand consistency: Build instant comfort
31
32	### Mobile
33
34	- Size: Fit screen; thumb-friendly close
35	- Lightweight: Avoid heavy assets; affects LCP
36	- SEO: Google penalizes intrusive interstitials; avoid full-page takeover on mobile
37
38	### Avoid
39
40	- Dark patterns (fake close, hidden options)
41	- Too early or too frequent
42	- Multiple popups in one session
43	- Blocking content without clear value
44
45	## Triggers
46
47	\| Trigger \| Use \|
48	\|---------\|-----\|
49	\| Time delay \| 5-15s typical; after some engagement \|
50	\| Scroll % \| 25-50% read; user invested \|
51	\| Exit intent \| Mouse leaving viewport; last chance \|
52	\| Click \| User-initiated; least intrusive \|
53
54	## Output Format
55
56	- Offer and copy
57	- Trigger (timing, scroll, exit intent)
58	- Design (size, CTA, exit)
59	- Mobile checklist
60
61	## Related Skills
62
63	- signup-login-page-generator: Full account signup → dedicated page preferred; popup for lightweight capture
64	- landing-page-generator: Lead capture popups on landing pages; popup as alternative to full-page form
65	- newsletter-signup-generator: Popup often contains signup form
66	- cta-generator: Popup CTA design
67	- top-banner-generator: Alternative to popup; less intrusive for announcements
68	- sidebar-generator: Alternative for CTAs; in-content often converts better
69	- brand-visual-generator: Popup styling

People who liked this also viewed

6 picks

Type