cinematic-website-prime-directivelisted

# Cinematic Website Prime Directive One-line prompt ("Make a website for X" / "Build a site for Y" / "Rebuild Z.com") → satisfy all 100 build-breaking rules across 10 categories before DONE. Anything less is in-progress. ## 1. Cinematic Visual Doctrine (1-10) 1. Dark-first (`#060610` base) w/ at least one bold accent (`#00E5FF` / `#7C3AED` / `#50AAE3`) — never neutral grey 2. Fluid `clamp()` type — body 16-19px, display 64-128px, single 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 hero parallax, view-transition page 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 user says "Angular" or signal-heavy enterprise 15. View Transitions API (`@view-transition { navigation: auto; }`) for SPA page swaps 16. Sel