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.
- skills.sh installs
- 1.3K
- GitHub stars
- 1.1K
- last updated
- Aug 21, 2026
Install
$ npx -y skills add kostja94/marketing-skills --skill hero-generator --agent claude-codeInstalls into .claude/skills of the current project.
Files
Hero construction has moved
Hero construction is now maintained in the Hero reference in Bricks, the component layer for AI agents.
npx skills add kostja94/bricks --skill component-builder
Ask the agent to use component-builder to build a new Hero. This compatibility entry contains no component rules and is no longer maintained.
Sponsors
Agent CaffeineSponsoredClose your lid, come back to finished work
SnugSponsoredThe clipboard manager for the AI eraPromote your product hereReach 125k+ visitors monthly
WaxSponsoredBlock anything with supervision, without erasing your iPhonePromote your product hereReach 125k+ visitors monthly
knobsSponsoredSee your site on any phone, any day, in any languageDetails
- Repository
- github.com/kostja94/marketing-skills
- Categories
- Frontend Development, Automation & Workflows, Marketing & SEO, Design & UI/UX
- First seen
- May 16, 2026
More from kostja94/marketing-skills
All 172- Shipping Page Generator1.3K
- Seo Monitoring1.3K
- Growth Funnel1.3K
- Title Tag1.3K
- Indexing1.3K
- Xml Sitemap1.3K
- Indie Hacker Strategy1.3K
- Content Marketing1.2K
- Open Graph1.2K
- Traffic Analysis1.2K
- Email Marketing1.2K
- Link Building1.2K
- Blog Page Generator1.2K
- Cold Start Strategy1.2K
- Homepage Generator1.2K
- Products Page Generator1.2K
- Gtm Strategy1.2K
- Image Optimization1.2K
- Eeat Signals1.2K
- Canonical Tag1.2K
- Faq Page Generator1.2K
- Linkedin Ads1.2K
- Logo Generator1.2K
- Product Launch1.2K
Recommended
More Frontend Development
test-promptneolabhq/context-engineering-kitUse when creating or editing any prompt (commands, hooks, skills, subagent instructions) to verify it produces desired behavior - applies RED-GREEN-REFACTOR cyc1.3Kskills.sh installs
google-chat-messagesjezweb/claude-skillsSend Google Chat messages via incoming webhooks — text, rich cards (cardsV2), threaded replies. TypeScript types, card builder utility, widget reference inline.1.3Kskills.sh installs
capawesome-cloudcapawesome-team/skillsGuides the agent through setting up and using Capawesome Cloud for Capacitor and Cordova apps. Covers three core workflows: (1) Native Builds — cloud builds for1.3Kskills.sh installs
sprites-and-imagesphaserjs/phaserUse this skill when creating Sprites or Images in Phaser 4. Covers factory methods, texture/frame selection, position, scale, rotation, tint, flip, alpha, origi1.2Kskills.sh installs
tiktok-researchbradautomates/head-of-contentResearch high-performing TikTok videos from tracked accounts using Apify's TikTok Scraper. Identifies outlier content, analyzes top 5 videos with AI, and genera1.2Kskills.sh installs
vtex-io-app-settingsvtex/skillsApply when defining, validating, or consuming VTEX IO app settings. Covers settingsSchema, app-level configuration boundaries, and how backend or frontend code 1.2Kskills.sh installs