New: 97,000+ skills indexed from GitHub repos with 100+ stars · every skill safety-checkedBrowse top skillsTop skills
Esc to closeBrowse all skills
Submit a skillBrowse skills
Submit a skillBrowse skills

Agent skill

SN Motion HTML

by OpenSenseNova in OpenSenseNova/SenseNova-Skills

Builds HTML stories where one continuous camera journey advances with page progress, using researched structure, AI stills, Seedance video clips and browser QA.

MITAuto-check: notesMedia & Creative

Install SN Motion HTML

skills CLI
$ npx skills add OpenSenseNova/SenseNova-Skills --skill sn-motion-html -a claude-code

Project install by default; add -g for ~/.claude/skills/.

GitHub CLI
$ gh skill install OpenSenseNova/SenseNova-Skills sn-motion-html --agent claude-code

Project scope by default; add --scope user for a personal install. Needs GitHub CLI 2.90.0 or later (public preview).

Manual copy
$ git clone --depth 1 https://github.com/OpenSenseNova/SenseNova-Skills.git skills-src && mkdir -p .claude/skills && cp -r skills-src/skills/sn-motion-html .claude/skills/sn-motion-html && rm -rf skills-src

Use ~/.claude/skills/ instead of .claude/skills for a personal install. The folder must contain SKILL.md.

Claude Code skills documentation · loads skills from .claude/skills/

Facts

Skill name
sn-motion-html
GitHub stars
5.7k
Token cost
~2.2k tokens
SKILL.md length
1,078 words
Files
34 (incl. scripts, references, assets)
Skills in repo
36
Repo updated
First seen
Licence
MIT

At a glance

Builds HTML stories where one continuous camera journey advances with page progress, using researched structure, AI stills, Seedance video clips and browser QA.

  • Works in 8 steps: Resolve the story goal, audience,… → For factual or source-based stories,… → Produce a chapter blueprint,… → …
  • Making an immersive scroll journey through a place, product or timeline
  • SKILL.md covers Route the work, Required user approval gates, Start from the template and Production invariants, plus 1 more section
  • Calls python

What it does

The skill creates a reusable project rather than a single HTML file. Subject, chapter count, visual style, interface treatment, copy placement, language, image and video models, clip duration and hosting path all stay configurable. The core idea is one fixed media stage and one ordered timeline that runs from the first scene through every connector clip to the last scene, driven by page progress.

The workflow begins with the story goal, audience and available API credentials, researches factual stories before outlining, and then produces a chapter blueprint, a shot and connector plan and a character and object bible. An image-generation capability must exist in the environment, or the agent reports the blocker. You approve the visual style and shot arrangement at two gates, the full still set is inspected before any paid video call, and you authorize the first paid video request explicitly.

The template includes anime, CGI and cinematic style presets, a story.json content file, prompt files and a video manifest. It is not meant for ordinary autoplay video pages or general web apps.

When your agent uses it

  • Making an immersive scroll journey through a place, product or timeline
  • Turning a fictional world or narrative into a scene-based visual story
  • Producing connected video clips that flow from one scene into the next

Example prompts

  • “Build a motion story about the history of the printing press with a cinematic look.”
  • “Create an anime-style journey through a floating city, with connector clips between scenes.”
  • “Make a story page for our new e-bike, and show me the style review before any video is generated.”

Requirements

  • An image-generation tool or skill available to the agent
  • API credentials for Seedance video generation
  • A browser for the QA step

Workflow steps

8 steps, taken from the first numbered list in SKILL.md.

  1. Resolve the story goal, audience, factual fidelity, chapter scale, visual language, copy language, target devices, sound policy, and…
  2. For factual or source-based stories, research before outlining and record sources separately from display copy.
  3. Produce a chapter blueprint, shot/connector plan, and character/object bible before generating the full media set.
  4. Detect the image-generation capability available in the current environment before generating any stills. The capability may be a callable…
  5. Prepare a review package containing the proposed visual style and the content/shot arrangement. When an image capability is available…
  6. Obtain the user's explicit approval at both approval gates below. After approval, generate the complete still set and inspect it before…
  7. Dry-run the video manifest and representative clip. Obtain explicit authorization immediately before the first paid video API request…
  8. Choose or design an interface treatment around the continuous stage, assemble from structured content, then verify media and browser…

What it can do on your machine

