16-cinematic-website-prime-directive

Name: 16-cinematic-website-prime-directive
Author: heymegabyte

18stars4forks

How to install 16-cinematic-website-prime-directive?

heymegabyte/claude-skills/16-cinematic-website-prime-directive

$npx -y skills add heymegabyte/claude-skills --skill 16-cinematic-website-prime-directive

Installs into the current project.

Summary

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-p

Files · 1

View on GitHub

SKILL.md

1	# Cinematic Website Prime Directive
2
3	One-line prompt → satisfy all 100 build-breaking rules across 10 categories before DONE.
4
5	> 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.
6
7	## 1. Cinematic Visual Doctrine (1-10)
8
9	1. Dark-first (`#060610` base) + bold accent (`#00E5FF` / `#7C3AED` / `#50AAE3`) — never neutral grey
10	2. Fluid `clamp()` type — body 16-19px, display 64-128px, ratio 1.25-1.333
11	3. Sora + Space Grotesk + JetBrains Mono (variable woff2 subsets preloaded)
12	4. Layered surfaces: opaque base + semi-transparent panels + glassmorph cards via `backdrop-filter`
13	5. OKLCH palette w/ `color-mix(in oklch, ...)` derived shades — no static rgb tints
14	6. `text-wrap: balance` headings, `text-wrap: pretty` body — no orphans
15	7. One signature motion per page (scroll-driven parallax, view-transition swap, popover anchor)
16	8. Hero MUST use AI-generated brand-aligned image, never stock placeholder
17	9. Asymmetric hero grids, never centered-stack default
18	10. Every section pair has visual rhythm: dense → breath → dense
19
20	## 2. Pre-Hydrated SPA + Routing (11-20)
21
22	11. React 19 + Vite + Tailwind v4 + TanStack Router (default)
23	12. Astro 5 + React islands for marketing-static-heavy
24	13. Next.js 15 App Router only when SSR/ISR adds real value
25	14. Angular 21 + Ionic + PrimeNG only when user says "Angular" or signal-heavy enterprise
26	15. View Transitions API (`@view-transition { navigation: auto; }`) for SPA page swaps
27	16. Selective hydration per island (Astro) or RSC boundaries (Next)
28	17. Prefetch on link hover via TanStack Router or Astro `prefetch="hover"`
29	18. Speculation Rules `<script type="speculationrules">` `prerender` `eagerness:"moderate"`
30	19. Route code-split via `React.lazy` + Vite `manualChunks` — no single chunk >250KB gz
31	20. Static HTML shell prerendered w/ H1 + meta tags — never script-injected
32
33	## 3. PWA Kit (21-30)
34
35	21. `site.webmanifest` w/ `name`, `short_name`, `description`, `theme_color`, `background_color`, `display:"standalone"`
36	22. `screenshots[]` ≥3 entries w/ `form_factor:"wide"` + `form_factor:"narrow"`
37	23. `shortcuts[]` for top 3 actions, `share_target`, `file_handlers`, `protocol_handlers`
38	24. Maskable icons 192/512 + monochrome notification icon
39	25. Workbox v7 SW: `StaleWhileRevalidate` HTML/JS, `CacheFirst` + `ExpirationPlugin` images
40	26. `offline.html` shell w/ branded copy + link to cached pages
41	27. A2HS install banner via `beforeinstallprompt` + iOS separate UI
42	28. iOS splash via `apple-touch-icon` 180×180 + `apple-touch-startup-image`
43	29. iOS Safari 18.4 Declarative Web Push opt-in (PWA-installed only)
44	30. Kill-switch SW (unregister + clear caches) as fallback
45
46	## 4. Structured Data + Rich Snippets (31-40)
47
48	31. 5+ JSON-LD blocks per route minimum
49	32. Always: `WebSite` + `Organization` + `WebPage` + `BreadcrumbList` + `FAQPage`
50	33. Page-type add-ons: `LocalBusiness`, `Product`, `BlogPosting`, `HowTo`, `Person`
51	34. Author schema (`Person` + `sameAs`) + `dateModified` on every content page (EEAT)
52	35. JSON-LD facts MUST also appear as visible HTML body text
53	36. Validate every route against Google Rich Results Test API before deploy
54	37. Schema.org `citation: CreativeWork[]` array for every quantitative claim
55	38. Itemprop attributes mirror JSON-LD on key elements
56	39. No duplicate `@id` across blocks; use stable IRIs
57	40. `inLanguage` on every block; `isAccessibleForFree:true` on public content
58
59	## 5. SEO + AI Search / GEO (41-50)
60
61	41. Title 50-60 chars HARD, meta desc 120-156 chars HARD, keyphrase 0.5-3%
62	42. OG card 1200×630 ≤100KB BRANDED (not scraped photo)
63	43. Twitter Card meta on every route
64	44. `sitemap.xml` w/ `<lastmod>` on every URL
65	45. `robots.txt` triple-state: Allow OR Disallow per GPTBot, ClaudeBot, Claude-User, Claude-SearchBot, PerplexityBot, Google-Extended, CCBot, Bytespider — never default
66	46. `humans.txt`, `.well-known/security.txt`, `browserconfig.xml`, `llms.txt` (OPTIONAL)
67	47. Quotabl

