melgarafael/growthos/landing-page-design

Name: landing-page-design
Author: melgarafael

Claude Code and agent skill by melgarafael/growthos

Trust tier 3

community

Source check pending

Checking that the SKILL.md file is still in the repository.

Conversion-optimized landing page design — single-file HTML with embedded CSS, no external dependencies. Hero sections, social proof, CTA placement, A/B variants, responsive design, accessibility, and performance (<100KB). Use when generating landing pages or conversion-focused web content.

Install

npx vskill@latest install melgarafael/growthos/landing-page-design

SKILL.md

Landing Page Design Skill

Generate production-ready, conversion-optimized landing pages as single self-contained HTML files with embedded CSS and zero external dependencies.

Output Constraint: Single-File HTML

Every landing page output MUST be:

One `.html` file — no separate CSS, JS, or image files
Embedded CSS via <style> tag in <head>
No external dependencies — no CDNs, no Google Fonts links, no external scripts
System font stack — font-family: system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif
Inline SVG only — for icons and simple graphics
Max file size: 100KB — enforced, no exceptions
No JavaScript unless absolutely required for a specific interaction (accordion, form validation)

html

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta name="description" content="[SEO description]">
  <!-- Open Graph -->
  <meta property="og:title" content="[Title]">
  <meta property="og:description" content="[Description]">
  <meta property="og:type" content="website">
  <title>[Page Title]</title>
  <style>
    /* ALL CSS embedded here */
  </style>
</head>
<body>
  <!-- ALL content here -->
</body>
</html>

Page Structure

Every landing page follows this section order:

1. Hero Section (Above the Fold)

The most critical section. Must contain:

Headline: Clear value proposition in <10 words
Subheadline: Supporting detail in 1-2 sentences
Primary CTA: Single button, high contrast, action verb
Visual element: Inline SVG illustration or CSS-only graphic
Trust signal: One proof point (users count, rating, badge)

html

<section class="hero">
  <h1>[Value proposition — benefit, not feature]</h1>
  <p class="subheadline">[How it works in one sentence]</p>
  <a href="#cta" class="btn-primary">[Action Verb] — [Benefit]</a>
  <p class="trust">[Trust signal: "Used by 10,000+ teams" or "★★★★★ 4.9/5"]</p>
</section>

Hero patterns:

Pattern	Best For	Structure
Centered	SaaS, apps	Headline + CTA centered, illustration below
Split	Products with visuals	Text left, visual right (stacks on mobile)
Gradient	Bold brands	Full-width gradient bg, white text
Minimal	Premium/luxury	Lots of whitespace, single strong headline

2. Social Proof Section

Position immediately after hero to validate the promise.

html

<section class="social-proof">
  <!-- Option A: Logo bar -->
  <p class="proof-label">Trusted by</p>
  <div class="logo-bar">[Company names or inline SVG logos]</div>
 
  <!-- Option B: Testimonials -->
  <div class="testimonials">
    <blockquote>
      <p>"[Specific result achieved]"</p>
      <cite>— [Name], [Title] at [Company]</cite>
    </blockquote>
  </div>
 
  <!-- Option C: Stats -->
  <div class="stats">
    <div class="stat"><strong>[Number]</strong><span>[Label]</span></div>
  </div>
</section>

3. Features / Benefits Section

3-4 benefits maximum. Lead with outcomes, not features.

html

<section class="features">
  <h2>[Section headline — outcome-focused]</h2>
  <div class="feature-grid">
    <div class="feature">
      <div class="feature-icon">[Inline SVG or CSS icon]</div>
      <h3>[Benefit headline]</h3>
      <p>[1-2 sentences explaining the benefit]</p>
    </div>
    <!-- 2-3 more features -->
  </div>
</section>

4. How It Works (Optional)

3-step process. Reduces cognitive load.

html

<section class="how-it-works">
  <h2>How it works</h2>
  <ol class="steps">
    <li><strong>[Step 1]</strong><p>[Brief explanation]</p></li>
    <li><strong>[Step 2]</strong><p>[Brief explanation]</p></li>
    <li><strong>[Step 3]</strong><p>[Brief explanation]</p></li>
  </ol>
</section>

5. CTA Section (Repeat)

Repeat the primary CTA with urgency or additional proof.

html

<section class="cta-section">
  <h2>[Restate value proposition differently]</h2>
  <p>[Urgency or additional benefit]</p>
  <a href="#" class="btn-primary">[Same CTA text as hero]</a>
  <p class="reassurance">[Risk reversal: "No credit card required" / "Cancel anytime"]</p>
</section>

6. Footer

Minimal. Don't distract from conversion.

html

<footer>
  <p>&copy; [Year] [Brand]. [Optional: Privacy | Terms]</p>
</footer>

Conversion Optimization (CRO) Principles

CTA Rules

One primary CTA per page — never compete with yourself
Above the fold — first CTA visible without scrolling
Repeated — CTA appears 2-3 times (hero, mid-page, bottom)
Action verb + benefit: "Start Free Trial" not "Submit"
High contrast: CTA button must have ≥4.5:1 contrast ratio
Size: Minimum 44x44px touch target (mobile accessibility)

Copy Hierarchy

Headline: Benefit-first, <10 words
Subheadline: Supporting detail, 1-2 sentences
Body: Scannable, bullet points preferred
CTA: Action verb, 2-5 words

Psychological Triggers

Trigger	Implementation
Social proof	Numbers, testimonials, logos
Scarcity	"Limited spots" (only if true)
Authority	Certifications, press mentions
Risk reversal	"Money-back guarantee", "No CC required"
Reciprocity	Free resource, calculator, tool

Responsive Design

All pages must work across breakpoints:

css

