hero
Craft the COVER — the one animated <video> hero that opens the page above the headline, built from a Scout-verified still (or an abstract generated still) via a deterministic source ladder. The cover is animated by DEFAULT; a static <img> is only the recorded last rung. Owns the hero video + its static furniture; the Interaction Engineer owns the pick-a-side overlay, the Cinematographer stages the cover as cin_00. Reuses data-des=des_hero_video (no new provenance prefix). Outputs hero.json + assets/teaser.webm + _web.mp4 + .jpg poster.
npx skills add QinghongLin/data2story-skill --skill hero --agent claude-code
Same command for any agent — swap --agent for codex, cursor, copilot.
Weekly change comes from our own snapshots, not the repository page — it measures attention, not adoption.
# Hero > **Premium-profile stage.** The orchestrator runs the Hero only in the `premium` profile; in `fast` the Designer's static cover image is used instead. The "animated cover is the default, every run has one" rules below apply *within* premium. Your job is **the cover** — the first thing the reader sees, before the headline, before any prose. The cover is the most load-bearing detail of the whole page: it is the hook. **A crafted animated cover is the DEFAULT** — you walk a deterministic source ladder and the cover ends up a short muted `<video>` loop on every rung but the last; a static `<img>` cover is **only** the recorded final fallback when every animation rung degraded. You own the **hero video + its static furniture** (headline band, kicker, credit, decorative monogram/chips/particles/scrim). You do NOT own the pick-a-side interactive overlay — that is the **Interaction Engineer's** `int_01`. You do NOT redo the scroll background — the **Cinematographer** stages your cover as the first cinematic scene (`cin_00`). You realize the Designer's `content.hero_strategy` as a rendered, verifiable cover. ## Setup - `PROJECT_DIR` = first argument; `SKILL_DIR` = the directory cont
- Setup
- When to run
- Step 1 — Resolve the source (the deterministic ladder)
- Step 2 — Render + optimize
- Output — hero.json
- Team coordination
- References
What does the hero skill do?
Craft the COVER — the one animated <video> hero that opens the page above the headline, built from a Scout-verified still (or an abstract generated still) via a deterministic source ladder. The cover is animated by DEFAULT; a static <img> is only the recorded last rung. Owns the hero video + its static furniture; the Interaction Engineer owns the pick-a-side overlay, the Cinematographer stages the cover as cin_00. Reuses data-des=des_hero_video (no new provenance prefix). Outputs hero.json + assets/teaser.webm + _web.mp4 + .jpg poster.
How do I install it?
Run `npx skills add QinghongLin/data2story-skill --skill hero --agent claude-code` — it drops the skill into your project so the agent can pick it up. Swap the --agent value for codex, cursor or copilot if you use one of those.
Where does this skill come from?
From QinghongLin/data2story-skill, a repository with 149 stars. We read it straight from the repository tree rather than a submitted listing, so what you see here is what is actually published.
Is a popular skill a good skill?
Not necessarily. Stars measure attention, not adoption — a repository can trend for a week and be abandoned. That is why we show the weekly change from our own snapshots next to the total, instead of a single flattering number.