skills.rest
Aiden-Kwak
Aiden-KwakCOMMUNITY
Explore all skills by this author →
WebsiteGitHub

landing-page-guide

Build Next.js 14+ landing pages with an 11-element framework.

Updated Feb 25, 2026
Search Tags:#design#accessibility#nextjs#conversion#seo#shadcn#landing-page
One-click install
npx skills add https://github.com/Aiden-Kwak/My-Claude-Agents --skill landing-page-guide-aiden-kwak
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: landing-page-guide
Source: https://github.com/Aiden-Kwak/My-Claude-Agents/tree/main/.claude/skills/landing-page-guide
Command: npx skills add https://github.com/Aiden-Kwak/My-Claude-Agents --skill landing-page-guide-aiden-kwak

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve?

This guide enables developers and designers to systematically create professional, high-converting landing pages by applying DESIGNNAS's 11-element framework, ensuring SEO, accessibility, and conversion-focused design.

Core Features & Use Cases

  • Provides a complete blueprint for Next.js 14+ App Router with ShadCN UI integration to build marketing and product pages.
  • Includes a structured project layout, implementation patterns, and references to best practices for SEO, accessibility, performance, and UX.
  • Use cases include creating landing pages, marketing pages, or product pages that require comprehensive layout elements and conversion optimization, with ready-to-adapt templates.

Quick Start

Create a new landing-page project with Next.js 14+ App Router and follow the 11-element framework to implement a complete marketing page.

Frequently Asked Questions about landing-page-guide

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

FAQPage Schema
How do I build a high-converting landing page with Next.js?▼

Build a high-converting landing page using Next.js 14+ App Router by applying an 11-element framework that integrates SEO optimization, accessibility, and conversion-focused design patterns for marketing pages.

What elements do I need for a conversion-focused marketing page?▼

A conversion-focused marketing page requires 11 essential elements, providing a complete structural blueprint that enforces SEO-friendly metadata and accessibility standards for optimal user experience.

Can I use Shadcn UI to build landing pages in a Next.js project?▼

Yes, you can use Shadcn UI with Next.js 14+ projects to construct landing pages, leveraging provided implementation patterns and structured layouts to ensure professional, accessible design.

How do I structure SEO metadata for a Next.js landing page?▼

Structure SEO metadata for Next.js landing pages by following an enforced SEO-friendly metadata structure within the 11-element framework, ensuring proper optimization for search engine visibility.

Does this landing page framework support accessibility best practices?▼

Yes, the landing page framework supports accessibility by integrating specific references and best practices for UX and accessibility directly into the 11-element structural blueprint.

Related Skills

Explore More Design & Creative Skills→
netprtonynetprtony

shadcn-ui

Automate shadcn/ui component setup and usage in React and Next.js projects.

Community
Advanced
aaron-he-zhuaaron-he-zhu
142

on-page-seo-auditor

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

Community
Intermediate
Ben1821Ben1821

ui-styling

Automate UI component installation, styling, and theming with shadcn/ui and Tailwind CSS.

Community
Advanced
heyAyushhheyAyushh
3

frontend-design

Design production-grade Next.js interfaces with React components and App Router patterns.

Community
Advanced