Maintainer of this skill?
by blixvip
Turn a scene prompt into a shot sheet, then have a coding agent draw the film in HTML. No video model.
# Add to your Claude Code skills
git clone https://github.com/blixvip/html-animeSee how html-anime compares with popular alternatives.
html-anime is an open-source ai agents skill for AI coding assistants such as Claude Code, Codex CLI, and ChatGPT, built by blixvip. Turn a scene prompt into a shot sheet, then have a coding agent draw the film in HTML. No video model. It has 50 GitHub stars.
html-anime's catalog security scan is still queued. You can run an instant dependency and prompt-injection check now with the "Scan for vulnerabilities" button above.
Clone the repository with "git clone https://github.com/blixvip/html-anime" and add it to your Claude Code skills directory (see the Installation section above).
html-anime is primarily written in HTML. It is open-source under blixvip on GitHub, so you can review or fork the full source.
Yes. SkillsLLM lists many other AI Agents skills you can browse and compare side by side. Open the AI Agents category from the badge at the top of this page, or use the Related Skills and comparison links further down to weigh html-anime against similar tools.
No comments yet. Be the first to share your thoughts!
Available after the catalog security scan passes.
⚠️ Third-Party Software Notice
This skill is third-party open-source software developed and hosted independently on GitHub. SkillsLLM is an informational directory and does not control or maintain the underlying repository.
Any security checks, ratings, or warnings displayed by SkillsLLM are automated and limited in scope. They do not constitute a security certification or guarantee that the software is safe, error-free, or free from malicious code, vulnerabilities, compromised dependencies, or prompt-injection risks.
Review the source code, permissions, dependencies, and configuration before installing or running any third-party skill. Use is at your own risk. To the maximum extent permitted by applicable law, SkillsLLM is not liable for losses arising from third-party software.
The deep catalog scan for this skill is still queued. Run an instant dependency check now instead.
An anime, written as HTML. You write a scene. The site turns it into a shot sheet: holds, one expensive shot, a closed color script. Paste that sheet into Claude, Codex, Cursor, or Grok. The agent draws the frames.
The pictures are HTML, timed for HyperFrames. Nothing here calls a video model.
Kokuyō. Watch it on the site or open media/film.mp4.
git clone https://github.com/blixvip/html-anime.git
cd html-anime
Open the folder in the agent you already use and paste a sheet as the first message. The site builds the sheet in the browser. harness/compile.js builds the same sheet in Node.
Serve the site from this folder, then open the address it prints:
python -m http.server
Opening index.html as a file shows that same instruction. The sheet will not run until the folder is served.
Or build a sheet in Node (no dependencies):
import { compileBrief } from "./harness/compile.js";
const sheet = compileBrief({
logline: "On a roof in the rain, a red moon opens and a line of light falls.",
seconds: 8, // 8, 12, or 20
aspect: "16:9", // or "9:16"
script: "indigo", // indigo, eclipse, noon, or festival
dialogue: "The rain hid the sound of the blade.",
});
console.log(sheet.ok ? sheet.markdown : sheet.error);
| Agent | What it reads | Open |
|---|---|---|
| Claude Code | CLAUDE.md |
claude |
| Codex | AGENTS.md |
codex |
| Cursor | .cursor/rules/html-anime.mdc |
cursor . |
| Grok | AGENTS.md |
grok |
index.html — the siteskills/html-anime-direct/SKILL.md — which shots existskills/html-anime-cel/SKILL.md — how a frame is paintedskills/html-anime-timing/SKILL.md — twos, holds, the smearskills/html-anime-camera/SKILL.md — the cut and the frameskills/html-anime-render/SKILL.md — the HyperFrames fileharness/compile.js — logline to sheetmedia/film.mp4 — Kokuyō, the filmmedia/city.jpg, media/moon.jpg, media/fight.jpg, media/helm.jpg, media/ren.jpg — stills from itfilms/roof/ — an 8 second reference. File shape and the color-dip cut, not a film to remixAGENTS.md — the contractnpm test
Checks that every runtime sums exactly and has one sakuga shot, and that the sheet carries the size, frame count, and dialogue.
cd films/roof
npx hyperframes preview
Lint before you trust a new film:
npx hyperframes lint
npx hyperframes validate
💬 Join the Discord for questions, help, feedback, and updates.
MIT. The reference film's font keeps its own license: see films/roof/fonts/NOTICE.txt.