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**

<!-- truncated -->