Details
Overview
Components: Top Banner (Announcement Bar) Skill is an open-source Agent Skill from the kostja94/marketing-skills collection (MIT). It teaches AI coding agents focused marketing / SEO workflows so they can produce production-ready guidance instead of generic advice.
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.
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)
Official skill id: top-banner-generator. Source path: skills/components/utility/top-banner.
Key Features
- C: lear hierarchy: Message + CTA in ~400ms "blink test"
- M: inimal copy: One line typical; link for "Learn more"
- H: igh contrast: Stand out from page; CTA color distinct
- M: obile-first: 70%+ traffic on mobile; thumb-friendly close/CTA
- D: esktop: 1920x600px keeps content above fold; 16:9 common
- M: obile: 800x1200px (2:3 portrait); use separate assets, not scaled
How to Use
- Use a Skill-compatible agent such as Claude Code, Cursor, or Codex.
- Install from the terminal (Node.js required):
npx skills add https://github.com/kostja94/marketing-skills --skill top-banner
Or paste the install prompt from this tool page into your agent and ask it to install for you. 3. Restart / reload the agent so the new Skill is loaded. 4. Invoke the Skill with its slash commands or by asking the agent to run the workflow described in Overview / Key Features. 5. Review outputs before publishing — treat model-generated copy, images, and data as drafts.
Pricing
| Plan | Billing | Price | Notes |
|---|---|---|---|
| Open source | — | Free | MIT license; install via npx skills add |
| Full pack | — | Free | Optional: install the entire marketing-skills repo |
No paid tiers. Check the GitHub repository for license and updates.
Best For
Marketers, indie hackers, ecommerce / SaaS founders, and SEO operators who want agents to execute a specific marketing task with structured best practices.
Trigger context from the skill author: 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…
FAQ
How do I install this skill?
npx skills add https://github.com/kostja94/marketing-skills --skill top-banner-generator
Or copy the skill folder into .cursor/skills/, .agents/skills/, or .claude/skills/.
Does this skill run code on my machine?
No. Skills in this collection are pure Markdown instructions for agents — no executable payloads.
Can I install only this skill instead of the full pack?
Yes. Prefer --skill top-banner-generator for a single task. Install 2–3 related skills per job rather than the entire library.
Where should I add project context?
Copy templates/project-context.md from the repo into .cursor/ or .claude/ and fill in product, audience, and brand details so outputs stay tailored.