Skip to main content

cinematic-scroll-site

Why It Exists​

The repo already shipped two narrower website-adjacent skills: reveal-shot-prompts (fills two AI-image prompts for a manual product-reveal pipeline, never touches a page) and scrollytelling-frames-site (splices an already-extracted frame sequence into an existing page, on this repo's own Next.js templates). Neither runs a whole build, and neither was built to take a user with no code experience from "I have an idea" to a live URL. This skill fills that gap on purpose, as a standalone, framework-free pipeline that doesn't touch bin/create-client.mjs or the templates/marketing/templates/dashboard fleet at all — a deliberate scope boundary spelled out in its own SKILL.md so it never gets confused for a Next.js scaffold or blended with the two narrower skills mid-build.

The skill was added in commit f5b8fd5, a squash-merged PR whose commit message describes an unrelated marketing-template copy fix ("remove fabricated testimonials, fix wrong-vertical copy"). The skill itself shipped as part of that same merge rather than its own commit — a pattern worth knowing before trusting git log alone to explain why a given skill exists in the tree.

Its design leans hard on real production lessons about running an end-to-end creative pipeline with a non-technical user in the loop: gate every credit-spending step (a bad starting frame is a 2-credit fix now, a whole wasted video render later), design the page's sections and copy before storyboarding the video so the generator is never guessing at what the page needs, and run a dedicated AI-tell copy sweep (banned stock words, em dashes, "it's not just X, it's Y" constructions) before ever showing a build to the user.

What It Does​

An eleven-phase pipeline, run by the assistant as designer, director, and engineer while the user supplies taste and approvals:

  • Setup (Phase 1): scans for Higgsfield, ffmpeg, and Node.js, installs what it can automatically, and walks the user through connecting Higgsfield as a custom MCP connector — verified with a real balance call, not just "the user said done."
  • Design and research (Phases 2-4): a clickable-choice design conversation, then real customer-language research pulled from reviews and forum threads so copy uses buyers' own words instead of generic marketing language, then a depth-tier choice (single journey, chained journey, or a fully choreographed site).
  • The Creative Director's Loop (Phase 5): the keystone — the website's sections and story beats are designed completely first; only then is the hero video storyboarded as the vehicle that carries those beats. The generator never knows it's making a website.
  • Generation (Phase 6): Higgsfield-generated starting frame, model choice preflighted across real prices, the hero video, and supporting stills — every credit-spending step gated on the user seeing the actual cost and the actual result first, including a mandatory video gate before any site gets built around the footage.
  • Build and verify (Phases 7-11): ffmpeg processing, a plain index.html + assets/ build (no framework, no build step) implementing a scroll-scrubbed video hero, a self-test against an adversarial checklist plus the mandatory AI-tell copy sweep, a vercel --prod deploy, and a live Lighthouse-verified handoff with an open standing offer to keep iterating.

How To Use It​

Triggers on: building a website, landing page, cinematic site, scroll site, one-page site, or hero-video site for any business, product, brand, or concept — and on setting up the Higgsfield connector, ffmpeg, or Node.js for this workflow.

skills add git@github.com:catesandrew/next-starters.git --skill skills/cinematic-scroll-site -g

Gotchas & Invariants​

  • This skill governs for full-site builds; the two narrower siblings don't get blended in. reveal-shot-prompts and scrollytelling-frames-site are prompt/checklist-only and never build or deploy a whole site — if the user wants a whole cinematic site built and shipped, this skill runs start to finish on its own.
  • Design the page before storyboarding the video, always. Prompting the generator before the page's sections and beats are locked produces footage that has to be retrofitted to copy instead of copy written to match footage that was built to carry it.
  • Every credit-spending step is gated on inspection, not on the user saying "looks good." Inspect the starting frame yourself for sneaked-in trademarks and broken anatomy before animating it; inspect the video's start/middle/end frames before building the site around it. A 2-credit image mistake is cheap; the same mistake discovered after a ~54-credit video render is not.
  • Hosting is deliberately deferred to Phase 10. Nothing in the build needs Vercel until the site is finished and previewed — asking for login credentials or a domain earlier than that is out of order.
  • The copy review gate is mandatory, not optional polish. Grep the built index.html for em dashes and the banned stock-word list (leverage, seamless, empower, unlock, robust, actionable, data-driven, solutions) across the entire file, not just the hero — the drift toward corporate language lands hardest in the lower sections (FAQ, testimonials, CTA microcopy) precisely because they get less attention.
  • Double-clicking index.html only shows the static-image fallback. Browsers block fetch on file:// URLs, so the full scroll-video preview needs a one-line local server (npx http-server or python -m http.server) — tell the user which of the two previews they're looking at, or the still hero reads as a broken video.
  • reveal-shot-prompts — fills two AI-image prompts for a manual, checklist-only product-reveal pipeline; never builds or touches a page. A narrower slice of what this skill automates end to end.
  • scrollytelling-frames-site — splices an already-extracted frame sequence into an existing page on this repo's own Next.js templates. This skill instead runs the whole build, from customer research through a live URL, on a standalone framework-free site.

Sourced from: skills/cinematic-scroll-site/metadata.json, skills/cinematic-scroll-site/SKILL.md and its references/ files, git log --diff-filter=A -- skills/cinematic-scroll-site/SKILL.md (commit f5b8fd5).