Hero Generator

Handles everything you need for above-the-fold hero sections: layout selection (split vs centered vs full-width), the four core components (headline, subhead, CTA, visual), and the 3-second rule (what is this, why care, what next). It reads project context if available, suggests copy and structure, and gives you a technical checklist covering LCP, accessibility, and image optimization. The guidance on layout types is solid, especially the breakdown of when to use 50/50 split versus centered. Good reminder that 80% of users never scroll past the hero, so this is where conversions live or die. Links out to related skills for CTAs, trust badges, and image handling.

Install to Claude Code

npx -y skills add kostja94/marketing-skills --skill hero-generator --agent claude-code