[{"data":1,"prerenderedAt":-1},["ShallowReactive",2],{"skill:01M6DWHHVCQBTF8TBT24AVX977":3,"skill-same:01M6DWHHVCQBTF8TBT24AVX977":95},{"skillNo":4,"name":5,"nameZh":6,"description":7,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":9,"repositoryNo":12,"starsCount":13,"licenseSpdxId":14,"licenseFileUrl":6,"sourceHtmlUrl":15,"categories":16,"keywords":30,"publishedAt":52,"linkOnly":53,"markdownContent":54,"markdownBody":55,"frontMatter":56,"refName":71,"commitSha":72,"skillDirectory":73,"forksCount":74,"repositoryHtmlUrl":75,"repositoryHomepageUrl":76,"ownerHtmlUrl":77,"ownerBlogUrl":78,"ownerDescription":79,"updatedAt":80,"install":81,"resources":94},"01M6DWHHVCQBTF8TBT24AVX977","markup-landing-page",null,"Build lightweight landing pages: dark\u002Flight theming via CSS variables, section anatomy, conversion copy, SEO and JSON-LD. Use when drafting a landing page.","Muvon\u002Foctomind-tap","Muvon","https:\u002F\u002Favatars.githubusercontent.com\u002Fu\u002F25336907?v=4","01M6DWA4KTRX4J73CW5CECKAD0","01M6DWA4QSWFGYE6WDMAMFF1WE",6,"Apache-2.0","https:\u002F\u002Fgithub.com\u002FMuvon\u002Foctomind-tap\u002Fblob\u002Fmaster\u002Fskills\u002Fmarkup-landing-page\u002FSKILL.md",[17,22,27],{"categoryNo":18,"categoryName":19,"taxonomyType":20,"taxonomyTypeDesc":21},"01JBSEEDCAT000000000000035","市场营销","PROFESSION","适用职业",{"categoryNo":23,"categoryName":24,"taxonomyType":25,"taxonomyTypeDesc":26},"01JBSEEDCAT000000000000019","营销推广","SCENARIO","使用场景",{"categoryNo":28,"categoryName":29,"taxonomyType":25,"taxonomyTypeDesc":26},"01JBSEEDCAT000000000000009","前端开发",[31,32,33,34,35,36,37,38,39,40,41,42,43,44,45,46,47,48,49,50,51],"page","landing","landing page","markup landing page","drafting","examples","theming","apply","Rules","use","system","section","dark","seo","developer","Variables","css variables","ui","craft","stack","css","2026-11-10 10:12:30",false,"---\nname: markup-landing-page\ntitle: \"Landing Page Craft: UI, Conversion, and System Patterns\"\ndescription: \"Build lightweight landing pages: dark\u002Flight theming via CSS variables, section anatomy, conversion copy, SEO and JSON-LD. Use when drafting a landing page.\"\nlicense: Apache-2.0\ncompatibility: \"Stack-agnostic — examples use SvelteKit + plain CSS but rules apply to any HTML\u002FCSS framework.\"\ndomains: developer\nrules:\n  - content(landing page)\n  - content(landing-page)\n  - content(marketing site)\n  - content(product page)\n  - match(\\blanding\\s+page\\b)\n  - match(\\bbuild.*landing\\b)\n  - match(\\bdesign.*landing\\b)\n  - match(\\bproduct\\s+page\\b)\n  - match(\\bmarketing\\s+site\\b)\n  - match(\\bhero\\s+section\\b)\n  - match(\\bpricing\\s+page\\b)\n---\n\n## Overview\n\nA landing page has one job: turn a stranger into a buyer or trial user; everything else is decoration. This skill covers a token-level design system with automatic dark\u002Flight mode, a section order that walks visitors to the buy decision, copy rules against AI-generic language, and the SEO\u002Fstructured-data baseline.\n\nPair with `content-voice`, which owns how the words sound; this skill owns structure, design system and conversion mechanics.\n\n## Tech Stack Baseline\n\nUse the lightest stack: heavy frameworks slow time-to-interactive, hurt SEO and add maintenance to what should be ~80% prerendered HTML.\n\nRecommended: SvelteKit + adapter-static (or Astro) for prerendered HTML (zero JS on most pages, full SEO, instant LCP); plain CSS custom properties + `prefers-color-scheme` for free theming; system font stack `system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif` (zero font load, native feel); TypeScript in `\u003Cscript>`; Vite; Cloudflare Pages or Vercel (static + edge functions).\n\nAvoid unless needed: React + Next.js for a marketing site (hydration cost); Tailwind for a single-domain landing (class soup, scattered tokens); GSAP or Framer Motion for fade-ins (CSS does it in 4 lines); web fonts (system fonts beat 90% of imports on Apple devices); Radix, shadcn and other component libraries (landing pages need brand-specific UI).\n\n## Design System (Single Source of Truth)\n\nAll tokens live in one CSS file as `:root` custom properties read via `var(--token)`; hardcoded colors, spacing or radii in components are a smell.\n\n### Color tokens\n\n```css\n:root {\n  \u002F* Neutrals — Apple-style cold grays *\u002F\n  --gray-50: #fbfbfd;\n  --gray-100: #f5f5f7;\n  --gray-200: #e8e8ed;\n  --gray-300: #d2d2d7;\n  --gray-400: #aeaeb2;\n  --gray-500: #86868b;\n  --gray-600: #6e6e73;\n  --gray-700: #48484a;\n  --gray-800: #3a3a3c;\n  --gray-900: #1d1d1f;\n\n  \u002F* Brand accent — ONE primary, use shades *\u002F\n  --accent-50:  #eef2ff;\n  --accent-100: #dbe4ff;\n  --accent-200: #bfcfff;\n  --accent-400: #6d8aff;\n  --accent-500: #4a6cf7;  \u002F* primary — buttons, links *\u002F\n  --accent-600: #3451d1;  \u002F* hover *\u002F\n\n  \u002F* Semantic — what components reference *\u002F\n  --bg: var(--white);\n  --bg-muted: var(--gray-100);\n  --card-bg: var(--white);\n  --text-primary: var(--gray-900);\n  --text-secondary: var(--gray-600);\n  --text-muted: var(--gray-500);\n  --border: var(--gray-200);\n  --border-light: var(--gray-100);\n  --on-accent: #ffffff;  \u002F* does NOT invert *\u002F\n  --nav-bg: rgba(255, 255, 255, 0.72);\n\n  --green-500: #30d158;  \u002F* privacy\u002Fsecurity trust signals *\u002F\n}\n```\n\n### Typography, spacing (8px base), effects\n\n```css\n:root {\n  --font-sans: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI',\n               Roboto, 'Helvetica Neue', Arial, sans-serif;\n  --font-mono: 'SF Mono', SFMono-Regular, ui-monospace, 'Cascadia Code', Menlo, monospace;\n\n  --text-xs: 0.75rem;  --text-sm: 0.875rem;  --text-base: 1rem;  --text-lg: 1.125rem;\n  --text-xl: 1.25rem;  --text-2xl: 1.5rem;    --text-3xl: 2rem;   --text-4xl: 2.5rem;\n\n  --space-1: 0.25rem;  --space-2: 0.5rem;  --space-3: 0.75rem;  --space-4: 1rem;\n  --space-5: 1.25rem;  --space-6: 1.5rem;  --space-8: 2rem;     --space-10: 2.5rem;\n  --space-12: 3rem;    --space-16: 4rem;   --space-20: 5rem;    --space-24: 6rem;\n\n  --radius-sm: 0.5rem;  --radius-md: 0.75rem;  --radius-lg: 1rem;  --radius-full: 9999px;\n  --shadow-sm: 0 1px 2px rgba(0,0,0,0.04);\n  --shadow-md: 0 4px 12px rgba(0,0,0,0.06);\n  --shadow-lg: 0 12px 32px rgba(0,0,0,0.08);\n  --transition: 0.2s ease;\n  --nav-height: 56px;\n  --max-width: 1100px;\n}\n```\n\n## Automatic Dark\u002FLight Mode\n\nNon-negotiable. Implement once at the token level — components shouldn't know which mode they're in.\n\n```css\n@media (prefers-color-scheme: dark) {\n  :root {\n    --bg: #000000;\n    --bg-muted: #0a0a0a;\n    --card-bg: #111113;\n    --text-primary: #f5f5f7;\n    --text-secondary: #a1a1a6;\n    --text-muted: #6e6e73;\n    --border: #2a2a2e;\n    --border-light: #1c1c1f;\n    --nav-bg: rgba(0, 0, 0, 0.72);\n    --accent-500: #6d8aff;  \u002F* brighter for contrast *\u002F\n    --shadow-md: 0 4px 12px rgba(0,0,0,0.4);  \u002F* heavier on dark *\u002F\n    --shadow-lg: 0 12px 32px rgba(0,0,0,0.6);\n  }\n}\n```\n\nRules:\n- Never hardcode colors in components.\n- `--on-accent` does NOT invert — text on a colored button stays white in both modes.\n- Test both modes; dark reveals contrast bugs. Component-specific values (e.g. a `rgba(0,0,0,0.4)` overlay) need dark overrides inside the component.\n- Match the OS chrome:\n  ```html\n  \u003Cmeta name=\"theme-color\" content=\"#ffffff\" media=\"(prefers-color-scheme: light)\" \u002F>\n  \u003Cmeta name=\"theme-color\" content=\"#000000\" media=\"(prefers-color-scheme: dark)\" \u002F>\n  \u003Cmeta name=\"color-scheme\" content=\"light dark\" \u002F>\n  ```\n- Shorter alternative for current browsers: `:root { color-scheme: light dark; --bg: light-dark(#fff, #000); }` (`light-dark()` is Baseline 2024).\n\n## Section Anatomy (Top to Bottom)\n\nThe page is a sales conversation; each section answers the next objection.\n\n1. Nav — fixed, ~56px; logo + 1–3 links + one accent CTA pill; `backdrop-filter: blur(20px)` on a translucent background; border\u002Fshadow appears on scroll. Mobile: smaller paddings, no hamburger unless > 5 items.\n\n2. Hero — conversion is decided here.\n   - Badge above headline: tiny, uppercase, muted context tag (\"macOS 14+ · Apple Silicon\").\n   - Headline: `clamp(2.5rem, 6vw, 3.5rem)`, weight 700, letter-spacing -0.035em, line-height 1.08, `text-wrap: balance` (Baseline 2024) instead of `\u003Cbr>`.\n   - Subtitle: one sentence, ≤ ~30 words, `--text-lg`, `--text-secondary`, naming 2–3 features.\n   - Primary CTA: accent pill, `--text-lg`, generous padding; trust line under it with trial limits (\"100 free dictations · No credit card\"), `--text-sm` muted.\n   - Optional `brew install ...` monospace block; system requirements last, muted.\n   - `min-height: calc(100svh - var(--nav-height))` (`svh` avoids the mobile URL-bar jump of `100vh`); subtle radial gradient to accent-50 at top.\n\n3. How It Works — three cards numbered 01\u002F02\u002F03, headline + 1–2 sentences; card-bg, 1px border, radius-lg, padding-8; hover `translateY(-2px)` + shadow-md.\n\n4. Modes \u002F use cases — if the product has 3+ distinct jobs (dictation + meetings + notes), introduce them early as cards.\n\n5. Feature deep-dives — one section per major feature, text beside visual, alternating sides: heading (`--text-4xl`, 700, letter-spacing -0.03em), 2–4 sentences, 3 accent-dot specifics, a real screenshot, demo card or stylized illustration.\n\n6. Privacy \u002F trust — any privacy\u002Flocal\u002Fdata angle gets its own section; people scroll for trust.\n\n7. Pricing — two+ cards: yours (highlighted, \"Best Value\" badge) vs the alternative (cloud subscription): price (`--text-4xl`), period (\"once\" vs \"\u002Fmonth\"), year-2 cost line (the kicker), checkmarks (you) vs X marks (them).\n\n8. Competitor table — feature-by-feature vs named competitors, your column on `--accent-50`, strikethrough promo prices, cost-after-2-years row in a heavier border. Often the highest-converting section.\n\n9. Stats (if applicable) — one big number (\"150x realtime\") with a simple you-vs-them bar chart.\n\n10. Compatibility — pill grid of supported apps\u002Fintegrations.\n\n11. About \u002F made by — \"Built by [team] in [city]. Selectively shipped.\" plus company link.\n\n12. FAQ — 8–12 questions in `\u003Cdetails name=\"faq\">`: zero JS, accessible, exclusive accordion via shared `name` (Baseline 2024). Animating open state (`::details-content` + `interpolate-size`) isn't cross-browser in 2026 — enhancement only. Cover: what it is (headline echoed differently), privacy\u002Fdata, platform\u002Frequirements, free trial, pricing, how each major feature works, objections (\"What if X doesn't work?\"), refund\u002Fcancellation.\n\n13. Footer CTA — same CTA and trust line under a different, summarizing headline (\"Local. Fast. Yours.\").\n\n14. Footer — brand + tagline left; 3–4 columns max right (Product, Company, Legal, Connect); copyright at bottom.\n\n## CTA Hierarchy\n\nOne primary action, zero or one secondary; equal-weight CTAs = no CTA.\n\n1. Primary — accent-filled pill, white text, for the conversion goal (Download, Buy, Sign up); same label and color in Nav, Hero and Footer CTA.\n2. Secondary — outline pill (accent border + text) for alternate paths (Learn more, Buy after free trial), different label.\n3. Tertiary — text links, underline on hover.\n\nRules:\n- Never two filled accent CTAs in the same viewport.\n- No red, orange or yellow primary CTAs unless brand-justified — they read as warnings.\n- Pill radius (9999px) is the default for software CTAs — a brand choice, not a proven conversion lever; test it if it matters.\n\n## Conversion Patterns\n\n- Show the price. Hidden price reads as \"expensive\" or \"talk to sales\"; complex pricing still shows a starting number.\n- Compare against the alternative (subscription vs one-time, tool vs status quo, you vs named competitors) with visible math: \"$49 vs $200 over 2 years\".\n- Specific over abstract: \"150x realtime\" beats \"blazingly fast\", \"$24.50 with VEXT50\" beats \"Save big\". Every claim should be checkable.\n- Layer trust throughout: requirements badge in hero, \"No credit card\" in trial copy, privacy section mid-page, real screenshots, company name + jurisdiction in footer.\n- Explicit trial limits: \"100 dictations, 50 notes, 10 meeting recordings — no credit card\" outperforms \"Try free\".\n- Real urgency only (pulsing dot pill, deadline date, strikethrough price). Fake countdowns or deadlines kill trust, and regulators treat fake scarcity as a deceptive dark pattern.\n\n## Copy Rules (on top of `content-voice`)\n\n- Headlines: outcome not feature, two lines max, verb-driven (\"Capture a thought before it's gone.\" > \"Voice notes feature.\"); no \"revolutionary\", \"next-generation\", \"ultimate\", \"powerful\" — use words a customer would tell a friend.\n- Subtitles: one or two sentences, 2–3 named features, ending on a trust signal (\"No cloud. No subscription.\") or differentiator.\n- Section headings: 1–4 words ending with a period for calm (\"How it works.\" \"What you earn.\"); no \"Discover\", \"Unlock\", \"Experience\", \"Explore\".\n- Body: contractions, dramatic rhythm, concrete examples, one idea per paragraph, bullets only for 3+ parallel items.\n- CTAs: 1–3 words, verb + outcome; never \"Click here\", \"Learn more\", \"Submit\". Match what happens next (\"Buy\" to checkout, \"Download Free\" to trial, \"Start\" to signup).\n\n## SEO + Social Baseline\n\nEvery page sets:\n\n```html\n\u003Ctitle>Page Name — Brand\u003C\u002Ftitle>\n\u003Cmeta name=\"description\" content=\"...\" \u002F>  \u003C!-- under 160 chars, unique per page -->\n\u003Clink rel=\"canonical\" href=\"https:\u002F\u002Fdomain.com\u002Fpath\" \u002F>\n\n\u003Cmeta property=\"og:type\" content=\"website\" \u002F>  \u003C!-- \"article\" for blog posts -->\n\u003Cmeta property=\"og:url\" content=\"...\" \u002F>\n\u003Cmeta property=\"og:title\" content=\"...\" \u002F>\n\u003Cmeta property=\"og:description\" content=\"...\" \u002F>\n\u003Cmeta property=\"og:image\" content=\"https:\u002F\u002Fdomain.com\u002Fog\u002Fpage.png\" \u002F>\n\u003Cmeta property=\"og:image:width\" content=\"1200\" \u002F>\n\u003Cmeta property=\"og:image:height\" content=\"630\" \u002F>\n\u003Cmeta property=\"og:site_name\" content=\"Brand\" \u002F>\n\n\u003Cmeta name=\"twitter:card\" content=\"summary_large_image\" \u002F>\n\u003Cmeta name=\"twitter:title\" content=\"...\" \u002F>\n\u003Cmeta name=\"twitter:description\" content=\"...\" \u002F>\n\u003Cmeta name=\"twitter:image\" content=\"...\" \u002F>\n\u003Cmeta name=\"twitter:site\" content=\"@handle\" \u002F>\n```\n\nOG images: build-time 1200×630 SVG → PNG per page (`@resvg\u002Fresvg-js` or similar); PNG only, since Facebook, Slack and LinkedIn don't render SVG. Layout: dark background, accent gradient bar top\u002Fbottom, logo top-left, headline center-left, domain footer; titles auto-wrap with dynamic sizing (80 → 64 → 52px). Gitignore the generated files.\n\nJSON-LD for a software product:\n\n```json\n{\n  \"@context\": \"https:\u002F\u002Fschema.org\",\n  \"@type\": \"SoftwareApplication\",\n  \"name\": \"...\",\n  \"description\": \"...\",\n  \"url\": \"...\",\n  \"applicationCategory\": \"UtilitiesApplication\",\n  \"operatingSystem\": \"macOS 14+\",\n  \"offers\": {\n    \"@type\": \"Offer\",\n    \"price\": 49,\n    \"priceCurrency\": \"USD\",\n    \"availability\": \"https:\u002F\u002Fschema.org\u002FInStock\"\n  },\n  \"publisher\": { \"@type\": \"Organization\", \"name\": \"...\", \"url\": \"...\" }\n}\n```\n\nAdd `Organization`. `FAQPage` is harmless, but since 2023 Google shows FAQ rich results only for authoritative government and health sites. The software-app rich result needs a real `aggregateRating` or `review` (otherwise no stars, though other parsers still benefit). Never invent ratings or review counts — it violates Google's structured-data policy and the US FTC fake-review rule.\n\nCanonical and sitemap: `\u003Clink rel=\"canonical\">` on every page; static `sitemap.xml` of all routes with accurate `lastmod` (Google ignores `priority` and `changefreq`); `robots.txt` allowing everything except `\u002Fapi\u002F` and `\u002F_`.\n\n## Error Pages (404, 5xx)\n\nOne error component (`+error.svelte`, `error.tsx` or equivalent) branching on `status`: 404 a light on-brand line (\"Page not found.\"), 5xx an honest \"Something broke on our end\", others the real message in a plain frame.\n\n- Monospace status pill, friendly headline, one human sentence (no stack trace), \"Back home\" primary CTA + one secondary path, 3–5 common links.\n- Same nav, footer, tokens and dark mode; `\u003Ctitle>404 — Brand\u003C\u002Ftitle>`; `\u003Cmeta name=\"robots\" content=\"noindex\">`; no third-party calls, so it renders when APIs are down.\n- Static sites emit `404.html` from the same component (SvelteKit: `adapter({ fallback: '404.html' })`); Cloudflare Pages, Netlify, Vercel and S3 serve it for unknown routes.\n- Don't: timed auto-redirects, a search box with no backend, stock \"lost robot\" art, blaming the user (\"You typed the wrong URL\").\n\n## Animation (Restrained)\n\nDefault to none; add only when it serves communication.\n\n```js\nconst observer = new IntersectionObserver(\n  (entries) => entries.forEach((e) => e.isIntersecting && e.target.classList.add('visible')),\n  { threshold: 0.1 }\n);\ndocument.querySelectorAll('.animate-on-scroll').forEach((el) => observer.observe(el));\n```\n\n```css\n.animate-on-scroll { opacity: 0; transform: translateY(20px);\n  transition: opacity 0.6s ease, transform 0.6s ease; }\n.animate-on-scroll.visible { opacity: 1; transform: translateY(0); }\n@media (prefers-reduced-motion: reduce) {\n  .animate-on-scroll { opacity: 1; transform: none; transition: none; }\n}\n@keyframes pulse { 0%, 100% { opacity: 1; transform: scale(1); } 50% { opacity: 0.5; transform: scale(1.4); } }\n.dot { animation: pulse 1.6s ease-in-out infinite; }  \u002F* live indicators: recording, launch promo *\u002F\n```\n\nRules:\n- Use sparingly — every section animating is annoying.\n- Never animate above-the-fold content, and never start the LCP element at `opacity: 0`.\n- Same-document View Transitions are Baseline since Oct 2025, fine for state changes. Scroll-driven animations (`animation-timeline`) lack stable Firefox in 2026: only inside `@supports (animation-timeline: view())`, IntersectionObserver as default.\n- Honour `prefers-reduced-motion: reduce`.\n- Hover: buttons `translateY(-1px)` + accent shift; cards `translateY(-2px)` + shadow upgrade; links color shift only, no underline-fade gimmicks.\n\n## Responsive Rules\n\nTwo breakpoints cover ~95% of cases: `@media (max-width: 768px)` (tablet) and `@media (max-width: 640px)` (mobile).\n\n- 3-column grids → 1 column on mobile, max-width 480px centered; 2-column feature blocks stack on tablet, both full-width.\n- Components living in different column widths (pricing cards, feature blocks) can use container queries (`@container`, Baseline since 2023).\n- Hero `clamp()` handles headline sizing — no manual mobile override.\n- Tap targets ≥ 44×44px on mobile; WCAG 2.2 AA's floor is 24×24px with spacing.\n- Tables: `overflow-x: auto` wrapper, `min-width` on the table.\n\n## Performance Targets (Core Web Vitals, 2026)\n\nGoogle judges Core Web Vitals on field data at p75, mobile and desktop separately: LCP ≤ 2.5s, INP ≤ 200ms (replaced FID in 2024), CLS ≤ 0.1. Lab Lighthouse is a smoke test — the verdict is CrUX \u002F Search Console or your RUM.\n\n- LCP: aim ≤ 1.5s — prerendered HTML, system fonts, LCP image with `fetchpriority=\"high\"`, never `loading=\"lazy\"` on it.\n- INP: under ~50KB gzipped JS, no hydration of static sections, defer or drop third-party tags (chat widgets, heatmaps, tag managers), break up long tasks.\n- CLS: explicit width\u002Fheight (or `aspect-ratio`) on images and embeds; reserve space for late-injected content.\n- Images: AVIF or WebP via `\u003Cpicture>` with `srcset`\u002F`sizes`, SVG for illustrations, PNG only for pixel-exact screenshots.\n- Inline critical above-the-fold CSS if your stack supports it.\n\n## Accessibility (WCAG 2.2 AA)\n\nWCAG 2.2 AA is the bar; the EU European Accessibility Act has effectively required it for consumer e-commerce and services since 28 June 2025.\n\n- Contrast: 4.5:1 body text, 3:1 large text and UI boundaries, in both themes.\n- Focus: visible ring on every interactive element, never hidden behind the sticky nav (2.4.11) — set `scroll-padding-top: var(--nav-height)` on `html`.\n- Semantics: one `\u003Ch1>`, ordered headings, `\u003Cheader>\u002F\u003Cnav>\u002F\u003Cmain>\u002F\u003Cfooter>` landmarks, real `\u003Cbutton>` and `\u003Ca>`.\n- Motion: honour `prefers-reduced-motion`; no auto-moving content over 5s without a pause control.\n- Media: captions on video with speech, meaningful `alt`, decorative images `alt=\"\"`.\n\n## Forms (signup, waitlist, checkout)\n\nEvery field costs conversions; ask only what the next step needs — usually just email.\n\n- Visible `\u003Clabel>` per field; placeholder is not a label.\n- Correct `type`, `autocomplete` (`email`, `name`, `tel`, `one-time-code`) and `inputmode`, so autofill and the right mobile keyboard work.\n- Single column, primary button right under the last field, label repeating the outcome (\"Get the download link\").\n- Validate on blur, not per keystroke; error next to the field, linked via `aria-describedby`; keep the user's input.\n- Don't block paste, don't ask for the same data twice (3.3.7), no puzzle CAPTCHAs (3.3.8) — use an invisible bot check or honeypot.\n- Say what happens after submit and how often you'll email.\n\n## Anti-Patterns (Don't)\n\n- Autoplay video with sound or a heavy hero video (a muted `playsinline` loop only with poster, small file and pause control); full-bleed background videos dominate LCP and bandwidth\n- Price gated behind \"Contact us\" unless you genuinely sell enterprise\n- Newsletter modals that interrupt reading\n- Stock photos of laptops\u002Fteams\u002Fhandshakes; \"Award winning\" or trust-badge soup in the hero; \"Trusted by X companies\" without real logos and numbers\n- CTA buried below 4 sections\n- AI-sounding copy (see `content-voice`)\n- Scroll-jacking the wheel event; hiding nav on scroll (visitors lose orientation)\n- Non-essential analytics cookies — cookieless analytics avoids the EU consent banner; otherwise consent comes first\n\n## When to Break the Rules\n\nPatterns are calibrated for $20–200 indie\u002FSaaS products for individuals or small teams; add depth and proof as price rises.\n\n- Premium (>$500): case studies, named customers, ROI calculator; one page may not be enough.\n- Enterprise B2B: gate pricing behind a demo if the sales motion needs qualification.\n- High-emotion products (luxury, lifestyle): typography and imagery outweigh spec lists.\n- Developer tools: code samples in hero, GitHub stars badge, technical spec sheet upfront.\n\n## Examples\n\nHero:\n- ❌ \"Revolutionary AI-Powered Voice Recognition Software for Modern Professionals\"\n- ✅ \"Talk to your computer, don't type.\" Subtitle: Voice to text with smart cleanup, live translation, meeting summaries. No cloud. No subscription. Your voice never leaves your Mac.\n\nPricing:\n- ❌ \"Get a quote\" or \"Starting at $—\"\n- ✅ Vext: $49 once · $0 in year 2 vs cloud voice tools: $10–30 \u002Fmonth · $120–360\u002Fyear\n\nCTA:\n- ❌ \"Click here\", \"Submit\", \"Get started\"\n- ✅ \"Download Free\" (verb + outcome), \"Buy for $24.50\" (verb + price clarity), \"Apply to join\" (verb + commitment level)\n\nComparison row:\n- ❌ \"Cloud-dependent · Account required\"\n- ✅ \"Audio sent to third-party servers · Requires monthly subscription · Account + login required\"\n\n## Pre-Ship Checklist\n\n- [ ] Hero passes the 3-second test: what it is and what to do\n- [ ] Primary CTA visible without scrolling on a 13\" laptop\n- [ ] Dark mode tested — no contrast bugs\n- [ ] Mobile tested at 375px and 414px\n- [ ] All copy passes `content-voice` rules (no dead vocabulary)\n- [ ] New-tab links use `target=\"_blank\"` (`noopener` is now default; `rel=\"noreferrer\"` only to hide the referrer)\n- [ ] Every image has descriptive `alt`\n- [ ] OG image renders in https:\u002F\u002Fwww.opengraph.xyz preview\n- [ ] Lighthouse lab: Performance ≥ 95, SEO 100, Accessibility 100; field data (when available) passes LCP, INP and CLS at p75\n- [ ] Keyboard-only pass: every control reachable, focus visible and never under the sticky nav; usable at 200% zoom\n- [ ] Tested on an actual mobile device (not just DevTools)\n- [ ] No console errors in production build\n- [ ] Form submissions \u002F CTAs work end-to-end\n- [ ] 404 page exists and matches brand\n- [ ] Sitemap.xml lists every page\n- [ ] Canonical URL set on every page\n- [ ] At least one trust signal in hero, one mid-page, one footer\n","## Overview\n\nA landing page has one job: turn a stranger into a buyer or trial user; everything else is decoration. This skill covers a token-level design system with automatic dark\u002Flight mode, a section order that walks visitors to the buy decision, copy rules against AI-generic language, and the SEO\u002Fstructured-data baseline.\n\nPair with `content-voice`, which owns how the words sound; this skill owns structure, design system and conversion mechanics.\n\n## Tech Stack Baseline\n\nUse the lightest stack: heavy frameworks slow time-to-interactive, hurt SEO and add maintenance to what should be ~80% prerendered HTML.\n\nRecommended: SvelteKit + adapter-static (or Astro) for prerendered HTML (zero JS on most pages, full SEO, instant LCP); plain CSS custom properties + `prefers-color-scheme` for free theming; system font stack `system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif` (zero font load, native feel); TypeScript in `\u003Cscript>`; Vite; Cloudflare Pages or Vercel (static + edge functions).\n\nAvoid unless needed: React + Next.js for a marketing site (hydration cost); Tailwind for a single-domain landing (class soup, scattered tokens); GSAP or Framer Motion for fade-ins (CSS does it in 4 lines); web fonts (system fonts beat 90% of imports on Apple devices); Radix, shadcn and other component libraries (landing pages need brand-specific UI).\n\n## Design System (Single Source of Truth)\n\nAll tokens live in one CSS file as `:root` custom properties read via `var(--token)`; hardcoded colors, spacing or radii in components are a smell.\n\n### Color tokens\n\n```css\n:root {\n  \u002F* Neutrals — Apple-style cold grays *\u002F\n  --gray-50: #fbfbfd;\n  --gray-100: #f5f5f7;\n  --gray-200: #e8e8ed;\n  --gray-300: #d2d2d7;\n  --gray-400: #aeaeb2;\n  --gray-500: #86868b;\n  --gray-600: #6e6e73;\n  --gray-700: #48484a;\n  --gray-800: #3a3a3c;\n  --gray-900: #1d1d1f;\n\n  \u002F* Brand accent — ONE primary, use shades *\u002F\n  --accent-50:  #eef2ff;\n  --accent-100: #dbe4ff;\n  --accent-200: #bfcfff;\n  --accent-400: #6d8aff;\n  --accent-500: #4a6cf7;  \u002F* primary — buttons, links *\u002F\n  --accent-600: #3451d1;  \u002F* hover *\u002F\n\n  \u002F* Semantic — what components reference *\u002F\n  --bg: var(--white);\n  --bg-muted: var(--gray-100);\n  --card-bg: var(--white);\n  --text-primary: var(--gray-900);\n  --text-secondary: var(--gray-600);\n  --text-muted: var(--gray-500);\n  --border: var(--gray-200);\n  --border-light: var(--gray-100);\n  --on-accent: #ffffff;  \u002F* does NOT invert *\u002F\n  --nav-bg: rgba(255, 255, 255, 0.72);\n\n  --green-500: #30d158;  \u002F* privacy\u002Fsecurity trust signals *\u002F\n}\n```\n\n### Typography, spacing (8px base), effects\n\n```css\n:root {\n  --font-sans: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI',\n               Roboto, 'Helvetica Neue', Arial, sans-serif;\n  --font-mono: 'SF Mono', SFMono-Regular, ui-monospace, 'Cascadia Code', Menlo, monospace;\n\n  --text-xs: 0.75rem;  --text-sm: 0.875rem;  --text-base: 1rem;  --text-lg: 1.125rem;\n  --text-xl: 1.25rem;  --text-2xl: 1.5rem;    --text-3xl: 2rem;   --text-4xl: 2.5rem;\n\n  --space-1: 0.25rem;  --space-2: 0.5rem;  --space-3: 0.75rem;  --space-4: 1rem;\n  --space-5: 1.25rem;  --space-6: 1.5rem;  --space-8: 2rem;     --space-10: 2.5rem;\n  --space-12: 3rem;    --space-16: 4rem;   --space-20: 5rem;    --space-24: 6rem;\n\n  --radius-sm: 0.5rem;  --radius-md: 0.75rem;  --radius-lg: 1rem;  --radius-full: 9999px;\n  --shadow-sm: 0 1px 2px rgba(0,0,0,0.04);\n  --shadow-md: 0 4px 12px rgba(0,0,0,0.06);\n  --shadow-lg: 0 12px 32px rgba(0,0,0,0.08);\n  --transition: 0.2s ease;\n  --nav-height: 56px;\n  --max-width: 1100px;\n}\n```\n\n## Automatic Dark\u002FLight Mode\n\nNon-negotiable. Implement once at the token level — components shouldn't know which mode they're in.\n\n```css\n@media (prefers-color-scheme: dark) {\n  :root {\n    --bg: #000000;\n    --bg-muted: #0a0a0a;\n    --card-bg: #111113;\n    --text-primary: #f5f5f7;\n    --text-secondary: #a1a1a6;\n    --text-muted: #6e6e73;\n    --border: #2a2a2e;\n    --border-light: #1c1c1f;\n    --nav-bg: rgba(0, 0, 0, 0.72);\n    --accent-500: #6d8aff;  \u002F* brighter for contrast *\u002F\n    --shadow-md: 0 4px 12px rgba(0,0,0,0.4);  \u002F* heavier on dark *\u002F\n    --shadow-lg: 0 12px 32px rgba(0,0,0,0.6);\n  }\n}\n```\n\nRules:\n- Never hardcode colors in components.\n- `--on-accent` does NOT invert — text on a colored button stays white in both modes.\n- Test both modes; dark reveals contrast bugs. Component-specific values (e.g. a `rgba(0,0,0,0.4)` overlay) need dark overrides inside the component.\n- Match the OS chrome:\n  ```html\n  \u003Cmeta name=\"theme-color\" content=\"#ffffff\" media=\"(prefers-color-scheme: light)\" \u002F>\n  \u003Cmeta name=\"theme-color\" content=\"#000000\" media=\"(prefers-color-scheme: dark)\" \u002F>\n  \u003Cmeta name=\"color-scheme\" content=\"light dark\" \u002F>\n  ```\n- Shorter alternative for current browsers: `:root { color-scheme: light dark; --bg: light-dark(#fff, #000); }` (`light-dark()` is Baseline 2024).\n\n## Section Anatomy (Top to Bottom)\n\nThe page is a sales conversation; each section answers the next objection.\n\n1. Nav — fixed, ~56px; logo + 1–3 links + one accent CTA pill; `backdrop-filter: blur(20px)` on a translucent background; border\u002Fshadow appears on scroll. Mobile: smaller paddings, no hamburger unless > 5 items.\n\n2. Hero — conversion is decided here.\n   - Badge above headline: tiny, uppercase, muted context tag (\"macOS 14+ · Apple Silicon\").\n   - Headline: `clamp(2.5rem, 6vw, 3.5rem)`, weight 700, letter-spacing -0.035em, line-height 1.08, `text-wrap: balance` (Baseline 2024) instead of `\u003Cbr>`.\n   - Subtitle: one sentence, ≤ ~30 words, `--text-lg`, `--text-secondary`, naming 2–3 features.\n   - Primary CTA: accent pill, `--text-lg`, generous padding; trust line under it with trial limits (\"100 free dictations · No credit card\"), `--text-sm` muted.\n   - Optional `brew install ...` monospace block; system requirements last, muted.\n   - `min-height: calc(100svh - var(--nav-height))` (`svh` avoids the mobile URL-bar jump of `100vh`); subtle radial gradient to accent-50 at top.\n\n3. How It Works — three cards numbered 01\u002F02\u002F03, headline + 1–2 sentences; card-bg, 1px border, radius-lg, padding-8; hover `translateY(-2px)` + shadow-md.\n\n4. Modes \u002F use cases — if the product has 3+ distinct jobs (dictation + meetings + notes), introduce them early as cards.\n\n5. Feature deep-dives — one section per major feature, text beside visual, alternating sides: heading (`--text-4xl`, 700, letter-spacing -0.03em), 2–4 sentences, 3 accent-dot specifics, a real screenshot, demo card or stylized illustration.\n\n6. Privacy \u002F trust — any privacy\u002Flocal\u002Fdata angle gets its own section; people scroll for trust.\n\n7. Pricing — two+ cards: yours (highlighted, \"Best Value\" badge) vs the alternative (cloud subscription): price (`--text-4xl`), period (\"once\" vs \"\u002Fmonth\"), year-2 cost line (the kicker), checkmarks (you) vs X marks (them).\n\n8. Competitor table — feature-by-feature vs named competitors, your column on `--accent-50`, strikethrough promo prices, cost-after-2-years row in a heavier border. Often the highest-converting section.\n\n9. Stats (if applicable) — one big number (\"150x realtime\") with a simple you-vs-them bar chart.\n\n10. Compatibility — pill grid of supported apps\u002Fintegrations.\n\n11. About \u002F made by — \"Built by [team] in [city]. Selectively shipped.\" plus company link.\n\n12. FAQ — 8–12 questions in `\u003Cdetails name=\"faq\">`: zero JS, accessible, exclusive accordion via shared `name` (Baseline 2024). Animating open state (`::details-content` + `interpolate-size`) isn't cross-browser in 2026 — enhancement only. Cover: what it is (headline echoed differently), privacy\u002Fdata, platform\u002Frequirements, free trial, pricing, how each major feature works, objections (\"What if X doesn't work?\"), refund\u002Fcancellation.\n\n13. Footer CTA — same CTA and trust line under a different, summarizing headline (\"Local. Fast. Yours.\").\n\n14. Footer — brand + tagline left; 3–4 columns max right (Product, Company, Legal, Connect); copyright at bottom.\n\n## CTA Hierarchy\n\nOne primary action, zero or one secondary; equal-weight CTAs = no CTA.\n\n1. Primary — accent-filled pill, white text, for the conversion goal (Download, Buy, Sign up); same label and color in Nav, Hero and Footer CTA.\n2. Secondary — outline pill (accent border + text) for alternate paths (Learn more, Buy after free trial), different label.\n3. Tertiary — text links, underline on hover.\n\nRules:\n- Never two filled accent CTAs in the same viewport.\n- No red, orange or yellow primary CTAs unless brand-justified — they read as warnings.\n- Pill radius (9999px) is the default for software CTAs — a brand choice, not a proven conversion lever; test it if it matters.\n\n## Conversion Patterns\n\n- Show the price. Hidden price reads as \"expensive\" or \"talk to sales\"; complex pricing still shows a starting number.\n- Compare against the alternative (subscription vs one-time, tool vs status quo, you vs named competitors) with visible math: \"$49 vs $200 over 2 years\".\n- Specific over abstract: \"150x realtime\" beats \"blazingly fast\", \"$24.50 with VEXT50\" beats \"Save big\". Every claim should be checkable.\n- Layer trust throughout: requirements badge in hero, \"No credit card\" in trial copy, privacy section mid-page, real screenshots, company name + jurisdiction in footer.\n- Explicit trial limits: \"100 dictations, 50 notes, 10 meeting recordings — no credit card\" outperforms \"Try free\".\n- Real urgency only (pulsing dot pill, deadline date, strikethrough price). Fake countdowns or deadlines kill trust, and regulators treat fake scarcity as a deceptive dark pattern.\n\n## Copy Rules (on top of `content-voice`)\n\n- Headlines: outcome not feature, two lines max, verb-driven (\"Capture a thought before it's gone.\" > \"Voice notes feature.\"); no \"revolutionary\", \"next-generation\", \"ultimate\", \"powerful\" — use words a customer would tell a friend.\n- Subtitles: one or two sentences, 2–3 named features, ending on a trust signal (\"No cloud. No subscription.\") or differentiator.\n- Section headings: 1–4 words ending with a period for calm (\"How it works.\" \"What you earn.\"); no \"Discover\", \"Unlock\", \"Experience\", \"Explore\".\n- Body: contractions, dramatic rhythm, concrete examples, one idea per paragraph, bullets only for 3+ parallel items.\n- CTAs: 1–3 words, verb + outcome; never \"Click here\", \"Learn more\", \"Submit\". Match what happens next (\"Buy\" to checkout, \"Download Free\" to trial, \"Start\" to signup).\n\n## SEO + Social Baseline\n\nEvery page sets:\n\n```html\n\u003Ctitle>Page Name — Brand\u003C\u002Ftitle>\n\u003Cmeta name=\"description\" content=\"...\" \u002F>  \u003C!-- under 160 chars, unique per page -->\n\u003Clink rel=\"canonical\" href=\"https:\u002F\u002Fdomain.com\u002Fpath\" \u002F>\n\n\u003Cmeta property=\"og:type\" content=\"website\" \u002F>  \u003C!-- \"article\" for blog posts -->\n\u003Cmeta property=\"og:url\" content=\"...\" \u002F>\n\u003Cmeta property=\"og:title\" content=\"...\" \u002F>\n\u003Cmeta property=\"og:description\" content=\"...\" \u002F>\n\u003Cmeta property=\"og:image\" content=\"https:\u002F\u002Fdomain.com\u002Fog\u002Fpage.png\" \u002F>\n\u003Cmeta property=\"og:image:width\" content=\"1200\" \u002F>\n\u003Cmeta property=\"og:image:height\" content=\"630\" \u002F>\n\u003Cmeta property=\"og:site_name\" content=\"Brand\" \u002F>\n\n\u003Cmeta name=\"twitter:card\" content=\"summary_large_image\" \u002F>\n\u003Cmeta name=\"twitter:title\" content=\"...\" \u002F>\n\u003Cmeta name=\"twitter:description\" content=\"...\" \u002F>\n\u003Cmeta name=\"twitter:image\" content=\"...\" \u002F>\n\u003Cmeta name=\"twitter:site\" content=\"@handle\" \u002F>\n```\n\nOG images: build-time 1200×630 SVG → PNG per page (`@resvg\u002Fresvg-js` or similar); PNG only, since Facebook, Slack and LinkedIn don't render SVG. Layout: dark background, accent gradient bar top\u002Fbottom, logo top-left, headline center-left, domain footer; titles auto-wrap with dynamic sizing (80 → 64 → 52px). Gitignore the generated files.\n\nJSON-LD for a software product:\n\n```json\n{\n  \"@context\": \"https:\u002F\u002Fschema.org\",\n  \"@type\": \"SoftwareApplication\",\n  \"name\": \"...\",\n  \"description\": \"...\",\n  \"url\": \"...\",\n  \"applicationCategory\": \"UtilitiesApplication\",\n  \"operatingSystem\": \"macOS 14+\",\n  \"offers\": {\n    \"@type\": \"Offer\",\n    \"price\": 49,\n    \"priceCurrency\": \"USD\",\n    \"availability\": \"https:\u002F\u002Fschema.org\u002FInStock\"\n  },\n  \"publisher\": { \"@type\": \"Organization\", \"name\": \"...\", \"url\": \"...\" }\n}\n```\n\nAdd `Organization`. `FAQPage` is harmless, but since 2023 Google shows FAQ rich results only for authoritative government and health sites. The software-app rich result needs a real `aggregateRating` or `review` (otherwise no stars, though other parsers still benefit). Never invent ratings or review counts — it violates Google's structured-data policy and the US FTC fake-review rule.\n\nCanonical and sitemap: `\u003Clink rel=\"canonical\">` on every page; static `sitemap.xml` of all routes with accurate `lastmod` (Google ignores `priority` and `changefreq`); `robots.txt` allowing everything except `\u002Fapi\u002F` and `\u002F_`.\n\n## Error Pages (404, 5xx)\n\nOne error component (`+error.svelte`, `error.tsx` or equivalent) branching on `status`: 404 a light on-brand line (\"Page not found.\"), 5xx an honest \"Something broke on our end\", others the real message in a plain frame.\n\n- Monospace status pill, friendly headline, one human sentence (no stack trace), \"Back home\" primary CTA + one secondary path, 3–5 common links.\n- Same nav, footer, tokens and dark mode; `\u003Ctitle>404 — Brand\u003C\u002Ftitle>`; `\u003Cmeta name=\"robots\" content=\"noindex\">`; no third-party calls, so it renders when APIs are down.\n- Static sites emit `404.html` from the same component (SvelteKit: `adapter({ fallback: '404.html' })`); Cloudflare Pages, Netlify, Vercel and S3 serve it for unknown routes.\n- Don't: timed auto-redirects, a search box with no backend, stock \"lost robot\" art, blaming the user (\"You typed the wrong URL\").\n\n## Animation (Restrained)\n\nDefault to none; add only when it serves communication.\n\n```js\nconst observer = new IntersectionObserver(\n  (entries) => entries.forEach((e) => e.isIntersecting && e.target.classList.add('visible')),\n  { threshold: 0.1 }\n);\ndocument.querySelectorAll('.animate-on-scroll').forEach((el) => observer.observe(el));\n```\n\n```css\n.animate-on-scroll { opacity: 0; transform: translateY(20px);\n  transition: opacity 0.6s ease, transform 0.6s ease; }\n.animate-on-scroll.visible { opacity: 1; transform: translateY(0); }\n@media (prefers-reduced-motion: reduce) {\n  .animate-on-scroll { opacity: 1; transform: none; transition: none; }\n}\n@keyframes pulse { 0%, 100% { opacity: 1; transform: scale(1); } 50% { opacity: 0.5; transform: scale(1.4); } }\n.dot { animation: pulse 1.6s ease-in-out infinite; }  \u002F* live indicators: recording, launch promo *\u002F\n```\n\nRules:\n- Use sparingly — every section animating is annoying.\n- Never animate above-the-fold content, and never start the LCP element at `opacity: 0`.\n- Same-document View Transitions are Baseline since Oct 2025, fine for state changes. Scroll-driven animations (`animation-timeline`) lack stable Firefox in 2026: only inside `@supports (animation-timeline: view())`, IntersectionObserver as default.\n- Honour `prefers-reduced-motion: reduce`.\n- Hover: buttons `translateY(-1px)` + accent shift; cards `translateY(-2px)` + shadow upgrade; links color shift only, no underline-fade gimmicks.\n\n## Responsive Rules\n\nTwo breakpoints cover ~95% of cases: `@media (max-width: 768px)` (tablet) and `@media (max-width: 640px)` (mobile).\n\n- 3-column grids → 1 column on mobile, max-width 480px centered; 2-column feature blocks stack on tablet, both full-width.\n- Components living in different column widths (pricing cards, feature blocks) can use container queries (`@container`, Baseline since 2023).\n- Hero `clamp()` handles headline sizing — no manual mobile override.\n- Tap targets ≥ 44×44px on mobile; WCAG 2.2 AA's floor is 24×24px with spacing.\n- Tables: `overflow-x: auto` wrapper, `min-width` on the table.\n\n## Performance Targets (Core Web Vitals, 2026)\n\nGoogle judges Core Web Vitals on field data at p75, mobile and desktop separately: LCP ≤ 2.5s, INP ≤ 200ms (replaced FID in 2024), CLS ≤ 0.1. Lab Lighthouse is a smoke test — the verdict is CrUX \u002F Search Console or your RUM.\n\n- LCP: aim ≤ 1.5s — prerendered HTML, system fonts, LCP image with `fetchpriority=\"high\"`, never `loading=\"lazy\"` on it.\n- INP: under ~50KB gzipped JS, no hydration of static sections, defer or drop third-party tags (chat widgets, heatmaps, tag managers), break up long tasks.\n- CLS: explicit width\u002Fheight (or `aspect-ratio`) on images and embeds; reserve space for late-injected content.\n- Images: AVIF or WebP via `\u003Cpicture>` with `srcset`\u002F`sizes`, SVG for illustrations, PNG only for pixel-exact screenshots.\n- Inline critical above-the-fold CSS if your stack supports it.\n\n## Accessibility (WCAG 2.2 AA)\n\nWCAG 2.2 AA is the bar; the EU European Accessibility Act has effectively required it for consumer e-commerce and services since 28 June 2025.\n\n- Contrast: 4.5:1 body text, 3:1 large text and UI boundaries, in both themes.\n- Focus: visible ring on every interactive element, never hidden behind the sticky nav (2.4.11) — set `scroll-padding-top: var(--nav-height)` on `html`.\n- Semantics: one `\u003Ch1>`, ordered headings, `\u003Cheader>\u002F\u003Cnav>\u002F\u003Cmain>\u002F\u003Cfooter>` landmarks, real `\u003Cbutton>` and `\u003Ca>`.\n- Motion: honour `prefers-reduced-motion`; no auto-moving content over 5s without a pause control.\n- Media: captions on video with speech, meaningful `alt`, decorative images `alt=\"\"`.\n\n## Forms (signup, waitlist, checkout)\n\nEvery field costs conversions; ask only what the next step needs — usually just email.\n\n- Visible `\u003Clabel>` per field; placeholder is not a label.\n- Correct `type`, `autocomplete` (`email`, `name`, `tel`, `one-time-code`) and `inputmode`, so autofill and the right mobile keyboard work.\n- Single column, primary button right under the last field, label repeating the outcome (\"Get the download link\").\n- Validate on blur, not per keystroke; error next to the field, linked via `aria-describedby`; keep the user's input.\n- Don't block paste, don't ask for the same data twice (3.3.7), no puzzle CAPTCHAs (3.3.8) — use an invisible bot check or honeypot.\n- Say what happens after submit and how often you'll email.\n\n## Anti-Patterns (Don't)\n\n- Autoplay video with sound or a heavy hero video (a muted `playsinline` loop only with poster, small file and pause control); full-bleed background videos dominate LCP and bandwidth\n- Price gated behind \"Contact us\" unless you genuinely sell enterprise\n- Newsletter modals that interrupt reading\n- Stock photos of laptops\u002Fteams\u002Fhandshakes; \"Award winning\" or trust-badge soup in the hero; \"Trusted by X companies\" without real logos and numbers\n- CTA buried below 4 sections\n- AI-sounding copy (see `content-voice`)\n- Scroll-jacking the wheel event; hiding nav on scroll (visitors lose orientation)\n- Non-essential analytics cookies — cookieless analytics avoids the EU consent banner; otherwise consent comes first\n\n## When to Break the Rules\n\nPatterns are calibrated for $20–200 indie\u002FSaaS products for individuals or small teams; add depth and proof as price rises.\n\n- Premium (>$500): case studies, named customers, ROI calculator; one page may not be enough.\n- Enterprise B2B: gate pricing behind a demo if the sales motion needs qualification.\n- High-emotion products (luxury, lifestyle): typography and imagery outweigh spec lists.\n- Developer tools: code samples in hero, GitHub stars badge, technical spec sheet upfront.\n\n## Examples\n\nHero:\n- ❌ \"Revolutionary AI-Powered Voice Recognition Software for Modern Professionals\"\n- ✅ \"Talk to your computer, don't type.\" Subtitle: Voice to text with smart cleanup, live translation, meeting summaries. No cloud. No subscription. Your voice never leaves your Mac.\n\nPricing:\n- ❌ \"Get a quote\" or \"Starting at $—\"\n- ✅ Vext: $49 once · $0 in year 2 vs cloud voice tools: $10–30 \u002Fmonth · $120–360\u002Fyear\n\nCTA:\n- ❌ \"Click here\", \"Submit\", \"Get started\"\n- ✅ \"Download Free\" (verb + outcome), \"Buy for $24.50\" (verb + price clarity), \"Apply to join\" (verb + commitment level)\n\nComparison row:\n- ❌ \"Cloud-dependent · Account required\"\n- ✅ \"Audio sent to third-party servers · Requires monthly subscription · Account + login required\"\n\n## Pre-Ship Checklist\n\n- [ ] Hero passes the 3-second test: what it is and what to do\n- [ ] Primary CTA visible without scrolling on a 13\" laptop\n- [ ] Dark mode tested — no contrast bugs\n- [ ] Mobile tested at 375px and 414px\n- [ ] All copy passes `content-voice` rules (no dead vocabulary)\n- [ ] New-tab links use `target=\"_blank\"` (`noopener` is now default; `rel=\"noreferrer\"` only to hide the referrer)\n- [ ] Every image has descriptive `alt`\n- [ ] OG image renders in https:\u002F\u002Fwww.opengraph.xyz preview\n- [ ] Lighthouse lab: Performance ≥ 95, SEO 100, Accessibility 100; field data (when available) passes LCP, INP and CLS at p75\n- [ ] Keyboard-only pass: every control reachable, focus visible and never under the sticky nav; usable at 200% zoom\n- [ ] Tested on an actual mobile device (not just DevTools)\n- [ ] No console errors in production build\n- [ ] Form submissions \u002F CTAs work end-to-end\n- [ ] 404 page exists and matches brand\n- [ ] Sitemap.xml lists every page\n- [ ] Canonical URL set on every page\n- [ ] At least one trust signal in hero, one mid-page, one footer\n",{"name":5,"rules":57,"title":69,"domains":45,"license":14,"description":7,"compatibility":70},[58,59,60,61,62,63,64,65,66,67,68],"content(landing page)","content(landing-page)","content(marketing site)","content(product page)","match(\\blanding\\s+page\\b)","match(\\bbuild.*landing\\b)","match(\\bdesign.*landing\\b)","match(\\bproduct\\s+page\\b)","match(\\bmarketing\\s+site\\b)","match(\\bhero\\s+section\\b)","match(\\bpricing\\s+page\\b)","Landing Page Craft: UI, Conversion, and System Patterns","Stack-agnostic — examples use SvelteKit + plain CSS but rules apply to any HTML\u002FCSS framework.","master","e9e4a19559669b1627b1ac5ed3f77b8e36cfad95","skills\u002Fmarkup-landing-page",0,"https:\u002F\u002Fgithub.com\u002FMuvon\u002Foctomind-tap","https:\u002F\u002Foctomind.run\u002Ftap\u002F","https:\u002F\u002Fgithub.com\u002FMuvon","https:\u002F\u002Fmuvon.io","We bring ideas to life","2026-11-10 20:30:54",{"source":8,"skillName":5,"commands":82,"prompt":92,"zipAvailable":93},[83,86,89],{"tool":84,"command":85},"npx","npx skills add Muvon\u002Foctomind-tap --skill markup-landing-page",{"tool":87,"command":88},"bunx","bunx skills add Muvon\u002Foctomind-tap --skill markup-landing-page",{"tool":90,"command":91},"pnpm","pnpm dlx skills add Muvon\u002Foctomind-tap --skill markup-landing-page","安装技能，技能地址：https:\u002F\u002Fgithub.com\u002FMuvon\u002Foctomind-tap\u002Fblob\u002Fmaster\u002Fskills\u002Fmarkup-landing-page\u002FSKILL.md",true,[],[96,127,154,174,198,225],{"skillNo":97,"name":98,"nameZh":6,"description":99,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":9,"repositoryNo":12,"starsCount":13,"licenseSpdxId":14,"licenseFileUrl":6,"sourceHtmlUrl":100,"categories":101,"keywords":107,"publishedAt":52},"01M70SFC5CTHRKA9B97N1ARVZ2","seo-content-refresh","Finds decaying pages, picks update, merge, redirect or remove, and briefs each refresh. Use to prioritize existing content and judge whether it helped.","https:\u002F\u002Fgithub.com\u002FMuvon\u002Foctomind-tap\u002Fblob\u002Fmaster\u002Fskills\u002Fseo-content-refresh\u002FSKILL.md",[102,103,104],{"categoryNo":23,"categoryName":24,"taxonomyType":25,"taxonomyTypeDesc":26},{"categoryNo":18,"categoryName":19,"taxonomyType":20,"taxonomyTypeDesc":21},{"categoryNo":105,"categoryName":106,"taxonomyType":20,"taxonomyTypeDesc":21},"01JBSEEDCAT000000000000036","内容创作者",[108,44,109,110,111,112,113,114,115,116,117,118,119,120,121,122,123,124,125,126],"seo content refresh","seo content","content refresh","refresh","content","posts","remove","web search","performance","search","traffic","access","drop","websearch","revamp","merge","diagnosis","update","decay",{"skillNo":128,"name":129,"nameZh":6,"description":130,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":9,"repositoryNo":12,"starsCount":13,"licenseSpdxId":14,"licenseFileUrl":6,"sourceHtmlUrl":131,"categories":132,"keywords":135,"publishedAt":52},"01M70SBWQCHGH7HGS51Y0GTKKW","marketing-review-program","Plans how to ask real customers for honest public reviews: site choice, invitation copy, incentive and disclosure rules. Use to start a review program.","https:\u002F\u002Fgithub.com\u002FMuvon\u002Foctomind-tap\u002Fblob\u002Fmaster\u002Fskills\u002Fmarketing-review-program\u002FSKILL.md",[133,134],{"categoryNo":23,"categoryName":24,"taxonomyType":25,"taxonomyTypeDesc":26},{"categoryNo":18,"categoryName":19,"taxonomyType":20,"taxonomyTypeDesc":21},[136,137,138,139,140,141,115,117,142,143,144,145,146,147,148,149,150,151,152,153],"program","review","marketing review program","marketing","reviews","get","campaign","choice","how to","only","generated","ask","plan","product","generate","customer","how","request",{"skillNo":155,"name":156,"nameZh":6,"description":157,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":9,"repositoryNo":12,"starsCount":13,"licenseSpdxId":14,"licenseFileUrl":6,"sourceHtmlUrl":158,"categories":159,"keywords":160,"publishedAt":52},"01M70SBB65Z2FC71Q7DEAXGJBG","geo-source-actions","Turns AI citation findings into ranked per-source actions for Reddit threads, listicles, review sites and videos. Records only. Use after a GEO audit.","https:\u002F\u002Fgithub.com\u002FMuvon\u002Foctomind-tap\u002Fblob\u002Fmaster\u002Fskills\u002Fgeo-source-actions\u002FSKILL.md",[],[161,162,163,164,165,141,115,117,166,167,145,121,137,168,169,170,149,171,172,173],"actions","geo source actions","source","geo","sources","copilot","domains","llms","threads","youtube","audit","action","data",{"skillNo":175,"name":176,"nameZh":6,"description":177,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":9,"repositoryNo":12,"starsCount":13,"licenseSpdxId":14,"licenseFileUrl":6,"sourceHtmlUrl":178,"categories":179,"keywords":183,"publishedAt":52},"01M70S99D3Y6GF097GTXWBXHPW","commerce-ai-readiness","Audits product feeds, markup and live pages for AI shopping assistants, then lists exact fixes. Use to make a store catalog readable to AI shoppers.","https:\u002F\u002Fgithub.com\u002FMuvon\u002Foctomind-tap\u002Fblob\u002Fmaster\u002Fskills\u002Fcommerce-ai-readiness\u002FSKILL.md",[180],{"categoryNo":181,"categoryName":182,"taxonomyType":20,"taxonomyTypeDesc":21},"01JBSEEDCAT000000000000031","产品经理",[184,185,186,187,188,189,190,191,192,193,117,194,166,145,119,195,196,149,171,197],"ai readiness","commerce ai readiness","commerce","readiness","feeds","ready","show","shopping","discover","checkout","up","ecommerce","documentation","recommend",{"skillNo":199,"name":200,"nameZh":6,"description":201,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":9,"repositoryNo":12,"starsCount":13,"licenseSpdxId":14,"licenseFileUrl":6,"sourceHtmlUrl":202,"categories":203,"keywords":207,"publishedAt":52},"01M6DWSX45J42KTK6XASKJRGPA","tap-model-training","Train, evaluate and publish the octomind-embed model behind capability auto-activation. Use when capability triggers or skill semantic() phrases change.","https:\u002F\u002Fgithub.com\u002FMuvon\u002Foctomind-tap\u002Fblob\u002Fmaster\u002Fskills\u002Ftap-model-training\u002FSKILL.md",[204],{"categoryNo":205,"categoryName":206,"taxonomyType":25,"taxonomyTypeDesc":26},"01JBSEEDCAT000000000000023","Skill与智能体开发",[208,209,210,211,212,194,213,214,215,216,217,218,219,220,221,152,222,223,224,125],"model","training","tap","tap model training","scope","eval","uv","auto","dataset","activate","api","capabilities","publish","change","embedding","re","when",{"skillNo":226,"name":227,"nameZh":6,"description":228,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":9,"repositoryNo":12,"starsCount":13,"licenseSpdxId":14,"licenseFileUrl":6,"sourceHtmlUrl":229,"categories":230,"keywords":232,"publishedAt":52},"01M6DWSQB7NSW53Z86XM81R1W1","tap-deps-authoring","Write dep scripts for the octomind-tap registry: header comments, platform.sh, mcp vs dep types, npx\u002Fuvx pattern. Use when editing deps\u002F\u003Corg>\u002F\u003Ctool>.sh.","https:\u002F\u002Fgithub.com\u002FMuvon\u002Foctomind-tap\u002Fblob\u002Fmaster\u002Fskills\u002Ftap-deps-authoring\u002FSKILL.md",[231],{"categoryNo":205,"categoryName":206,"taxonomyType":25,"taxonomyTypeDesc":26},[233,210,234,235,236,237,238,239,240,241,242,243,244,245,246,247,224,248,249,250],"deps","tap deps authoring","authoring","DEP","MCP","run","scripts","pattern","install","registry","platform","repo","editing","tool","types","write","org","for"]