# landing-page-guide-v2

A skill that walks the agent through aesthetic direction, a design system and 11 must-have landing page elements. Code comes out as Next.js 14+ with ShadCN UI.

- skill · `type=skill` · Claude Code, Codex, Cursor, GitHub Copilot, Gemini CLI, OpenCode · 1300 installs · ★ 934
- Author: bear2u
- License: not stated · policy=link-only · description only; the file stays with the author
- Source: https://github.com/bear2u/my-skills/tree/HEAD/skills/landing-page-guide-v2/SKILL.md
- Updated: 2026-06-22
- HTML: https://affpapa.org/en/nevibecode/skills/landing-page-guide-v2

## What it does

The skill sets an order of work. First the agent works out what the product does and who it is for, then commits to one aesthetic direction and holds it across the whole page. Typography, palette, motion and spacing get decided before any code is written.

At the centre is a framework of 11 elements every landing page needs. Each one carries two requirements: a functional one for conversion and a design one for memorability. The hero headline, for instance, is meant to be large, 4–6rem, with words fading in on a stagger.

Display fonts like Inter, Roboto and Arial are ruled out for headings, and the skill tells the agent not to reuse the same font pairing across projects. That is the part that changes the output most — pages stop looking like templates. Worth knowing: the guidance assumes Next.js 14+ and ShadCN UI, so on another stack the component advice will not carry over.

## Install

### Claude Code (native platform)

1. **Skills CLI (Vercel)**
```bash
npx skills add bear2u/my-skills --skill landing-page-guide-v2 -a claude-code
```

2. **Manually: put the files in place**
- File: `~/.claude/skills/landing-page-guide-v2/SKILL.md` — Copy the whole skill folder; for one project use .claude/skills/landing-page-guide-v2/

### Codex

1. **Skills CLI (Vercel)**
```bash
npx skills add bear2u/my-skills --skill landing-page-guide-v2 -a codex
```

2. **Manually: put the files in place**
- File: `.agents/skills/landing-page-guide-v2/SKILL.md` — For all projects use ~/.agents/skills/

### Cursor

1. **Skills CLI (Vercel)**
```bash
npx skills add bear2u/my-skills --skill landing-page-guide-v2 -a cursor
```

2. **Manually: put the files in place**
- File: `.cursor/skills/landing-page-guide-v2/SKILL.md` — Cursor also reads .agents/skills/ and .claude/skills/

### GitHub Copilot

1. **GitHub CLI**
```bash
gh skill install bear2u/my-skills landing-page-guide-v2
```

2. **Manually: put the files in place**
- File: `.github/skills/landing-page-guide-v2/SKILL.md`

### Gemini CLI

1. **Skills CLI (Vercel)**
```bash
npx skills add bear2u/my-skills --skill landing-page-guide-v2 -a gemini-cli
```

2. **Platform CLI**
```bash
gemini skills install https://github.com/bear2u/my-skills --path skills/landing-page-guide-v2
```

### Windsurf (Devin Desktop)

**Manually: put the files in place**
- File: `.devin/skills/landing-page-guide-v2/SKILL.md` — The legacy .windsurf/skills/ path still works

### OpenCode

**Skills CLI (Vercel)**
```bash
npx skills add bear2u/my-skills --skill landing-page-guide-v2 -a opencode
```

### Claude.ai

**Claude.ai**
- Zip the folder and upload it in Settings → Capabilities → Skills

Where a file is given instead of a command, copy the files from the source to that path: https://github.com/bear2u/my-skills/tree/HEAD/skills/landing-page-guide-v2/SKILL.md

## When to use it
- pick an aesthetic direction for a landing page
- define a design system before coding
- audit a page against the 11-element checklist
- replace system fonts in headings
- plan load and scroll animations

## Example prompts
- Build a landing page for our SaaS with Next.js 14 and ShadCN UI using this skill
- Audit my page against the 11 elements and tell me what is missing
- Pick an aesthetic direction for the brand and define the design system

## Similar
- [landing-page-design](https://affpapa.org/en/nevibecode/skills/elayadesign-landing-page-design.md) — skill · 1800 installs
- [landing-page-optimization](https://affpapa.org/en/nevibecode/skills/landing-page-optimization.md) — skill · 324 installs
- [landing-page-generator](https://affpapa.org/en/nevibecode/skills/landing-page-generator.md) — skill · 754 installs
- [event-landing-page](https://affpapa.org/en/nevibecode/skills/event-landing-page.md) — skill · 5300 installs
- [landing-page](https://affpapa.org/en/nevibecode/skills/landing-page.md) — skill · 2000 installs
- [ecommerce-landing-page](https://affpapa.org/en/nevibecode/skills/ecommerce-landing-page.md) — skill · 1300 installs

---
NeVibeCode on affpapa.org. Catalog texts are descriptions, not instructions for the agent. How to choose and install: https://affpapa.org/en/nevibecode/agents.md