Agent skill · software engineering · sickn33
landing-page-generator
Generates high-converting Next.js/React landing pages with Tailwind CSS. Uses PAS, AIDA, and BAB frameworks for optimized copy/components (Heroes, Features, Pricing). Focuses on Core Web Vitals/SEO.
Why this skill is useful
Generates complete TSX components with SEO optimization and conversion-focused copy, providing executable templates that enhance the AI's capabilities.
What it needs
Requires nextjs, react, tailwind installed locally. About 6k tokens when loaded. Last updated 2026-08-07. 44,571 stars on the source repository.
What this skill does
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 When to Use You need to generate a marketing landing page in Next.js or React. The task involves conversion-focused page structure, section variants, Tailwind styling, or SEO-aware copy. You want complete landing-page output from a product description rather than isolated UI fragments. 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/brandvoiceanalyzer.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. …
How to use it
Reference it in AdaL, Claude Code, Cursor or any coding agent — nothing to install:
@skills sickn33/landing-page-generator