skills.rest
DevOtts
DevOttsCOMMUNITY
Explore all skills by this author →
WebsiteGitHub

landing-page-builder

Builds Next.js landing pages with hero variants, lead-capture dialogs, and JSON-LD schemas.

4|Updated Jun 27, 2025
Search Tags:#structured data#landing page#Next.js#conversion#Tailwind#JSON-LD#lead capture
One-click install
npx skills add https://github.com/DevOtts/all-skills-you-will-ever-need --skill landing-page-builder-devotts
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: landing-page-builder
Source: https://github.com/DevOtts/all-skills-you-will-ever-need/tree/main/.claude/landing-page-builder
Command: npx skills add https://github.com/DevOtts/all-skills-you-will-ever-need --skill landing-page-builder-devotts

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

It helps you create landing pages that feel genuinely premium and conversion-focused instead of generic AI slop by using a proven marketing structure, strong UX patterns, and SEO-ready structured data.

Core Features & Use Cases

  • Concept-first premium page construction: Designs and composes a complete single-page marketing site with a polished hero, proof, problem/solution flow, offer section, FAQ, and CTA.
  • Dark + light hero A/B feel: Produces both hero variants so you can swap the overall tone without rebuilding the page.
  • SEO/GEO-friendly structured data: Generates JSON-LD schemas (including FAQ) with stable cross-linked @id references to improve rich-result visibility and AI search citations.
  • High-conversion lead capture modal: Implements a 2-column shadcn Dialog flow for converting visitors into POC/lead submissions with validation and success handling.
  • Motion and accessibility safeguards: Uses scroll orchestration, reduced-motion considerations, and reusable UI primitives for consistent animation quality.

Quick Start

Use the landing-page-builder skill to generate a Next.js (App Router + Tailwind + shadcn) marketing landing page with dark + light hero variants and JSON-LD for structured SEO.

Frequently Asked Questions about landing-page-builder

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

FAQPage Schema
How do I build a Next.js landing page that avoids generic AI-generated aesthetics?▼

Build a premium landing page using a proven marketing structure with a polished hero, proof sections, and JSON-LD schemas to avoid generic AI aesthetics. This approach ensures conversion-focused layouts with strong UX patterns rather than standard boilerplate.

What's the best way to add JSON-LD structured data to a Next.js marketing page?▼

Add JSON-LD structured data by generating schemas with stable cross-linked @id references. This improves rich-result visibility and AI search citations for your marketing page, ensuring SEO/GEO-friendly structured data implementation.

Can I create dark and light hero variants for A/B testing in Tailwind?▼

Yes, you can produce both dark and light hero variants for A/B testing in Tailwind. This allows you to swap the overall tone of your landing page without rebuilding the entire structure.

How do I implement a lead capture modal with validation in a Next.js App Router project?▼

Implement a high-conversion lead capture modal using a 2-column shadcn Dialog flow. This workflow handles visitor conversion into POC or lead submissions with built-in validation and success handling.

Does this landing page builder include scroll orchestration and reduced-motion accessibility safeguards?▼

Yes, the landing page builder includes scroll orchestration and reduced-motion accessibility safeguards. It uses reusable UI primitives to maintain consistent animation quality while respecting user motion preferences.

What sections do I need for a conversion-focused SaaS single-page launch?▼

A conversion-focused SaaS single-page launch requires a polished hero, proof, problem/solution flow, offer section, FAQ, and CTA. This structured marketing layout ensures above-the-fold polish and drives conversions.

Related Skills

Explore More Marketing & Sales Skills→
netprtonynetprtony

shadcn-ui

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

Community
Advanced
cengo33cengo33

revops

Manage lead lifecycle stages, scoring, and routing rules in CRM systems.

Community
Advanced
limaonlimaon

frontend-ui-animator

Analyze and implement UI animations for Next.js, Tailwind, and React projects.

Community
Intermediate
OpenAEC-FoundationOpenAEC-Foundation
163

frappe-website-deploy

Deploy ERPNext/Frappe websites via REST API with Page Builder.

Official
Advanced