SKILL.md
$27
Check for project context first: If .claude/project-context.md or .cursor/project-context.md exists, read it for product, audience, and value proposition. See branding for brand strategy, positioning, differentiation.
Identify:
- Primary goal: Sign up, demo, purchase, learn more
- Audience: Cold visitors, returning, specific segment
- Traffic source: Organic, paid, referral
Homepage Structure
Section
Purpose
Hero
Value proposition, primary CTA, above the fold
Social proof
Logos, testimonials, metrics; "As Seen In" (press coverage) when applicable; see customer-stories-page-generator for case study snippets
Features/Benefits
What it does, why it matters
Use cases
Who it's for, how they use it
Objection handling
FAQ, guarantees, comparisons
Final CTA
Repeat primary action
Common Modules (from website-structure)
Combine as needed: Headline, Subheadline, Primary CTA, Supporting Image/Demo, Benefits Section, Social Proof, Search Box (if applicable), Secondary CTA, Banner. Navigation: Horizontal Bar, Dropdown, Hamburger (mobile), Sidebar, Footer; ensure Desktop + Mobile parity. See hero-generator for hero design.
Best Practices
Value Proposition
- Clarity: Visitor understands in 5 seconds
- Specificity: Concrete benefit, not vague
- Differentiation: Why you, not alternatives — see branding for positioning framework
- Customer language: Their words, not jargon
- Avoid "not speaking human": Don't over-emphasize brand with vague definitions; communicate in user-friendly ways—if someone searches "AI presentation maker," the answer should be obvious from your headline
CTA
- One clear primary action (avoid decision paralysis)
- Button copy: value-focused ("Start Free Trial") not generic ("Submit")
- Visible without scrolling
- Repeated at logical points
Conversion Checklist
- Clear value proposition above the fold
- Single primary CTA; simplified navigation (5–7 menu items)
- Immediate social proof (reviews, trust badges, media logos)
- Mobile-first, fast-loading design
Visual & Aesthetics
- Frontend aesthetics: For distinctive typography, motion, spatial composition, backgrounds—see brand-visual-generator Frontend Aesthetics
SEO
Branded keywords first: Title and meta should include brand name; ensure homepage ranks for "[Brand Name]" so users can find the official site. See brand-protection when impersonation risk exists—place "Official website: [domain]" above fold or in hero.
- Title tag (50–60 chars): Brand name + primary keyword; e.g. "Canva – Free Website Builder"
- Meta description (150–160 chars): CTA + secondary keywords; engaging to encourage clicks
- H1: Value proposition or primary headline; one per page; include primary keyword naturally
- Body: Primary keyword in first 100 words; secondary keywords in H2–H6 and body
- Logical H2–H6 structure for scannability and LLM/AI Overview visibility
Schema: Add Organization + WebSite JSON-LD on homepage (or in root layout for site-wide). Organization establishes brand entity; WebSite enables sitelinks searchbox. Do not put Organization only on About page—About uses AboutPage schema. See schema-markup, entity-seo.
Output Format
- Structure outline (sections)
- Hero copy options (headline, subheadline, CTA)
- Key sections content suggestions
- SEO metadata (title, description, H1)
- Conversion checklist
Related Skills
- branding: Brand strategy, value prop, differentiation; homepage implements brand voice
- brand-protection: "Official website" placement when impersonation risk exists
- landing-page-generator: For single-goal campaign pages (affiliate signup, lead capture); homepage is multi-purpose
- pricing-page-generator: Homepage often links to pricing
- features-page-generator: Features section or link to features page
- press-coverage-page-generator: "As Seen In" section (logo strip) when coverage exists; full page links from homepage
- customer-stories-page-generator: Testimonials, case study snippets for social proof section
- schema-markup, entity-seo: Organization + WebSite schema placement (homepage or root layout)
- title-tag, meta-description, page-metadata, open-graph, twitter-cards: Homepage metadata and social previews
- heading-structure: Homepage heading structure