skillboardUpdated every 6 hours
skillboardWhen 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.
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.
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:
Hero is a Spotlight layout—single focus, primary element with secondary around it. Choose layout by content balance and conversion goal.
| Layout | Structure | Best for | |--------|-----------|----------| | Split (50/50) | Text left, visual right (or vice versa); equal weight | Product, SaaS; clear value + demo | | Split (75/25) | Text dominant; smaller image column | Copy-heavy; trust-first | | Split (25/75 "Signpost") | Small image beside primary content | Minimal visual; emphasis on headline | | Centered | Text + CTA centered; visual full-width or stacked | Brand, landing; single CTA | | Full-width image | Image background; overlay text | Emotional; lifestyle, brand |
Responsive: Split layouts stack vertically on mobile (text above image); centered maintains center. Mobile-first; ensure CTA above fold on small screens.
| Axis | Options | Use | |------|---------|-----| | Horizontal | Left, center, right | Left align for text-heavy; center for minimal | | Vertical | Top, center, bottom | Center for full-viewport hero; top for short hero |
The hero must answer three questions within 3 seconds: What is this? Why should I care? What should I do next? ~80% of users never scroll beyond the hero; make an immediate impact.
<h1>; include primary keyword| Requirement | Practice |
|-------------|----------|
| Contrast | Text over images: >=4.5:1; use overlay if needed |
| Touch targets | CTA >=44x44px |
| Keyboard | CTA keyboard-accessible; visible focus indicator |
| Screen readers | Proper heading order; image alt text; aria-label for icon-only buttons |
| Reduced motion | Respect prefers-reduced-motion for animations |
| Interaction | CTA has cursor-pointer; hover uses color/opacity (not scale) to avoid layout shift |
Copy a source-pinned command for your client. You run it yourself.
Destination: .claude/skills/hero · pinned to the source commit
git clone https://github.com/kostja94/marketing-skills.git
cd marketing-skills
git checkout 70987bad4ebe9dce1f74858c1c64f3f8810f18e4
mkdir -p ".claude/skills/hero"
cp -r "skills/components/branding/hero" ".claude/skills/hero"Review the source before running. This copies files into your project; it is not a one-click install and does not verify runtime safety.
Scanner static-checks@0.1.0 · commit 70987bad4ebe. Static checks cannot prove runtime safety – review the source and the exact diff before installing. How checks work.
No static rules matched. This is not a safety guarantee.