videohand

Generates hand-drawn marker-style MP4 videos from text using rough.js stroke primitives and 64 scene cards.

Updated Aug 16, 2026
One-click install
npx skills add https://github.com/chuanyue98/skillhub --skill videohand-chuanyue98
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: videohand
Source: https://github.com/chuanyue98/skillhub/tree/main/vendored/derek-zhuolin/VideoHand
Command: npx skills add https://github.com/chuanyue98/skillhub --skill videohand-chuanyue98

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes scripts (resource) and references (resource) and assets (resource) components.

What problem does it solve? Turning a written script into a short video normally requires templates, editing tools, or motion-graphics skills. This Skill lets an AI agent convert a paragraph of text into a hand-drawn, marker-on-paper style video by selecting a matching visual card for each sentence and rendering the result to MP4. ## Core Features & Use Cases - Semantic card selection: Picks from 64 hand-drawn scene cards (flows, comparisons, charts, metaphors, UI frames) sentence by sentence, with rules preventing adjacent repeats and clustered high-energy shots. - Deterministic hand-drawn rendering: Builds frames from 65 rough.js stroke primitives with seeded randomness, Excalifont/Xiaolai fonts, and three aspect ratios (9:16, 16:9, 1:1). - Five pre-render quality gates: Lint scripts check portability, browser runtime errors, scene discipline, motion timing, and pixel-level frame audits before any MP4 render is allowed. - Optional voiceover and captions: Supports a vendor-neutral TTS contract with word-level hand-drawn caption highlighting. - Use Case: Give your agent a product announcement paragraph; it produces a storyboard, builds one HTML frame per shot, passes all quality gates, and delivers a vertical MP4 ready for short-video platforms. ## Quick Start Ask your agent to turn a paragraph of text into a hand-drawn style video, for example: make a hand-drawn video explaining what my CLI tool does, its three main features, and how to install it.

Frequently Asked Questions about videohand

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I make a hand-drawn video from text with an AI agent?▼

Install the skill with npx github:derek-zhuolin/VideoHand, then tell your agent to turn your paragraph into a hand-drawn video. The agent reads SKILL.md, picks a scene card per sentence, builds frames, runs five quality gates, and renders an MP4.

What tools render hand-drawn sketch style animations in the browser?▼

This skill uses rough.js, the same engine behind Excalidraw, combined with GSAP for animation timing. Shapes render through 65 deterministic stroke primitives with seeded randomness, so the same sentence wobbles identically on every render.

Does videohand work with Claude Code, Cursor, and other agents?▼

Yes. The installer detects existing skill directories for Claude Code, Codex, Cursor, Crush, Gemini, and WorkBuddy, and installs into each one found. The skill is model-agnostic and does not bind to any specific LLM provider.

What are the system requirements for rendering videos with videohand?▼

Node.js 22 or newer is required because the HyperFrames rendering engine declares that engine constraint. ffmpeg is needed only for the final MP4 render step; card selection, frame building, and previewing work without it.

Why does my rendered video show blank frames or missing strokes?▼

Blank output usually comes from composition-time issues like wrong root selectors or scripts placed outside the template tag, which single-frame previews never reveal. Run the portability-lint and gate.mjs checks before rendering to catch these failures early.

When should I not use a hand-drawn video skill?▼

Avoid it for content needing real human footage, live-action material, or strict brand visual guidelines. It fits opinion pieces, product explainers, tutorials, and data statements where the script has clear structural shapes like flows, comparisons, or lists.