Components: Top Banner (Announcement Bar)

top-banner-generator

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

kostja94/marketing-skills·0installs1KstarsMarketing

SKILL.md

Full skill instructions

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

Install skill

Copy and run in your terminal

npx -y skills add https://github.com/kostja94/marketing-skills --skill top-banner

View on GitHub

skills/components/utility/top-banner/SKILL.md

More Marketing skills

View all

Marketing

copywriting

Marketing copy for homepages, landing pages, pricing pages, and other conversion-focused web pages.

53.3K 216.1K

View

Marketing

flux-2-klein

Fast image generation with Flux 2 Klein, optimized for sub-second iteration and multi-reference brand styling.

52 176.2K

View

Marketing

marketing-psychology

Psychological principles and mental models for understanding customer behavior and influencing marketing decisions.

53.3K 153K

View

Marketing

content-strategy

Plan searchable and shareable content that drives traffic, builds authority, and generates leads.

53.3K 150.9K

View

Marketing

programmatic-seo

Build SEO-optimized pages at scale using templates, data, and proven playbook patterns.

53.3K 140.1K

View

Marketing

marketing-ideas

Brainstorm and prioritize marketing strategies tailored to your SaaS stage, budget, and goals.

53.3K 137.2K

View

Marketing

ai-seo

Optimize content for discovery, citation, and visibility across AI search platforms and LLM assistants.

53.3K 136.7K

View

Marketing

copy-editing

Systematic improvement of existing marketing copy through seven focused editing passes.

53.3K 136.4K

View

Marketing

site-architecture

Plan and optimize your website's page hierarchy, navigation, URL structure, and internal linking.

53.3K 112.8K

View

Marketing

revops

Design and optimize systems connecting marketing, sales, and customer success into a unified revenue engine.

53.3K 104.9K

View

Marketing

brand-guidelines

Applies Anthropic's official brand colors and typography to any sort of artifact that may benefit from having Anthropic's look-and-feel. Use it when brand colors or style guidelines, visual formatting, or company design standards apply.

179.7K 100.1K

View