Top Banner Generator Agent Skill
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.
Install
one command, takes just this skill from the repositorynpx skills add https://github.com/kostja94/marketing-skills --skill top-banner-generatorThe instruction itself
10 sections, as written by the authorComponents: 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
Other skills for the same job
different authors, same section of the catalogue
A set of resources to help me write all kinds of internal communications, using the formats that my company likes to use. Claude should use this skill whenever asked to write some sort of internal communications (status reports, leadership updates, 3P updates, company newsletters, FAQs, incident reports, project updates, etc.).
Extracts and analyzes competitors' ads from ad libraries (Facebook, LinkedIn, etc.) to understand what messaging, problems, and creative approaches are working. Helps inspire and improve your own ad campaigns.
Identifies high-quality leads for your product or service by analyzing your business, searching for target companies, and providing actionable contact strategies. Perfect for sales, business development, and marketing professionals.
Analyzes your recent Claude Code chat history to identify coding patterns, development gaps, and areas for improvement, curates relevant learning resources from HackerNews, and automatically sends a personalized growth report to your Slack DMs.
Official Google SEO guide covering search optimization, best practices, Search Console, crawling, indexing, and improving website search visibility based on official Google documentation
Fix PageSpeed Insights/Lighthouse accessibility "!" errors caused by contrast audit failures (CSS filters, OKLCH/OKLAB, low opacity, gradient text, image backgrounds). Use for accessibility-driven SEO/performance debugging and remediation.
Complete App Store Optimization (ASO) toolkit for researching, optimizing, and tracking mobile app performance on Apple App Store and Google Play Store
Elite frontend image-direction skill for generating premium, conversion-aware website design references. CRITICAL OUTPUT RULE — generate ONE separate horizontal image FOR EVERY section. A landing page with 8 sections produces 8 images. Never compress multiple sections into one image. Enforces composition variety (not always left-text / right-image), background-image freedom, varied CTAs, varied hero scales (giant / mid / mini minimalist), narrative concept spine, second-read moments, and a single consistent palette across all images. Optimized for landing pages, marketing sites, and product comps that developers or coding models can accurately recreate.
How to use it
Take kostja94/top-banner-generator from the repository into ~/.claude/skills for personal
use, or into .claude/skills inside a project.
The agent identifies a skill by the name field in its header. Two skills with the
same name cannot sit side by side — one of them will be ignored.