Landing Page
Turn a short product brief into a single-file, Tailwind-on-CDN landing page you can open locally or deploy anywhere.
Overview
landing-page is an agent skill most often used in Validate (also Launch distribution) that generates a complete single-file HTML landing page with Tailwind CDN, responsive and dark-mode styling.
Install
npx skills add https://github.com/jezweb/claude-skills --skill landing-pageWhat is this skill?
- Produces one self-contained HTML file—no bundler or npm build step
- Tailwind CSS via CDN, responsive layout, dark mode, semantic HTML
- OG meta tags for share previews on launch channels
- Default sections: hero + CTA, features, testimonials, FAQ, footer; pricing optional
- Brief-driven workflow table for name, value prop, audience, primary and secondary CTAs, brand colors
- Single self-contained HTML deliverable
- Default section set spans hero, features, testimonials, FAQ, and footer
Adoption & trust: 925 installs on skills.sh; 841 GitHub stars; 3/3 security scanners passed (skills.sh audits).
What problem does it solve?
You have a clear offer and audience but no fast way to publish a polished marketing page without configuring a JS framework.
Who is it for?
Indie founders testing positioning, local businesses needing a call-now page, or SaaS teasers before app development starts.
Skip if: Multi-page marketing sites, authenticated app shells, or designs that require a design-system build pipeline and component library.
When should I use this skill?
Triggers include 'landing page', 'create a page', 'marketing page', 'launch page', 'coming soon page', or 'one-page site'.
What do I get? / Deliverables
You get a ready-to-deploy `index.html` with hero, features, proof, FAQ, and CTAs filled from your brief.
- Single deployable HTML file with responsive layout and OG meta
- Populated marketing sections from the brief
Recommended Skills
Journey fit
Spans multiple journey phases - primary shelf plus alternate fits below.
Validate/landing is the canonical shelf for proving demand with a marketing or coming-soon page before a full product build. Landing subphase matches one-page sites with hero, features, social proof, optional pricing, FAQ, and footer—typical validation artifacts.
Where it fits
Publish a Hunter Valley plumbing emergency page with phone CTA to gauge call volume before building booking software.
Ship a SaaS teaser with features and FAQ to collect emails without a React codebase.
Replace a placeholder domain with a share-ready OG-tagged launch page the same day you announce.
How it compares
Generator for a static one-pager, not a Next.js or WordPress site factory.
Common Questions / FAQ
Who is landing-page for?
Solo builders and small teams who need a credible public page quickly, especially on Claude Code where the skill is documented as compatible.
When should I use landing-page?
In validate/landing to test messaging with a coming-soon or waitlist page; in launch/distribution for a product announcement; or anytime triggers like 'landing page', 'marketing page', or 'launch page' appear.
Is landing-page safe to install?
It uses Read/Write/Edit on your project and CDN-linked Tailwind; review the Security Audits panel on this Prism page before granting write access in untrusted repos.
SKILL.md
READMESKILL.md - Landing Page
# 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 - Sticky top nav with logo/name + anchor links to sections - Mobile hamburger menu (CSS-only or minimal JS) - CTA button in nav (right-aligned) #### Hero - Full-width, above the fold - Headline (h1) — the value proposition, not the business name - Subheadline — supporting detail, 1-2 sentences - Primary CTA button (large, contrasting colour) - Optional: hero image placeholder or gradient background - Pattern: text-left on desktop (60/40 split with image), centred on mobile #### Features / Services - 3-6 items in a responsive grid (1 col mobile, 2-3 cols desktop) - Each: icon placeholder + heading + short description - Use semantic headings (h2 for section, h3 for items) #### Social Proof / Testimonials - 2-3 testimonial cards with quote, name, role/company - Star rating if applicable - Alternative: logo bar of client/partner logos #### Pricing (optional) - 2-3 tier cards (basic/pro/enterprise pattern) - Highlighted "recommended" tier - Feature comparison list per tier - CTA button per tier #### FAQ - Accordion pattern (details/summary — no JS needed) - 4-6 common questions - Schema.org FAQPage markup for SEO #### Footer - Business name, contact info, social links - Legal links (privacy, terms) as placeholders - Copyright year (use JS for auto-update) ### 4. Technical Requirements **Responsive**: Mobile-first with three breakpoints ``` Default: mobile (< 640px) sm: 640px+ (tablet) lg: 1024px+ (desktop) ``` **Dark mode**: Three-state toggle (light/dark/system) - CSS custom properties for colours - `.dark` class on `<html>` — no CSS media query - Small JS snippet for toggle + localStorage persistence **Accessibility**: - Proper heading hierarchy (h1 → h2 → h3, no skips) - Alt text placeholders on all images - Focus-visible styles on interactive elements - Sufficient colour contrast (4.5:1 minimum) - Skip-to-content link **SEO**: