skills.rest
LGJ-Jonathan
LGJ-JonathanOFFICIAL
Explore all skills by this author →
GitHub

landing-page-generator

Generates Next.js and React landing page components with Tailwind CSS, SEO metadata, and conversion copy frameworks.

Updated Mar 26, 2026
Search Tags:#landing page#react#copywriting#nextjs#conversion#tailwind#seo
One-click install
npx skills add https://github.com/LGJ-Jonathan/Jonathan_Global_Claude_Skills --skill landing-page-generator-lgj-jonathan
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: landing-page-generator
Source: https://github.com/LGJ-Jonathan/Jonathan_Global_Claude_Skills/tree/main/landing-page-generator
Command: npx skills add https://github.com/LGJ-Jonathan/Jonathan_Global_Claude_Skills --skill landing-page-generator-lgj-jonathan

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes scripts (resource) and references (resource) components.

What problem does it solve? Writing landing pages from scratch requires coordinating copywriting, component structure, SEO metadata, and performance optimization, which is slow and error-prone when done manually. ## Core Features & Use Cases - Component Generation: Produces complete TSX sections (Hero, Features, Pricing, FAQ, Testimonials, CTA, Footer) with Tailwind classes across four design styles (dark-saas, clean-minimal, bold-startup, enterprise). - Copy Frameworks: Applies PAS, AIDA, BAB, and 4Ps frameworks to write conversion-oriented headlines and body copy instead of placeholder text. - SEO and Performance Validation: Enforces a checklist covering meta tags, structured data (FAQPage/Product schema), Core Web Vitals targets, and image optimization. - Use Case: Provide a product name, tagline, audience, pain point, and pricing tiers, then receive a copy-paste-ready Next.js page with SEO meta and JSON-LD schema included. ## Quick Start Generate a landing page for my SaaS product using the dark-saas style and PAS copy framework with hero, features, pricing, and FAQ sections.

Frequently Asked Questions about landing-page-generator

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I generate a Next.js landing page with Tailwind CSS?▼

Provide the product name, tagline, target audience, pain point, key benefit, pricing tiers, design style, and copy framework. The skill outputs complete TSX components with Tailwind classes, SEO metadata, and structured data ready to paste into a Next.js project.

What copywriting frameworks work for landing page headlines?▼

The skill supports PAS (Problem-Agitate-Solution), AIDA (Attention-Interest-Desire-Action), BAB (Before-After-Bridge), and 4Ps (Promise-Picture-Proof-Push). PAS suits pain-point-driven products, AIDA fits direct response pages, and BAB works for aspirational products.

Can I generate a standalone HTML landing page instead of React?▼

Yes. The included landing_page_scaffolder.py script accepts a JSON config and outputs either TSX for Next.js or standalone HTML with inline CSS via the --format flag. It also supports a json mode for metadata inspection.

Does the generated landing page include SEO structured data?▼

Yes. FAQ sections inject FAQPage JSON-LD via a script tag, and the SEO checklist covers title tags, meta descriptions, Open Graph images, canonical URLs, and Product or Organization schema validation before final output.

What Core Web Vitals targets does the landing page output meet?▼

The skill targets LCP under 1 second via hero image preloading and Next/Image priority, CLS under 0.1 via explicit image dimensions, and INP under 100ms by deferring non-critical JavaScript and lazy-loading below-fold assets.

Related Skills

Explore More Marketing & Sales Skills→
gooseworks-aigooseworks-ai
1.1k

brand-voice-extractor

Analyzes published content to extract a Brand Voice Profile with tone, vocabulary, sentence structure, formatting, and audience guidance.

Official
Advanced
ChegginCheggin
1

landing-page-optimizer

Run hypothesis-driven A/B tests on landing pages using PostHog metrics.

Community
Intermediate
CleanExpoCleanExpo

marketing-positioning

Generate JTBD-based messaging hierarchies and competitive positioning documents.

Community
Advanced
webdevarifwebdevarif

neuro-theme-engine

Builds section-based theme systems with live preview, CSS variables, and React component registries.

Community
Advanced