landing-page-guide-v2_skill

Overview

This skill creates distinctive, high-converting landing pages that combine an 11-element conversion framework with bold, memorable design. It delivers production-ready Next.js 14+ templates using ShadCN UI and TypeScript, optimized for performance and accessibility. The approach avoids generic AI aesthetics and enforces a clear aesthetic direction for every project.

How this skill works

I guide the design-first process: choose one bold aesthetic direction, define a compact design system (typography, color, motion, spacing), then implement all 11 essential landing-page elements. The output is componentized Next.js code with ShadCN UI patterns, CSS variables for rapid theming, and animations that favor GPU-accelerated transforms. Every page includes SEO, hero CTAs, social proof, media, features, testimonials, FAQ, final CTA, and footer/legal elements.

When to use it

• Building marketing, product, or promotional pages that must convert visitors to customers
• Implementing Next.js 14+ projects with ShadCN UI and TypeScript for production
• Creating brand-forward pages that must avoid generic template aesthetics
• Launching campaigns requiring strong SEO, social proof, and measurable CTAs
• Designing pages where memorability and distinctive typography matter

Best practices

• Pick one clear aesthetic direction and apply it consistently across all 11 elements
• Define CSS variables for color, spacing, and motion to maintain visual coherence
• Use distinctive display fonts paired with a refined body font; avoid system defaults
• Prefer CSS transforms and opacity for animations; minimize expensive layout changes
• Never use generic placeholder imagery or default icons—use custom visuals or authentic screenshots

Example use cases

• A SaaS hero page with a massive typographic headline, animated stats, and dual CTAs
• A creative agency landing page using bold gradients, overlapping layers, and motion
• A product launch page with device mockups, video demos, and count-up social proof
• A premium consultancy site with refined typography, editorial layout, and a prominent final CTA
• A gaming or startup page using retro-futuristic visuals, custom fonts, and dynamic scroll effects