skills.rest
ratnesh-maurya
ratnesh-mauryaCOMMUNITY
Explore all skills by this author →
Website𝕏@_ratneshmauryaGitHub

landing-page-generator

Generates Next.js and React landing page components with Tailwind CSS and SEO metadata.

1|Updated Aug 17, 2025
Search Tags:#landing page#react#copywriting#nextjs#conversion#tailwind#seo
One-click install
npx skills add https://github.com/ratnesh-maurya/mdconverter --skill landing-page-generator-ratnesh-maurya
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: landing-page-generator
Source: https://github.com/ratnesh-maurya/mdconverter/tree/main/.claude/skills/landing-page-generator
Command: npx skills add https://github.com/ratnesh-maurya/mdconverter --skill landing-page-generator-ratnesh-maurya

SYSTEM DOCUMENTATION & REQUIREMENTS

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

What problem does it solve? Writing landing pages from scratch requires combining conversion copywriting, responsive component code, and SEO configuration, which is slow and error-prone when done manually. ## Core Features & Use Cases - Component Generation: Produces TSX sections including heroes, features, pricing tables, FAQ with JSON-LD schema, testimonials, CTAs, and footers across four Tailwind design styles. - Copy Frameworks: Applies PAS, AIDA, BAB, and 4Ps frameworks to write conversion-oriented headlines and body copy instead of placeholder text. - Scaffolder Script: Runs scripts/landing_page_scaffolder.py to render a config JSON into a complete TSX or standalone HTML page. - Use Case: Provide a product name, tagline, audience, and pricing tiers to receive a copy-paste-ready Next.js landing page with SEO meta tags and structured data. ## Quick Start Ask the assistant to generate a dark-saas landing page for your product using the PAS 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, audience, pain point, pricing tiers, design style, and copy framework using the trigger format in SKILL.md. The skill outputs complete TSX section components with Tailwind classes, SEO metadata, and structured data.

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 frameworks. Each maps to different product types, with worked SaaS examples in references/frameworks.md.

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

Yes, run scripts/landing_page_scaffolder.py with --format html and a config JSON to produce a self-contained HTML page with inline responsive CSS. The default --format tsx outputs Next.js components with Tailwind.

Does the generated landing page include SEO structured data?▼

Yes, the FAQ section injects FAQPage JSON-LD via a script tag, and the TSX output includes Next.js Metadata exports with Open Graph fields. The references/seo-checklist.md file covers canonical URLs, sitemaps, and Core Web Vitals targets.

What are the limitations of the landing page scaffolder script?▼

The scaffolder generates fixed section layouts from config JSON and does not handle custom animations, CMS integration, or dynamic data fetching. Complex hero variants like video backgrounds require manual component adjustment after generation.

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
benjaminfauchaldbenjaminfauchald

ab-test-setup

Plan and run statistically valid A/B tests with hypothesis frameworks and sample-size calculations.

Community
Advanced
zero3041zero3041
1

seo

Audit websites for crawlability, indexability, on-page SEO, and structured data.

Community
Advanced
PriyanshKuniyalPriyanshKuniyal

brand-landingpage

Generate brand-first landing pages via user interviews and the Stitch SDK.

Community
Advanced