landing-page-guide_skill

Overview

This skill provides a practical, production-ready guide for building high-converting landing pages with Next.js 14+ App Router and ShadCN UI. It enforces the 11 essential landing page elements and combines SEO, accessibility, and performance best practices. Use it to deliver consistent, conversion-focused marketing, product, or promotional pages built with TypeScript, Tailwind CSS, and ShadCN components.

How this skill works

The guide defines a component-first project structure and maps each landing page section to ShadCN UI components (Button, Card, Accordion, Avatar, etc.). It prescribes metadata setup for SEO, responsive Tailwind patterns, Next.js Image optimization, and accessibility checks. A validation checklist ensures all 11 essential elements are implemented and technical requirements are met before launch.

When to use it

• Creating marketing, product, or promotional landing pages with Next.js or React
• Building pages that must include strict SEO and accessibility standards
• Delivering conversion-focused hero, benefits, testimonials, FAQ, and footer flows
• Implementing ShadCN UI-driven component libraries with Tailwind and TypeScript
• Rapidly producing consistent pages that require performance and analytics readiness

Best practices

• Always include the full 11-element framework: URL, logo, SEO title/subtitle, CTAs, social proof, media, benefits, testimonials, FAQ, final CTA, footer
• Start with metadata in layout.tsx/page.tsx and prioritize above-the-fold performance (Next.js Image priority)
• Design mobile-first with Tailwind responsive prefixes and 44x44px minimum touch targets
• Use ShadCN UI components for accessibility and consistency; install only needed components to minimize bundle size
• Keep copy benefit-driven, headings scannable, and CTAs action-oriented; use authentic metrics in social proof

Example use cases

• SaaS product landing page with free-trial hero CTA, feature cards, pricing, and security badges
• E-commerce launch page showcasing product media, pricing, shipping details, and urgency messaging
• Agency or service page highlighting portfolio, process, team bios, and contact form
• Event or webinar page with date/time prominence, speaker profiles, agenda, and registration CTA
• Product marketing page optimized for organic search with keyworded URL and structured metadata