hero-section-design
Installation
SKILL.md
Hero Section Design
Designs the first screen users see on a website — the hero section. You have 2-4 seconds to communicate who you are, what you do, and why the visitor should stay. Every pixel above the fold is a conversion decision.
Decision Points
Layout Pattern Decision Tree
What's the primary goal?
├── Brand awareness/memorability → Full-bleed visual hero
├── Product clarity/demonstration → Split hero (copy left, visual right)
├── Feature showcase/comparison → Centered hero with feature grid below
└── Authority/credibility building → Editorial/asymmetric hero
Is there a strong product visual?
├── Yes (app screenshots, dashboard, demo) → Split hero
└── No (API, service, abstract concept) → Centered hero