drawn-by-code

In the author's own words, from each skill's SKILL.md.

• animate

  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).

  .claude/skills/animate/SKILL.md on GitHub (opens in a new tab)

• engine

  Technical reference for the drawn-by-code engine. Use it when writing or debugging a scene's code (scene.js), when rendering to MP4 or stills, when touching engine/ or a style kit, or when something jitters, runs slow or doesn't load. Covers the Motion.scene contract, determinism, units, caching and commands.

  .claude/skills/engine/SKILL.md on GitHub (opens in a new tab)

• hands

  How to draw hands in drawn-by-code, in any style. Use it before drawing, redrawing or reviewing any hand, and whenever a character holds, grips, carries, throws, touches or points at something, or the user complains about a hand. Covers the reference-first workflow, handedness, the grips and what is visible from each side, proportions, one-skin drawing, and the hand check sheet that must pass bef…

  .claude/skills/hands/SKILL.md on GitHub (opens in a new tab)

• new-style

  Creates a new animation style in drawn-by-code (code kit + template + skill + style test). Use it when the user asks for a look no style in styles/ covers (e.g. kinetic typography, flat/product motion graphics, UI mockups, pixel art, line/sketch, isometric 3D, whiteboard explainer, glitch, retro VHS) or says "try another style".

  .claude/skills/new-style/SKILL.md on GitHub (opens in a new tab)

• replicate

  How to replicate a reference video 1:1 (or study a style from one) with the drawn-by-code engine, measuring instead of guessing, element by element, until the difference only shows when zooming in. Use it whenever the user gives a video to copy, recreate, match or "make it like this", when working on sandbox/2026-09-24-what-do-you-love, or when a piece has to reach the detail level of a finished…

  .claude/skills/replicate/SKILL.md on GitHub (opens in a new tab)

• review

  Review and self-improvement loop for drawn-by-code. Use it after EVERY render or visible change to a scene, whenever the user gives feedback on a video ("this doesn't read", "faster", "I like X"), and when closing an experiment. Runs the automatic critique on real frames, fixes the scene and turns what was learned into permanent changes to the skills and the engine.

  .claude/skills/review/SKILL.md on GitHub (opens in a new tab)

• sound

  Music, sound effects and mixing for drawn-by-code videos. Use it when choosing or cutting music, syncing the animation to the beat, placing sound effects (sfx) or generating new ones with ElevenLabs, and when adding the audio to the MP4.

  .claude/skills/sound/SKILL.md on GitHub (opens in a new tab)

• style-70s-poster

  Psychedelic 70s poster style (Fillmore, Yellow Submarine) drawn with code. Flat acid colors, thick outlines, concentric echoes, sunbursts, wavy shapes and melting letters. Use it for psychedelic, retro, groovy or concert videos, or when working with styles/70s-poster/.

  .claude/skills/style-70s-poster/SKILL.md on GitHub (opens in a new tab)

• style-clay

  Clay (plasticine) style, in testing: soft 3D pieces lit from the top left with fingerprints, tool marks, a waxy sheen and soft shadows, stop motion on twos with a surface that boils. Use it when asked for claymation, plasticine, stop motion, soft 3D, a warm «handmade 3D» look or when working with styles/clay/.

  .claude/skills/style-clay/SKILL.md on GitHub (opens in a new tab)

• style-clay3d

  Clay 3D style, in testing: raymarched plasticine puppets (WebGL2 in the headless browser) built from lumpy pressed-on pieces (flat disc eyes, ball noses, hair in clumps), matte clay with fingerprints, soft studio light on a seamless backdrop, stop motion on twos. Use it when asked for claymation, plasticine or stop-motion characters that should look like real clay, or when working with styles/cla…

  .claude/skills/style-clay3d/SKILL.md on GitHub (opens in a new tab)

• style-engraving

  Engraving style (in testing): 3D scenes drawn as a plate of the «Description de l'Égypte» — charcoal tone on toothed paper, masonry drawn stone by stone, temple walls in low relief (registers of offering scenes, Hathor capitals, starred ceilings), an aged print measured on the originals, one live blue and a gold wash as second inks. Instanced WebGL, so thousands of pieces are cheap. Use it for ar…

  .claude/skills/style-engraving/SKILL.md on GitHub (opens in a new tab)

