cinematic-website-prime-directivelisted

# 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) 1. Dark-first (`#060610` base) + bold accent (`#00E5FF` / `#7C3AED` / `#50AAE3`) — never neutral grey 2. Fluid `clamp()` type — body 16-19px, display 64-128px, ratio 1.25-1.333 3. 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 tints 6. `text-wrap: balance` headings, `text-wrap: pretty` body — no orphans 7. One signature motion per page (scroll-driven parallax, view-transition swap, popover anchor) 8. Hero MUST use AI-generated brand-aligned image, never stock placeholder 9. Asymmetric hero grids, never centered-stack default 10. 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-heavy 13. Next.js 15 App Router only when SSR/ISR adds real value 14. Angular 21 + Ionic + PrimeNG only when