Landing Page Generator
Generates high-converting landing pages as complete Next.js/React (TSX) components with Tailwind CSS. It creates hero sections, feature grids, pricing tables, FAQ accordions, testimonial blocks, and CTA sections using proven copy frameworks (PAS, AIDA, BAB). Outputs SEO meta tags, structured data, and performance-optimised code targeting Core Web Vitals.
✨ What it does
- Generates multiple section variants (hero, features, pricing, FAQ, testimonials, CTA, footer) with Tailwind classes.
- Applies copy frameworks (PAS, AIDA, BAB) to write actual marketing copy.
- Outputs SEO meta tags, structured data (FAQPage, Product, Organization), and canonical URLs.
- Enforces performance best practices for Core Web Vitals (LCP < 1s, CLS < 0.1).
- Provides four design styles (dark-saas, clean-minimal, bold-startup, enterprise) with predefined class sets.
- Validates output against an SEO checklist before delivering final code.
🎯 When to use it
- User asks to create a landing page, marketing page, homepage, single-page site, lead capture page, campaign page, or promo page.
- User wants a conversion-optimised web page or to replace a static page with one designed to convert.
- User wants to A/B test landing page variants.
🚀 How to use
Trigger by asking to create a landing page or by providing the structured input format. The skill expects product name, tagline, target audience, key pain point, key benefit, pricing tiers, design style, and copy framework. It will ask for missing fields. Example prompts:
Create a landing page for my project management tool.
Product: TaskFlow
Tagline: Manage projects effortlessly
Target audience: Small business owners
Key pain point: Overwhelmed by scattered tasks
Key benefit: Save 5 hours per week
Pricing tiers: Free, Pro $10/mo, Enterprise custom
Design style: clean-minimal
Copy framework: BAB
📄 Output: Complete, copy-paste-ready TSX files with Tailwind classes, SEO meta, and structured data included.
📦 Add this skill to Claude Code
# 1. Get the skills repo
git clone --depth 1 https://github.com/alirezarezvani/claude-skills /tmp/claude-skills
# 2. Copy this skill into your project (or ~/.claude/skills for all projects)
mkdir -p .claude/skills
cp -r /tmp/claude-skills/product-team/skills/landing-page-generator .claude/skills/landing-page-generatorSkill source: product-team/skills/landing-page-generator/SKILL.md
⚠️ Good to know
Requires Next.js/React and Tailwind CSS environment; assumes shadcn/ui components for some sections (e.g., Accordion, Button).
❓ FAQ
What copy frameworks does the skill support?
It supports PAS (Problem-Agitate-Solution), AIDA (Attention-Interest-Desire-Action), and BAB (Before-After-Bridge).
How does the skill ensure SEO optimization?
It follows an SEO checklist that includes title tags, meta descriptions, OG images, structured data, canonical URLs, image alt text, and mobile viewport, and validates output against it.
Can I choose a design style?
Yes, you can specify one of four design styles: dark-saas, clean-minimal, bold-startup, or enterprise. The skill also recommends a style based on brand voice analysis if provided.
🤖 Overview, features, install steps and FAQ were generated from the project's SKILL.md on Sep 4, 2026. Always check the original source before running commands.