landing-page-guide

Name: landing-page-guide
Rating: 5 (499 reviews)
Author: bear2u

Comprehensive guide for creating effective landing pages using Next.js or React. This skill should be used when users request to create landing pages, marketing pages, or product pages that require the 11 essential elements for high-converting landing pages. Specifically designed for Next.js 14+ App Router with ShadCN UI components.

TL;DR

Comprehensive guide for building high-converting landing pages in Next.js 14+ with ShadCN UI, following 11 essential elements.

What Is It

Framework for creating effective landing pages using Next.js and React
Includes 11 essential elements for high conversion rates
Requires ShadCN UI components and App Router architecture
Enables SEO-optimized, accessible, and conversion-focused designs

Key Features

Mandatory inclusion of 11 essential elements
Built for Next.js 14+ App Router with ShadCN UI
Includes SEO, accessibility, and performance best practices
Structured component flow ensures logical page flow
Mobile-first responsive design with WCAG compliance
Type-safe, performance-optimized with minimal bundle size

How to Use

1.Use when creating landing, marketing, or product pages
2.Follow the 11 essential elements framework exactly
3.Implement components in order: Header → Hero → Media → Benefits → Testimonials → FAQ → Final CTA → Footer
4.Ensure all elements are present with proper metadata and accessibility

Guardrails & Gotchas

Critical: All 11 elements must be included in every landing page. No exceptions.
Must use Next.js 14+ App Router with TypeScript, Tailwind CSS, and ShadCN UI
Never skip any of the 11 essential elements
Always include proper SEO metadata and accessibility standards

GitHub Stats

Author

@bear2u

Repository

bear2u/my-skills

Stars

499

Explore More Skills

move-code-quality

@davila7

Analyzes Move language packages against the official Move Book Code Quality Checklist. Use this skill when reviewing Move code, checking Move 2024 Edition compliance, or analyzing Move packages for best practices. Activates automatically when working with .move files or Move.toml manifests.

12.4k

1.1k

1w ago

landing-page-guide

Explore More Skills

move-code-quality

e2e-testing-patterns

testing-anti-patterns