Complete AI TrainingYourJobSkills for your job

Skills / frontend

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.

MarketingIT & Software Developmentcrolanding-pagemarketingnextjsreactseotailwind

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 fi

Subscribers only

The full skill, its 6 bundled files and every download is included with every paid Complete AI plan.

Details

Sourcecommunity
License
Risk labelsafe ("critical" means the skill may run commands or touch files — read before use)
FilesSKILL.md, references/conversion-patterns.md, references/frameworks.md, references/landing-page-patterns.md, references/seo-checklist.md, scripts/landing_page_scaffolder.py
Added2026-03-18

Related skills

anti-ui-slop

Stop coding agents from shipping generic UI. Extend the product's design system, use UIZZE evidence only when useful, cover required states, and inspect the rendered result.

astro

Build content-focused websites with Astro — zero JS by default, islands architecture, multi-framework components, and Markdown/MDX support.

chat-widget

Build a real-time support chat system with a floating widget for users and an admin dashboard for support staff. Use when the user wants live chat, customer support chat, real-time messaging, or in-app support.

chrome-extension-developer

Expert in building Chrome Extensions using Manifest V3. Covers background scripts, service workers, content scripts, and cross-context communication.

design-it

Routes frontend design tasks to 48 specific UI styles. Triggers for websites, app screens, or UI components requesting a specific aesthetic.

design-taste-frontend

Use when building high-agency frontend interfaces with strict design taste, calibrated color, responsive layout, and motion rules.