landing-page-guide-v2
Distinctive, high-converting landing pages combining proven conversion elements with exceptional design quality.
- Implements the 11 essential elements framework (hero, CTAs, social proof, benefits, testimonials, FAQ, footer) proven to drive conversions while avoiding generic AI aesthetics
- Built with Next.js 14+, TypeScript, Tailwind CSS, and heavily customized ShadCN UI components for production-ready code
- Requires design-first approach: choose a bold aesthetic direction (minimalist, maximalist, retro, organic, editorial, or brutalist), define typography and color system as CSS variables before coding
- Emphasizes distinctive typography (never Inter/Roboto), custom animations with staggered reveals on page load and scroll, and spatial composition that breaks generic grid layouts
- Includes detailed guidance on avoiding overused patterns (purple gradients, centered layouts, generic icons) and implementing accessibility, SEO optimization, and performance best practices
Landing Page Guide V2
Overview
This skill enables creation of distinctive, high-converting landing pages that combine:
- Proven Conversion Framework: 11 essential elements from DESIGNNAS for high conversion rates
- Exceptional Design Quality: Bold aesthetic choices that create unforgettable brand experiences
- Production-Ready Code: Next.js 14+ with ShadCN UI, TypeScript, and performance optimization
Philosophy: A landing page must convert visitors AND make them remember your brand. Generic, template-looking pages fail at both. This skill ensures your landing pages are functionally effective and visually extraordinary.
When to Use This Skill
More from bear2u/my-skills
card-news-generator-v2
Create 600x600 Instagram-style card news series automatically with optional background images. User provides topic, colors, and optional images - Claude generates content and creates multiple cards with proper text wrapping.
138landing-page-guide
Comprehensive guide for creating effective landing pages using Next.js or React. This skill should be used when users request to create landing pages, marketing pages, or product pages that require the 11 essential elements for high-converting landing pages. Specifically designed for Next.js 14+ App Router with ShadCN UI components.
55gemini-logo-remover
Remove Gemini logos, watermarks, or AI-generated image markers using OpenCV inpainting. Use this skill when the user asks to remove Gemini logo, AI watermark, or any logo/watermark from images.
41frontend-design
Create distinctive, production-grade frontend interfaces with high design quality. Use this skill when the user asks to build web components, pages, or applications. Generates creative, polished code that avoids generic AI aesthetics.
37design-prompt-generator-v2
Advanced 7-step hierarchical design prompt generator for AI web development tools (Lovable, Cursor, Bolt). Generates domain-aware, user-journey-based design prompts with emotional design considerations. Triggers on "디자인 프롬프트", "웹 디자인", "Lovable 프롬프트", "랜딩페이지 만들어줘", or any AI web builder prompt requests.
35flutter-init
Use when user wants to create a new Flutter project (Todo/Habit/Note/Expense/Custom domain) with Clean Architecture, Riverpod 3.0, Drift, and modern Flutter stack
34