Design & media

HandDraw Skill

Try it

Create deterministic hand-drawn animation videos

What it does

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.

The skill document

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

  1. Convert the request into short scenes with one visual concept each.
  2. Create project.json from the schema in 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 and fix every error.
  7. 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.
  8. Render with node scripts/handdraw.mjs render --output --assets .
  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.

Related skills

分镜脚本 Storyboard

storyboard to video, character animation, animated short, AI anime, multi-shot video — script, characters and shot prompts, ref-sheets and first/last frames, i2v shot videos, voice/TTS plus music/SFX/subtitles, then Remotion assembles and renders. Use for a multi-shot animated short with consistent characters.

11 installs

ai-storyboard-generator

Turn a script, scene, or ad brief into a structured AI storyboard plan with a practical shot list and one to four storyboard key-frame images. Plan shot types, camera angles and movement, action, timing, dialogue, and sound for short films, ads, animation, social video, motion comics, and creative pitches.

Paper Collage Remotion

Create, revise, or render layered paper-cutout / collage animations in Remotion. Use for videos where backgrounds, characters, props, and foreground decorati...

1 installs

GoAI Video Gen

Generate AI videos via GoAI API. Use when the user asks to create, generate, render, or make videos, animations, clips, shorts, or motion content, including...

15 installs