← Skill library

Build

Landing Page

Builds a complete, self-contained single-file HTML landing page from a plain-English brief. Use when the user says "build a landing page", "make me a one-pager", "landing page for my product/app/service", or gives a product brief and wants a page. Output is one HTML file with inline CSS and zero external requests. Not for multi-page sites or app development.

FreeMIT licenseOne folder · SKILL.mdBuild

Add it to your agent

Give your agent (Claude Code, Cursor …) this prompt — it downloads the skill and drops it in the right place:

Prompt for your agent
Install the StackScout skill "Landing Page".
1. Download https://website-app-sable-eight.vercel.app/skills/landing-page.zip
2. Unzip it into .claude/skills/landing-page/ (create the folder if needed).
3. Confirm the folder contains SKILL.md, then tell me it's ready.

Rather do it yourself? Download the zip and unzip into .claude/skills/:

Download Landing Page

Free · MIT license · one folder with a SKILL.md.

The full playbookRead it ↓

Landing Page Builder

One brief in, one production-ready HTML file out.

Step 1 — Collect the brief

Required before building — ask in ONE message for anything missing:

  1. Brand name (and tagline if they have one)
  2. Accent color (hex, or "pick one for me" — then choose one that fits the vibe)
  3. Goal / primary CTA (sign up? book a call? buy? join waitlist?) and CTA target (URL or mailto)

Useful if offered, but do not block on: audience, 3-5 feature points, pricing tiers, testimonials, FAQ items. Where content is missing, write plausible specific copy for their product — never lorem ipsum, never "[Your text here]".

Step 2 — Build ONE file

Write a single index.html (or user-specified name). Hard constraints:

  • Zero external requests: no CDN links, no web fonts, no remote images, no analytics. All CSS in one <style> block. Use the system font stack: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif. Visuals are CSS (gradients, shapes) or inline SVG only.
  • Mobile-first: base styles for small screens, enhance with @media (min-width: 40rem) and (min-width: 64rem). No horizontal scroll at 320px. Tap targets ≥44px.
  • Semantic sections, in order:
    1. <header> — brand name + single nav CTA (no full menu for a one-pager)
    2. Hero <section> — H1 stating the outcome the buyer gets (not the product category), one subline, primary CTA button, optional secondary link
    3. Features — 3-6 items, each: short bold benefit + one supporting sentence. Grid on desktop, stacked on mobile.
    4. Social proof — testimonials with name + role, or logo strip, or a stat row. If none provided, use a stat row phrased honestly (no fake customer quotes with real-sounding names).
    5. Pricing — only if requested. Cards, most popular tier visually elevated, each with CTA.
    6. FAQ — 4-6 items using native <details>/<summary> (no JS needed)
    7. Final CTA section — restate the outcome + button
    8. <footer> — brand, year, contact link
  • Skip a section only if the user explicitly rules it out.

Step 3 — Design system

  • One accent color (the brand color) for CTAs, links, and highlights — everything else is a neutral scale derived from near-black/near-white. Define both as CSS custom properties on :root.
  • Typography: fluid type via clamp() for headings (hero H1 roughly clamp(2rem, 5vw + 1rem, 3.5rem)), body 1rem-1.125rem, line-height 1.6 for body and ≤1.2 for headings, max text column ~65ch.
  • Spacing: consistent scale (e.g. 0.5/1/2/4/6rem); generous section padding (clamp(3rem, 8vw, 6rem) vertical).
  • Contrast: body text ≥4.5:1 against its background; check the accent color on buttons — if it fails with white text, darken the accent, not the text.

Step 4 — Accessibility and polish (non-negotiable)

  • Visible focus states: :focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
  • Exactly one <h1>; heading levels never skip
  • All interactive elements are real <a>/<button>, never styled <div>s
  • <html lang="…"> matching the copy language; <meta name="viewport">; <title> and <meta name="description"> written for the product
  • Any animation/transition wrapped so it respects @media (prefers-reduced-motion: reduce) — disable or reduce to opacity-only
  • Inline SVGs get aria-hidden="true" if decorative, <title> if meaningful

Step 5 — Verify, then deliver

Before handing over, re-read the file and confirm the checklist:

  • No http://, https://, or // resource URLs anywhere except the CTA/footer links
  • Renders sensibly with CSS mentally traced at 320px and 1280px widths
  • Every CTA points at the goal from Step 1
  • No placeholder text remains
  • Focus styles, reduced-motion block, and lang attribute present

Tell the user: open the file directly in a browser (double-click — no server needed), and where to edit copy, the accent color variable, and the CTA URL.

◎ or: the whole library at once

Skip the downloads — one MCP connector, every skill right inside your agent, always current.

See the MCP

← all skills

Landing Page — StackScout skill · StackScout