hero

hero is a skill for Claude Code from QinghongLin/data2story-skill. It costs 127 tokens per session (4,539 once invoked), scanned A, original, MIT.

An animated cover creator for the opening visual of a website page. It uses a verified or generated still image as the basis for a short muted video, with a static image as the final fallback.

In plain words
What is it for?
Use it to build the hero section above a website headline, including the cover video or fallback image, headline band, kicker, credit, and decorative visual details.
Why use it?
It gives the page a defined first visual and records what happens when animation sources are unavailable. It also keeps the cover's surrounding text and decorative elements together.

Skill for Claude Code

Written for Claude Code: allowed-tools in frontmatter.

Part of the data2story-pro plugin — 25 skills shipped together

Good fit Use it to build the hero section above a website headline, including the cover video or fallback image, headline band, kicker, credit, and decorative visual details.

Compare 6 skills from other repositories ↓
Install with agentmods
npx agentmods add skills/qinghonglin/data2story-skill/hero
Install

Getting it into your agent

One page per mod, every tool's command on it. A separate URL per tool would split the same page into five that compete with each other.

Any agent
npx skills add QinghongLin/data2story-skill --skill hero
Clone the repo
git clone --depth 1 https://github.com/QinghongLin/data2story-skill

Made for: Claude Code.

Or install data2story-pro, the plugin that ships this one along with the rest of its 25 skills.

Wrote this? Show the measurements

A badge with what this costs and how it scanned, read live from this page, so it follows the numbers instead of freezing them. Markdown for a README, HTML for a documentation site or a project page.

agentmods badge for hero

