cinematographer
starsforks
How to install cinematographer?
qinghonglin/data2story-skill/cinematographer
$npx -y skills add QinghongLin/data2story-skill --skill cinematographerDesign the MANDATORY cinematic scroll experience (every blog ships one): a full-bleed, scroll-driven background — primarily from the Scout's verified real imagery — plus the global motion choreography, so the narrative unfolds like a film as the reader scrolls. Owns the BACKGROUN
SKILL.md
| 1 | # Cinematographer |
| 2 | |
| 3 | > **Premium-profile stage.** The orchestrator runs the Cinematographer only in the `premium` profile; the `fast` profile ships no cinematic scroll. The "mandatory — every blog ships one" rule below applies *within* premium. |
| 4 | |
| 5 | Your job is the **cinematic scroll experience**: turn the page from a static editorial column into a film the reader scrolls through — a full-bleed background that transforms continuously, the story unfolding as the reader scrolls down. The **scroll itself is the engine**: every beat is revealed by scrolling, and the background changes with it. You own the **background layer + global motion choreography**. You do NOT redo the Designer's per-section visuals or the Interaction Engineer's centerpiece — you **stage them inside the scroll** as scenes. |
| 6 | |
| 7 | This stage is **MANDATORY — every blog ships a cinematic scroll background**. There is no "off" path and no "opt-out": your job in Step 1 is not *whether* to go cinematic, but *which mode* fits the material. The **primary mode is photographic** — relevant, verified, license-clean REAL imagery (the WC exemplar pattern), which the Scout sources for almost every topic, including historical and abstract ones (an industrial-revolution / economics story → real public-domain factory, worker and machine photographs; a place/event/people topic → real photos of it). `generative` (registered `des_` AI atmosphere/metaphor stills + gradient) and `data_driven` (the story's signature annotated chart pinned as the scroll spine) are **fallbacks**, used ONLY when relevant real imagery genuinely cannot be sourced. Mandatory means **always-present AND tasteful** — not force-junk: AI imagery is for atmosphere/metaphor only (never a specific real subject), and the decorative / tonally-wrong cap still applies. The point is that the page always reads as a scrolled film, with the most honest background the material can support. |
| 8 | |
| 9 | ## Setup |
| 10 | - `PROJECT_DIR` = first argument; `SKILL_DIR` = the directory containing this `SKILL.md`. |
| 11 | - Read: `editor.md` + `editor.json` (the spine = your scene list, in order), `designer.json` (theme/`page_rhythm` + per-section visuals), `interaction.json` (the centerpiece — give it a scene), `scout.json` (**the verified, license-clean imagery you build backgrounds from**), `detective.json` (context). |
| 12 | - Read [`references/cinematic_recipes.json`](references/cinematic_recipes.json) (the scroll-background techniques) and the shared [`../../frontend-design-pro/references/interaction_playbook.json`](../../frontend-design-pro/references/interaction_playbook.json) (the scroll engine). |
| 13 | - Output: `PROJECT_DIR/cinematographer.json`. |
| 14 | |
| 15 | ## Step 1 — Select the mode (a mandatory mode SELECTOR — never off) |
| 16 | Cinematic is a mandatory stage, so Step 1 picks **which** background mode the material supports — not *whether* to have one. Set `meta.mode` to one of `photographic` | `generative` | `data_driven` (there is **no `off`**). Read the shared classifier `../references/topic_profile.json` (fields `is_visual`, `is_computational`, `tags`) and count the **registered** verified backgrounds in `scout.json`/`designer.json`. |
| 17 | |
| 18 | - **`"photographic"` — the DEFAULT and primary mode (the WC exemplar pattern).** Use it whenever the Scout/Designer have **registered ≥5 verified, license-clean cover-able real backgrounds** — i.e. ≥5 `sct_`/`des_` items whose license + identity blocks are complete and whose orientation suits a full-bleed `cover` (or `framed`) background. This should be the case for **almost every topic**, because relevant real imagery exists for nearly all of them — sport/culture/place/event/people directly, and historical/abstract topics through real public-domain photographs of the thing (factories and machines for an economics/industry story, archival photos for a history story, etc.). The Scout's job is to source these; if a genuinely visual topic has only `1 ≤ cover-able < 5`, that is **not** a reason to switch modes — it is a **send-back** to the Scout/Designer to source ≥5 cover-able real backgrounds (the cinematic-supply gate, mirrored in `validate.py` Section 12), after which you re-run in `photographic`. |
| 19 | |
| 20 | - **`"generative"` — FALLBACK ONLY when relevant real imagery genuinely cannot be sourced.** The background |
People who liked this also viewed
6 picksType
- ai-video-generationinference.sh Agent skills for using our API to give your agents access to hundreds of apps and other agentsSkillsJul 2026
- imagegen-frontend-webElite frontend image-direction skill for generating premium, conversion-aware website design references. CRITICAL OUTPUT RULE — generate ONE separate horizontal image FOR EVERY section. A landing pageSkillsJul 2026
- hyperframes-mediaWrite HTML. Render video. Built for agents.SkillsJul 2026
- media-useAgent Media OS, the single skill for every media need in a HyperFrames project. Resolve BGM, SFX, image, icon, brand logo, voice, color grade, or LUT into a frozen local file or paste-ready block + leSkillsJul 2026
- general-videoAuthor or edit a custom HyperFrames composition when no specialized workflow fits, or when BRIEF.md sets flow: companion. Use for longer or multi-scene pieces, brand and sizzle reels, montages, staticSkillsJul 2026
- product-launch-videoTurn a product or marketing URL, pasted script, or brief into a product launch / promo video — SaaS promos, feature reveals, product demos, app and company launches. Use when the user wants to market,SkillsJul 2026
