How do I install the Handdraw Skill skill?

Run npx skillmds@latest add tobewin/handdraw-skill in your terminal (requires Node.js), paste this page's agent-chat prompt into Claude, Cursor, or any MCP-connected agent, or download the SKILL.md file and copy it into your agent's skills directory.

Is Handdraw Skill safe to use?

This skill has not completed SkillMD's automated safety review yet. Independent scanners report: SkillSpector: PASS, Skill Scanner: PASS. Capability flags: docs only. SkillMD never runs a skill's scripts for you; review the SKILL.md before installing.

Which AI agents work with Handdraw Skill?

This skill is tagged as working with Claude Code, Claude.ai, OpenAI Codex. SKILL.md is an open format, so most agents that read a skills directory can load it too.

Is Handdraw Skill free to use?

Yes. Installing skills from SkillMD is free, and the skill stays under its author's original license.

Who published Handdraw Skill?

ToBeWin (@tobewin) published this skill. Their other Agent Skills are listed on their SkillMD profile.

Handdraw Skill by tobewin — Agent Skill

Name: Handdraw Skill
Rating: 4.5 (4 reviews)
Author: ToBeWin

Handdraw Skill

Create deterministic hand-drawn, whiteboard, educational, and explainer MP4 animations from a JSON Animation DSL. Use when a user asks to make or edit a hand-drawn video, whiteboard animation, animated SVG explainer, or programmatic animation video.

ToBeWin Updated Sep 22, 2026

File contents

HandDraw Skill

Create an editable animation project, validate the DSL, render it, and verify the MP4. Use the portable scripts/handdraw.mjs CLI from this skill root.

Workflow

Convert the request into short scenes with one visual concept each.
Create project.json from the schema in references/dsl.md. Use seconds for all timing.
Use only local, path-oriented SVG assets. Put them in an assets/ folder next to the project. Do not use raster images or text-to-video models.
Keep each scene at eight objects or fewer. Give every visible object an explicit animation.
Run node scripts/check-environment.mjs once on a new machine. Fix every missing dependency.
Run node scripts/handdraw.mjs validate <project.json> and fix every error.
When narration is requested, add audio.narration clips as described in references/dsl.md. Use the free Edge TTS provider by default; it needs network access but no API key, account, or paid API.
Render with node scripts/handdraw.mjs render <project.json> --output <video.mp4> --assets <assets-dir>.
Confirm the MP4 exists and contains both video and audio streams when narration was requested.

Animation choices

Use draw for SVG line art.
Use write for text; it is a deterministic reveal, not true handwriting stroke order.
Use move, rotate, and scale sparingly to direct attention.
Use fade for entrances and exits.
Prefer 3–8 second scenes; avoid simultaneous unrelated motion.

Constraints

Do not edit renderer implementation just to accommodate an invalid DSL; correct the project first.
Do not rely on external URLs for assets.
Preserve the requested aspect ratio, duration, and language.
If no duration is requested, target 30 seconds and state the assumption in the project title or handoff.

---name: handdraw-skilldescription: Create deterministic hand-drawn, whiteboard, educational, and explainer MP4 animations from a JSON Animation DSL. Use when a user asks to make or edit a hand-drawn video, whiteboard animation, animated SVG explainer, or programmatic animation video.---# HandDraw SkillCreate an editable animation project, validate the DSL, render it, and verify the MP4. Use the portable `scripts/handdraw.mjs` CLI from this skill root.## Workflow1. Convert the request into short scenes with one visual concept each.2. Create `project.json` from the schema in [references/dsl.md](references/dsl.md). Use seconds for all timing.3. Use only local, path-oriented SVG assets. Put them in an `assets/` folder next to the project. Do not use raster images or text-to-video models.4. Keep each scene at eight objects or fewer. Give every visible object an explicit animation.5. Run `node scripts/check-environment.mjs` once on a new machine. Fix every missing dependency.6. Run `node scripts/handdraw.mjs validate <project.json>` and fix every error.6. When narration is requested, add `audio.narration` clips as described in [references/dsl.md](references/dsl.md). Use the free Edge TTS provider by default; it needs network access but no API key, account, or paid API.8. Render with `node scripts/handdraw.mjs render <project.json> --output <video.mp4> --assets <assets-dir>`.9. Confirm the MP4 exists and contains both video and audio streams when narration was requested.## Animation choices- Use `draw` for SVG line art.- Use `write` for text; it is a deterministic reveal, not true handwriting stroke order.- Use `move`, `rotate`, and `scale` sparingly to direct attention.- Use `fade` for entrances and exits.- Prefer 3–8 second scenes; avoid simultaneous unrelated motion.## Constraints- Do not edit renderer implementation just to accommodate an invalid DSL; correct the project first.- Do not rely on external URLs for assets.- Preserve the requested aspect ratio, duration, and language.- If no duration is requested, target 30 seconds and state the assumption in the project title or handoff.

Frequently asked questions