story-to-handdrawn-video
A skill that turns Chinese story copy or a set of ordered images into a vertical hand-drawn animation, a silent diary-comic picture track
Medium risk
We rate an entry medium when the tool runs code, makes network calls or reads project files. Check what exactly it does before installing.
Why this level
- The skill runs local render scripts, image generation and FFmpeg
- The OpenAI API path calls a third-party service when a key is set
Install
In your terminal, with SkillFoxx CLI
npx skillfoxx add skills/story-to-handdrawn-videoDetects the agents on your machine, checks the risk and pins the version.
Other ways to install
Run in a terminal in the project folder
npx skills add gnipbao/story-to-handdrawn-video --skill story-to-handdrawn-video -a claude-code -yThe skills tool installs the current version from the repository. Add the -g flag to use the skill in every project.
Without third-party tools, from commit 198aefa
tmp=$(mktemp -d)
git clone --filter=blob:none --no-checkout https://github.com/gnipbao/story-to-handdrawn-video.git "$tmp"
git -C "$tmp" sparse-checkout set --no-cone /skill-package/story-to-handdrawn-video/
git -C "$tmp" checkout 198aefa9b298af3a20d3bd757c93433623d38ccd
mkdir -p .claude/skills
cp -R "$tmp/skill-package/story-to-handdrawn-video" .claude/skills/story-to-handdrawn-videoCommands for macOS and Linux, on Windows run them in Git Bash.
Run in a terminal in the project folder
npx skills add gnipbao/story-to-handdrawn-video --skill story-to-handdrawn-video -a cursor -yThe skills tool installs the current version from the repository. Add the -g flag to use the skill in every project.
Without third-party tools, from commit 198aefa
tmp=$(mktemp -d)
git clone --filter=blob:none --no-checkout https://github.com/gnipbao/story-to-handdrawn-video.git "$tmp"
git -C "$tmp" sparse-checkout set --no-cone /skill-package/story-to-handdrawn-video/
git -C "$tmp" checkout 198aefa9b298af3a20d3bd757c93433623d38ccd
mkdir -p .agents/skills
cp -R "$tmp/skill-package/story-to-handdrawn-video" .agents/skills/story-to-handdrawn-videoCommands for macOS and Linux, on Windows run them in Git Bash.
Run in a terminal in the project folder
npx skills add gnipbao/story-to-handdrawn-video --skill story-to-handdrawn-video -a github-copilot -yThe skills tool installs the current version from the repository. Add the -g flag to use the skill in every project.
Without third-party tools, from commit 198aefa
tmp=$(mktemp -d)
git clone --filter=blob:none --no-checkout https://github.com/gnipbao/story-to-handdrawn-video.git "$tmp"
git -C "$tmp" sparse-checkout set --no-cone /skill-package/story-to-handdrawn-video/
git -C "$tmp" checkout 198aefa9b298af3a20d3bd757c93433623d38ccd
mkdir -p .github/skills
cp -R "$tmp/skill-package/story-to-handdrawn-video" .github/skills/story-to-handdrawn-videoCommands for macOS and Linux, on Windows run them in Git Bash.
Run in a terminal in the project folder
npx skills add gnipbao/story-to-handdrawn-video --skill story-to-handdrawn-video -a codex -yThe skills tool installs the current version from the repository. Add the -g flag to use the skill in every project.
Without third-party tools, from commit 198aefa
tmp=$(mktemp -d)
git clone --filter=blob:none --no-checkout https://github.com/gnipbao/story-to-handdrawn-video.git "$tmp"
git -C "$tmp" sparse-checkout set --no-cone /skill-package/story-to-handdrawn-video/
git -C "$tmp" checkout 198aefa9b298af3a20d3bd757c93433623d38ccd
mkdir -p .agents/skills
cp -R "$tmp/skill-package/story-to-handdrawn-video" .agents/skills/story-to-handdrawn-videoCommands for macOS and Linux, on Windows run them in Git Bash.
Run in a terminal in the project folder
npx skills add gnipbao/story-to-handdrawn-video --skill story-to-handdrawn-video -a gemini-cli -yThe skills tool installs the current version from the repository. Add the -g flag to use the skill in every project.
Without third-party tools, from commit 198aefa
tmp=$(mktemp -d)
git clone --filter=blob:none --no-checkout https://github.com/gnipbao/story-to-handdrawn-video.git "$tmp"
git -C "$tmp" sparse-checkout set --no-cone /skill-package/story-to-handdrawn-video/
git -C "$tmp" checkout 198aefa9b298af3a20d3bd757c93433623d38ccd
mkdir -p .agents/skills
cp -R "$tmp/skill-package/story-to-handdrawn-video" .agents/skills/story-to-handdrawn-videoCommands for macOS and Linux, on Windows run them in Git Bash.
Run in a terminal in the project folder
tmp=$(mktemp -d)
git clone --filter=blob:none --no-checkout https://github.com/gnipbao/story-to-handdrawn-video.git "$tmp"
git -C "$tmp" sparse-checkout set --no-cone /skill-package/story-to-handdrawn-video/
git -C "$tmp" checkout 198aefa9b298af3a20d3bd757c93433623d38ccd
mkdir -p .devin/skills
cp -R "$tmp/skill-package/story-to-handdrawn-video" .devin/skills/story-to-handdrawn-videoCommands for macOS and Linux, on Windows run them in Git Bash.
Formerly Windsurf.
Run in a terminal in the project folder
npx skills add gnipbao/story-to-handdrawn-video --skill story-to-handdrawn-video -a cline -yThe skills tool installs the current version from the repository. Add the -g flag to use the skill in every project.
Without third-party tools, from commit 198aefa
tmp=$(mktemp -d)
git clone --filter=blob:none --no-checkout https://github.com/gnipbao/story-to-handdrawn-video.git "$tmp"
git -C "$tmp" sparse-checkout set --no-cone /skill-package/story-to-handdrawn-video/
git -C "$tmp" checkout 198aefa9b298af3a20d3bd757c93433623d38ccd
mkdir -p .cline/skills
cp -R "$tmp/skill-package/story-to-handdrawn-video" .cline/skills/story-to-handdrawn-videoCommands for macOS and Linux, on Windows run them in Git Bash.
Run in a terminal in the project folder
npx skills add gnipbao/story-to-handdrawn-video --skill story-to-handdrawn-video -a roo -yThe skills tool installs the current version from the repository. Add the -g flag to use the skill in every project.
Without third-party tools, from commit 198aefa
tmp=$(mktemp -d)
git clone --filter=blob:none --no-checkout https://github.com/gnipbao/story-to-handdrawn-video.git "$tmp"
git -C "$tmp" sparse-checkout set --no-cone /skill-package/story-to-handdrawn-video/
git -C "$tmp" checkout 198aefa9b298af3a20d3bd757c93433623d38ccd
mkdir -p .roo/skills
cp -R "$tmp/skill-package/story-to-handdrawn-video" .roo/skills/story-to-handdrawn-videoCommands for macOS and Linux, on Windows run them in Git Bash.
A fork of Roo Code, same .roo folders.
Run in a terminal in the project folder
npx skills add gnipbao/story-to-handdrawn-video --skill story-to-handdrawn-video -a opencode -yThe skills tool installs the current version from the repository. Add the -g flag to use the skill in every project.
Without third-party tools, from commit 198aefa
tmp=$(mktemp -d)
git clone --filter=blob:none --no-checkout https://github.com/gnipbao/story-to-handdrawn-video.git "$tmp"
git -C "$tmp" sparse-checkout set --no-cone /skill-package/story-to-handdrawn-video/
git -C "$tmp" checkout 198aefa9b298af3a20d3bd757c93433623d38ccd
mkdir -p .agents/skills
cp -R "$tmp/skill-package/story-to-handdrawn-video" .agents/skills/story-to-handdrawn-videoCommands for macOS and Linux, on Windows run them in Git Bash.
Run in a terminal in the project folder
tmp=$(mktemp -d)
git clone --filter=blob:none --no-checkout https://github.com/gnipbao/story-to-handdrawn-video.git "$tmp"
git -C "$tmp" sparse-checkout set --no-cone /skill-package/story-to-handdrawn-video/
git -C "$tmp" checkout 198aefa9b298af3a20d3bd757c93433623d38ccd
mkdir -p .agents/skills
cp -R "$tmp/skill-package/story-to-handdrawn-video" .agents/skills/story-to-handdrawn-videoCommands for macOS and Linux, on Windows run them in Git Bash.
Run in a terminal in the project folder
tmp=$(mktemp -d)
git clone --filter=blob:none --no-checkout https://github.com/gnipbao/story-to-handdrawn-video.git "$tmp"
git -C "$tmp" sparse-checkout set --no-cone /skill-package/story-to-handdrawn-video/
git -C "$tmp" checkout 198aefa9b298af3a20d3bd757c93433623d38ccd
mkdir -p .agents/skills
cp -R "$tmp/skill-package/story-to-handdrawn-video" .agents/skills/story-to-handdrawn-videoCommands for macOS and Linux, on Windows run them in Git Bash.
Clone the renderer: git clone https://github.com/gnipbao/story-to-handdrawn-video.git, enter the folder and run npm ci. Copy the skill-package/story-to-handdrawn-video folder into the agent's skills directory (~/.claude/skills/ or ~/.codex/skills/). If the agent does not run from the renderer folder, set the path via export STORY_VIDEO_PROJECT.
Other ways from the author
git clone https://github.com/gnipbao/story-to-handdrawn-video.git
cd story-to-handdrawn-video
npm ci
npm run checkPrepares the renderer project. npm run check validates TypeScript and the storyboard structure without network access.
This is third-party code. Review the repository files before installing.
What it does
The skill builds a vertical 3:4 hand-drawn animation as a silent picture track from story text or ordered images. It splits text into beats by sentence while keeping the original wording, and for uploaded pages it separates the caption from the illustration and derives an aligned black-and-white plate. In direct-cut mode a beat reveals left to right through text, black-and-white drawing, color illustration; in page-flip mode it keeps the untouched source page and adds a corner curl. It ships a library of twenty hand-drawn styles from colored pencil and kids' crayon to ink, watercolor, gouache and storybook looks, with a colored-pencil diary comic locked as the default. The output is a silent MP4; voiceover and music are left for post. Rendering runs on Remotion, and images are produced by Codex Image2 by default.
Who it is for. For content creators, illustrators and marketers who need a short hand-drawn animation from a story or images.
Good fit when
- You need to turn a short Chinese story into a hand-drawn vertical animation
- You need to assemble an animation from ready comic pages or images in a given order
- You need to compare hand-drawn styles and pick one that fits the story
Not a fit when
- You need a clip with voiceover and music out of the box, without post-production
- You lack the render environment: Node.js, Python, FFmpeg and a compatible browser
Example request
Use story-to-handdrawn-video to make a hand-drawn animation from this story, ready for later voiceoverLimitations
The skill targets Chinese text first; image input follows the given order. It needs Node.js 20, Python 3.10, FFmpeg with ffmpeg and ffprobe on the path, and Google Chrome or a compatible browser driven by Remotion. Images are generated via Codex Image2 by default; the explicit OpenAI API path needs OPENAI_API_KEY, and that service is not reachable from Russia without a VPN. The output is a silent picture track with no audio.
How to disable. Remove the story-to-handdrawn-video folder from the agent's skills directory: ~/.claude/skills/ for Claude Code or ~/.codex/skills/ for Codex. The renderer project can be deleted as an ordinary folder.
Security check
- The skill runs local render scripts, image generation and FFmpeg
- The OpenAI API path calls a third-party service when a key is set
README in short
The README, in Chinese and English, describes two parts of the repository: a Remotion renderer project at the root and a distributable skill in the skill-package folder. The skill turns story text or ordered images into a vertical 3:4 hand-drawn animation with a left-to-right beat reveal and an optional page flip. It has twenty built-in styles shown on one scene and a locked default, a colored-pencil diary comic. It needs Node.js 20, Python 3.10, FFmpeg and Chrome, and installs by cloning and copying the skill folder into the agent's directory. Images default to Codex Image2 and the output is a silent MP4. MIT licensed.
SKILL.md
--- name: story-to-handdrawn-video description: Convert Chinese story copy or ordered local images into a silent hand-drawn Remotion story video. Supports a locked user-approved colored-pencil diary default plus a built-in 20-style library covering doodle, crayon, line explainer, ink, watercolor, gouache, storybook, zine, whiteboard, and printmaking looks. Use when the user asks to generate, import, restyle, preview, or render a hand-drawn story video, asks for the bundled diary-comic look, or wants to choose and compare hand-drawn visual styles. --- # Story to Hand-drawn Video Use the project renderer through this Skill's scripts/run_story_video.py. Set STORY_VIDEO_PROJECT when the project is not the current working directory. ## Workflow 1. Accept inline Chinese story text, a UTF-8 text file, or ordered local images. 2. Preserve the user's wording. For text input, keep one complete sentence as one beat by default. 3. For uploaded composite pages, automatically crop the handwritten caption and illustration, then derive an aligned black-and-white plate locally. 4. In direct-cut mode, keep the order text, bw_full, color; reveal every stage from left to right.
FAQ
Will there be sound?
No. The output is a silent MP4 picture track. Voiceover and music are added separately in post.
Do I need an OpenAI key?
No by default. Images are made via Codex Image2. The OpenAI API path is used only on explicit request and needs OPENAI_API_KEY.
Related
Skills and CLI from HeyGen: the agent writes HTML compositions and renders them into MP4 videos, captions, motion graphics and decks
Blender MCP
MCP for Blender
An MCP server and Blender addon: the agent creates and edits objects, materials and scenes, pulls assets and runs Python in Blender
Official Remotion skills for making videos in React: compositions, animation, captions, maps and rendering
Agentic video studio for Claude Code, Cursor and Codex: script, voiceover, images, stock footage, music, subtitles and render