skills.rest
cohki0305
cohki0305COMMUNITY
Explore all skills by this author →
GitHub

landing-page-guide-v2

Design Next.js 14+ landing pages with ShadCN UI and the 11 essential elements framework.

Updated Jan 13, 2026
Search Tags:#design#Next.js#conversion#aesthetics#design-system#ShadCN UI#landing-page
One-click install
npx skills add https://github.com/cohki0305/vibe-template --skill landing-page-guide-v2-cohki0305
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: landing-page-guide-v2
Source: https://github.com/cohki0305/vibe-template/tree/main/.claude/skills/landing-page-guide-v2
Command: npx skills add https://github.com/cohki0305/vibe-template --skill landing-page-guide-v2-cohki0305

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve?

This Skill guides designers and developers to create production-ready landing pages that balance bold design with conversion-focused structure, leveraging Next.js 14+ and ShadCN UI.

Core Features & Use Cases

  • 11 Essential Elements Framework: Applies the DESIGNNAS framework to ensure every page includes URL, logo, hero, CTAs, social proof, media, benefits, testimonials, FAQ, final CTA, and footer.
  • Production-Ready Codebase: Guides the setup of a scalable design system, typography, color variables, motion, and layout using Tailwind CSS and ShadCN UI.
  • Aesthetic Discipline: Defines one clear directional style (e.g., Minimalist, Bold, Editorial) with typographic scale and color strategy.
  • SEO & Accessibility: Provides SEO metadata and accessible components, with performance-minded practices.
  • Reusable Component Architecture: Recommends component structure (Header, Hero, Media, Benefits, Testimonials, FAQ, Final CTA, Footer) for rapid page creation.
  • Real-world example patterns and code references from the repository.

Quick Start

Start by selecting an aesthetic direction, scaffold a Next.js 14+ app, implement the 11 elements, wire SEO metadata, and customize ShadCN components for brand identity.

Frequently Asked Questions about landing-page-guide-v2

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
What are the essential elements of a high-converting Next.js landing page?▼

A high-converting Next.js landing page requires 11 essential elements: URL, logo, hero, CTAs, social proof, media, benefits, testimonials, FAQ, final CTA, and footer. This framework ensures conversion-focused structure and aesthetic discipline.

How do I build a production-ready landing page with Next.js 14 and ShadCN UI?▼

To build a production-ready landing page with Next.js 14 and ShadCN UI, select an aesthetic direction, scaffold the app, implement the 11 essential elements, wire SEO metadata, and customize components. Tailwind CSS manages typography and color variables.

Can I use ShadCN UI to enforce a specific aesthetic style for my landing page?▼

Yes, you can use ShadCN UI to enforce a specific aesthetic style like Minimalist, Bold, or Editorial. The workflow defines one clear directional style with a deliberate typographic scale and color strategy for brand identity.

What's the best way to structure landing page components for rapid SaaS page creation?▼

The best way to structure landing page components is using a reusable architecture: Header, Hero, Media, Benefits, Testimonials, FAQ, Final CTA, and Footer. This scalable design system setup enables rapid page creation and consistent layout.

Does this landing page workflow include SEO metadata and accessibility practices?▼

Yes, the landing page workflow includes SEO metadata and accessibility practices. It provides accessible components and performance-minded practices alongside the design system setup to ensure production-ready SaaS and branding pages.

Why does my Next.js landing page design lack conversion focus?▼

Your Next.js landing page design may lack conversion focus if it misses essential elements like clear CTAs, social proof, or testimonials. Applying the 11 essential elements framework balances bold design with conversion-focused structure.

Related Skills

Explore More Design & Creative Skills→
elophantoelophanto
116

shadcn

Provision shadcn/ui in Next.js 16 projects with pnpm and Tailwind.

Community
Intermediate
aaron-he-zhuaaron-he-zhu
142

on-page-seo-auditor

Audit on-page SEO elements and identify optimization opportunities on webpages.

Community
Intermediate
DITEKmaxDITEKmax

baseline-ui

Enforce Tailwind CSS UI and styling constraints for accessibility, animation, typography, and layout.

Community
Intermediate
ClutchEngineeringClutchEngineering
14

slipstream

Compose static HTML sites with Slipstream and Tailwind CSS.

Official
Advanced