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

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

Related Use Cases

• Open-source project showcases

• Documentation portals

• Product landing pages

• Tool/utility marketing sites

References

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