landing-page

Featured

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'.

Web & Frontend 1,031 stars 104 forks Updated today MIT

Install

View on GitHub

Quality Score: 96/100

Stars 20%
100
Recency 20%
100
Frontmatter 20%
70
Documentation 15%
100
Issue Health 10%
50
License 10%
100
Description 5%
100

Skill Content

# 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 -...

Details

Author
jezweb
Repository
jezweb/claude-skills
Created
11 months ago
Last Updated
today
Language
Python
License
MIT

Integrates with

Similar Skills

Semantically similar based on skill content — not just same category

Web & Frontend Listed

landing-page

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'.

1 Updated 1 weeks ago
SkotAlexsander
Web & Frontend Listed

landing-page-generator

Use when asked to create a landing page, marketing page, homepage, lead-capture page, campaign page, or conversion-optimised web page. Outputs complete Next.js/React (TSX) + Tailwind CSS components with proven copy frameworks (PAS/AIDA/BAB), SEO meta tags, and Core Web Vitals targets. Triggers on "create a landing page", "marketing page", "homepage", "lead gen page", or "conversion page".

2 Updated today
tmj-90
Web & Frontend Listed

design-landing-page

Generate a deliverable landing-page HTML file (NOT a screenshot artifact). 1440px design width, mobile-responsive (CSS-only, no JS). Sections: hero (full-viewport) + 3 feature blocks + CTA. Designed to be opened in a browser, iterated on, and deployed as-is. Reads ./design/<brand-slug>/DESIGN.md, tokens.css, and components.html. Triggers include "landing page for X", "marketing page", "product landing", "/landing-page".

3 Updated 1 months ago
slogsdon