New: 98,000+ skills indexed from GitHub repos with 100+ stars · every skill safety-checkedBrowse top skillsTop skills
Esc to closeBrowse all skills
Submit a skillBrowse skills
Submit a skillBrowse skills

Agent skill

Crayon Storybook Animation

by edenfunf in edenfunf/reelmimic

Builds children's picture-book MP4 animations drawn in crayon, colored pencil and pastel, rendered frame by frame with p5.js and encoded with ffmpeg.

MITAuto-check passedMedia & Creative

Install Crayon Storybook Animation

skills CLI
$ npx skills add edenfunf/reelmimic --skill crayon-storybook -a claude-code

Project install by default; add -g for ~/.claude/skills/.

GitHub CLI
$ gh skill install edenfunf/reelmimic crayon-storybook --agent claude-code

Project scope by default; add --scope user for a personal install. Needs GitHub CLI 2.90.0 or later (public preview).

Manual copy
$ git clone --depth 1 https://github.com/edenfunf/reelmimic.git skills-src && mkdir -p .claude/skills && cp -r skills-src/.claude/skills/crayon-storybook .claude/skills/crayon-storybook && rm -rf skills-src

Use ~/.claude/skills/ instead of .claude/skills for a personal install. The folder must contain SKILL.md.

Claude Code skills documentation · loads skills from .claude/skills/

Facts

Skill name
crayon-storybook
GitHub stars
1.9k
Token cost
~1.7k tokens
SKILL.md length
758 words
Files
22 (incl. scripts)
Skills in repo
9
Repo updated
First seen
Licence
MIT

At a glance

