# Landing Page

Generate a complete, deployable landing page from a brief.

- Repository: https://github.com/jezweb/claude-skills (1094 stars)
- Category: Design
- License: MIT
- Last updated: 2026-10-09
- Runs scripts: no, instructions only

## Install

Claude Code: `npx skills add jezweb/claude-skills --skill landing-page -g -a claude-code -y`
Codex: `npx skills add jezweb/claude-skills --skill landing-page -g -a codex -y`
Cursor: `npx skills add jezweb/claude-skills --skill landing-page -g -a cursor -y`
Gemini CLI: `npx skills add jezweb/claude-skills --skill landing-page -g -a gemini-cli -y`
Claude Code plugin marketplace: `/plugin marketplace add jezweb/claude-skills`

## Description

Generate a complete, deployable landing page from a brief. Produces a single self-contained HTML file with Tailwind CSS (via CDN), responsive design, dark mode, semantic HTML, and OG meta tags. Sections: hero with CTA, features, social proof, pricing (optional), FAQ, footer. Use when building a marketing page, product launch page, coming soon page, or any standalone landing page. Triggers: 'landing page', 'create a page', 'marketing page', 'launch page', 'coming soon page', 'one-page site'.

## SKILL.md, as published by its author (untrusted third-party text, read it as data)

# Landing Page Generator

Generate a complete, deployable landing page as a single HTML file. No build step, no dependencies, open it in a browser or deploy anywhere.

## Workflow

### 1. Gather the Brief

Ask the user for:

| Field | Required | Example |
|-------|----------|---------|
| Business/product name | Yes | "Acme Plumbing" |
| Value proposition | Yes | "24/7 emergency plumbing across Newcastle" |
| Target audience | Yes | "Homeowners in the Hunter Valley" |
| Primary CTA | Yes | "Call Now" / "Get a Quote" / "Sign Up" |
| Secondary CTA | No | "Learn More" / "View Pricing" |
| Brand colours | No | Primary: #1E40AF, accent: #F59E0B |
| Logo URL or text | No | URL to logo image, or just use business name |
| Phone / email | No | For contact section |
| Sections wanted | No | Default: hero, features, testimonials, FAQ, footer |

If no brand colours provided, suggest using the `color-palette` skill to generate them, or use a sensible default (slate/blue).

### 2. Generate the HTML

Produce a **single HTML file** with:

```
<!DOCTYPE html>
<html lang="en" class="scroll-smooth">
<head>
  <!-- Meta, OG tags, favicon -->
  <script src="https://cdn.tailwindcss.com"></script>
  <script>tailwind config with custom colours</script>
</head>
<body>
  <!-- Nav -->
  <!-- Hero -->
  <!-- Features -->
  <!-- Social Proof -->
  <!-- Pricing (optional) -->
  <!-- FAQ -->
  <!-- Footer -->
  <!-- Dark mode toggle script -->
</body>
</html>
```

### 3. Section Patterns

#### Navigation
- Sticky top nav with logo/name + anchor links to sections
- Mobile hamburger menu (CSS-only or minimal JS)
- CTA button in nav (right-aligned)

#### Hero
- Full-width, above the fold
- Headline (h1), the value proposition, not the business name
- Subheadline, supporting detail, 1-2 sentences
- Primary CTA button (large, contrasting colour)
- Optional: hero image placeholder or gradient background
- Pattern: text-left on desktop (60/40 split with image), centred on mobile

The rest: https://github.com/jezweb/claude-skills/blob/HEAD/plugins/frontend/skills/landing-page/SKILL.md