---
name: popup-generator
description: 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 conversion-optimization.
metadata:
  version: 1.0.1
---

# Components: Popup / Modal

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.

**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.

## Initial Assessment

**Check for project context first:** If `.claude/project-context.md` or `.cursor/project-context.md` exists, read it for offers and audience.

Identify:
1. **Goal**: Newsletter, discount, lead magnet, demo
2. **Trigger**: Time delay, scroll %, exit intent, click
3. **Mobile**: Critical; smaller screens = easier to interrupt

## Best Practices

### Timing and Context

- **Avoid**: Popup on page load; users hate it
- **Prefer**: After engagement (scroll 25-50%, time on page, exit intent)
- **Personalize**: Returning visitors, cart abandoners, discount users
- **Value-first**: Offer genuine value; act as "helpful teammate" not spam

### Design

- **Short copy**: Clear headline, one benefit, single CTA
- **Visual hierarchy**: Guide attention to CTA; don't distract
- **Easy exit**: Clear X, visible "No Thanks"; friction-free exit increases trust and conversion
- **Brand consistency**: Build instant comfort

### Mobile

- **Size**: Fit screen; thumb-friendly close
- **Lightweight**: Avoid heavy assets; affects LCP
- **SEO**: Google penalizes intrusive interstitials; avoid full-page takeover on mobile

### Avoid

- Dark patterns (fake close, hidden options)
- Too early or too frequent
- Multiple popups in one session
- Blocking content without clear value

## Triggers

| Trigger | Use |
|---------|-----|
| **Time delay** | 5-15s typical; after some engagement |
| **Scroll %** | 25-50% read; user invested |
| **Exit intent** | Mouse leaving viewport; last chance |
| **Click** | User-initiated; least intrusive |

## Output Format

- **Offer** and copy
- **Trigger** (timing, scroll, exit intent)
- **Design** (size, CTA, exit)
- **Mobile** checklist

## Related Skills

- **signup-login-page-generator**: Full account signup → dedicated page preferred; popup for lightweight capture
- **landing-page-generator**: Lead capture popups on landing pages; popup as alternative to full-page form
- **newsletter-signup-generator**: Popup often contains signup form
- **cta-generator**: Popup CTA design
- **top-banner-generator**: Alternative to popup; less intrusive for announcements
- **sidebar-generator**: Alternative for CTAs; in-content often converts better
- **brand-visual-generator**: Popup styling