Sidebar Generator
Design or audit blog and docs sidebars so navigation and CTAs support conversion instead of distracting from the main content.
Overview
Sidebar-generator is an agent skill for the Launch phase that designs, optimizes, and audits sidebars for blogs, docs, and content pages with conversion-aware placement guidance.
Install
npx skills add https://github.com/kostja94/marketing-skills --skill sidebar-generatorWhat is this skill?
- Initial assessment for blog, docs, and e-commerce sidebars with mobile collapse guidance
- Placement rules: left for nav focus (~80% attention), right for secondary content and related posts
- Conversion data: posts without sidebars ~3.1x higher conversion; bottom-right sticky CTAs vs sidebar CTR (5.62% vs 0.58%
- Reads `.claude/project-context.md` or `.cursor/project-context.md` when present for structure and goals
- Pairs with blog-page-generator for full blog layout work
- 3.1x higher conversion without sidebars (cited in skill)
- 5.62% vs 0.58% CTR sticky bottom-right vs sidebar (cited in skill)
- ~80% user focus on left (cited in skill)
Adoption & trust: 745 installs on skills.sh; 586 GitHub stars; 3/3 security scanners passed (skills.sh audits).
What problem does it solve?
You are shipping content pages with a default sidebar full of widgets and have no clear rule for when sidebars help navigation versus when they steal attention from your primary CTA.
Who is it for?
Solo builders publishing blogs, docs, or marketing sites who want evidence-backed sidebar and CTA decisions without hiring a conversion consultant.
Skip if: Teams that only need full blog page layout or theme-wide redesign—use blog-page-generator or a design system skill instead; not for app dashboards without content sidebars.
When should I use this skill?
User wants to design, optimize, or audit a sidebar for blogs, docs, or content pages; mentions sidebar, blog sidebar, content sidebar, side panel, sidebar navigation, related content, sidebar CTA, doc sidebar, or sidebar
What do I get? / Deliverables
You get a structured sidebar plan—placement, sticky behavior, mobile collapse, and CTA strategy—tuned to your content type and conversion goal.
- Sidebar placement and widget recommendations
- Mobile collapse strategy
- CTA placement vs sidebar tradeoff notes
Recommended Skills
Journey fit
Sidebar layout directly affects on-page engagement and conversion on content you ship for discovery—best tagged on the launch shelf with SEO/content-page optimization. SEO and content landing pages are where sidebar vs no-sidebar and CTA placement decisions matter most for solo builders publishing blogs and docs.
How it compares
Content-layout guidance skill, not a WordPress plugin or automated theme generator.
Common Questions / FAQ
Who is sidebar-generator for?
Indie and solo builders running blogs, documentation sites, or content marketing pages who control layout in code or CMS and want sidebars that support navigation without killing conversions.
When should I use sidebar-generator?
Use it during launch when refining SEO content templates, when auditing an existing blog sidebar, or when deciding related-content rails vs sticky CTAs on docs—especially before a content redesign.
Is sidebar-generator safe to install?
It is procedural marketing guidance with no built-in network or shell requirements in the skill text; review the Security Audits panel on this Prism page before installing from any marketplace source.
SKILL.md
READMESKILL.md - Sidebar Generator
# Components: Sidebar Guides sidebar design for content sites (blogs, docs). ~80% of users focus on the left; sidebars influence flow but can hurt conversion if overused. Posts without sidebars show 3.1x higher conversion; bottom-right sticky CTAs outperform sidebars (5.62% vs 0.58% CTR). **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 content structure and conversion goals. Identify: 1. **Content type**: Blog, docs, e-commerce 2. **Primary goal**: Navigation, CTA, related content 3. **Mobile**: Collapse to hamburger or hide on small screens ## Best Practices ### Placement - **Left sidebar**: Prime for nav; 80% of users focus left - **Right sidebar**: Secondary content, ads, related posts - **Static vs sticky**: Static for content-focused; sticky for persistent CTA (subscription, cart) ### Conversion Reality | Approach | Typical result | |----------|----------------| | **Sidebar CTA** | <1% opt-in for blog sidebars | | **In-content CTA** | 3x+ higher conversion | | **Bottom-right sticky** | 5.62% CTR vs 0.58% sidebar | | **No sidebar** | 3.1x higher conversion vs with sidebar | **Recommendation**: Prefer in-content CTAs or bottom-right sticky over sidebar CTAs. Use sidebar for nav and discovery, not primary conversion. ### Widget Guidelines - **One high-value CTA** max; avoid clutter - **Social proof**: Testimonials, logos - **Popular/related posts**: Discovery, internal linking - **Avoid**: Too many ads, affiliate links; reduces trust and speed ### Mobile - **Collapse**: Hamburger or off-canvas drawer - **57%+ mobile traffic**: Responsive design non-negotiable - **Reduce clutter**: Hide or simplify sidebar on small screens ## Output Format - **Placement** (left/right, static/sticky) - **Widget** list (nav, CTA, related, social proof) - **Mobile** behavior - **Conversion** note (in-content vs sidebar CTA) ## Related Skills - **toc-generator**: TOC often in sidebar for long content - **cta-generator**: Sidebar CTA (use sparingly) - **newsletter-signup-generator**: Sidebar signup; consider in-content instead - **internal-links**: Related posts in sidebar