People who liked this also viewed

6 picks

Type

16-cinematic-website-prime-directive

18stars4forks

View on GitHub

How to install 16-cinematic-website-prime-directive?

heymegabyte/claude-skills/16-cinematic-website-prime-directive

$npx -y skills add heymegabyte/claude-skills --skill 16-cinematic-website-prime-directive

Installs into the current project.

Summary

Files · 1

View on GitHub

SKILL.md

1	# Cinematic Website Prime Directive
2
3	One-line prompt → satisfy all 100 build-breaking rules across 10 categories before DONE.
4
5	> 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.
6
7	## 1. Cinematic Visual Doctrine (1-10)
8
9	1. Dark-first (`#060610` base) + bold accent (`#00E5FF` / `#7C3AED` / `#50AAE3`) — never neutral grey
10	2. Fluid `clamp()` type — body 16-19px, display 64-128px, ratio 1.25-1.333
11	3. Sora + Space Grotesk + JetBrains Mono (variable woff2 subsets preloaded)
12	4. Layered surfaces: opaque base + semi-transparent panels + glassmorph cards via `backdrop-filter`
13	5. OKLCH palette w/ `color-mix(in oklch, ...)` derived shades — no static rgb tints
14	6. `text-wrap: balance` headings, `text-wrap: pretty` body — no orphans
15	7. One signature motion per page (scroll-driven parallax, view-transition swap, popover anchor)
16	8. Hero MUST use AI-generated brand-aligned image, never stock placeholder
17	9. Asymmetric hero grids, never centered-stack default
18	10. Every section pair has visual rhythm: dense → breath → dense
19
20	## 2. Pre-Hydrated SPA + Routing (11-20)
21
22	11. React 19 + Vite + Tailwind v4 + TanStack Router (default)
23	12. Astro 5 + React islands for marketing-static-heavy
24	13. Next.js 15 App Router only when SSR/ISR adds real value
25	14. Angular 21 + Ionic + PrimeNG only when user says "Angular" or signal-heavy enterprise
26	15. View Transitions API (`@view-transition { navigation: auto; }`) for SPA page swaps
27	16. Selective hydration per island (Astro) or RSC boundaries (Next)
28	17. Prefetch on link hover via TanStack Router or Astro `prefetch="hover"`
29	18. Speculation Rules `<script type="speculationrules">` `prerender` `eagerness:"moderate"`
30	19. Route code-split via `React.lazy` + Vite `manualChunks` — no single chunk >250KB gz
31	20. Static HTML shell prerendered w/ H1 + meta tags — never script-injected
32
33	## 3. PWA Kit (21-30)
34
35	21. `site.webmanifest` w/ `name`, `short_name`, `description`, `theme_color`, `background_color`, `display:"standalone"`
36	22. `screenshots[]` ≥3 entries w/ `form_factor:"wide"` + `form_factor:"narrow"`
37	23. `shortcuts[]` for top 3 actions, `share_target`, `file_handlers`, `protocol_handlers`
38	24. Maskable icons 192/512 + monochrome notification icon
39	25. Workbox v7 SW: `StaleWhileRevalidate` HTML/JS, `CacheFirst` + `ExpirationPlugin` images
40	26. `offline.html` shell w/ branded copy + link to cached pages
41	27. A2HS install banner via `beforeinstallprompt` + iOS separate UI
42	28. iOS splash via `apple-touch-icon` 180×180 + `apple-touch-startup-image`
43	29. iOS Safari 18.4 Declarative Web Push opt-in (PWA-installed only)
44	30. Kill-switch SW (unregister + clear caches) as fallback
45
46	## 4. Structured Data + Rich Snippets (31-40)
47
48	31. 5+ JSON-LD blocks per route minimum
49	32. Always: `WebSite` + `Organization` + `WebPage` + `BreadcrumbList` + `FAQPage`
50	33. Page-type add-ons: `LocalBusiness`, `Product`, `BlogPosting`, `HowTo`, `Person`
51	34. Author schema (`Person` + `sameAs`) + `dateModified` on every content page (EEAT)
52	35. JSON-LD facts MUST also appear as visible HTML body text
53	36. Validate every route against Google Rich Results Test API before deploy
54	37. Schema.org `citation: CreativeWork[]` array for every quantitative claim
55	38. Itemprop attributes mirror JSON-LD on key elements
56	39. No duplicate `@id` across blocks; use stable IRIs
57	40. `inLanguage` on every block; `isAccessibleForFree:true` on public content
58
59	## 5. SEO + AI Search / GEO (41-50)
60
61	41. Title 50-60 chars HARD, meta desc 120-156 chars HARD, keyphrase 0.5-3%
62	42. OG card 1200×630 ≤100KB BRANDED (not scraped photo)
63	43. Twitter Card meta on every route
64	44. `sitemap.xml` w/ `<lastmod>` on every URL
65	45. `robots.txt` triple-state: Allow OR Disallow per GPTBot, ClaudeBot, Claude-User, Claude-SearchBot, PerplexityBot, Google-Extended, CCBot, Bytespider — never default
66	46. `humans.txt`, `.well-known/security.txt`, `browserconfig.xml`, `llms.txt` (OPTIONAL)
67	47. Quotabl

People who liked this also viewed

6 picks

Type