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-ccc-design-landing-page-buildergit clone https://github.com/KevinZai/commander.gitcp commander/SKILL.MD ~/.claude/skills/kevinzai-commander-skills-ccc-design-landing-page-builder/SKILL.md---
name: landing-page-builder
description: "Build high-converting landing pages with Next.js + shadcn/ui. Hero sections, social proof, testimonials, pricing tables, FAQ, CTA patterns, lead capture forms, countdown timers, trust badges, and above-the-fold optimization. Use when: user wants a landing page, pricing page, hero section, testimonials, or conversion-optimized page."
---
# Landing Page Builder Skill
Build conversion-optimized landing pages for **Next.js (App Router) + shadcn/ui + Tailwind CSS + TypeScript** projects.
All output MUST be:
- React Server Components where possible (client only for interactivity)
- shadcn/ui components + Tailwind
- Mobile-first responsive
- Above-the-fold optimized (LCP < 2.5s)
- Accessible (ARIA, keyboard nav, contrast)
## 1. Hero Section Patterns
### Hero with CTA + Social Proof
```tsx
import { Button } from "@/components/ui/button"
import { Badge } from "@/components/ui/badge"
import Image from "next/image"
import { ArrowRight, Star } from "lucide-react"
export function Hero() {
return (
<section className="relative overflow-hidden py-20 lg:py-32">
<div className="container mx-auto px-4">
<div className="mx-auto max-w-3xl text-center">
<Badge variant="secondary" className="mb-4">New: Feature X is here</Badge>
<h1 className="text-4xl font-bold tracking-tight sm:text-5xl lg:text-6xl">
Headline that speaks to the <span className="text-primary">pain point</span>
</h1>
<p className="mt-6 text-lg text-muted-foreground max-w-2xl mx-auto">
Supporting copy that explains the value proposition in one clear sentence. Focus on outcomes, not features.
</p>
<div className="mt-8 flex flex-col sm:flex-row gap-4 justify-center">
<Button size="lg" className="text-lg px-8">
Primary CTA <ArrowRight className="ml-2 h-5 w-5" />
</Button>
<Button size="lg" variant="outline" className="text-lg px-8">
Secondary CTA
</Button>
</div>
{/* Social proof strip */}
<div className="mt-10 flex flex-col items-center gap-3">
<div className="flex -space-x-2">
{[1,2,3,4,5].map(i => (
<Image key={i} src={`/avatars/${i}.jpg`} alt="" width={32} height={32} className="rounded-full border-2 border-background" />
))}
</div>
<div className="flex items-center gap-1">
{[1,2,3,4,5].map(i => <Star key={i} className="h-4 w-4 fill-yellow-400 text-yellow-400" />)}
<span className="ml-2 text-sm text-muted-foreground">Trusted by 10,000+ users</span>
</div>
</div>
</div>
</div>
</section>
)
}
```
### Hero with Image/Video
```tsx
// Split layout: text left, image/video right
<section className="py-20">
<div className="container grid gap-12 lg:grid-cols-2 items-center">
<div>
<h1>...</h1>
<p>...</p>
<Button>...</Button>
</div>
<div className="relative aspect-video rounded-lg overflow-hidden shadow-2xl">
{/* Product screenshot, demo video, or animated visual */}
</div>
</div>
</section>
```
## 2. Social Proof & Testimonials
### Logo Strip
```tsx
export function LogoStrip({ logos }: { logos: { name: string; src: string }[] }) {
return (
<section className="py-12 border-y">
<div className="container">
<p className="text-center text-sm text-muted-foreground mb-8">Trusted by leading companies</p>
<div className="flex flex-wrap items-center justify-center gap-8 lg:gap-16 opacity-60">
{logos.map(logo => (
<Image key={logo.name} src={logo.src} alt={logo.name} width={120} height={40} className="h-8 w-auto" />
))}
</div>
</div>
</section>
)
}
```
### Testimonial Cards
```tsx
import { Card, CardContent } from "@/components/ui/card"
import { Avatar, AvatarImage, AvatarFallback } from "@/components/ui/avatar"
interface Testimonial { quote: string; name: string; role: string; company: string; avatar?: string }
export function TestimonialGrid({ testimonials }: { testimonials: Testimonial[] }) {
return (
<section className="py-20">
<div className="container">
<h2 className="text-3xl font-bold text-center mb-12">What our customers say</h2>
<div className="grid gap-6 md:grid-cols-2 lg:grid-cols-3">
{testimonials.map((t, i) => (
<Card key={i}>
<CardContent className="pt-6">
<p className="text-muted-foreground mb-4">"{t.quote}"</p>
<div className="flex items-center gap-3">
<Avatar>
{t.avatar && <AvatarImage src={t.avatar} />}
<AvatarFallback>{t.name[0]}</AvatarFallback>
</Avatar>
<div>
<p className="font-medium text-sm">{t.name}</p>
<p className="text-xs text-muted-foreground">{t.role}, {t.company}</p>
</div>
</div>
</CardContent>
</Card>
))}
</div>
</div>
</section>
)
}
```
## 3. Pricing Table
```tsx
import { Button } from "@/components/ui/button"
import { Card, CardContent, CardHeader, CardTitle, CardDescription } from "@/components/ui/card"
import { Badge } from "@/components/ui/badge"
import { Check } from "lucide-react"
import { cn } from "@/lib/utils"
interface Plan { name: string; price: string; period: string; description: string; features: string[]; cta: string; popular?: boolean }
export function PricingTable({ plans }: { plans: Plan[] }) {
return (
<section className="py-20">
<div className="container">
<h2 className="text-3xl font-bold text-center mb-4">Simple, transparent pricing</h2>
<p className="text-center text-muted-foreground mb-12 max-w-xl mx-auto">No hidden fees. Cancel anytime.</p>
<div className="grid gap-6 md:grid-cols-3 max-w-5xl mx-auto">
{plans.map(plan => (
<Card key={plan.name} className={cn("relative", plan.popular && "border-primary shadow-lg scale-105")}>
{plan.popular && <Badge className="absolute -top-3 left-1/2 -translate-x-1/2">Most Popular</Badge>}
<CardHeader>
<CardTitle>{plan.name}</CardTitle>
<CardDescription>{plan.description}</CardDescription>
<div className="mt-4">
<span className="text-4xl font-bold">{plan.price}</span>
<span className="text-muted-foreground">/{plan.period}</span>
</div>
</CardHeader>
<CardContent>
<Button className="w-full mb-6" variant={plan.popular ? "default" : "outline"}>{plan.cta}</Button>
<ul className="space-y-3">
{plan.features.map(f => (
<li key={f} className="flex items-start gap-2 text-sm">
<Check className="h-4 w-4 text-primary mt-0.5 shrink-0" />
{f}
</li>
))}
</ul>
</CardContent>
</Card>
))}
</div>
</div>
</section>
)
}
```
## 4. FAQ Accordion
```tsx
import { Accordion, AccordionContent, AccordionItem, AccordionTrigger } from "@/components/ui/accordion"
interface FAQ { question: string; answer: string }
export function FAQSection({ faqs }: { faqs: FAQ[] }) {
return (
<section className="py-20">
<div className="container max-w-3xl">
<h2 className="text-3xl font-bold text-center mb-12">Frequently asked questions</h2>
<Accordion type="single" collapsible className="w-full">
{faqs.map((faq, i) => (
<AccordionItem key={i} value={`faq-${i}`}>
<AccordionTrigger className="text-left">{faq.question}</AccordionTrigger>
<AccordionContent className="text-muted-foreground">{faq.answer}</AccordionContent>
</AccordionItem>
))}
</Accordion>
</div>
</section>
)
}
```
## 5. Countdown Timer
```tsx
"use client"
import { useEffect, useState } from "react"
export function CountdownTimer({ targetDate }: { targetDate: string }) {
const [timeLeft, setTimeLeft] = useState({ days: 0, hours: 0, minutes: 0, seconds: 0 })
useEffect(() => {
const interval = setInterval(() => {
const diff = new Date(targetDate).getTime() - Date.now()
if (diff <= 0) { clearInterval(interval); return }
setTimeLeft({
days: Math.floor(diff / 86400000),
hours: Math.floor((diff % 86400000) / 3600000),
minutes: Math.floor((diff % 3600000) / 60000),
seconds: Math.floor((diff % 60000) / 1000),
})
}, 1000)
return () => clearInterval(interval)
}, [targetDate])
return (
<div className="flex gap-4 justify-center">
{Object.entries(timeLeft).map(([label, value]) => (
<div key={label} className="text-center">
<div className="text-3xl font-bold tabular-nums">{String(value).padStart(2, "0")}</div>
<div className="text-xs text-muted-foreground uppercase">{label}</div>
</div>
))}
</div>
)
}
```
## 6. Feature Grid
```tsx
import { Card, CardContent } from "@/components/ui/card"
import type { LucideIcon } from "lucide-react"
interface Feature { icon: LucideIcon; title: string; description: string }
export function FeatureGrid({ features }: { features: Feature[] }) {
return (
<section className="py-20">
<div className="container">
<h2 className="text-3xl font-bold text-center mb-12">Everything you need</h2>
<div className="grid gap-6 sm:grid-cols-2 lg:grid-cols-3">
{features.map(f => (
<Card key={f.title}>
<CardContent className="pt-6">
<f.icon className="h-10 w-10 text-primary mb-4" />
<h3 className="font-semibold mb-2">{f.title}</h3>
<p className="text-sm text-muted-foreground">{f.description}</p>
</CardContent>
</Card>
))}
</div>
</div>
</section>
)
}
```
## 7. Trust Badges
```tsx
import { Shield, Lock, CreditCard, Headphones } from "lucide-react"
export function TrustBadges() {
const badges = [
{ icon: Shield, label: "SOC 2 Certified" },
{ icon: Lock, label: "256-bit SSL" },
{ icon: CreditCard, label: "PCI Compliant" },
{ icon: Headphones, label: "24/7 Support" },
]
return (
<div className="flex flex-wrap justify-center gap-6 py-8">
{badges.map(b => (
<div key={b.label} className="flex items-center gap-2 text-sm text-muted-foreground">
<b.icon className="h-5 w-5" />
<span>{b.label}</span>
</div>
))}
</div>
)
}
```
## Page Layout Pattern
```tsx
// Typical high-converting landing page order:
// 1. Hero (with primary CTA)
// 2. Logo strip (social proof)
// 3. Problem → Solution (before/after)
// 4. Feature grid or bento
// 5. Testimonials
// 6. Pricing
// 7. FAQ
// 8. Final CTA section
// 9. Trust badges + footer
```
## Conversion Best Practices
1. One primary CTA per viewport — don't compete with yourself
2. Sticky CTA on mobile (fixed bottom bar)
3. Above-the-fold must contain: headline, value prop, CTA, social proof
4. Use `priority` on hero images for LCP
5. Repeat CTA after every 2-3 sections
6. Use urgency/scarcity sparingly and honestly
7. Test button copy > test button color
**Version:** 1.0.0
**Last Updated:** 2026-03-17