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.
Install
npx skills add ToBeWin/HandDraw-Skill --skill handdraw-skillgit clone --depth 1 https://github.com/ToBeWin/HandDraw-Skill.git /tmp/HandDraw-Skill
mkdir -p ~/.claude/skills
cp -r /tmp/HandDraw-Skill/. ~/.claude/skills/handdraw-skillPersonal skills live in ~/.claude/skills. Use .claude/skills in a project folder to share a skill with your team.
From the SKILL.md
# 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](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.
Details
- Skill name
handdraw-skill- Repository
- ToBeWin/HandDraw-Skill
- License
- MIT
- Repo updated
- 26 August 2026
FAQ
What does the Handdraw Skill skill do?
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.
How do I install the Handdraw Skill skill?
skills CLI (Claude Code, Cursor, Codex and more): npx skills add ToBeWin/HandDraw-Skill --skill handdraw-skill. Skills go in ~/.claude/skills (personal) or .claude/skills (project), and Claude loads them automatically when a task matches the description.
Is Handdraw Skill popular?
It lives in ToBeWin/HandDraw-Skill, which has 6 GitHub stars and 1 forks.
Related skills
HTML CSS First
6macdonst/html-css-first
Prefer modern HTML and CSS solutions over JavaScript-heavy implementations. Use this skill whenever building or reviewing frontend code — especially for UI patterns like modals, accordions, tabs, tooltips, form validation, animations, dropdowns, carousels, sticky headers, and toggles. Trigger on any request to build a UI component or page, even if the user doesn't explicitly ask for "CSS-only" — always check whether a native HTML element or CSS feature can replace a JS solution first. Also trigger when reviewing existing code for opportunities to reduce JavaScript by using modern browser capab
Apple Design
6bowen31337/apple-design
Build web interfaces (HTML/CSS/JS, React, Vue, Tailwind) that look and feel like Apple made them — the real Apple aesthetic, not generic glassmorphism. Covers Liquid Glass / iOS-26 materials as rendered CSS+SVG (specular highlights, refraction, vibrancy, fallbacks), Apple's fluid-motion physics (springs by damping/response, velocity handoff, momentum projection, interruptibility, rubber-banding) implemented in BOTH Motion (motion.dev) and GSAP (Flip, ScrollTrigger, SplitText, Inertia), SF typography optics, a drop-in Apple design-token layer, and complete copy-paste components (glass nav, spri
Nature Style
6Zhangyanbo/nature-style-skill
Nature-journal house style for publication-ready scientific figures, optimised for Python/matplotlib plotting. Bundles palette.py (a drop-in matplotlib style module with the Nature-style house palette, Wong colourblind-safe set, point-scale type, safe stroke weights, and helpers) plus the full design system as CSS tokens and figure components for HTML/SVG. Use this skill whenever creating or restyling any chart, plot, diagram, schematic, or multi-panel figure for a scientific paper or analysis — matplotlib/seaborn code, an HTML/SVG mock, choosing colours for scientific data, or preparing figur
Yafa UI Dashboard
7rejourneyco/yafa-ui-dashboard
Design, build, refactor, or review polished responsive analytics dashboards, SaaS admin dashboards, business intelligence interfaces, and data-heavy product UI using Yafa-UI. Covers sidebar navigation, one-row page headers, multi-color KPI cards, charts, tables, filters, Lucide icons, accessible states, and mobile dashboard layouts across React, Next.js, Tailwind CSS, Vue, Svelte, and other frontend stacks. Do not use this visual system as the default for marketing sites, authentication, setup wizards, account or billing settings, or unrelated public pages.
Russian Text Quality
6Anic888/russian-text-quality
Use when reviewing or writing code that contains Russian-language UI strings, i18n locale files (ru.json, ru.yml, ru.po), Russian comments, or transliterated identifiers (polzovatel, tovar, kolichestvo). Triggers on mixed English-code + Russian-content projects. Does not cover typography, spelling, or ё/е.
Wedding Invitation
7wyx-sg/wedding-invitation-skill
Use this skill when the user wants to design and generate a wedding invitation card in any language. The skill drives a conversational workflow — you gather the couple's info and style preferences, design a bespoke HTML template from scratch (no template selection), render it locally with headless Chrome, produce a print-ready PNG, and include a live tweak panel so the user can adjust colors, fonts, frames, and optional components without rebuilding. All data stays on the user's machine; no cloud, no signups, no data leaves.
Browse the most popular Claude skills, all frontend & design skills, or write your own with the skills generator.