OverviewHistoryStatsSecurity
npx skills add ...
Documentation
SKILL.md
npx skills add bear2u/my-skills --skill landing-page-guide
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.
npx skills add bear2u/my-skills --skill landing-page-guide
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:
Create landing pages with this structure:
Always start with proper SEO metadata in layout.tsx or page.tsx:
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.
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.jsonimport 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'],
},
}