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.
From web-devnpx claudepluginhub nickloveinvesting/nick-love-plugins --plugin web-devThis skill uses the workspace's default tool permissions.
references/11-essential-elements.mdreferences/component-examples.mdSearches, retrieves, and installs Agent Skills from prompts.chat registry using MCP tools like search_skills and get_skill. Activates for finding skills, browsing catalogs, or extending Claude.
Searches prompts.chat for AI prompt templates by keyword or category, retrieves by ID with variable handling, and improves prompts via AI. Use for discovering or enhancing prompts.
Compares coding agents like Claude Code and Aider on custom YAML-defined codebase tasks using git worktrees, measuring pass rate, cost, time, and consistency.
This skill enables creation of professional, high-converting landing pages following the 11 essential elements framework from DESIGNNAS. It provides complete implementation patterns for Next.js 14+ and React with ShadCN UI integration, ensuring every landing page includes proper SEO optimization, accessibility standards, and conversion-focused design.
Use this skill when users request:
Every effective landing page must include these 11 essential elements. These are based on DESIGNNAS's proven framework for high-converting landing pages:
Critical: All 11 elements must be included in every landing page. No exceptions.
For detailed explanations of each element, refer to references/11-essential-elements.md.
When creating landing pages, always use:
Before creating any landing page, ensure these components are installed:
npx shadcn-ui@latest add button
npx shadcn-ui@latest add card
npx shadcn-ui@latest add accordion
npx shadcn-ui@latest add badge
npx shadcn-ui@latest add avatar
npx shadcn-ui@latest add separator
npx shadcn-ui@latest add input
Create landing pages with this structure:
landing-page/
├── app/
│ ├── layout.tsx # Root layout with metadata
│ ├── page.tsx # Main landing page
│ └── globals.css # Global styles
├── components/
│ ├── Header.tsx # Logo & Navigation (Element 2)
│ ├── Hero.tsx # Title, CTA, Social Proof (Elements 3-5)
│ ├── MediaSection.tsx # Images/Videos (Element 6)
│ ├── Benefits.tsx # Core Benefits (Element 7)
│ ├── Testimonials.tsx # Customer Reviews (Element 8)
│ ├── FAQ.tsx # FAQ Accordion (Element 9)
│ ├── FinalCTA.tsx # Bottom CTA (Element 10)
│ └── Footer.tsx # Contact & Legal (Element 11)
├── public/
│ └── images/ # Optimized images
└── package.json
Always start with proper SEO metadata in layout.tsx or page.tsx:
import type { Metadata } from 'next'
export const metadata: Metadata = {
title: 'SEO Optimized Title with Keywords | Brand Name',
description: 'Compelling description with main keywords',
keywords: ['keyword1', 'keyword2', 'keyword3'],
openGraph: {
title: 'OG Title',
description: 'OG Description',
images: ['/og-image.jpg'],
},
}
Build components in this order to ensure proper flow:
Map each section to appropriate ShadCN components:
Button component with size="lg"Card, CardHeader, CardTitle, CardContentCard, Avatar, BadgeAccordion, AccordionItem, AccordionTrigger, AccordionContentButton and CardSeparator, Input for newsletterEnsure mobile-first responsive design:
sm:, md:, lg:, xl:Image component for all imagespriority prop to above-the-fold images<header>, <main>, <section>, <footer>)For complete, production-ready component implementations using ShadCN UI, refer to references/component-examples.md.
This reference file includes:
Load this reference when implementing components to follow best practices.
Before completing any landing page, verify:
11 Essential Elements:
Technical Requirements:
Focus on: Free trial CTA, feature comparisons, pricing clarity, security badges
Focus on: Product images, pricing, shipping info, return policy, urgency
Focus on: Portfolio/case studies, process explanation, team credentials, contact form
Focus on: Date/time prominence, speaker profiles, agenda, registration form, countdown timer
This skill includes detailed reference documentation:
11-essential-elements.md - In-depth explanation of each of the 11 essential elements with principles, implementation tips, and examplescomponent-examples.md - Complete, production-ready component code using ShadCN UI for all major sectionsLoad these references as needed when implementing specific sections or when you need detailed guidance on any element.