Free SKILL.md scraped from GitHub. Clone the repo or copy the file directly into your Claude Code skills directory.
npx versuz@latest install kevinzai-commander-skills-product-pack-landing-page-generatorgit clone https://github.com/KevinZai/commander.gitcp commander/SKILL.MD ~/.claude/skills/kevinzai-commander-skills-product-pack-landing-page-generator/SKILL.md# Landing Page Generator
**Tier:** POWERFUL
**Category:** Product Team
**Domain:** Marketing / Conversion Rate Optimization
---
## Overview
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
---
## When to Use
- Launching a new product or feature
- Creating a dedicated campaign or promo page
- A/B testing landing page variants
- Replacing a static page with a conversion-optimized one
---
## 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
### Dark SaaS
```css
/* Tailwind classes */
bg-gray-950 text-white
accent: violet-500, violet-400
cards: bg-gray-900 border border-gray-800
CTA button: bg-violet-600 hover:bg-violet-500
```
### Clean Minimal
```css
bg-white text-gray-900
accent: blue-600
cards: bg-gray-50 border border-gray-200 rounded-2xl
CTA button: bg-blue-600 hover:bg-blue-700
```
### Bold Startup
```css
bg-white text-gray-900
accent: orange-500
headings: font-black tracking-tight
cards: shadow-xl rounded-3xl
CTA button: bg-orange-500 hover:bg-orange-600 text-white
```
### Enterprise
```css
bg-slate-50 text-slate-900
accent: slate-700
cards: bg-white border border-slate-200 shadow-sm
CTA button: bg-slate-900 hover:bg-slate-800 text-white
```
---
## Copy Frameworks
### PAS (Problem → Agitate → Solution)
```
HERO HEADLINE: [Painful state they're in]
SUBHEAD: [Agitate: what happens if they don't fix it]
CTA: [Solution: what you offer]
Example:
H1: "Your team wastes 3 hours a day on manual reporting"
Sub: "Every hour spent on spreadsheets is an hour not closing deals.
Your competitors are already automated."
CTA: "Automate your reports in 10 minutes →"
```
### AIDA (Attention → Interest → Desire → Action)
```
H1: [Bold attention-grabbing statement]
Sub: [Interesting fact or benefit]
Features: [Desire-building proof points]
CTA: [Clear action]
```
### BAB (Before → After → Bridge)
```
H1: "[Before state] → [After state]"
Sub: "Here's how [product] bridges the gap"
Features: [Bridge: how it works]
```
---
## Hero Variants
### Variant 1: Centered Gradient (Dark SaaS)
```tsx
export function HeroCentered() {
return (
<section className="relative flex min-h-screen flex-col items-center justify-center overflow-hidden bg-gray-950 px-4 text-center">
<div className="absolute inset-0 bg-gradient-to-b from-violet-900/20 to-transparent" />
<div className="pointer-events-none absolute -top-40 left-1/2 h-[600px] w-[600px] -translate-x-1/2 rounded-full bg-violet-600/20 blur-3xl" />
<div className="relative z-10 max-w-4xl">
<div className="mb-6 inline-flex items-center gap-2 rounded-full border border-violet-500/30 bg-violet-500/10 px-4 py-1.5 text-sm text-violet-300">
<span className="h-1.5 w-1.5 rounded-full bg-violet-400" />
Now in public beta
</div>
<h1 className="mb-6 text-5xl font-bold tracking-tight text-white md:text-7xl">
Ship faster.<br />
<span className="bg-gradient-to-r from-violet-400 to-pink-400 bg-clip-text text-transparent">
Break less.
</span>
</h1>
<p className="mx-auto mb-10 max-w-2xl text-xl text-gray-400">
The deployment platform that catches errors before your users do.
Zero config. Instant rollbacks. Real-time monitoring.
</p>
<div className="flex flex-col items-center gap-4 sm:flex-row sm:justify-center">
<Button size="lg" className="bg-violet-600 text-white hover:bg-violet-500 px-8">
Start free trial
</Button>
<Button size="lg" variant="outline" className="border-gray-700 text-gray-300">
See how it works →
</Button>
</div>
<p className="mt-4 text-sm text-gray-500">No credit card required · 14-day free trial</p>
</div>
</section>
)
}
```
### Variant 2: Split (Image + Copy)
```tsx
export function HeroSplit() {
return (
<section className="grid min-h-screen grid-cols-1 lg:grid-cols-2">
<div className="flex flex-col justify-center px-8 py-20 lg:px-16">
<h1 className="mb-6 text-5xl font-black text-gray-900 lg:text-6xl">
Stop losing customers to slow support
</h1>
<p className="mb-8 text-xl text-gray-600">
Respond to every ticket in under 2 minutes with AI-powered triage,
smart routing, and one-click replies.
</p>
<div className="flex gap-4">
<Button size="lg" className="bg-blue-600 text-white">Get started free</Button>
<Button size="lg" variant="ghost">Watch demo</Button>
</div>
<div className="mt-10 flex items-center gap-8 text-sm text-gray-500">
<span>✓ 14-day trial</span>
<span>✓ No credit card</span>
<span>✓ Cancel anytime</span>
</div>
</div>
<div className="relative hidden bg-blue-50 lg:block">
<Image src="/hero-screenshot.png" fill className="object-cover object-left" alt="Product screenshot" />
</div>
</section>
)
}
```
---
## Feature Section: Alternating
```tsx
const features = [
{
title: "Real-time error tracking",
description: "Catch exceptions the moment they happen. Stack traces, user context, and breadcrumbs — all in one place.",
image: "/features/errors.png",
badge: "Core",
},
{
title: "One-click rollback",
description: "Bad deploy? Roll back to any previous version in under 30 seconds without touching your terminal.",
image: "/features/rollback.png",
badge: "New",
},
]
export function FeaturesAlternating() {
return (
<section className="py-24">
<div className="mx-auto max-w-6xl px-4">
{features.map((feature, i) => (
<div key={feature.title} className={`flex flex-col gap-12 py-16 lg:flex-row lg:items-center ${i % 2 === 1 ? "lg:flex-row-reverse" : ""}`}>
<div className="flex-1">
<span className="mb-3 inline-block rounded-full bg-blue-100 px-3 py-1 text-xs font-medium text-blue-700">
{feature.badge}
</span>
<h3 className="mb-4 text-3xl font-bold text-gray-900">{feature.title}</h3>
<p className="text-lg text-gray-600">{feature.description}</p>
</div>
<div className="flex-1">
<Image src={feature.image} width={600} height={400} className="rounded-2xl shadow-xl" alt={feature.title} />
</div>
</div>
))}
</div>
</section>
)
}
```
---
## Pricing Section
```tsx
const plans = [
{
name: "Starter",
price: 0,
description: "For solo developers",
features: ["5 projects", "10k events/month", "7-day retention", "Email support"],
cta: "Get started free",
highlighted: false,
},
{
name: "Pro",
price: 49,
description: "For growing teams",
features: ["Unlimited projects", "1M events/month", "90-day retention", "Priority support", "Custom alerts", "SSO"],
cta: "Start free trial",
highlighted: true,
},
{
name: "Enterprise",
price: null,
description: "For large organizations",
features: ["Everything in Pro", "Unlimited events", "SLA guarantee", "Dedicated support", "Custom contracts", "SAML/SCIM"],
cta: "Contact sales",
highlighted: false,
},
]
export function Pricing() {
return (
<section className="py-24 bg-gray-950">
<div className="mx-auto max-w-6xl px-4">
<h2 className="mb-4 text-center text-4xl font-bold text-white">Simple, predictable pricing</h2>
<p className="mb-16 text-center text-gray-400">Start free. Scale as you grow.</p>
<div className="grid gap-8 lg:grid-cols-3">
{plans.map((plan) => (
<div key={plan.name} className={`rounded-2xl p-8 ${plan.highlighted ? "border-2 border-violet-500 bg-violet-950/50 ring-4 ring-violet-500/20" : "border border-gray-800 bg-gray-900"}`}>
{plan.highlighted && (
<div className="mb-4 inline-block rounded-full bg-violet-500 px-3 py-1 text-xs font-bold text-white">Most popular</div>
)}
<h3 className="text-xl font-bold text-white">{plan.name}</h3>
<p className="mt-1 text-sm text-gray-400">{plan.description}</p>
<div className="my-6">
{plan.price !== null ? (
<span className="text-4xl font-black text-white">${plan.price}<span className="text-lg font-normal text-gray-400">/mo</span></span>
) : (
<span className="text-2xl font-bold text-white">Custom</span>
)}
</div>
<ul className="mb-8 space-y-3 text-sm text-gray-300">
{plan.features.map((f) => (
<li key={f} className="flex items-center gap-2">
<Check className="h-4 w-4 text-violet-400 shrink-0" />
{f}
</li>
))}
</ul>
<Button className={`w-full ${plan.highlighted ? "bg-violet-600 hover:bg-violet-500 text-white" : "border border-gray-700 bg-transparent text-white hover:bg-gray-800"}`}>
{plan.cta}
</Button>
</div>
))}
</div>
</div>
</section>
)
}
```
---
## FAQ with Schema Markup
```tsx
const faqs = [
{ q: "Do I need a credit card to start?", a: "No. Your free trial runs for 14 days with no credit card required." },
{ q: "Can I change plans later?", a: "Yes. Upgrade or downgrade at any time. Changes apply at the next billing cycle." },
]
export function FAQ() {
const schema = {
"@context": "https://schema.org",
"@type": "FAQPage",
mainEntity: faqs.map(({ q, a }) => ({
"@type": "Question",
name: q,
acceptedAnswer: { "@type": "Answer", text: a },
})),
}
return (
<section className="py-24">
<script type="application/ld+json" dangerouslySetInnerHTML={{ __html: JSON.stringify(schema) }} />
<div className="mx-auto max-w-3xl px-4">
<h2 className="mb-12 text-center text-4xl font-bold">Frequently asked questions</h2>
<Accordion type="single" collapsible className="space-y-4">
{faqs.map(({ q, a }) => (
<AccordionItem key={q} value={q} className="rounded-xl border px-6">
<AccordionTrigger className="text-left font-semibold">{q}</AccordionTrigger>
<AccordionContent className="text-gray-600">{a}</AccordionContent>
</AccordionItem>
))}
</Accordion>
</div>
</section>
)
}
```
---
## SEO Checklist
- [ ] `<title>` tag: primary keyword + brand (50–60 chars)
- [ ] Meta description: benefit + CTA (150–160 chars)
- [ ] OG image: 1200×630px with product name and tagline
- [ ] H1: one per page, includes primary keyword
- [ ] Structured data: FAQPage, Product, or Organization schema
- [ ] Canonical URL set
- [ ] Image alt text on all `<Image>` components
- [ ] robots.txt and sitemap.xml configured
- [ ] Core Web Vitals: LCP < 1s, CLS < 0.1
- [ ] Mobile viewport meta tag present
- [ ] Internal linking to pricing and docs
---
## Performance Targets
| Metric | Target | Technique |
|---|---|---|
| LCP | < 1s | Preload hero image, use `priority` on Next/Image |
| CLS | < 0.1 | Set explicit width/height on all images |
| FID/INP | < 100ms | Defer non-critical JS, use `loading="lazy"` |
| TTFB | < 200ms | Use ISR or static generation for landing pages |
| Bundle | < 100KB JS | Audit with `@next/bundle-analyzer` |
---
## Common Pitfalls
- Hero image not preloaded — add `priority` prop to first `<Image>`
- Missing mobile breakpoints — always design mobile-first with `sm:` prefixes
- CTA copy too vague — "Get started" beats "Learn more"; "Start free trial" beats "Sign up"
- Pricing page missing trust signals — add money-back guarantee and testimonials near CTA
- No above-the-fold CTA on mobile — ensure button is visible without scrolling on 375px viewport