• style-felt3d

  Felt 3D style, in testing: needle-felted wool puppets raymarched in WebGL2 (a halo of stray fibres on every silhouette, heathered matte wool, glass bead eyes, stitched mouths and toes), rendered over a TRANSPARENT background so any backdrop (a drawn set, a photo, a video) can go behind, with the puppets' shadows caught on the backdrop's floor. Use it for needle felt, wool, plush, felt dioramas, «…

  .claude/skills/style-felt3d/SKILL.md on GitHub (opens in a new tab)

• style-kaleidoscope

  Kaleidoscope style: radial mirror symmetry, pieces coming out of the center, rotation and color cycling. Use it for psychedelic climaxes, mandalas, looping music visuals or when working with styles/kaleidoscope/.

  .claude/skills/style-kaleidoscope/SKILL.md on GitHub (opens in a new tab)

• style-line

  Line style: black line on white paper that wobbles on purpose (line boil), like hand-drawn animation at 12 drawings per second. Use it for doodles, sketches, hand-drawn explainers, «it was a drawing» moments or when working with styles/line/.

  .claude/skills/style-line/SKILL.md on GitHub (opens in a new tab)

• style-liquid-light

  Liquid light style: the oil-and-ink projections of 60s concerts, with blobs that flow, merge (metaballs), shift color and have rings like oil on water. Use it for psychedelic, hypnotic, liquid or organic videos, or when working with styles/liquid-light/.

  .claude/skills/style-liquid-light/SKILL.md on GitHub (opens in a new tab)

• style-paper-cutout

  Paper-cutout animation style drawn with code (torn edges, marker fill, grain, handwriting), the style of a previous paper-cutout short. Use it when asked for a warm, handmade or character video, or anything "paper/collage/cutout/stop-motion"-like, or when working with styles/paper-cutout/.

  .claude/skills/style-paper-cutout/SKILL.md on GitHub (opens in a new tab)

• style-pixel-art

  Pixel art style, in testing: crisp square pixels on a low-res grid (e.g. 192 or 230 across) blown up with nearest-neighbour, sprites as string maps with a palette, tiny characters in small loops authored frame by frame at 10 fps, flat backgrounds. Use it for pixel art, 8-bit / 16-bit, retro game, sprite, «tiny people living in a building» loops, or when working with styles/pixel-art/.

  .claude/skills/style-pixel-art/SKILL.md on GitHub (opens in a new tab)

• style-risograph

  Risograph style: scenes printed like a riso print, in four spot inks (fluorescent pink, yellow, blue, navy) on warm paper, flat and halftone plates, overprints that make the other colours, misregistration, uneven inking and grain. Use it for riso, screen print, halftone, retro print, zine or «printed» looks, or when working with styles/risograph/.

  .claude/skills/style-risograph/SKILL.md on GitHub (opens in a new tab)

• transitions

  Transitions between shots and between styles in drawn-by-code (engine/transitions.js): entering through a point (eye, mouth), iris, engulf, vortex, frame within a frame, paper ball. Use it when linking two shots or two different styles, in «exquisite corpse» videos, or when a hard cut feels poor.

  .claude/skills/transitions/SKILL.md on GitHub (opens in a new tab)

No skill matches that filter.

Similar skills

• claude-skillsby Jeffallan 67 Specialized Skills for Full-Stack Developers. Transform Claude Code into your expert pair programmer. 11.9k stars · 30 skills
• ECCby affaan-m The agent harness performance optimization system. Skills, instincts, memory, security, and research-first development for Claude Code, Cod… 282k stars · 30 skills
• ponytailby DietrichGebert Makes your AI agent think like the laziest senior dev in the room. The best code is the code you never wrote. 165k stars · 6 skills
• archifyby tt-a1i Turn any idea, plan, or codebase into a beautiful interactive diagram. An agent skill for Claude Code, Codex, and more. 84.5k stars · 2 skills
• awesome-claude-skillsby ComposioHQ A curated list of awesome Claude Skills, resources, and tools for customizing Claude AI workflows 77.3k stars
• oh-my-openagentby code-yeongyu OmO: Just type "mass ulw" keyword with your prompt. Now you are the master of graph engineering. 70.1k stars · 25 skills