/* Mobile-first approach */
/* Base: mobile (320px+) */
.feature-grid { display: grid; grid-template-columns: 1fr; gap: 2rem; }
 
/* Tablet (768px+) */
@media (min-width: 768px) {
  .feature-grid { grid-template-columns: repeat(2, 1fr); }
  .hero { padding: 4rem 2rem; }
}
 
/* Desktop (1024px+) */
@media (min-width: 1024px) {
  .feature-grid { grid-template-columns: repeat(3, 1fr); }
  .hero { padding: 6rem 4rem; }
  body { max-width: 1200px; margin: 0 auto; }
}

Mobile Priorities

CTA button full-width on mobile
Font size minimum 16px (prevents iOS zoom)
Touch targets minimum 44x44px
Stack columns vertically
Reduce padding, keep content density

Accessibility Requirements

Semantic HTML: <header>, <main>, <section>, <footer>
All images/SVGs: alt text or aria-label
Color contrast: ≥4.5:1 for text, ≥3:1 for large text
Focus states: Visible outline on all interactive elements
Skip link: Hidden "Skip to content" link
Form labels: Every input has associated <label>
lang attribute on <html> tag

html

<html lang="en">
<body>
  <a href="#main" class="skip-link">Skip to content</a>
  <header role="banner">...</header>
  <main id="main" role="main">...</main>
  <footer role="contentinfo">...</footer>
</body>

Performance Budget

Metric	Target
Total file size	<100KB
First Contentful Paint	<1.0s
CSS size	<15KB
No external requests	0
Inline SVG total	<20KB

Performance Techniques

CSS custom properties for theming (reduces duplication)
prefers-reduced-motion media query for animations
prefers-color-scheme for dark mode variant (optional)
Minimal CSS — no unused selectors
System font stack — zero font loading time

A/B Testing Variants

When generating a landing page, always produce a primary version and specify testable variants:

yaml

ab_variants:
  - element: headline
    control: "[Original headline]"
    variant: "[Alternative headline]"
    hypothesis: "[Why this might convert better]"
  - element: cta_text
    control: "[Original CTA]"
    variant: "[Alternative CTA]"
    hypothesis: "[Why this might convert better]"
  - element: hero_layout
    control: "[centered | split]"
    variant: "[opposite layout]"
    hypothesis: "[Layout impact on conversion]"

CSS Design System (Embedded)

css

:root {
  /* Typography */
  --font-stack: system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --font-mono: ui-monospace, 'Cascadia Code', 'Fira Code', monospace;
  --text-base: 1rem;
  --text-lg: 1.25rem;
  --text-xl: 1.5rem;
  --text-2xl: 2rem;
  --text-3xl: 2.5rem;
  --text-4xl: 3.5rem;
 
  /* Spacing (8px grid) */
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 1rem;
  --space-4: 1.5rem;
  --space-5: 2rem;
  --space-6: 3rem;
  --space-7: 4rem;
  --space-8: 6rem;
 
  /* Colors — override per brand */
  --color-primary: #2563eb;
  --color-primary-dark: #1d4ed8;
  --color-text: #1a1a2e;
  --color-text-muted: #64748b;
  --color-bg: #ffffff;
  --color-bg-alt: #f8fafc;
  --color-border: #e2e8f0;
  --color-success: #059669;
 
  /* Radius */
  --radius-sm: 4px;
  --radius-md: 8px;
  --radius-lg: 12px;
  --radius-full: 9999px;
}
 
/* Button base */
.btn-primary {
  display: inline-block;
  padding: var(--space-3) var(--space-5);
  background: var(--color-primary);
  color: #fff;
  font-size: var(--text-lg);
  font-weight: 600;
  text-decoration: none;
  border-radius: var(--radius-md);
  border: none;
  cursor: pointer;
  transition: background 0.2s;
}
.btn-primary:hover { background: var(--color-primary-dark); }
.btn-primary:focus { outline: 3px solid var(--color-primary); outline-offset: 2px; }

Anti-Patterns

External font loading (Google Fonts CDN)
JavaScript frameworks for static content
Multiple competing CTAs
Feature lists without benefit framing
Stock photo placeholders (use SVG or CSS)
Hamburger menus on landing pages (no nav needed)
Footer with 20+ links (landing page ≠ website)
Auto-playing video/audio
Pop-ups or modals on load

Security

Security scanPassed, 90 of 100Pattern checks on the skill's files.
Model reviewPassed

See the full security report

Quality evaluation

Task evaluationNot runNo evaluation yet. Run one in Skill Studio.

See evaluation results

Source

SKILL.md in the repositoryCheckingskills/landing-page-design/SKILL.md

Popularity

Repository stars: 55
Repository forks: 31
7-day trend score: 0

Stars and forks are for the whole GitHub repository, not this skill alone. Not refreshed yet.

Works with

Any agent vskill installs to: 56 targets in all. These 39 have a page on this site.

Claude Code
Cursor
GitHub Copilot
Windsurf
Codex
Gemini CLI
Cline
Amp
Roo Code
Goose
Continue
Kilo Code
Junie
Trae
OpenHands
Qwen Code
AI Agent
Tabnine Chat
Sourcegraph Cody
Amazon Q
Firebase Genkit
Sweep
Devin
Phind
Mentat
Claude Desktop
Aider
GPT Pilot
Plandex
bolt.new
v0
Replit Agent
Anse
TypingMind
BetterChatGPT
LibreChat
Warp AI
Pieces
Fig AI

Embed badge

[![vskill VERIFIED](https://verified-skill.com/api/v1/skills/melgarafael/growthos/landing-page-design/badge)](https://verified-skill.com/skills/melgarafael/growthos/landing-page-design)

Something wrong with this skill or its page? Tell us.