Top Banner Generator
Design or audit a sticky top announcement bar for promos, urgency, trust signals, or newsletter capture on a marketing site or store.
Overview
top-banner-generator is an agent skill most often used in Launch (also Build and Grow) that specifies goals, placement, and best practices for high-converting top announcement bars.
Install
npx skills add https://github.com/kostja94/marketing-skills --skill top-banner-generatorWhat is this skill?
- Initial assessment for goal (lead capture, promo, urgency, trust, free shipping), placement, and audience segmentation
- Best-practices matrix mapping use cases to concrete banner examples
- Pulls offers and Visual Identity from project-context.md when Section 12 exists
- Claims well-tuned bars can lift coupon redemption roughly 30–50% (skill cites this range)
- Pairs with discount-marketing-strategy for deeper promo mechanics beyond bar copy
- ~3 second visitor comprehension target stated in skill
- 30–50% coupon redemption uplift cited when bars are used well
- skill version 1.1.1 in frontmatter
Adoption & trust: 764 installs on skills.sh; 586 GitHub stars; 3/3 security scanners passed (skills.sh audits).
What problem does it solve?
Visitors hit your site but miss the one message—discount, trust, or signup—that should be obvious in the first three seconds above the fold.
Who is it for?
Indie SaaS and ecommerce sites running promos, student discounts, or newsletter capture during launch or seasonal campaigns.
Skip if: Full-funnel discount strategy or pricing architecture—invoke discount-marketing-strategy instead—or native mobile app onboarding flows that are not web header banners.
When should I use this skill?
User mentions announcement bar, top banner, sticky bar, promo banner, student discount banner, or lead capture bar.
What do I get? / Deliverables
You get a structured banner brief (goal, placement, audience, use-case patterns) ready to implement in your theme or component library.
- Banner goal and placement brief
- Use-case pattern table applied to your product
- Audience and dismissibility recommendations
Recommended Skills
Journey fit
Spans multiple journey phases - primary shelf plus alternate fits below.
Launch is the canonical shelf because announcement bars are primary conversion surfaces when you first expose offers and trust messages to cold traffic. Distribution covers on-site promo surfaces that support campaigns aligned with external launch and acquisition pushes.
Where it fits
Turn banner requirements into a sticky component spec before you merge the marketing layout PR.
Add a launch-week urgency bar that matches directory and PH campaign offers.
Show different dismissible bars for returning subscribers versus first-time visitors.
How it compares
Component-level promo bar guidance, not a full CRO audit or email lifecycle automation skill.
Common Questions / FAQ
Who is top-banner-generator for?
Solo builders and small teams shipping marketing sites or stores who need a clear spec for a sticky announcement bar without hiring a CRO consultant.
When should I use top-banner-generator?
At Launch when traffic arrives from directories or ads; during Build when implementing the marketing frontend; and during Grow when you segment returning visitors or cart abandoners with different bar copy.
Is top-banner-generator safe to install?
It only guides UX and messaging patterns; check this page’s Security Audits panel and avoid putting API keys or PII collection logic into banner scripts without your own privacy review.
Workflow Chain
Then invoke: discount marketing strategy
SKILL.md
READMESKILL.md - Top Banner Generator
# 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: 1. **Goal**: Lead capture, promo, urgency, trust, free shipping 2. **Placement**: Above header (sticky) or below; dismissible or persistent 3. **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