Read from SKILL.md and the folder at commit 5abde96. It shows what the files ask for, not the result of running them.

  • Tool permissions

    Pre-approves nothing: there is no allowed-tools line, so your agent's usual permission prompts apply.

    From allowed-tools in the SKILL.md frontmatter.

  • Runs code

    Ships 1 file in scripts/, which the agent can run.

    Shell commands in SKILL.md call:

    • python

    From the folder's file list and the shell code blocks in SKILL.md.

  • Network

    No URLs in SKILL.md.

    From URLs in SKILL.md, links to its own repository left out.

  • Credentials

    Names no API keys, tokens, secrets or passwords.

    From names ending in _API_KEY, _TOKEN, _SECRET, _KEY or _PASSWORD in SKILL.md.

Context cost

SN Motion HTML loads about 2.2k tokens when it runs, and up to ~7.5k if it reads all its reference files. Until then it costs about 116 tokens; SKILL.md has 1,078 words of instructions outside code blocks.

Always · name and description, kept in context so the agent knows when to use it
~116
When it runs · the whole SKILL.md, loaded when a task matches
~2.2k
With references · SKILL.md plus every file in references/, read only if the agent opens them
~7.5k

Estimates: characters ÷ 4, the usual rule of thumb; real counts depend on the model's tokenizer. Scripts and assets cost tokens only if the agent reads them.

Safety

Auto-check: notes

The automated check noted patterns worth knowing about, such as sudo or a known installer.

  • NoteMentions a .env fileSKILL.md:76
    - Use project-local `.env`, exclude it from version control, and ensure a static server cannot expose it.

Automated static check — not a guarantee. Review scripts before installing. It scans the text of SKILL.md for risky patterns (piping downloads into a shell, reading credential files, hidden Unicode, destructive commands); the scripts in this folder are not scanned.

SKILL.md

The full file from OpenSenseNova/SenseNova-Skills at commit 5abde96, republished under its MIT licence (© OpenSenseNova). 1,078 words, ~2,186 tokens.

