Landing Page Generator

Landing Page Generator

Generate a complete, deploy-ready landing page from any repository by analyzing its documentation and structure.

When to Use This Skill

• Creating a landing page for a GitHub repository
• Generating static sites from existing documentation
• Standardizing landing pages across multiple projects
• Converting README content to marketing/showcase pages

What This Skill Does

• **Analyze Repository**: Read README.md, CHANGELOG.md, package.json/VERSION, docs/, assets/
• **Extract Content**: Identify title, tagline, features, installation, screenshots
• **Map to Sections**: Hero, Features, Install, FAQ, Footer (+ optional: Risk Banner, Pricing)
• **Generate Landing**: Create complete static site (HTML + CSS + JS)
• **Deploy-Ready Output**: Include GitHub Actions workflow for GitHub Pages

How to Use

Basic Usage

/landing-page-generator from ~/path/to/repo

With Options

/landing-page-generator from ~/path/to/repo --risk-banner --pricing-table

Available Options

| Option | Description | Default | |--------|-------------|---------| | `--risk-banner` | Add prominent warning/disclaimer banner above fold | false | | `--pricing-table` | Include pricing comparison section | false | | `--screenshots <path>` | Path to screenshots folder | ./assets/ | | `--theme [dark\|light]` | Color theme variant | dark | | `--search` | Enable Cmd+K search | true | | `--output <path>` | Output directory | ./[repo-name]-landing/ |

Workflow

Step 1: Repository Analysis

Read and analyze these files from the source repo:

README.md        → Primary content source (title, tagline, features, install)
CHANGELOG.md     → Version info, recent changes
package.json     → Version number, dependencies, metadata
VERSION          → Alternative version source
docs/            → Additional documentation pages
assets/          → Screenshots, images
LICENSE          → License type for badge

Step 2: Content Extraction Map

| Source | Target Section | Extraction Method | |--------|---------------|-------------------| | README title/badges | Hero | First H1 + shield.io badge lines | | README TL;DR | Hero tagline | First paragraph or blockquote after title | | README features | Features grid | H2/H3 sections with bullet lists | | README install | Quick Start | Code blocks with shell commands | | README usage | Examples | Code blocks with examples | | README FAQ | FAQ | Details/summary or H3+P patterns | | CHANGELOG | What's New | Latest 1-3 releases | | assets/*.png | Screenshots | Gallery section |

Step 3: Section Generation

Generate these sections in order:

• **Header** (sticky)
• Logo/project name
• Nav links: Features, Install, FAQ
• Actions: Search (Cmd+K), GitHub Star, primary CTA

• **Risk Banner** (if `--risk-banner`)
• Orange/warning style above fold
• Clear, visible disclaimer text
• Link to detailed disclosure section

• **Hero Section**
• Title from README H1
• Tagline from TL;DR/first paragraph
• Stats badges (version, license, platform)
• CTAs: "Quick Start" (primary), "View on GitHub" (secondary)

• **Architecture/Overview** (if diagram in README)
• ASCII diagram converted to styled block
• Or overview cards

• **Features Grid**
• 4-6 feature cards from README features
• Icon + title + description pattern

• **Pricing Table** (if `--pricing-table`)
• Plans comparison table
• Multipliers/usage table if present

• **Screenshots Gallery** (if assets exist)
• Tab-based or carousel gallery
• Captions from alt text

• **Quick Start Section**
• One-liner install command (featured code block)
• Setup steps
• First usage example

• **Risk Disclosure** (if `--risk-banner`)
• Full disclaimer section
• ToS considerations
• Recommendations

• **FAQ Section**
• Generated from README FAQ or common questions
• Collapsible details pattern

• **Related Projects** (if links in README)
• Cards linking to dependencies/related repos

• **Footer**
• Quick links
• License badge
• Version info
• Author/repo links

Step 4: Output Structure

[project-name]-landing/
├── index.html              # Main landing page
├── styles.css              # Complete stylesheet
├── search.js               # Cmd+K search functionality
├── search-data.js          # Search index (FAQ, features)
├── favicon.svg             # Generated or copied
├── robots.txt              # SEO
├── CLAUDE.md               # Project instructions
├── README.md               # Landing repo documentation
├── assets/                 # Copied screenshots
│   └── [copied from source]
└── .github/
    └── workflows/
        └── static.yml      # GitHub Pages deployment

Step 5: Validation Checkpoint

Before finalizing, verify:

• All sections render correctly in a browser
• Links point to valid targets (GitHub repo, docs, install commands)
• Responsive layout works at mobile (375px), tablet (768px), and desktop (1280px) widths
• Accessibility: skip links present, ARIA labels on interactive elements, color contrast passes WCAG AA

Tech Stack

• **No build step**: Pure HTML + CSS + JS
• **Search**: MiniSearch lazy-loaded from CDN with fallback
• **Deployment**: GitHub Pages via Actions
• **Styling**: CSS custom properties, responsive, dark theme default
• **Accessibility**: Skip links, ARIA labels, keyboard navigation

CSS Patterns (from established landings)

Component Classes

/* Buttons */
.btn, .btn-primary, .btn-secondary, .btn-github-star, .btn-outline

/* Cards */
.feature-card, .comparison-card, .path-card

/* Layout */
.container, .features-grid, .hero, .section

/* Utilities */
.visually-hidden, .skip-link

CSS Variables

:root {
  --color-bg: #0d1117;
  --color-surface: #161b22;
  --color-border: #30363d;
  --color-text: #c9d1d9;
  --color-text-muted: #8b949e;
  --color-primary: #58a6ff;
  --color-success: #3fb950;
  --color-warning: #d29922;
  --color-danger: #f85149;
  --space-xs: 0.25rem;
  --space-sm: 0.5rem;
  --space-md: 1rem;
  --space-lg: 1.5rem;
  --space-xl: 2rem;
  --radius: 6px;
}

Example

**User**: `/landing-page-generator from ~/projects/my-project --risk-banner --pricing-table`

**Output**:

Creates `~/projects/my-project-landing/` with:

• Complete landing page showcasing the multi-provider router
• Prominent ToS risk banner (orange, above fold)
• Provider cards (Anthropic, Copilot, Ollama)
• Pricing tables from README
• Screenshots gallery
• GitHub Pages deployment ready

Tips

• Always include `--risk-banner` for projects with legal/ToS considerations
• Screenshots significantly improve landing quality - ensure assets/ is populated
• The skill preserves README language (English/French)
• Review generated FAQ - may need customization
• Test responsive design after generation

References

See `references/landing-pattern.md` for detailed pattern documentation. See `assets/` for reusable templates and snippets.