landing-page-generator

name landing-page-generator description Generate complete, deploy-ready landing pages from any repository. Use when creating a homepage for an open-source project, building a project website, converting a README into a marketing page, or standardizing landing pages across multiple repos. allowed-tools Read Bash Write effort medium 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.