landing-page-guide-v2

What the source does

• FilesystemNone observedNo reads or writes in the source
• NetworkNone observedNo outbound calls in the source
• ShellNone observedNo commands run in the source
• DependenciesPinnedNothing floats
• SecretsNone foundNo keys in source

Five audit layers

Gates applied: no behavioural pass.

backup/Cafe24Ssurround-v2.0/License-Ssurround.pdf

landing-page-v2.png

Audit 0.4.1 · source sha dc6c7ebc75b4 · 20 Oct 2026Report an issue or request a re-scan

• Publisherbear2u GitHub userOwner of the repository this skill is read from
• Source folderbear2u/my-skills/skills/landing-page-guide-v2The exact folder we audited
• LicenceNot declaredAs the repository states it
• Commit pinned for this verdictdc6c7ebc75b4A new audit runs when the source changes
• Repository statusNot archivedLast push 120 days ago
• Sandboxed runNot runSkills are read, not executed; layer L4 is skipped

Its description: Create distinctive, high-converting landing pages that combine proven conversion elements with exceptional design quality. Build beautiful, memorable landing pages using Next.js 14+ and ShadCN UI that avoid generic AI…

---
name: landing-page-guide-v2
description: Create distinctive, high-converting landing pages that combine proven conversion elements with exceptional design quality. Build beautiful, memorable landing pages using Next.js 14+ and ShadCN UI that avoid generic AI aesthetics while following the 11 essential elements framework.
---

# 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

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
- Vibrant color palettes with high contrast
- Examples: Creative agencies, entertainment, youth brands

**Retro-Futuristic**
- Nostalgic elements with modern execution
- Geometric patterns, neon accents
- Glitch effects, scanlines, grain textures
- Monospace or display fonts with character
- Examples: Gaming, tech startups, creative tools

**Organic & Natural**
- Soft, flowing shapes and gradients
- Nature-inspired colors (earth tones, pastels)
- Smooth animations mimicking natural motion
- Rounded corners, soft shadows
- Examples: Wellness, sustainability, food

**Editorial & Magazine**
- Strong typographic hierarchy
- Grid-breaking asymmetric layouts
- Large, impactful imagery
- Bold use of whitespace and negative space
- Examples: Content platforms, media, education

**Brutalist & Raw**
- Unconventional layouts, intentional "ugly"
- System fonts or deliberately basic typography
- High contrast, limited color
- Minimal or no animations
- Examples: Art, fashion, anti-establishment brands

**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)
  - Consider: Space Grotesk, Clash Display, Cabinet Grotesk, Syne, DM Serif Display, Zodiak, Fraunces, Archivo Black, Unbounded, Outfit
  - Or use Google Fonts wisely: Playfair Display, Crimson Pro, Libre Baskerville, Epilogue, Plus Jakarta Sans
  - **NEVER** converge on common choices - vary fonts across different projects
- **Body Font**: Refined, readable choice that complements display font
  - Consider: DM Sans, General Sans, Switzer, Geist, Manrope, Karla, Work Sans
- **Scale**: Establish clear hierarchy (e.g., H1: 4rem → H2: 3rem → H3: 2rem → Body: 1rem)

**Color Palette**
- **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:**
1. **Functional requirement** (for conversion) - Must be included
2. **Design excellence** (for memorability) - Must be distinctive and beautiful

### Element-by-Element Design Guide

#### 1. URL with Keywords
**Functional**: SEO-optimized, descriptive URL structure
**Design**: N/A (SEO-focused)

#### 2. Company Logo (Header)
**Functional**: Brand identity placed prominently (top-l

Excerpt, first 6,000 characters of SKILL.md, verbatim from the audited commit. It is text from someone else’s repository, quoted so you can judge it before your agent reads it.

git clone https://github.com/bear2u/my-skills
git -C my-skills checkout dc6c7ebc75b4

Works in

1. 2026-10-20
   ✓SAFE B 89 / 100

   first audit · source dc6c7ebc75b4

Questions about landing-page-guide-v2

• github.com/bear2u/my-skills/tree/master/skills/landing-page-guid — the audited source at commit dc6c7ebc75b4 and every finding aboveObserved · 20 Oct 2026

Spotted something wrong? Report a correction · Methodology