Confirm successful installation by checking the skill directory location:
.cursor/skills/landing-page-guide-v2
Restart Cursor to activate landing-page-guide-v2. Access via /landing-page-guide-v2 in your agent's command palette.
โ
Security Notice
We perform automated surface-level scans (Gen AI Scanner, Socket, Snyk) during installation. These checks detect common vulnerabilities but do not guarantee complete security. Always review skill source code and verify the publisher's reputation before production use.
Skills execute code in your environment. Always review source, verify the publisher, and test in isolation before production.
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
Use this skill when users request:
Creation of landing pages, marketing pages, or product pages
Next.js or React-based promotional websites
Pages that need to convert visitors into customers AND stand out visually
Professional marketing pages with exceptional design quality
Landing pages that avoid generic "template" aesthetics
Brand experiences that are both conversion-optimized and memorable
Design Thinking: Before You Code
Before implementing any landing page, commit to a BOLD aesthetic direction that aligns with the brand and product:
1. Understand Context
Purpose: What problem does this product solve? Who is the target audience?
Brand Personality: Is this brand playful, professional, luxury, minimalist, bold, technical?
Industry: What visual language does this industry expect (or should we break)?
Differentiation: What makes this brand unforgettable? What's the ONE thing visitors will remember?
2. Choose an Aesthetic Direction
Pick an extreme direction and commit fully. Examples:
Minimalist & Refined
Brutally clean layouts, generous whitespace
Sophisticated typography with large scale contrasts
Monochromatic or limited color palette (2-3 colors max)
Subtle micro-interactions, elegant transitions
Examples: Luxury products, professional services, premium SaaS
Bold & Maximalist
Rich, complex visual layers
Dynamic animations and scroll effects
Gradient meshes, textures, and overlapping elements
CRITICAL: Choose ONE clear direction. Bold maximalism and refined minimalism both work - the key is intentionality, not intensity. Execute your chosen direction with precision and consistency across all 11 elements.
3. Define Your Design System
Before coding, define these core decisions:
Typography Choices
Display Font: Choose something distinctive and memorable (NOT Inter, Roboto, Arial, or system fonts)
Dominant Color: Your primary brand color (60% usage)
Accent Color: High-contrast color for CTAs (10% usage)
Neutral Palette: Grays or earth tones (30% usage)
Background Strategy: Solid, gradient, texture, or pattern?
Define as CSS variables for consistency
Motion Strategy
Page Load: Staggered reveals with animation-delay for hero elements
Scroll Interactions: Fade-ups, parallax, or scroll-triggered animations?
Hover States: Subtle scale, color shift, or dramatic transformations?
CTA Animations: How do buttons attract attention without being annoying?
Spatial Approach
Layout Style: Centered and symmetric? Asymmetric and dynamic? Grid-breaking?
Spacing System: Tight and dense? Generous and airy?
Section Flow: Traditional stacked? Diagonal? Overlapping?
The 11 Essential Elements Framework
Every effective landing page must include these 11 essential elements. These are based on DESIGNNAS's proven framework for high-converting landing pages.
Each element has TWO requirements:
Functional requirement (for conversion) - Must be included
Design excellence (for memorability) - Must be distinctive and beautiful
โบClaude Desktop or compatible AI client with skill support
โบClear understanding of task or problem to solve
โบWillingness to iterate and refine outputs
Time Estimate
15-45 minutes depending on use case complexity
Steps
1Install skill using provided installation command
2Test with simple use case relevant to your work
3Evaluate output quality and relevance
4Iterate on prompts to improve results
5Integrate into regular workflow if valuable
Common Pitfalls
โ Expecting perfect results without iteration
โ Not providing enough context in prompts
โ Using skill for tasks outside its intended scope
โ Accepting outputs without review and validation
Best Practices
โ Do
+Start with clear, specific prompts
+Provide relevant context and constraints
+Review and refine all outputs before using
+Iterate to improve output quality
+Document successful prompt patterns
โ Don't
โDon't use without understanding skill limitations
โDon't skip validation of outputs
โDon't share sensitive information in prompts
โDon't expect skill to replace human judgment
๐ก Pro Tips
โ Be specific about desired format and style
โ Ask for multiple options to choose from
โ Request explanations to understand reasoning
โ Combine AI efficiency with human expertise
When to Use This
โ Use when
Use when skill capabilities match your task, clear ROI on time saved, and you can validate outputs. Best for repetitive tasks, learning, and quality improvement.
โ Avoid when
Avoid when task requires deep expertise you can't validate, involves sensitive decisions, or when learning process is more valuable than speed of completion.
Learning Path
1Familiarize yourself with skill capabilities and limitations
2Start with low-risk, non-critical tasks
3Progress to more complex and valuable use cases
4Build expertise through regular use and experimentation