Landing Page Generator
Generate a conversion-focused Next.js/React landing page with real copy, Tailwind sections, and Core Web Vitals targets—not placeholder text.
Overview
Landing-page-generator is an agent skill most often used in Validate (also Launch, Build) that produces high-converting Next.js landing pages with Tailwind and SEO.
Install
npx skills add https://github.com/alirezarezvani/claude-skills --skill landing-page-generatorWhat is this skill?
- 5 hero variants: centered, split, gradient, video-bg, minimal
- Copy frameworks PAS, AIDA, and BAB—not lorem ipsum
- Pricing tables (2–4 tiers), FAQ accordion with schema, testimonial blocks
- SEO meta tags and structured data; performance targets LCP < 1s, CLS < 0.1, FID < 100ms
- Full TSX + Tailwind output for Next.js/React
- 5 hero section variants
- 4 copy frameworks referenced (PAS, AIDA, BAB plus section count)
- Performance targets: LCP < 1s, CLS < 0.1, FID < 100ms
Adoption & trust: 560 installs on skills.sh; 17.5k GitHub stars; 3/3 security scanners passed (skills.sh audits).
What problem does it solve?
You have a product idea but only a blank page or generic template—no structured sections, conversion copy, or CWV-minded implementation.
Who is it for?
Founders validating an offer with a fast, professional landing page in the Next.js stack.
Skip if: Native mobile app store pages only, backend-only APIs with no marketing site, or teams that already have a finalized design system and forbid generated UI.
When should I use this skill?
User asks to create a landing page, marketing page, homepage, lead capture, campaign page, promo page, conversion-optimised web page, or A/B test variants.
What do I get? / Deliverables
You receive deployable TSX sections, Tailwind styles, meta/structured data, and copy variants ready to test on a live URL.
- TSX page and section components
- Tailwind styles
- SEO meta and structured data snippets
Recommended Skills
Journey fit
Spans multiple journey phases - primary shelf plus alternate fits below.
Validate is where you prove demand with a landing page before full product build. Landing is the canonical shelf for hero, pricing, FAQ, and CTA pages used for leads and campaigns.
Where it fits
Ship a lead-capture page with hero and pricing to test signup intent.
Replace a static mock with a full single-page site to demo the offer.
Add FAQ schema and meta tags before indexing the campaign URL.
Drop generated sections into the app marketing route with CWV budgets.
How it compares
Full-page generator with copy frameworks—not a single hero snippet or a generic HTML export without React.
Common Questions / FAQ
Who is landing-page-generator for?
Solo and indie builders on Next.js/React who need marketing pages with real copy and section variety for validation or launch.
When should I use landing-page-generator?
In Validate for landing and pricing tests, in Build for frontend homepage work, or at Launch when shipping distribution-ready promo pages and A/B variants.
Is landing-page-generator safe to install?
It generates front-end code only; review the Security Audits panel on this page and audit dependencies in your Next.js project as usual.
SKILL.md
READMESKILL.md - Landing Page Generator
# Landing Page Generator Generate high-converting landing pages from a product description. Output complete Next.js/React components with multiple section variants, proven copy frameworks, SEO optimization, and performance-first patterns. Not lorem ipsum — actual copy that converts. **Target:** LCP < 1s · CLS < 0.1 · FID < 100ms **Output:** TSX components + Tailwind styles + SEO meta + copy variants --- ## Core Capabilities - 5 hero section variants (centered, split, gradient, video-bg, minimal) - Feature sections (grid, alternating, cards with icons) - Pricing tables (2–4 tiers with feature lists and toggle) - FAQ accordion with schema markup - Testimonials (grid, carousel, single-quote) - CTA sections (banner, full-page, inline) - Footer (simple, mega, minimal) - 4 design styles with Tailwind class sets --- ## Generation Workflow Follow these steps in order for every landing page request: 1. **Gather inputs** — collect product name, tagline, audience, pain point, key benefit, pricing tiers, design style, and copy framework using the trigger format below. Ask only for missing fields. 2. **Analyze brand voice** (recommended) — if the user has existing brand content (website copy, blog posts, marketing materials), run it through `marketing-skill/content-production/scripts/brand_voice_analyzer.py` to get a voice profile (formality, tone, perspective). Use the profile to inform design style and copy framework selection: - formal + professional → **enterprise** style, **AIDA** framework - casual + friendly → **bold-startup** style, **BAB** framework - professional + authoritative → **dark-saas** style, **PAS** framework - casual + conversational → **clean-minimal** style, **BAB** framework 3. **Select design style** — map the user's choice (or infer from brand voice analysis) to one of the four Tailwind class sets in the Design Style Reference. 4. **Apply copy framework** — write all headline and body copy using the chosen framework (PAS / AIDA / BAB) before generating components. Match the voice profile's formality and tone throughout. 5. **Generate sections in order** — Hero → Features → Pricing → FAQ → Testimonials → CTA → Footer. Skip sections not relevant to the product. 6. **Validate against SEO checklist** — run through every item in the SEO Checklist before outputting final code. Fix any gaps inline. 7. **Output final components** — deliver complete, copy-paste-ready TSX files with all Tailwind classes, SEO meta, and structured data included. --- ## Triggering This Skill ``` Product: [name] Tagline: [one sentence value prop] Target audience: [who they are] Key pain point: [what problem you solve] Key benefit: [primary outcome] Pricing tiers: [free/pro/enterprise or describe] Design style: dark-saas | clean-minimal | bold-startup | enterprise Copy framework: PAS | AIDA | BAB ``` --- ## Design Style Reference | Style | Background | Accent | Cards | CTA Button | |---|---|---|---|---| | **Dark SaaS** | `bg-gray-950 text-white` | `violet-500/400` | `bg-gray-900 border border-gray-800` | `bg-violet-600 hover:bg-violet-500` | | **Clean Minimal** | `bg-white text-gray-900` | `blue-600` | `bg-gray-50 border border-gray-200 rounded-2xl` | `bg-blue-600 hover:bg-blue-700` | | **Bold Startup** | `bg-white tex