Builds children's picture-book MP4 animations drawn in crayon, colored pencil and pastel, rendered frame by frame with p5.js and encoded with ffmpeg.

  • Works in 5 steps: Scaffold — bash… → Storyboard in writing: shots, reads… → Build — src/config.js (duration, bpm,… → …
  • Making a bedtime-story or picture-book style animation
  • SKILL.md covers Workflow, API in one screen, Rules that matter most and Engine gotchas
  • Runs JavaScript and Shell scripts from its folder; calls node, npm and bash

What it does

This is a drawing engine for the ReelMimic video workflow. Every frame is a pure function of time: a `studio.html` page loads p5.js and p5.brush, a crayon look library, a cast of characters and your scene files, and each shot draws the full frame. `render.mjs` produces review images (contact sheets, strips and crops) or renders all frames in parallel, and ffmpeg encodes the MP4. The look combines waxy crayon scribble fills, colored-pencil outlines, a slow line boil, page-turn transitions, picture-book framing and hand-lettered CJK captions.

The workflow begins with `scripts/new_project.sh`, which copies the template, runs `npm install` with a patched p5.brush build and checks for node, ffmpeg and Chrome; the agent then reads `GUIDE.md` in full. It storyboards the shots, builds one scene file per shot in `src/scenes/` with settings in `src/config.js`, and inspects sheets, strips and face crops from `render.mjs` before rendering all frames and encoding. The runtime derives from the painted-animation skill, which is MIT licensed.

When your agent uses it

  • Making a bedtime-story or picture-book style animation
  • A reference video calls for a crayon or colored-pencil look
  • Adding hand-lettered storybook captions to an MP4

Example prompts

  • “Make a short crayon picture-book animation about a fox who loses her scarf, with page-turn transitions.”
  • “Scaffold a new crayon-storybook project in ./stories/moon-bedtime and storyboard three shots.”
  • “Add Chinese hand-lettered captions to the second scene.”

Requirements

  • Node.js with npm, ffmpeg and Chrome available on the machine

Workflow steps

5 steps, taken from the first numbered list in SKILL.md.

  1. Scaffold — bash .claude/skills/crayon-storybook/scripts/new_project.sh (add --keep-demo to keep
  2. Storyboard in writing: shots, reads (what the viewer must understand, when), transitions, captions.
  3. Build — src/config.js (duration, bpm, fps: 24); one IIFE file per shot/scene in src/scenes/, ending with
  4. Look, fix, look again (from the project dir)
  5. Render — node render.mjs --frames --workers=4 && node render.mjs --encode --out=out/video.mp4 [--audio=…].

What it can do on your machine

Read from SKILL.md and the folder at commit eac7fc7. It shows what the files ask for, not the result of running them.

  • Tool permissions

    Pre-approves nothing: there is no allowed-tools line, so your agent's usual permission prompts apply.

    From allowed-tools in the SKILL.md frontmatter.

  • Runs code

    Ships 1 file in scripts/ (JavaScript and Shell, from the files we listed), which the agent can run.

    Shell commands in SKILL.md call:

    • node
    • npm
    • bash

    From the folder's file list and the shell code blocks in SKILL.md.

  • Network

    No URLs in SKILL.md. Its commands use npm, which can reach the network depending on how they are called.

    From URLs in SKILL.md, links to its own repository left out.

  • Credentials

    Names no API keys, tokens, secrets or passwords.

    From names ending in _API_KEY, _TOKEN, _SECRET, _KEY or _PASSWORD in SKILL.md.

Context cost

Crayon Storybook Animation loads about 1.7k tokens when it runs. Until then it costs about 157 tokens; SKILL.md has 758 words of instructions outside code blocks.

Always · name and description, kept in context so the agent knows when to use it
~157
When it runs · the whole SKILL.md, loaded when a task matches
~1.7k

Estimates: characters ÷ 4, the usual rule of thumb; real counts depend on the model's tokenizer. Scripts and assets cost tokens only if the agent reads them.

Safety

Auto-check passed

The automated check found no risky patterns in SKILL.md.

Automated static check — not a guarantee. Review scripts before installing. It scans the text of SKILL.md for risky patterns (piping downloads into a shell, reading credential files, hidden Unicode, destructive commands); the scripts in this folder are not scanned.

SKILL.md

The full file from edenfunf/reelmimic at commit eac7fc7, republished under its MIT licence (© edenfunf). 758 words, ~1,701 tokens.

Download SKILL.mdSave it as .claude/skills/crayon-storybook/SKILL.md (or your agent's skills folder). This skill also uses 21 other files; get the full folder from GitHub.
name
crayon-storybook
description
Make warm children's picture-book animations (MP4) drawn in crayon, coloured pencil and pastel on cream drawing paper — waxy crayon scribble fills broken by paper tooth, coloured-pencil outlines, slow 8 fps line boil, page-turn transitions, picture-book page framing and hand-lettered CJK storybook captions. p5.js + p5.brush rendered frame by frame in headless Chrome, encoded with ffmpeg. Use when a reference video or brief calls for a crayon / colored-pencil / pastel / kids' drawing / picture-book / bedtime-story / 繪本 / 蠟筆 / 色鉛筆 / 童書 look, or when the video-clone router picks the crayon-storybook style.

Crayon storybook

A drawing engine for ReelMimic. Every frame is a pure function of time t: studio.html loads p5.js + p5.brush, the crayon look library, the cast and your scene files; each shot draws the whole 1920×1080 frame; render.mjs renders contact sheets, strips and crops for review, or all frames in parallel, and ffmpeg encodes the MP4.

Provenance. The runtime (template/src/core.js, timeline.js, render.mjs, studio.html, the render contract and helpers: paint, inkLine, camera, shots, glow, jump/take/spring, boilSeed…) derives from the painted-animation skill (ClaudeAnimationBase, MIT © John Heibel / tuzhechen2005 — see template/LICENSE). The look (crayon.js), the characters (cast.js), the page turn, the page finish and the captions are this engine's own.

Workflow

  1. Scaffold — bash .claude/skills/crayon-storybook/scripts/new_project.sh <project-dir> (add --keep-demo to keep the example). It copies the template, runs npm install (which also writes the patched p5.brush build, see gotchas) and checks node / ffmpeg / Chrome. Then read GUIDE.md in full and look at docs/demo-sheet.jpg and docs/cast.jpg with Read.
  2. Storyboard in writing: shots, reads (what the viewer must understand, when), transitions, captions.
  3. Build — src/config.js (duration, bpm, fps: 24); one IIFE file per shot/scene in src/scenes/, ending with shots([...]); add its <script> to studio.html. Captions: captions([[t0, t1, '文字', { pos }]]) once.
  4. Look, fix, look again (from the project dir):
    bash
    node render.mjs --sheet=0.5,1.5,2.5,3.5 --cols=4 --w=480 --out=out/check/a.jpg
node render.mjs --strip=2.0:2.6 --cols=6 --w=320 --out=out/check/strip.jpg
node render.mjs --sheet=2.3 --cols=1 --crop=600,200,900,700 --w=900 --out=out/check/face.jpg
    Open every image with Read. At least a sheet per shot, a strip per key action and per transition, a crop per face.
  5. Render — node render.mjs --frames --workers=4 && node render.mjs --encode --out=out/video.mp4 [--audio=…].

API in one screen

areacalls
fills`colorIn(pts, { col, fill: 'scribble'
linescrayonLine, pencilLine, pastelLine, sketchLine, inkLine(pts, sw, col, brush) — brushes crayon, crayonFine, cpen, pastel, chalk, graphite
shapesellPts, rectPts, rrPts, starPts, heartPts, through, ribbon (core)
scenerysky, sun, cloud, hill/hillY, ground, tufts, tree, flower, house, paperWash
propsapple, leafProp, starProp, heartProp, balloon; emotes emote(kind, x, y, s, k, age)
castlulu(x, y, u, o), kuri(x, y, u, o) → { head, top, handL, handR, feet }; feel, emotions, walkCycle, pose
motionseg, kf, ease*, backOut, spring, ring, jump, take, stroll, arcPt, onTwos, pulse, shakeXY
cameracamBegin(cx, cy, zoom, rot) … camEnd(), toScreen
stagingshots([[t0, fn], [t1, fn, { turn: 1.0 }]]) (page turn), bookPage(k), vignette(k), tooth(k), crayonWipe(p), iris, flash, glow
textcaptions(list) (storybook captions via window.overlayHook), letter() for words inside the picture
Show full SKILL.md (384 more words)Show less

Rules that matter most

  1. Crayon medium only. Colour shapes in with colorIn (pale base + crayon scribble/hatch + coloured-pencil outline); lines with the crayon/pencil brushes. No plain p5 rect/ellipse/fill, no gradients, no 3D. Turns go through the drawn key views (front, q, side, back).
  2. Pure functions of t. No Math.random(), no state between frames. hash() / rnd(key) for stable randomness; jit() only for boil. Call boilSeed(key) before each separate background element/prop.
  3. Characters come from cast.js only. Scenes pass poses (aR, bR, view, walk, dy, sq, hair, holdR…) — they never draw a character's parts themselves. New characters go in cast.js (or one file each).
  4. Big and legible. Lulu u ≈ 30–45 in medium shots (≈ 11u tall), Kuri u ≈ 26–36. Captions ≥ 64 px. Keep the caption band (bottom ~200 px, or pos: 'top') free of story-critical action.
  5. Alive and acted. Moods change through emotions() (anticipation squint → take → settle); actions have anticipation → action → follow-through (jump, spring, hair); something happens in every shot.
  6. A transition at every seam: page turn ({ turn }), crayon wipe, iris, fade from/to paper.

Engine gotchas

  • Patched p5.brush. studio.html loads node_modules/p5.brush/dist/p5.brush.crayon.js, written by patch_brush.mjs on npm install. Stock p5.brush darkens pigment where overlapping stamps saturate (right for ink, wrong for wax): butter-yellow turned mustard. If that file is missing, run node patch_brush.mjs.
  • Cost = number of colour changes + stroke area. Each colorIn is ~3 brush passes; p5.brush composites a mask per colour change. Keep big background shapes sparse (hill/ground already use wide gaps), don't scribble far off-screen. Typical: 150–250 ms/frame for a wide shot, ~350 ms for a busy medium shot with two characters and the page border, ~0.7–1 s during a page turn (two pages are drawn).
  • Page turn: the previous shot keeps being called with lt > dur for turn seconds — let its motion settle.
  • Don't name globals after p5's (line, text, color, scale, shape…): the page never gets ready.
  • A NaN in a point list throws Failed to construct 'OffscreenCanvas'. ** after a unary minus is a syntax error.
  • Strokes far from the origin under zoom ≳ 2 collapse (p5.brush); paint/inkLine/colorIn draw around each shape's centre, which avoids it for normal sizes.
  • Google Fonts load over the network at page load; if a render times out on navigation, just re-run it.
  • src/karaoke.js (from painted-animation) still works for lyric videos; add its <script> if needed.

© edenfunf, MIT. Rendered from Markdown: HTML in the file is shown as text, images as links, and headings moved down two levels. Raw file

Files

SKILL.md and 21 other files (scripts) in .claude/skills/crayon-storybook of edenfunf/reelmimic.

  • SKILL.md
  • GUIDE.md
  • docs/cast.jpg
  • docs/demo-sheet.jpg
  • docs/looks.jpg
  • scripts/new_project.sh
  • template/.gitignore
  • template/LICENSE
  • template/package-lock.json
  • template/package.json
  • template/patch_brush.mjs
  • template/render.mjs
  • template/src/cast.js
  • template/src/config.js
  • template/src/core.js
  • template/src/crayon.js
  • template/src/karaoke.js
  • … and 5 more

Open the folder on GitHubat commit eac7fc7

Compare with similar skills

Crayon Storybook Animation next to the 5 skills that share the most tags, products or categories with it. Stars are the repository's; “used in” counts other GitHub owners with a copy.

Crayon Storybook Animation compared with similar skills
SkillStarsUsed inTokensAuto-checkLicenceRepo updated
Crayon Storybook Animation this skilledenfunf/reelmimic1.9k—~1.7kAutomated safety check: PassMIT
Lemo-Opuscar Short Film Directorlemomo-ai/lemo-opuscar1.8k—~596Automated safety check: PassMIT
p5 Paint Animationheygen-com/hyperframes-community-skills187—~1.8kAutomated safety check: PassApache-2.0
Video Synceternityspring/reelbench-skills8781 repos~1kAutomated safety check: NotesApache-2.0
Painted Animationtuzhechen2005/opus-video-skills1461 repos~1.9kAutomated safety check: PassCustom licence
Day in My Life Agent Filmheygen-com/hyperframes-community-skills187—~1.7kAutomated safety check: PassApache-2.0

Similar skills

  • Lemo-Opuscar Short Film Director

    lemomo-ai/lemo-opuscar

    Directs a short film made entirely in code in one of the Lemo-Opuscar library's named visual styles, from fetching the library through production and delivery.

    1.8k GitHub stars~596 tokensUpdated yesterday
    Media & CreativeAuto-check passed

  • p5 Paint Animation

    heygen-com/hyperframes-community-skills

    Turns a text prompt, photo or short video into hand-made looking p5.js animation: self-writing handwriting, brushstroke repaints and living paintings rendered offline.

    187 GitHub stars~1.8k tokensUpdated 12 days ago
    Media & CreativeAuto-check passed

  • Video Sync

    eternityspring/reelbench-skills

    把拉片数据和原片合成一条能直接看的视频：一边是画面，一边是这一镜的分镜信息 （镜号、起止、时长、景别、类别、运镜、画面描述、台词），镜头切了信息跟着切， 镜头表自动滚动并高亮当前这一镜。

    878 GitHub starsUsed in 1 repo~1k tokens
    Media & CreativeAuto-check: notes

  • Painted Animation

    tuzhechen2005/opus-video-skills

    Make hand-painted watercolour-and-ink cartoon videos (MP4) with code — p5.js + p5.brush rendered frame by frame in headless Chrome, encoded with ffmpeg — starring Clawd or any character.

    146 GitHub starsUsed in 1 repo~1.9k tokens
    Media & CreativeAuto-check passed

  • Day in My Life Agent Film

    heygen-com/hyperframes-community-skills

    Turns your local Claude Code session history into a 60 to 75 second hand-drawn ink film about a day with your agent, with a string score and your approval of every line.

    187 GitHub stars~1.7k tokensUpdated 12 days ago
    Media & CreativeAuto-check passed

  • Session Story Film

    heygen-com/hyperframes-community-skills

    Turns one typical session between you and your agent into a short animated film built from your real messages, with a composed score, after you approve every line.

    187 GitHub stars~1.8k tokensUpdated 12 days ago
    Media & CreativeAuto-check passed

More from edenfunf/reelmimic

All 9 skills in this repo

  • Media Use

    edenfunf/reelmimic

    Agent Media OS, the single skill for every media need in a HyperFrames project.

    1.9k GitHub starsUsed in 1 repo~2k tokens
    Auto-check passed

  • Reference Video Style Cloner

    edenfunf/reelmimic

    Takes a reference video and a short brief, analyzes its cutting and visual style, then plans and builds a new MP4 in a matching style.

    1.9k GitHub stars~1.7k tokensUpdated 2 days ago
    Auto-check passed

  • Anime Cel Video Maker

    edenfunf/reelmimic

    Builds Japanese TV-anime style MP4 videos in code, with cel-shaded characters, painted backgrounds and staging effects, rendered in headless Chrome and encoded with ffmpeg.

    1.9k GitHub stars~1.6k tokensUpdated 2 days ago
    Auto-check passed

  • Blender Product Film

    edenfunf/reelmimic

    Renders premium 3D product films in headless Blender from JSON shot specs, building the product from a photo or procedurally, then finishing titles, music and cuts.

    1.9k GitHub stars~2.6k tokensUpdated 2 days ago
    Auto-check passed

  • Paper Cut-out Animation

    edenfunf/reelmimic

    Builds paper cut-out, stop-motion style MP4 videos in code, with jointed paper puppets, torn or scissor-cut edges and soft shadows, rendered frame by frame in headless Chrome.

    1.9k GitHub stars~1.5k tokensUpdated 2 days ago
    Auto-check passed

  • Pixel Art Video Engine

    edenfunf/reelmimic

    Makes animated pixel-art videos in an indie-game style: a 480×270 canvas upscaled four times, limited palettes with dithering, procedural characters and dialogue captions, encoded as MP4.

    1.9k GitHub stars~1.4k tokensUpdated 2 days ago
    Auto-check passed

Works with

Categories

Questions about Crayon Storybook Animation

What does Crayon Storybook Animation do?

Builds children's picture-book MP4 animations drawn in crayon, colored pencil and pastel, rendered frame by frame with p5.js and encoded with ffmpeg. This is a drawing engine for the ReelMimic video workflow.brush, a crayon look library, a cast of characters and your scene files, and each shot draws the full frame.

When should I use Crayon Storybook Animation?

Crayon Storybook Animation fits situations like: making a bedtime-story or picture-book style animation; A reference video calls for a crayon or colored-pencil look; adding hand-lettered storybook captions to an MP4.

How do I install Crayon Storybook Animation in Claude Code?

Run `npx skills add edenfunf/reelmimic --skill crayon-storybook -a claude-code`. Or copy the skill folder (.claude/skills/crayon-storybook in edenfunf/reelmimic) into .claude/skills/crayon-storybook in your project. Claude Code loads it when a task matches its description.

How do I install Crayon Storybook Animation in Codex?

Run `npx skills add edenfunf/reelmimic --skill crayon-storybook -a codex`. Or copy the skill folder (.claude/skills/crayon-storybook in edenfunf/reelmimic) into .agents/skills/crayon-storybook in your project. Codex loads it when a task matches its description.

Can I use Crayon Storybook Animation in Cursor, Gemini CLI or GitHub Copilot?

Cursor, Gemini CLI, GitHub Copilot and OpenCode also load SKILL.md folders. With the skills CLI, run `npx skills add edenfunf/reelmimic --skill crayon-storybook -a cursor` (or -a gemini-cli, github-copilot or opencode for the others). To copy it by hand, put the folder in .cursor/skills/crayon-storybook, .gemini/skills/crayon-storybook, .github/skills/crayon-storybook and .opencode/skills/crayon-storybook in your project.

What does Crayon Storybook Animation need to run?

Going by SKILL.md and its folder, Crayon Storybook Animation needs JavaScript and a shell for the scripts in its folder and the command-line tools its instructions call (node, npm and bash). Our summary lists: Node.js with npm, ffmpeg and Chrome available on the machine.

Does Crayon Storybook Animation access the network?

SKILL.md contains no URLs. Its commands use npm, which can reach the network depending on how they are called. This is read from the text; nothing was executed.

Is Crayon Storybook Animation safe to install?

Our automated static check of SKILL.md found no risky patterns, such as piping downloads into a shell, reading credential files or hidden Unicode. It is not a guarantee. The check reads SKILL.md only: the scripts in the folder are not scanned, so read them before running anything.

What licence does Crayon Storybook Animation use?

Crayon Storybook Animation is published under the MIT licence (the repository's licence). It allows redistribution, so the full SKILL.md is shown on this page.

How many tokens does Crayon Storybook Animation use?

About 1.7k tokens (SKILL.md is roughly 6.8k characters). Agents keep only the skill's name and description in context until a task matches; then they load SKILL.md in full.

What are the alternatives to Crayon Storybook Animation?

Skills that share tags, products or a category with Crayon Storybook Animation: Lemo-Opuscar Short Film Director (lemomo-ai/lemo-opuscar, 1.8k stars), p5 Paint Animation (heygen-com/hyperframes-community-skills, 187 stars), Video Sync (eternityspring/reelbench-skills, 878 stars) and Painted Animation (tuzhechen2005/opus-video-skills, 146 stars). The comparison table on this page puts their stars, adoption, token cost, safety result and licence side by side.

Who maintains Crayon Storybook Animation?

edenfunf (a GitHub user) maintains it in edenfunf/reelmimic, which has 1,943 GitHub stars. The repository holds 9 skills in this directory. The repository was last updated on October 9, 2026.

Source: edenfunf/reelmimic on GitHub. Facts on this page come from the repository at the commit we read; the author's words are quoted as theirs.