Cinematic Website Prime Directive

One-line-prompt → cinematic, gorgeous, functional, well-tested, deployed website. Pre-hydrated SPA + full PWA kit + JSON-LD rich snippets + third-party integrations. React 19+Vite default (Angular optional). 100 concrete improvements grouped into 10 categories that EVERY single-prompt site build must satisfy before being marked done. Trigger whenever the user says 'make a website for X', 'build a site for X', 'rebuild X.com', or any equivalent one-liner.

heymegabyte Updated Sep 17, 2026

Install

Press C to copy

$ npx skillmds@latest add heymegabyte/cinematic-website-prime-directive

Installs into ~/.claude/skills (or .claude/skills inside a project). Restart Claude Code to pick it up.

Download SKILL.md

＋ Add to collection

README badge

[![SkillMD](https://skillmd.com/badge/heymegabyte/cinematic-website-prime-directive.svg)](https://skillmd.com/skills/heymegabyte/cinematic-website-prime-directive)

Trust & safety

Audits pending

Not yet audited · commit 4efc3a4

Works with: Claude Code Claude.ai OpenAI Codex +

File contents

Cinematic Website Prime Directive

One-line prompt → satisfy all 100 build-breaking rules across 10 categories before DONE.

Start here: website-build-manifest is the cross-linked acceptance index for the whole one-prompt build (phase order, per-page/per-site gates, architecture, quality bar, EMDASH_* config). Load it first, then this skill's 100 rules + the detail rules it links.

1. Cinematic Visual Doctrine (1-10)

Dark-first (#060610 base) + bold accent (#00E5FF / #7C3AED / #50AAE3) — never neutral grey
Fluid clamp() type — body 16-19px, display 64-128px, ratio 1.25-1.333
Sora + Space Grotesk + JetBrains Mono (variable woff2 subsets preloaded)
Layered surfaces: opaque base + semi-transparent panels + glassmorph cards via backdrop-filter
OKLCH palette w/ color-mix(in oklch, ...) derived shades — no static rgb tints
text-wrap: balance headings, text-wrap: pretty body — no orphans
One signature motion per page (scroll-driven parallax, view-transition swap, popover anchor)
Hero MUST use AI-generated brand-aligned image, never stock placeholder
Asymmetric hero grids, never centered-stack default
Every section pair has visual rhythm: dense → breath → dense

2. Pre-Hydrated SPA + Routing (11-20)

React 19 + Vite + Tailwind v4 + TanStack Router (default)
Astro 5 + React islands for marketing-static-heavy
Next.js 15 App Router only when SSR/ISR adds real value
Angular 21 + Ionic + PrimeNG only when user says "Angular" or signal-heavy enterprise
View Transitions API (@view-transition { navigation: auto; }) for SPA page swaps
Selective hydration per island (Astro) or RSC boundaries (Next)
Prefetch on link hover via TanStack Router or Astro prefetch="hover"
Speculation Rules <script type="speculationrules"> prerender eagerness:"moderate"
Route code-split via React.lazy + Vite manualChunks — no single chunk >250KB gz
Static HTML shell prerendered w/ H1 + meta tags — never script-injected

3. PWA Kit (21-30)

site.webmanifest w/ name, short_name, description, theme_color, background_color, display:"standalone"
screenshots[] ≥3 entries w/ form_factor:"wide" + form_factor:"narrow"
shortcuts[] for top 3 actions, share_target, file_handlers, protocol_handlers
Maskable icons 192/512 + monochrome notification icon
Workbox v7 SW: StaleWhileRevalidate HTML/JS, CacheFirst + ExpirationPlugin images
offline.html shell w/ branded copy + link to cached pages
A2HS install banner via beforeinstallprompt + iOS separate UI
iOS splash via apple-touch-icon 180×180 + apple-touch-startup-image
iOS Safari 18.4 Declarative Web Push opt-in (PWA-installed only)
Kill-switch SW (unregister + clear caches) as fallback

4. Structured Data + Rich Snippets (31-40)

5+ JSON-LD blocks per route minimum
Always: WebSite + Organization + WebPage + BreadcrumbList + FAQPage
Page-type add-ons: LocalBusiness, Product, BlogPosting, HowTo, Person
Author schema (Person + sameAs) + dateModified on every content page (EEAT)
JSON-LD facts MUST also appear as visible HTML body text
Validate every route against Google Rich Results Test API before deploy
Schema.org citation: CreativeWork[] array for every quantitative claim
Itemprop attributes mirror JSON-LD on key elements
No duplicate @id across blocks; use stable IRIs
inLanguage on every block; isAccessibleForFree:true on public content

5. SEO + AI Search / GEO (41-50)

Title 50-60 chars HARD, meta desc 120-156 chars HARD, keyphrase 0.5-3%
OG card 1200×630 ≤100KB BRANDED (not scraped photo)
Twitter Card meta on every route
sitemap.xml w/ <lastmod> on every URL
robots.txt triple-state: Allow OR Disallow per GPTBot, ClaudeBot, Claude-User, Claude-SearchBot, PerplexityBot, Google-Extended, CCBot, Bytespider — never default
humans.txt, .well-known/security.txt, browserconfig.xml, llms.txt (OPTIONAL)
Quotable answer blocks 40-60 words per page (LLM citation magnet)
FAQPage w/ 5+ Q&A blocks (highest AI citation rate)
Lead paragraph answers query directly in <40 words
Per-route canonical URL (custom hostname when primary_hostname set)

6. Third-Party Integrations (51-60)

GA4 + GTM snippet (head + noscript fallback)
PostHog snippet w/ persistence:'memory' (cookie-free), autocapture on
Sentry @sentry/cloudflare v9 + withSentry + OIDC DSN
Workers Tracing [observability] enabled = true + OTLP export to Axiom
AI Gateway binding for every LLM call
Turnstile invisible (data-appearance="interaction-only") on every form — NEVER visible
Stripe checkout / Resend transactional / Clerk auth (M2M JWT) stubs where appropriate
Calendly / Cal.com inline booking when applicable
Google Maps embed via Maps Embed API, lazy-loaded
Live chat (Crisp / Plain) only when support is stated goal. Cmd+K opens AI chat or command palette AND focuses text input same frame — autofocus + requestAnimationFrame(() => inputRef.current?.focus({preventScroll:true})) after open-state flip, re-press = re-focus + select(), Esc returns focus to trigger. Playwright build gate: await page.keyboard.press('Meta+K'); await expect(input).toBeFocused();

7. Performance + Core Web Vitals (61-70)

LCP ≤2.0s (target ≤1.5s)
CLS ≤0.05 — every image, iframe, ad slot has explicit dimensions
INP ≤100ms (target — 200ms is fail)
fetchpriority="high" on LCP <img> AND its <link rel="preload">
AVIF primary + WebP fallback + JPEG legacy — no JPEG XL
Font woff2 subset w/ unicode-range per script
JS budget ≤200KB gz / route, no single chunk >250KB gz
CSS ≤50KB gz, fonts ≤100KB woff2 preload
Largest image ≤200KB. Hero image ≤150KB.
Long Animation Frames API instrumented for INP debugging

8. Accessibility WCAG 2.2 AA (71-80)

axe-core 0 violations at all 6 bp (375, 390, 768, 1024, 1280, 1920)
Contrast ≥4.5:1 body, ≥3:1 large text + UI components
Target size ≥24px (2.5.8 — axe auto-tests)
Focus appearance (2.4.11) visible at every interactive — manual review
Focus not obscured (2.4.12/13) — sticky headers must not clip focused
Dragging alternative (2.5.7) — every drag has click/tap equivalent
Consistent help (3.2.6) — contact/help link same location every page
Redundant entry (3.3.7) — never re-ask info given
Accessible auth (3.3.8/9) — no cognitive-test CAPTCHA; offer passkeys
Lighthouse a11y ≥95

9. Testing + Verification (81-90)

Playwright E2E 6bp covering homepage → key flow → conversion
Tests start at homepage, navigate by clicking nav (never page.goto for internal)
Vitest 3 unit tests for utilities + Zod schemas
Lighthouse CI: Perf ≥90, A11y ≥95, BP ≥95, SEO ≥95
AI vision QA ≥9/10 per route (visual-qa agent w/ Opus 4.8)
Percy AI Visual Review for full-page regression
Yoast GREEN on every content page
Build validator: every internal asset resolves, every hyperlink valid, every quantitative claim cited
CSP report-uri capturing violations during E2E
wrangler tail clean during smoke tests (no Worker errors)

10. Deploy + Observability + Done (91-100)

Atomic deploy via Workers Builds (preferred) or wrangler deploy + version metadata
Gradual deployment (1% → 10% → 100%) w/ auto-rollback on error spike
CDN purge paired w/ every deploy
/health endpoint returns {status, version, timestamp}
D1 backups: Time Travel 30-day PIT + R2 long-term archive
secrets.required validated at deploy
Self-Verify Statement per route (URL + smoke test result + 3 screenshots)
Sentry / PostHog / Workers Tracing / AI Gateway / GA4 all firing — verify in dashboard
Browser console: zero errors, zero CSP violations, zero failed resources
DONE = deployed at real URL + every Hard Gate green + Self-Verify per route + announced

Anything less than all 100 is in-progress.

11. Source-Site Enhancement (101-110 — fires when prompt names existing domain)

Phrase detect — rebuild | optimize | enhance | modernize | recreate | clone | better version of {domain} OR bare-domain prompt where domain resolves 200 = enhancement mode. Output = union(SOURCE_URLS, STANDARD_PAGE_SET[org_type], DEMOGRAPHIC_LOCALES, JEWELS) − CRUFT_URLS. See rules/source-site-enhancement.md.
Crawl FIRST — sitemap.xml → robots.txt → HTML BFS → Wayback fallback → CMS index endpoints (Squarespace /config/pages, WP wp-sitemap-posts-*.xml, Wix _api/v1/sitemap.xml) → _url_inventory.json. Every URL classified keep | merge | 301 | drop.
Org-type page-set floor per 15-site-generation/page-set-expansion.md:

nonprofit: 14 standard (home, about, mission, programs, services, team, volunteer, donate, contact, blog, faq, news, financials, annual-report) + 10 jewels
local-business: ~12 standard + service × city pSEO
saas: home, product, pricing, features, customers, blog, docs, changelog, security, status, integrations, roadmap, api-docs
portfolio: home, about, work, blog, contact + per-project pages

Demographic-i18n auto-trigger via ACS B16001 lookup on service area — every language ≥10% community share gets /{locale}/* full route mirror with hreflang cross-refs. Newark NJ ⇒ en+es+pt automatic.
Jewel discovery (org-type-specific high-value pages absent from source):

nonprofit: /parish-toolkit|/planned-giving|/financials|/annual-report|/donate/refurbish|/ways-to-give|/transcript|/alumni|/press|/testimonials|/partners
saas: /changelog|/security|/status|/integrations|/customers|/roadmap|/api-docs
local: /specials|/gallery|/team|/reviews|/insurance|/financing
portfolio: /now|/uses|/colophon|/reading-list

IA normalize — /home → /, /our-mission-1 | /blog-1 | /testpage | /new-page-* → drop or 301, flat /health-clinic → /services/health-clinic nested + index when 9+ services. CRUFT_PATTERNS auto-301 to canonical.
Squarespace random-ID slugs → semantic + 301. Same for Wix _compiler/page-data dupes + WP ?p=123 permalinks.
Jewel content authority via Form 990 / Charity Navigator / Candid / Wayback / Newspapers.com / LinkedIn — never stub, every quantitative claim APA-cited per rules/citations.md.
Hard gate page count — deployed site MUST have keep_count + standard_gap_count + jewel_count + locale_count*(keep+standard+jewel) pages. Nonprofits min: keep + 14 standard + 10 jewels. Build fails when deployed-route-count < expected.
Monitor-fire on first tool-call message — rebuild prompt is multi-faceted (≥7 independent work units: crawl → classify → org-type-infer → demographic-i18n → jewel-content-author → IA-normalize → Squarespace-dedupe → deploy-verify). Sequential = build fail. See rules/source-site-enhancement.md § Parallel-agent playbook.

---name: cinematic-website-prime-directivedescription: One-line-prompt → cinematic, gorgeous, functional, well-tested, deployed website. Pre-hydrated SPA + full PWA kit + JSON-LD rich snippets + third-party integrations. React 19+Vite default (Angular optional). 100 concrete improvements grouped into 10 categories that EVERY single-prompt site build must satisfy before being marked done. Trigger whenever the user says 'make a website for X', 'build a site for X', 'rebuild X.com', or any equivalent one-liner.---# Cinematic Website Prime DirectiveOne-line prompt → satisfy all 100 build-breaking rules across 10 categories before DONE.> **Start here**: `website-build-manifest` is the cross-linked acceptance index for the whole one-prompt build (phase order, per-page/per-site gates, architecture, quality bar, `EMDASH_*` config). Load it first, then this skill's 100 rules + the detail rules it links.## 1. Cinematic Visual Doctrine (1-10)1. Dark-first (`#060610` base) + bold accent (`#00E5FF` / `#7C3AED` / `#50AAE3`) — never neutral grey2. Fluid `clamp()` type — body 16-19px, display 64-128px, ratio 1.25-1.3333. Sora + Space Grotesk + JetBrains Mono (variable woff2 subsets preloaded)4. Layered surfaces: opaque base + semi-transparent panels + glassmorph cards via `backdrop-filter`5. OKLCH palette w/ `color-mix(in oklch, ...)` derived shades — no static rgb tints6. `text-wrap: balance` headings, `text-wrap: pretty` body — no orphans7. One signature motion per page (scroll-driven parallax, view-transition swap, popover anchor)8. Hero MUST use AI-generated brand-aligned image, never stock placeholder9. Asymmetric hero grids, never centered-stack default10. Every section pair has visual rhythm: dense → breath → dense## 2. Pre-Hydrated SPA + Routing (11-20)11. React 19 + Vite + Tailwind v4 + TanStack Router (default)12. Astro 5 + React islands for marketing-static-heavy13. Next.js 15 App Router only when SSR/ISR adds real value14. Angular 21 + Ionic + PrimeNG only when user says "Angular" or signal-heavy enterprise15. View Transitions API (`@view-transition { navigation: auto; }`) for SPA page swaps16. Selective hydration per island (Astro) or RSC boundaries (Next)17. Prefetch on link hover via TanStack Router or Astro `prefetch="hover"`18. Speculation Rules `<script type="speculationrules">` `prerender` `eagerness:"moderate"`19. Route code-split via `React.lazy` + Vite `manualChunks` — no single chunk >250KB gz20. Static HTML shell prerendered w/ H1 + meta tags — never script-injected## 3. PWA Kit (21-30)21. `site.webmanifest` w/ `name`, `short_name`, `description`, `theme_color`, `background_color`, `display:"standalone"`22. `screenshots[]` ≥3 entries w/ `form_factor:"wide"` + `form_factor:"narrow"`23. `shortcuts[]` for top 3 actions, `share_target`, `file_handlers`, `protocol_handlers`24. Maskable icons 192/512 + monochrome notification icon25. Workbox v7 SW: `StaleWhileRevalidate` HTML/JS, `CacheFirst` + `ExpirationPlugin` images26. `offline.html` shell w/ branded copy + link to cached pages27. A2HS install banner via `beforeinstallprompt` + iOS separate UI28. iOS splash via `apple-touch-icon` 180×180 + `apple-touch-startup-image`29. iOS Safari 18.4 Declarative Web Push opt-in (PWA-installed only)30. Kill-switch SW (unregister + clear caches) as fallback## 4. Structured Data + Rich Snippets (31-40)31. 5+ JSON-LD blocks per route minimum32. Always: `WebSite` + `Organization` + `WebPage` + `BreadcrumbList` + `FAQPage`33. Page-type add-ons: `LocalBusiness`, `Product`, `BlogPosting`, `HowTo`, `Person`34. Author schema (`Person` + `sameAs`) + `dateModified` on every content page (EEAT)35. JSON-LD facts MUST also appear as visible HTML body text36. Validate every route against Google Rich Results Test API before deploy37. Schema.org `citation: CreativeWork[]` array for every quantitative claim38. Itemprop attributes mirror JSON-LD on key elements39. No duplicate `@id` across blocks; use stable IRIs40. `inLanguage` on every block; `isAccessibleForFree:true` on public content## 5. SEO + AI Search / GEO (41-50)41. Title 50-60 chars HARD, meta desc 120-156 chars HARD, keyphrase 0.5-3%42. OG card 1200×630 ≤100KB BRANDED (not scraped photo)43. Twitter Card meta on every route44. `sitemap.xml` w/ `<lastmod>` on every URL45. `robots.txt` triple-state: Allow OR Disallow per GPTBot, ClaudeBot, Claude-User, Claude-SearchBot, PerplexityBot, Google-Extended, CCBot, Bytespider — never default46. `humans.txt`, `.well-known/security.txt`, `browserconfig.xml`, `llms.txt` (OPTIONAL)47. Quotable answer blocks 40-60 words per page (LLM citation magnet)48. `FAQPage` w/ 5+ Q&A blocks (highest AI citation rate)49. Lead paragraph answers query directly in <40 words50. Per-route canonical URL (custom hostname when `primary_hostname` set)## 6. Third-Party Integrations (51-60)51. GA4 + GTM snippet (head + noscript fallback)52. PostHog snippet w/ `persistence:'memory'` (cookie-free), autocapture on53. Sentry `@sentry/cloudflare` v9 + `withSentry` + OIDC DSN54. Workers Tracing `[observability] enabled = true` + OTLP export to Axiom55. AI Gateway binding for every LLM call56. Turnstile invisible (`data-appearance="interaction-only"`) on every form — NEVER visible57. Stripe checkout / Resend transactional / Clerk auth (M2M JWT) stubs where appropriate58. Calendly / Cal.com inline booking when applicable59. Google Maps embed via Maps Embed API, lazy-loaded60. Live chat (Crisp / Plain) only when support is stated goal. **Cmd+K opens AI chat or command palette AND focuses text input same frame** — `autofocus` + `requestAnimationFrame(() => inputRef.current?.focus({preventScroll:true}))` after open-state flip, re-press = re-focus + `select()`, Esc returns focus to trigger. Playwright build gate: `await page.keyboard.press('Meta+K'); await expect(input).toBeFocused();`## 7. Performance + Core Web Vitals (61-70)61. LCP ≤2.0s (target ≤1.5s)62. CLS ≤0.05 — every image, iframe, ad slot has explicit dimensions63. INP ≤100ms (target — 200ms is fail)64. `fetchpriority="high"` on LCP `<img>` AND its `<link rel="preload">`65. AVIF primary + WebP fallback + JPEG legacy — no JPEG XL66. Font woff2 subset w/ `unicode-range` per script67. JS budget ≤200KB gz / route, no single chunk >250KB gz68. CSS ≤50KB gz, fonts ≤100KB woff2 preload69. Largest image ≤200KB. Hero image ≤150KB.70. Long Animation Frames API instrumented for INP debugging## 8. Accessibility WCAG 2.2 AA (71-80)71. axe-core 0 violations at all 6 bp (375, 390, 768, 1024, 1280, 1920)72. Contrast ≥4.5:1 body, ≥3:1 large text + UI components73. Target size ≥24px (2.5.8 — axe auto-tests)74. Focus appearance (2.4.11) visible at every interactive — manual review75. Focus not obscured (2.4.12/13) — sticky headers must not clip focused76. Dragging alternative (2.5.7) — every drag has click/tap equivalent77. Consistent help (3.2.6) — contact/help link same location every page78. Redundant entry (3.3.7) — never re-ask info given79. Accessible auth (3.3.8/9) — no cognitive-test CAPTCHA; offer passkeys80. Lighthouse a11y ≥95## 9. Testing + Verification (81-90)81. Playwright E2E 6bp covering homepage → key flow → conversion82. Tests start at homepage, navigate by clicking nav (never `page.goto` for internal)83. Vitest 3 unit tests for utilities + Zod schemas84. Lighthouse CI: Perf ≥90, A11y ≥95, BP ≥95, SEO ≥9585. AI vision QA ≥9/10 per route (visual-qa agent w/ Opus 4.8)86. Percy AI Visual Review for full-page regression87. Yoast GREEN on every content page88. Build validator: every internal asset resolves, every hyperlink valid, every quantitative claim cited89. CSP report-uri capturing violations during E2E90. `wrangler tail` clean during smoke tests (no Worker errors)## 10. Deploy + Observability + Done (91-100)91. Atomic deploy via Workers Builds (preferred) or `wrangler deploy` + version metadata92. Gradual deployment (1% → 10% → 100%) w/ auto-rollback on error spike93. CDN purge paired w/ every deploy94. `/health` endpoint returns `{status, version, timestamp}`95. D1 backups: Time Travel 30-day PIT + R2 long-term archive96. `secrets.required` validated at deploy97. Self-Verify Statement per route (URL + smoke test result + 3 screenshots)98. Sentry / PostHog / Workers Tracing / AI Gateway / GA4 all firing — verify in dashboard99. Browser console: zero errors, zero CSP violations, zero failed resources100. DONE = deployed at real URL + every Hard Gate green + Self-Verify per route + announcedAnything less than all 100 is in-progress.## 11. Source-Site Enhancement (101-110 — fires when prompt names existing domain)101. **Phrase detect** — `rebuild | optimize | enhance | modernize | recreate | clone | better version of {domain}` OR bare-domain prompt where domain resolves 200 = enhancement mode. Output = `union(SOURCE_URLS, STANDARD_PAGE_SET[org_type], DEMOGRAPHIC_LOCALES, JEWELS) − CRUFT_URLS`. See `rules/source-site-enhancement.md`.102. **Crawl FIRST** — `sitemap.xml → robots.txt → HTML BFS → Wayback fallback → CMS index endpoints (Squarespace /config/pages, WP wp-sitemap-posts-*.xml, Wix _api/v1/sitemap.xml)` → `_url_inventory.json`. Every URL classified `keep | merge | 301 | drop`.103. **Org-type page-set floor** per `15-site-generation/page-set-expansion.md`:- nonprofit: 14 standard (home, about, mission, programs, services, team, volunteer, donate, contact, blog, faq, news, financials, annual-report) + 10 jewels- local-business: ~12 standard + service × city pSEO- saas: home, product, pricing, features, customers, blog, docs, changelog, security, status, integrations, roadmap, api-docs- portfolio: home, about, work, blog, contact + per-project pages104. **Demographic-i18n auto-trigger** via ACS B16001 lookup on service area — every language ≥10% community share gets `/{locale}/*` full route mirror with hreflang cross-refs. Newark NJ ⇒ en+es+pt automatic.105. **Jewel discovery** (org-type-specific high-value pages absent from source):- nonprofit: `/parish-toolkit|/planned-giving|/financials|/annual-report|/donate/refurbish|/ways-to-give|/transcript|/alumni|/press|/testimonials|/partners`- saas: `/changelog|/security|/status|/integrations|/customers|/roadmap|/api-docs`- local: `/specials|/gallery|/team|/reviews|/insurance|/financing`- portfolio: `/now|/uses|/colophon|/reading-list`106. **IA normalize** — `/home → /`, `/our-mission-1 | /blog-1 | /testpage | /new-page-* → drop or 301`, flat `/health-clinic → /services/health-clinic` nested + index when 9+ services. CRUFT_PATTERNS auto-301 to canonical.107. **Squarespace random-ID slugs** → semantic + 301. Same for Wix `_compiler/page-data` dupes + WP `?p=123` permalinks.108. **Jewel content authority** via Form 990 / Charity Navigator / Candid / Wayback / Newspapers.com / LinkedIn — never stub, every quantitative claim APA-cited per `rules/citations.md`.109. **Hard gate page count** — deployed site MUST have `keep_count + standard_gap_count + jewel_count + locale_count*(keep+standard+jewel)` pages. Nonprofits min: `keep + 14 standard + 10 jewels`. Build fails when deployed-route-count < expected.110. **Monitor-fire on first tool-call message** — rebuild prompt is multi-faceted (≥7 independent work units: crawl → classify → org-type-infer → demographic-i18n → jewel-content-author → IA-normalize → Squarespace-dedupe → deploy-verify). Sequential = build fail. See `rules/source-site-enhancement.md` § Parallel-agent playbook.

heymegabyte/claude-skills/tree/main/16-cinematic-website-prime-directive commit 4efc3a4dd3

Frequently asked questions

npx skillmds@latest add heymegabyte/cinematic-website-prime-directive