agentsclimarketplace
Sign in

16 cinematic website prime directive

Skill heymegabyte/claude-skills/16-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.From its SKILL.md

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

Assembled from the repository path, not quoted from the project. Check it against their README if it does not work.

2 things to look at

  • no licenseNo license file was found in the repository. Code published without one is not open source by default, so using it at work is a question for whoever answers licensing questions where you are.
  • 20 stars20 stars. Stars are a popularity signal and not a quality one, but at this level it is likely that nobody has read this closely except its author, and you would be relying on your own review.

SKILL.md

11.8 KB, ~3.1k tokens by cl100k_base, as published. Nobody here has run it

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)

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

3. PWA Kit (21-30)

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

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

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

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

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

6. Third-Party Integrations (51-60)

  1. GA4 + GTM snippet (head + noscript fallback)
  2. PostHog snippet w/ persistence:'memory' (cookie-free), autocapture on
  3. Sentry @sentry/cloudflare v9 + withSentry + OIDC DSN
  4. Workers Tracing [observability] enabled = true + OTLP export to Axiom
  5. AI Gateway binding for every LLM call
  6. Turnstile invisible (data-appearance="interaction-only") on every form — NEVER visible
  7. Stripe checkout / Resend transactional / Clerk auth (M2M JWT) stubs where appropriate
  8. Calendly / Cal.com inline booking when applicable
  9. Google Maps embed via Maps Embed API, lazy-loaded
  10. 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)

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

8. Accessibility WCAG 2.2 AA (71-80)

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

9. Testing + Verification (81-90)

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

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

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

  1. 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.

  2. 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.

  3. 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

  1. 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.

  2. 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

  1. 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.

  2. Squarespace random-ID slugs → semantic + 301. Same for Wix _compiler/page-data dupes + WP ?p=123 permalinks.

  3. Jewel content authority via Form 990 / Charity Navigator / Candid / Wayback / Newspapers.com / LinkedIn — never stub, every quantitative claim APA-cited per rules/citations.md.

  4. 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.

  5. 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.

What ships with it

Read from the repository

Just SKILL.md. No reference files, no scripts.

Keep looking

Skills are one crate of 325,949. Ordering is by how many stacks a row turns up in, so the top of any crate is what has actually been picked rather than what has the most stars.