← ClaudeAtlas

animatelisted

Directs the creation of a code-made animation or video in drawn-by-code, from brief to final MP4. Use it whenever the user asks for a video, animation, motion graphics, explainer, product/launch video, reel, intro, animated logo or "a test" of a style; also to resume an experiment in sandbox/. Orchestrates the other skills (engine, review, sound and the chosen style's skill).
illodev/drawn-by-code · ★ 11 · Code & Development · score 69
Install: claude install-skill illodev/drawn-by-code
# Animate: from brief to video Every video is made **with code** (2D canvas, deterministic, frame by frame) and reviewed by looking at real frames. Nothing is signed off without being rendered and looked at. ## 0 · Before anything - `sh engine/setup.sh` if there is no `node_modules/` or `ffmpeg` is missing. - Read `sandbox/INDEX.md` (what has already been tried) and the relevant style skill. - Available styles: folders in `styles/` with their skill `.claude/skills/style-*`. If the request fits none of them, use the **new-style** skill before going on. ## 1 · Brief (don't animate without one) `node engine/new.mjs <name> --style <style> --aspect 16:9 --duration <s>` creates `sandbox/YYYY-MM-DD-<name>/` with `brief.md`, `scene.js` and `review.md`. Fill in `brief.md` with the user (ask only what you can't infer): what it's for, the idea in one sentence, literal on-screen text, format, music, what must not happen. If there is a product or brand, **nothing promises more than its website**: note the source of every claim. **The brand's logo is traced, never drawn by eye.** Take the path from the site's SVG (sample its curves into points, keep its proportions and gaps) and cut that as paper. An approximated logo is the first thing the client sees: in saas-promo a «cloud with a bar» drawn by eye was a blob that «no se parece al logo» (see the mark in `private/brand.js`). The same goes for the **wordmark**: wherever the logo appears with its name (an app's sidebar, a phone scr