skills.rest
Fantasia1999
Fantasia1999COMMUNITY
Explore all skills by this author →
WebsiteGitHub

landing-page-generator

Generate Next.js/React TSX landing pages with Tailwind CSS and SEO meta tags.

Updated Mar 12, 2026
Search Tags:#web development#landing page#react#next.js#tailwind css#conversion optimization#seo
One-click install
npx skills add https://github.com/Fantasia1999/claude-skills-zh --skill landing-page-generator-fantasia1999
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: landing-page-generator
Source: https://github.com/Fantasia1999/claude-skills-zh/tree/main/translations/product-team/landing-page-generator
Command: npx skills add https://github.com/Fantasia1999/claude-skills-zh --skill landing-page-generator-fantasia1999

SYSTEM DOCUMENTATION & REQUIREMENTS

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

What problem does it solve?

This Skill automates the creation of high-converting landing pages, transforming product descriptions into fully functional, performance-optimized Next.js/React components with Tailwind CSS.

Core Features & Use Cases

  • Generates complete Next.js/React (TSX) components with Tailwind CSS for landing pages.
  • Utilizes proven copywriting frameworks (PAS, AIDA, BAB) for persuasive content.
  • Creates key sections: hero, features, pricing, FAQ, testimonials, and CTAs.
  • Optimizes for Core Web Vitals (LCP < 1s, CLS < 0.1) and includes SEO meta tags.
  • Supports A/B testing variations and replacing static pages with conversion-focused designs.
  • Use Case: A user wants to create a marketing page for a new SaaS product. They provide the product name, tagline, target audience, key pain point, benefit, pricing tiers, desired design style, and copywriting framework. The skill then generates the complete, optimized code for the landing page.

Quick Start

Use the landing-page-generator skill to create a landing page for a new productivity app called 'FocusFlow' with the tagline 'Master your time, achieve your goals', targeting busy professionals who struggle with task management, offering a core benefit of increased efficiency, with a 'Pro' and 'Enterprise' pricing tier, using the 'clean-minimal' design style and the 'AIDA' copywriting framework.

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 high-converting landing page in Next.js?▼

To generate a high-converting landing page in Next.js, provide product details, target audience, and pricing tiers. The skill outputs complete TSX components with Tailwind CSS, utilizing copywriting frameworks like PAS, AIDA, or BAB for persuasive content.

What is the best way to build a lead-capture page optimized for Core Web Vitals?▼

The best way to build a lead-capture page optimized for Core Web Vitals is using generated React components that ensure LCP < 1s and CLS < 0.1. This approach includes SEO meta tags and structured data for enhanced search visibility.

Does this landing page generator support A/B testing variations?▼

Yes, this landing page generator supports A/B testing variations. It allows you to create multiple conversion-focused designs and easily replace static pages to test different copywriting frameworks, design styles, and CTAs.

Can I use Tailwind CSS to create a marketing page with the AIDA framework?▼

Yes, you can use Tailwind CSS to create a marketing page with the AIDA framework. The skill generates complete Next.js components styled with Tailwind, incorporating your chosen framework to structure the hero, features, testimonials, and pricing sections.

How do I add SEO meta tags and structured data to a promotional page?▼

To add SEO meta tags and structured data to a promotional page, the skill automatically includes these elements in the generated Next.js TSX code. This ensures your event or promotional pages are search-engine friendly and performance-optimized.

What copywriting frameworks are available for generating conversion-optimized web pages?▼

Available copywriting frameworks for generating conversion-optimized web pages include PAS (Problem-Agitate-Solution), AIDA (Attention-Interest-Desire-Action), and BAB (Before-After-Bridge). These frameworks structure your content to maximize user conversion rates.

Related Skills

Explore More Design & Creative Skills→
ricardohg1998-createricardohg1998-create

copywriting

Generate marketing copy for webpages with headline and CTA options.

Community
Basic
brainbytes-devbrainbytes-dev
3

cta-optimization

Optimize calls-to-action using psychological principles and A/B testing methodologies.

Community
Intermediate
Ben1821Ben1821

ui-styling

Automate UI component installation, styling, and theming with shadcn/ui and Tailwind CSS.

Community
Advanced
r9412460971-cloudr9412460971-cloud
31

static-page-builder

Generate responsive static websites with HTML/Tailwind or Vite+Tailwind templates.

Community
Intermediate