sn-motion-html
Installation
SKILL.md
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
- 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.
- For factual or source-based stories, research before outlining and record sources separately from display copy.
- Produce a chapter blueprint, shot/connector plan, and character/object bible before generating the full media set.
- 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.
- 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.
- 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.
- 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.
- Choose or design an interface treatment around the continuous stage, assemble from structured content, then verify media and browser behavior.