---
name: Ship a Landing Page
category: coding
tools_required: [Any AI chat (or Cursor), a code editor, a free host like Netlify or Cloudflare Pages]
cost: free
time_to_set_up: an afternoon for a real page
version: 1.0
source: original system built from 5 adapted skills (see /library coding skills)
tested: no
---

# Ship a Landing Page

## What it does
Chains five skills into one clean path from empty folder to a live, fast, accessible landing page: bones, skin, sections, a form, and a performance pass — no framework required, no template-shop markup.

## What you need
- A text editor (or Cursor) and any AI chat
- Your content: what the page is for, the sections it needs, your colors/fonts
- A free static host (Netlify drop, Cloudflare Pages, GitHub Pages)
- The five skills: Semantic HTML Skeleton, Fluid CSS System, Landing Section Layout, Lead Capture Form, Frontend Performance Audit

## The workflow (in order)
1. **Semantic HTML Skeleton** — get the page bones right first: semantic tags, images sized so nothing jumps, accessible structure. Save as index.html.
2. **Fluid CSS System** — feed it your colors and fonts; get design tokens, fluid type, Grid/Flex layout, and a real dark mode. Save as style.css.
3. **Landing Section Layout** — build one reusable, scannable section pattern, then repeat it down the page for each block (services, features, proof). Consistency here is what makes it look designed.
4. **Lead Capture Form** — add the accessible contact/signup form, asking for the minimum. Wire it to your host's form handler or an endpoint.
5. **Deploy, then Frontend Performance Audit** — put it live (drag the folder to Netlify), run it through PageSpeed Insights, paste the real numbers into the audit, fix the top item, re-measure.

## Maintenance habits
- Keep the CSS variables as your single source of truth — restyle by changing tokens, not chasing hex codes through the file.
- Re-run the performance audit after adding anything heavy (a video, a third-party script).
- Every image gets width/height (or aspect-ratio) forever — it's the cheapest way to keep the layout from jumping.

## What we stripped
This was rebuilt from a pack of eight "elite web architect" prompts drowning in invented jargon: "Asymmetric-Yield Semantic Skeleton", "Prestige-Identity Fluid Grid", "Pattern-Interrupt", "Humanized-Velocity Value Engine", "Skeptic-Filter Trust Shield". None of the coined names mean anything — they're the exact "rename a normal thing to sound proprietary" move this library exists to undo. Stripped: the manufactured terminology, the "immediate visual authority", "forces immediate interaction", "dissolving visitor skepticism", "ultra-premium launch" puffery, and "eliminate layout shift in 30 minutes" style promises. Also dropped from the original eight: two prompts that were pure conversion theater (a "proof-of-concept matrix that forces interaction" and a vague "3 interactive script layouts") with no real technique under them, and one that was just "write landing copy" — already covered by the content skills. What survived is five genuine front-end tasks. The techniques under them (semantic HTML, clamp() fluid type, Grid/Flexbox, dark-mode custom properties, Core Web Vitals) are current, verifiable best practice — not secrets, just craft.