Agent skill · design visual · kostja94
hero-generator
When the user wants to design, optimize, or audit hero sections (above-the-fold main visual area). Also use when the user mentions "hero," "hero section," "hero area," "above the fold," "above the fold content," "landing hero," "main banner," "banner section," "first fold," "hero section design," "hero conversion," "split layout hero," "centered hero," or "hero alignment." For homepage, use homepage-generator.
Why this skill is useful
Provides specific guidelines and layout types for optimizing hero sections that enhance user engagement and conversion rates.
What it needs
About 3k tokens when loaded. Last updated 2026-06-09. 860 stars on the source repository.
What this skill does
Components: Hero Section Guides hero section design for conversion and first impressions. The hero is where users spend ~80% of initial viewing time; first impressions form in milliseconds. 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 value proposition, audience, and Section 12 (Visual Identity). Identify: 1. Page type: Homepage, landing, product, pricing 2. Primary goal: Signup, trial, purchase, learn more 3. Platform: Web, mobile, both Core Components (Four Essentials) Headline (H1): 6–10 words max; instantly communicate core value and benefit. Answer "What's in it for me?" within seconds. Subheading: Clear, concise explanation reinforcing why the product/service is valuable. Primary CTA: Single, prominent action button visible without scrolling. One per hero to avoid choice overload. Visual: High-quality image, video, or animation that amplifies the message. Optional but Effective Trust cues: 1–3 elements (reviews, logos, statistics) Secondary CTA: For users not ready for primary action Layout Types Hero is a Spotlight layout—single focus, primary element with secondary around it. Choose layout by content balance and conversion goal. …
How to use it
Reference it in AdaL, Claude Code, Cursor or any coding agent — nothing to install:
@skills kostja94/hero