README.md
[![agentmods](https://agentmods.dev/badge/skills/qinghonglin/data2story-skill/hero/github.svg)](https://agentmods.dev/skills/qinghonglin/data2story-skill/hero)
Your own site
<a href="https://agentmods.dev/skills/qinghonglin/data2story-skill/hero"><img src="https://agentmods.dev/badge/skills/qinghonglin/data2story-skill/hero/github.svg" alt="Measured on agentmods" height="20"></a>

Or the 80×15 button, for a site that already has a row of RSS and ATOM ones. Only the verdict fits; the numbers stay here.

agentmods 80×15 button for hero

Your own site · 80×15
<a href="https://agentmods.dev/skills/qinghonglin/data2story-skill/hero"><img src="https://agentmods.dev/badge/skills/qinghonglin/data2story-skill/hero.svg" alt="Reviewed on agentmods" width="80" height="20"></a>
Per session 127 Skills are progressive disclosure: only the name and description are preloaded; the body loads when the skill is used.
When invoked 4,539 The whole file, excluding the scripts and references it only reads on demand.
Security scan A 0 findings. A grade says what 26 rules found in the file — not that it is safe. Third-party audits
  • NVIDIA SkillSpector pass 7 Sept 2026
How audits are shown
Origin original No closer match found in the catalogue.
Token cost

What it costs to keep this loaded

Counted locally with the o200k_base tokenizer, which is exact for GPT models; Claude uses its own tokenizer and its counts differ. Treat this as one consistent yardstick across the catalogue rather than a bill. Prices are per million input tokens.

ModelPer sessionOnce invoked
Fable 5.1 $0.00127 $0.04539
Opus 5 $0.00063 $0.02269
Sonnet 5 $0.00025 $0.00908
Haiku 4.5 $0.00013 $0.00454

Measured 9d ago against content hash 6b99e8aedd71, method: parsed. Prices are Anthropic first-party input rates as of 2026-09-09, from the pricing page.

Security

Grade A, and why

hero scanned grade A with 0 findings against 26 rules in 11 categories — prompt injection, anti-refusal, data exfiltration, privilege escalation, supply chain, agent snooping, system-prompt leakage, SSRF and excessive agency — measured 9d ago.

A static scan of the body, not an audit. Every finding is printed with the line that produced it so you can judge whether it matters here. A mod is markdown that instructs an agent; that is exactly why what it instructs is worth reading.

Nothing flagged

None of the 26 patterns this scan looks for appear in this file: no shell pipes, no recursive deletes, no credential paths, no hidden text, no instruction-override or anti-refusal phrasing, no agent-config snooping. That is not a guarantee, it is the absence of the things that are checkable.

skills/data2story-pro/hero/SKILL.md · 101 lines

How it starts

The opening of the file, as written. The whole thing — 101 lines — stays where its author put it; the contents beside it link to each section on GitHub.

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 containing this SKILL.md (.../skills/data2story-pro/hero).
  • Read: editor.json (interactives.hero — does the centerpiece front-load on the teaser?), scout.json (verified sct_ stills / clips), designer.json (content.hero_strategy + any registered des_ stills), interaction.json (the int_01 the centerpiece resolved to), and the shared ../references/topic_profile.json (is_visual / tags — same classifier the Detective resolved).
  • Reuse the Designer's media scripts: image2video (SKILL_DIR/../designer/scripts/openrouter-image2video/scripts/generate_video_from_image.py), text2image (.../openrouter-text2image/...), and optimize_assets.py (SKILL_DIR/../designer/scripts/optimize_assets.py). Generation routes through OpenRouter (OPENROUTER_API_KEY must be set).
  • Read references/hero_recipes.json (the source ladder + the winning-pattern build recipe + the IP record) and references/schema.json (the hero.json shape) before rendering.
  • Output: PROJECT_DIR/hero.json + assets → PROJECT_DIR/assets/teaser.webm + teaser_web.mp4 + teaser.jpg (poster). The hero IS the teaser section.

Read the full file on GitHub · 101 lines

Files

What ships with it

2 files beside SKILL.md in the same directory: the scripts, references and assets a skill reads on demand. Not counted in the per-session cost; read them before you install if any of them is executable.

Changes

What this file has done since we first saw it

Hashed on every crawl. A supply-chain change to an agent config is a question of when, not whether, so the history is kept rather than the latest state alone.

  1. 9d ago First seen · 101 lines · 127 tokens per session scan A 6b99e8aedd71

Subscribe to this mod's changes

hero is a skill published in the GitHub repository QinghongLin/data2story-skill (155 stars, last pushed 2mo ago), licensed MIT. It adds 127 tokens to every session and 4,539 once invoked, about $0.0006 per session on Opus 5. A static security scan graded it A with 0 findings. No closer match exists in the catalogue, so it is treated as the original; first seen 2026-08-30.

Related

Other skills, from other repositories

ndtv

R ndtv package for network animation. Use for visualizing and animating dynamic networks.

LeoLin990405/r-analytics-skill · 21 tokens

pptx

Use this skill any time a .pptx file is involved in any way — as input, output, or both. This includes: creating slide decks, pitch decks, or presentations; reading, parsing, or extracting text from any .pptx file (even if the extracted content will be used elsewhere, like in an email or summary); editing, modifying…

Lord1Egypt/scientific-agent-toolkit · 152 tokens

scientific-schematics

Create publication-quality scientific diagrams using Nano Banana 2 AI with smart iterative refinement. Uses Gemini 3.1 Pro Preview for quality review. Only regenerates if quality is below threshold for your document type. Specialized in neural network architectures, system diagrams, flowcharts, biological pathways…

Lord1Egypt/scientific-agent-toolkit · 68 tokens

pptx-posters

Create research posters using HTML/CSS that can be exported to PDF or PPTX. Use this skill ONLY when the user explicitly requests PowerPoint/PPTX poster format. For standard research posters, use latex-posters instead. This skill provides modern web-based poster design with responsive layouts and easy visual…

Lord1Egypt/scientific-agent-toolkit · 66 tokens

generate-image

Generate or edit images using AI models (FLUX, Nano Banana 2). Use for general-purpose image generation including photos, illustrations, artwork, visual assets, concept art, and any image that is not a technical diagram or schematic. For flowcharts, circuits, pathways, and technical diagrams, use the…

Lord1Egypt/scientific-agent-toolkit · 71 tokens

scientific-slides

Build slide decks and presentations for research talks. Use this for making PowerPoint slides, conference presentations, seminar talks, research presentations, thesis defense slides, or any scientific talk. Provides slide structure, design templates, timing guidance, and visual validation. Works with PowerPoint and…

Lord1Egypt/scientific-agent-toolkit · 65 tokens