Components: Top Banner (Announcement Bar)
Guides top announcement bar and sticky banner design for conversion. Top banners answer visitor questions in ~3 seconds (trust, discount, free shipping, urgency) and can increase coupon redemption by 30-50% when used well.
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, messaging, and Section 12 (Visual Identity).
Identify:
- Goal: Lead capture, promo, urgency, trust, free shipping
- Placement: Above header (sticky) or below; dismissible or persistent
- Audience: All visitors vs segmented (geo, returning, cart abandoners)
Best Practices
Use Cases
| Use |
Example |
| Lead capture |
Newsletter, lead magnet, demo request |
| Promo |
Discount code, flash sale, free shipping threshold |
| Urgency |
Limited-time offer, countdown |
| Trust |
Guarantee, security, shipping info |
| Launch |
Product launch, event, cross-sell |
Discount Banner Types
| Discount Type |
Banner Example |
Related |
| Annual discount |
"Save 20% with annual billing" |
discount-marketing-strategy |
| Student/education |
"Students: 30% off today, 15% off ongoing" |
education-program |
| Startups/education |
"Startups: Special pricing — Apply now" |
startups-page-generator |
| BFCM / seasonal |
"Black Friday: 25% off — Use code BF25" |
discount-marketing-strategy |
| First-time |
"New users: 20% off first year" |
discount-marketing-strategy |
| Referral code |
"Get $10 off — Refer a friend" |
referral-program |
Placement: Discount banner is P1 for student/education (homepage); pricing page also shows. See education-program for placement priority (registration P0, pricing P1, banner P1).
Design
- Clear hierarchy: Message + CTA in ~400ms "blink test"
- Minimal copy: One line typical; link for "Learn more"
- High contrast: Stand out from page; CTA color distinct
- Mobile-first: 70%+ traffic on mobile; thumb-friendly close/CTA
Technical
- Desktop: 1920x600px keeps content above fold; 16:9 common
- Mobile: 800x1200px (2:3 portrait); use separate assets, not scaled
- Performance: Optimize images; oversized banners hurt LCP and SEO
Avoid
- Crowding the header; leave space for nav and logo
- Too many CTAs; one primary action
- Stale messaging; refresh every 2-4 weeks
Output Format
- Message and CTA copy
- Placement (sticky top, below header)
- Targeting (all vs segment)
- Design notes (contrast, mobile)
Related Skills
- discount-marketing-strategy: Promo/discount strategy; banner displays discount code; 30–50% redemption lift
- education-program: Student discount banner (P1 placement); "Students: X% off" copy
- pricing-page-generator: Discount banner supports pricing page; Special programs, promo placement
- cta-generator: Banner CTA design
- newsletter-signup-generator: Lead capture in banner
- brand-visual-generator: Colors, typography for banner
- navigation-menu-generator: Banner sits above or integrates with nav
1---
2name: top-banner-generator
3description: When the user wants to add, optimize, or audit a top announcement bar or sticky banner. Also use when the user mentions "announcement bar," "top banner," "sticky bar," "promo banner," "discount banner," "student discount banner," "header banner," "announcement bar design," "sticky header," "promo bar," "urgency banner," or "lead capture bar." For promos, use discount-marketing-strategy.
4metadata:
5 version: 1.1.1
6---
7
8# Components: Top Banner (Announcement Bar)
9
10Guides top announcement bar and sticky banner design for conversion. Top banners answer visitor questions in ~3 seconds (trust, discount, free shipping, urgency) and can increase coupon redemption by 30-50% when used well.
11
12**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.
13
14## Initial Assessment
15
16**Check for project context first:** If `.claude/project-context.md` or `.cursor/project-context.md` exists, read it for offers, messaging, and Section 12 (Visual Identity).
17
18Identify:
191. **Goal**: Lead capture, promo, urgency, trust, free shipping
202. **Placement**: Above header (sticky) or below; dismissible or persistent
213. **Audience**: All visitors vs segmented (geo, returning, cart abandoners)
22
23## Best Practices
24
25### Use Cases
26
27| Use | Example |
28|-----|---------|
29| **Lead capture** | Newsletter, lead magnet, demo request |
30| **Promo** | Discount code, flash sale, free shipping threshold |
31| **Urgency** | Limited-time offer, countdown |
32| **Trust** | Guarantee, security, shipping info |
33| **Launch** | Product launch, event, cross-sell |
34
35### Discount Banner Types
36
37| Discount Type | Banner Example | Related |
38|---------------|----------------|---------|
39| **Annual discount** | "Save 20% with annual billing" | discount-marketing-strategy |
40| **Student/education** | "Students: 30% off today, 15% off ongoing" | education-program |
41| **Startups/education** | "Startups: Special pricing — Apply now" | startups-page-generator |
42| **BFCM / seasonal** | "Black Friday: 25% off — Use code BF25" | discount-marketing-strategy |
43| **First-time** | "New users: 20% off first year" | discount-marketing-strategy |
44| **Referral code** | "Get $10 off — Refer a friend" | referral-program |
45
46**Placement**: Discount banner is P1 for student/education (homepage); pricing page also shows. See **education-program** for placement priority (registration P0, pricing P1, banner P1).
47
48### Design
49
50- **Clear hierarchy**: Message + CTA in ~400ms "blink test"
51- **Minimal copy**: One line typical; link for "Learn more"
52- **High contrast**: Stand out from page; CTA color distinct
53- **Mobile-first**: 70%+ traffic on mobile; thumb-friendly close/CTA
54
55### Technical
56
57- **Desktop**: 1920x600px keeps content above fold; 16:9 common
58- **Mobile**: 800x1200px (2:3 portrait); use separate assets, not scaled
59- **Performance**: Optimize images; oversized banners hurt LCP and SEO
60
61### Avoid
62
63- Crowding the header; leave space for nav and logo
64- Too many CTAs; one primary action
65- Stale messaging; refresh every 2-4 weeks
66
67## Output Format
68
69- **Message** and CTA copy
70- **Placement** (sticky top, below header)
71- **Targeting** (all vs segment)
72- **Design** notes (contrast, mobile)
73
74## Related Skills
75
76- **discount-marketing-strategy**: Promo/discount strategy; banner displays discount code; 30–50% redemption lift
77- **education-program**: Student discount banner (P1 placement); "Students: X% off" copy
78- **pricing-page-generator**: Discount banner supports pricing page; Special programs, promo placement
79- **cta-generator**: Banner CTA design
80- **newsletter-signup-generator**: Lead capture in banner
81- **brand-visual-generator**: Colors, typography for banner
82- **navigation-menu-generator**: Banner sits above or integrates with nav
gabrielmoreira