Download SKILL.mdSave it as .claude/skills/sn-motion-html/SKILL.md (or your agent's skills folder). This skill also uses 33 other files; get the full folder from GitHub.
name
sn-motion-html
description
Build continuous-shot motion-driven HTML stories from a subject or narrative, including research, story structure, consistent AI stills, Seedance scene and connector clips, interface styling, media normalization, and browser QA. Use for immersive journeys, timelines, product stories, fictional worlds, or other scene-based visual narratives whose camera should flow from beginning to end; not for ordinary autoplay video pages or general web apps.

SN Motion HTML

Create a reusable project, not a one-off HTML file. Keep subject matter, chapter count, visual style, interface treatment, copy placement, language, image model, video model, clip duration, and hosting path configurable.

The defining experience is one continuous camera journey controlled by page progress. Preserve a single fixed media stage and one ordered timeline from the first scene through every connector to the final scene. Differentiate projects through transparent copy composition, header treatment, type, navigation, and scene-specific copy placement—not by replacing the continuous stage with separate article media blocks.

Route the work

  1. Resolve the story goal, audience, factual fidelity, chapter scale, visual language, copy language, target devices, sound policy, and available API credentials. Make reasonable defaults only for low-risk implementation details.
  2. For factual or source-based stories, research before outlining and record sources separately from display copy.
  3. Produce a chapter blueprint, shot/connector plan, and character/object bible before generating the full media set.
  4. Detect the image-generation capability available in the current environment before generating any stills. The capability may be a callable image tool, a skill that exposes or instructs an image workflow, or both. Use the available capability when present; if no suitable capability is available, report that blocker to the user before continuing past the still-generation stage.
  5. Prepare a review package containing the proposed visual style and the content/shot arrangement. When an image capability is available, generate only the small reference/gate set needed for review.
  6. Obtain the user's explicit approval at both approval gates below. After approval, generate the complete still set and inspect it before any paid video batch.
  7. Dry-run the video manifest and representative clip. Obtain explicit authorization immediately before the first paid video API request, then generate scene clips and connector clips in dependency-aware parallel phases.
  8. Choose or design an interface treatment around the continuous stage, assemble from structured content, then verify media and browser behavior.

Required user approval gates

Do not silently infer approval from an unanswered message or from a prior general instruction. If the user requests changes, revise the package and present the affected gate again.

  1. Visual style approval: present the style preamble and identity blocks, including medium, palette, materials, lighting, camera grammar, composition, negative constraints, and recurring character/product treatment. When image generation is available, include a small reference/gate set (normally opening, middle, and ending stills). Do not generate the complete still set until the user explicitly approves the visual direction.
  2. Content and shot-plan approval: present the chapter order, each chapter's dominant visual event and display copy, scene framing/camera intent, connector start and destination, and per-scene copy position. Do not generate the complete still set or write the final video manifest until the user explicitly approves this arrangement.

These are separate decisions: style approval determines how the world looks; content and shot-plan approval determines what is shown and how the camera moves through it. The later paid-video approval is an authorization gate, not a substitute for either creative approval.

Read references/workflow.md for the full production sequence. Read only the additional references needed for the current stage:

Start from the template

Run:

bash
python scripts/init_project.py /absolute/output/path --title "Story title" --style cinematic --ui folio

The initializer copies assets/template/ and creates the media directories. Replace the example story and manifests; do not leave placeholder subject matter in the final project.

Choose --style anime, --style cinematic, or --style cgi. Separately choose --ui folio, --ui caption, or --ui graphic. Style controls the generated world; UI controls header, transparent copy treatment, navigation, and type composition. Per-chapter copyPosition may be left, right, bottom, or center when the focal subject requires it.

All UI presets use the same continuous-shot runtime. Adapt the visual chrome materially for the subject, but do not interrupt the camera chain or turn chapters into separate media cards.

It also copies the reusable scripts into the new project. From the project root, the common commands are:

bash
python scripts/seedance_pipeline.py . plan
python scripts/seedance_pipeline.py . all --workers 4
python scripts/verify_media.py .
python scripts/contact_sheet.py .
python scripts/serve_project.py . --port 8080
Show full SKILL.md (396 more words)Show less

Production invariants

  • Keep narrative data in content/story.json; do not hardcode chapter copy into the runtime.
  • Keep each chapter's complete, concise copy visible together. Do not rotate paragraphs within one clip unless explicitly requested.
  • Maintain a single style preamble and immutable identity blocks for recurring characters or products.
  • Require explicit user approval of the visual style and the content/shot plan before generating the complete still set or final video manifest. Run a small still-image consistency gate before generating the full set. The gate requires an available image-generation capability (callable tool, applicable skill workflow, or both); do not silently substitute placeholder stills when that capability is absent.
  • Use one fixed full-viewport media stage. Ordered scene and connector clips together form one virtual continuous take.
  • Scene clips and every adjacent connector are required unless the user explicitly accepts a visible cut.
  • Keep one complete, static, transparent copy block per scene clip. Connector clips carry no changing paragraph sequence.
  • Copy articles have no solid card fill by default. Use localized edge-free gradients, text shadow, or fine rules for contrast so the words remain visually integrated with the scene.
  • Dives may run in parallel. Connectors must wait until all adjacent dive boundary frames exist, then may run in parallel.
  • Immediately download provider results. Normalize all final clips to identical codec, dimensions, frame rate, exact duration, no audio unless requested, short GOP, and faststart.
  • Use project-local .env, exclude it from version control, and ensure a static server cannot expose it.
  • Never print secrets or embed them in frontend files. Do not infer authorization for paid generation; if it is not explicit, stop after the dry run. Creative approval does not imply paid-generation authorization.
  • Bound automated retries. Treat authentication, permission, billing, and model-activation errors as non-retryable.
  • Preserve still posters and a reduced-motion path so the story remains usable when video loading or motion is unavailable.

Validation

Before delivery:

  1. Validate JSON, JavaScript, shell, and Python syntax.
  2. Run scripts/verify_media.py PROJECT_ROOT; require the declared count, dimensions, frame rate, codec, and exact duration.
  3. Test a fresh browser session, reverse and forward progress, chapter navigation, transition boundaries, missing-video fallback, and reduced motion.
  4. Inspect a midpoint contact sheet. Prioritize correct identities, key objects, and scene meaning over incidental generative details unless the user asks for stricter fidelity.
  5. Report the preview URL, project path, media directories, model configuration, QA result, and any remaining external blocker.

© OpenSenseNova, MIT. Rendered from Markdown: HTML in the file is shown as text, images as links, and headings moved down two levels. Raw file

Files

SKILL.md and 33 other files (scripts, references, assets) in skills/sn-motion-html of OpenSenseNova/SenseNova-Skills.

  • SKILL.md
  • agents/openai.yaml
  • assets/style-presets/anime.json
  • assets/style-presets/cgi.json
  • assets/style-presets/cinematic.json
  • assets/template/.env.example
  • assets/template/.gitignore
  • assets/template/content/story.json
  • assets/template/index.html
  • assets/template/prompts/style-motion.txt
  • assets/template/prompts/style-preamble.txt
  • assets/template/prompts/video-manifest.json
  • assets/template/prompts/video/connectors/01-opening-to-destination.txt
  • … and 21 more

Open the folder on GitHubat commit 5abde96

Compare with similar skills

SN Motion HTML next to the 5 skills that share the most tags, products or categories with it. Stars are the repository's; “used in” counts other GitHub owners with a copy.

SN Motion HTML compared with similar skills
SkillStarsUsed inTokensAuto-checkLicenceRepo updated
SN Motion HTML this skillOpenSenseNova/SenseNova-Skills5.7k—~2.2kAutomated safety check: NotesMIT
Scroll World Landing Pageoso95/scroll-world9.7k1 repos~12kAutomated safety check: NotesMIT
Character Design with genmediafal-ai-community/skills249—~1.3kAutomated safety check: PassNone
Professional Media Promptsagentscope-ai/QwenPaw35k—~2kAutomated safety check: PassApache-2.0
Higgsfield FacsOSideMedia/higgsfield-ai-prompt-skill697—~6.8kAutomated safety check: PassMIT
Higgsfield Shotlist DirectorOSideMedia/higgsfield-ai-prompt-skill697—~6kAutomated safety check: PassMIT

Similar skills

  • Scroll World Landing Page

    oso95/scroll-world

    Builds a scroll-driven landing page where a pre-rendered camera flies through connected AI-generated scenes, using Higgsfield for stills and video clips.

    9.7k GitHub starsUsed in 1 repo~12k tokens
    Frontend & DesignAuto-check: notes

  • Character Design with genmedia

    fal-ai-community/skills

    Builds consistent characters, reference and expression sheets, outfit variations and character-to-video shots with the genmedia CLI while keeping identity stable.

    249 GitHub stars~1.3k tokensUpdated 8 days ago
    Media & CreativeAuto-check passed

  • Professional Media Prompts

    agentscope-ai/QwenPaw

    Compiles production-grade prompts for character identity boards, cinematic storyboards and reference-to-video generation, keeping characters and shots consistent.

    35k GitHub stars~2k tokensUpdated 7 days ago
    Media & CreativeAuto-check passed

  • Higgsfield Facs

    OSideMedia/higgsfield-ai-prompt-skill

    Controls facial expressions in Seedance 2.0 with FACS (Facial Action Coding System) Action Unit codes — muscle-level direction (AU12 = lip-corner puller, AU6 = cheek raiser) instead of emotion labels.

    697 GitHub stars~6.8k tokensUpdated 10 days ago
    Media & CreativeAuto-check passed

  • Higgsfield Shotlist Director

    OSideMedia/higgsfield-ai-prompt-skill

    Turns a brief, script, scene breakdown, treatment, or story idea into ONE connected director's shotlist for Seedance 2.0 — a single editable HTML artifact with a global Style Prefix, an @-asset…

    697 GitHub stars~6k tokensUpdated 10 days ago
    Frontend & DesignAuto-check passed

  • Pp Wavespeed

    mvanhorn/printing-press-library

    Run any WaveSpeed model from the terminal, with price checks, safe uploads, and recovery-safe downloads.

    2.1k GitHub stars~8.4k tokensUpdated yesterday
    Media & CreativeAuto-check: notes

More from OpenSenseNova/SenseNova-Skills

All 36 skills in this repo

  • SenseNova PPT Fallback Tools

    OpenSenseNova/SenseNova-Skills

    Fallback scripts for web search, image search and download, and image generation that PPT skills use only when the host agent lacks or fails its own tools.

    5.7k GitHub stars~575 tokensUpdated 19 days ago
    Auto-check: notes

  • SenseNova PPT Workbench

    OpenSenseNova/SenseNova-Skills

    Opens the PPT Workbench web editor for an existing SenseNova HTML slide deck so you can preview, inspect and visually edit it without regenerating.

    5.7k GitHub stars~2.5k tokensUpdated 19 days ago
    Auto-check: notes

  • SenseNova PPT Creative Renderer

    OpenSenseNova/SenseNova-Skills

    Turns an approved slide outline into a full-page image for every slide, one 16:9 PNG per page, and optionally packages the set into a PPTX.

    5.7k GitHub stars~1.2k tokensUpdated 19 days ago
    Auto-check passed

  • SenseNova PPT Entry

    OpenSenseNova/SenseNova-Skills

    Entry point for SenseNova presentation generation: creates a task folder, picks depth, output format and design richness, and routes to the right PPT skill.

    5.7k GitHub stars~2.7k tokensUpdated 19 days ago
    Auto-check: notes

  • China Market Open Data Search

    OpenSenseNova/SenseNova-Skills

    Researches Chinese market, macro, trade, procurement, listed-company and regulatory information from free official sources that need no sign-up or API key.

    5.7k GitHub stars~954 tokensUpdated 19 days ago
    Auto-check: notes

  • SenseNova Image Base Tools

    OpenSenseNova/SenseNova-Skills

    Low-level SenseNova tools for image generation, image editing, image recognition with a VLM and text optimization with an LLM, meant to be called by higher-level skills rather than directly.

    5.7k GitHub stars~3.2k tokensUpdated 19 days ago
    Auto-check passed

Works with

Categories

Questions about SN Motion HTML

What does SN Motion HTML do?

Builds HTML stories where one continuous camera journey advances with page progress, using researched structure, AI stills, Seedance video clips and browser QA. The skill creates a reusable project rather than a single HTML file. Subject, chapter count, visual style, interface treatment, copy placement, language, image and video models, clip duration and hosting path all stay configurable.

When should I use SN Motion HTML?

SN Motion HTML fits situations like: making an immersive scroll journey through a place, product or timeline; turning a fictional world or narrative into a scene-based visual story; producing connected video clips that flow from one scene into the next.

How do I install SN Motion HTML in Claude Code?

Run `npx skills add OpenSenseNova/SenseNova-Skills --skill sn-motion-html -a claude-code`. Or copy the skill folder (skills/sn-motion-html in OpenSenseNova/SenseNova-Skills) into .claude/skills/sn-motion-html in your project. Claude Code loads it when a task matches its description.

How do I install SN Motion HTML in Codex?

Run `npx skills add OpenSenseNova/SenseNova-Skills --skill sn-motion-html -a codex`. Or copy the skill folder (skills/sn-motion-html in OpenSenseNova/SenseNova-Skills) into .agents/skills/sn-motion-html in your project. Codex loads it when a task matches its description.

Can I use SN Motion HTML in Cursor, Gemini CLI or GitHub Copilot?

Cursor, Gemini CLI, GitHub Copilot and OpenCode also load SKILL.md folders. With the skills CLI, run `npx skills add OpenSenseNova/SenseNova-Skills --skill sn-motion-html -a cursor` (or -a gemini-cli, github-copilot or opencode for the others). To copy it by hand, put the folder in .cursor/skills/sn-motion-html, .gemini/skills/sn-motion-html, .github/skills/sn-motion-html and .opencode/skills/sn-motion-html in your project.

What does SN Motion HTML need to run?

Going by SKILL.md and its folder, SN Motion HTML needs the command-line tools its instructions call (python). Our summary lists: An image-generation tool or skill available to the agent; API credentials for Seedance video generation; A browser for the QA step.

Does SN Motion HTML access the network?

SKILL.md contains no URLs. Any network use would come from the scripts or tools the agent runs. This is read from the text; nothing was executed.

Is SN Motion HTML safe to install?

Our automated static check of SKILL.md found notes only (mentions a .env file), nothing it rates as a warning. It is not a guarantee. The check reads SKILL.md only: the scripts in the folder are not scanned, so read them before running anything.

What licence does SN Motion HTML use?

SN Motion HTML is published under the MIT licence (the repository's licence). It allows redistribution, so the full SKILL.md is shown on this page.

How many tokens does SN Motion HTML use?

About 2.2k tokens (SKILL.md is roughly 8.7k characters). Agents keep only the skill's name and description in context until a task matches; then they load SKILL.md in full. Its references folder adds about 5.3k tokens, read only when the agent opens those files.

What are the alternatives to SN Motion HTML?

Skills that share tags, products or a category with SN Motion HTML: Scroll World Landing Page (oso95/scroll-world, 9.7k stars), Character Design with genmedia (fal-ai-community/skills, 249 stars), Professional Media Prompts (agentscope-ai/QwenPaw, 35k stars) and Higgsfield Facs (OSideMedia/higgsfield-ai-prompt-skill, 697 stars). The comparison table on this page puts their stars, adoption, token cost, safety result and licence side by side.

Who maintains SN Motion HTML?

OpenSenseNova (a GitHub organization) maintains it in OpenSenseNova/SenseNova-Skills, which has 5,743 GitHub stars. The repository holds 36 skills in this directory. The repository was last updated on September 18, 2026.

Source: OpenSenseNova/SenseNova-Skills on GitHub. Facts on this page come from the repository at the commit we read; the author's words are quoted as theirs.