hero-generator

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