landing-page-guide-v2 — Claude Code skill: Next.js landing pages
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.
npx skills add bear2u/my-skills --skill landing-page-guide-v2 -a claude-codeWhat landing-page-guide-v2 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.
What it helps with
- 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 for the agent
- 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
How to install landing-page-guide-v2
1Skills CLI (Vercel)
npx skills add bear2u/my-skills --skill landing-page-guide-v2 -a claude-code2Manually: put the files in place
~/.claude/skills/landing-page-guide-v2/SKILL.mdCopy the whole skill folder; for one project use .claude/skills/landing-page-guide-v2/
1Skills CLI (Vercel)
npx skills add bear2u/my-skills --skill landing-page-guide-v2 -a codex2Manually: put the files in place
.agents/skills/landing-page-guide-v2/SKILL.mdFor all projects use ~/.agents/skills/
1Skills CLI (Vercel)
npx skills add bear2u/my-skills --skill landing-page-guide-v2 -a cursor2Manually: put the files in place
.cursor/skills/landing-page-guide-v2/SKILL.mdCursor also reads .agents/skills/ and .claude/skills/
1GitHub CLI
gh skill install bear2u/my-skills landing-page-guide-v22Manually: put the files in place
.github/skills/landing-page-guide-v2/SKILL.md1Skills CLI (Vercel)
npx skills add bear2u/my-skills --skill landing-page-guide-v2 -a gemini-cli2Platform CLI
gemini skills install https://github.com/bear2u/my-skills --path skills/landing-page-guide-v2Manually: put the files in place
.devin/skills/landing-page-guide-v2/SKILL.mdThe legacy .windsurf/skills/ path still works
Skills CLI (Vercel)
npx skills add bear2u/my-skills --skill landing-page-guide-v2 -a opencodeClaude.ai
Zip the folder and upload it in Settings → Capabilities → Skills
Step by step, with commands for each platform: How to install skills in Claude Code: five ways
Questions about landing-page-guide-v2
How do I install landing-page-guide-v2 in Claude?
Run npx skills add bear2u/my-skills --skill landing-page-guide-v2 -a claude-code. The skill lands in ~/.claude/skills/landing-page-guide-v2/SKILL.md.
What does landing-page-guide-v2 do?
It guides the agent through product context, aesthetic direction and a design system, then through building the page in Next.js 14+ with ShadCN UI. It also enforces the 11 essential landing page elements.
Which stack does it target?
Next.js 14+ with ShadCN UI and TypeScript. On a different framework, the component and structure advice will not apply.
