npx claudepluginhub joshuarweaver/cascade-content-creation-misc-1 --plugin bear2u-my-skillsThis skill uses the workspace's default tool permissions.
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.
Guides Next.js Cache Components and Partial Prerendering (PPR) with cacheComponents enabled. Implements 'use cache', cacheLife(), cacheTag(), revalidateTag(), static/dynamic optimization, and cache debugging.
Guides building MCP servers enabling LLMs to interact with external services via tools. Covers best practices, TypeScript/Node (MCP SDK), Python (FastMCP).
Generates original PNG/PDF visual art via design philosophy manifestos for posters, graphics, and static designs on user request.
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.