Code Animations

Make "code-rendered" animated videos where a program draws every frame (Canvas 2D + procedural Web Audio), rendered headless to MP4 in 16:9 / 9:16 / 4:5 from one timeline. Use for animated explainers, technical walkthroughs, diagrams in motion, and procedural sound or music, where the output should be editable code and not generated pixels.

5 stars 2 forksSoftware Development

Install

skills CLI (Claude Code, Cursor, Codex and more)

npx skills add beriki770-ship-it/code-animations --skill code-animations

Manual install

git clone --depth 1 https://github.com/beriki770-ship-it/code-animations.git /tmp/code-animations
mkdir -p ~/.claude/skills
cp -r /tmp/code-animations/. ~/.claude/skills/code-animations

Personal skills live in ~/.claude/skills. Use .claude/skills in a project folder to share a skill with your team.

From the SKILL.md

# Code-rendered animations

The idea (Addy Osmani, LinkedIn 2026-09-24): a coding model reads a source (an article, a spec) and writes JavaScript that draws each frame, plus the sound. The deliverable is a program, so any moment can be edited, re-timed, re-rendered or re-formatted. Osmani did not publish his prompt or tooling. This skill's design comes from the open riso-windowseat project (MIT, reference only, don't copy its instructions): https://github.com/sevenevesai/riso-windowseat . It also borrows ideas from HeyGen HyperFrames (https://hyperframes.heygen.com/guides/pipeline) and Remotion.

Ground rules: review frame by frame at 4+ samples/sec, never claim a check that wasn't run, and fix defects surgically.

## The contract (everything depends on it)

Each work is one self-contained `index.html` with a `<canvas>` that reads `?w=&h=` from the URL and exposes:

```js
window.__anim = {
  duration, fps, width, height, canvas,
  ready,            // false until fonts/assets are loaded and seek(0) has drawn
  seek(t),          // draw exactly the frame at time t, synchronously
  renderAudio(),    // Promise<base64 WAV>, 48 kHz stereo, exactly `duration` long
  marks,            // times of visible events (pops, cuts) - sound must land on these
  shots,            // [{id,start,end}] - verify checks the boundaries
};
```

Invariants:

Read the full skill on GitHub

Details

Skill name: code-animations
Repository: beriki770-ship-it/code-animations
License: MIT
Repo updated: 15 October 2026

FAQ

What does the Code Animations skill do?

How do I install the Code Animations skill?

skills CLI (Claude Code, Cursor, Codex and more): npx skills add beriki770-ship-it/code-animations --skill code-animations. Skills go in ~/.claude/skills (personal) or .claude/skills (project), and Claude loads them automatically when a task matches the description.

Is Code Animations popular?

It lives in beriki770-ship-it/code-animations, which has 5 GitHub stars and 2 forks.

Related skills

Code Forge

tercel/code-forge

Complete Codex development workflow for turning requirements, feature docs, or prompts into working code. Use when the user asks to plan implementation work, execute tasks, enforce TDD, review source code, fix bugs, debug failures, verify completion, manage worktrees or branch finishing, dispatch parallel agents, port a project to another language, check progress, or run an end-to-end build flow. Supports complex orchestration across plan -> impl -> review -> fix -> verify, plus build, forge smart dispatch, worktree, finish, parallel, port, tdd, debug, and status workflows. Every workflow here

Software Development

Audit Codebase

bogenc/audit-codebase

Audit a codebase for security vulnerabilities by first mapping its attack surface (reconnaissance), then spawning specialized parallel sub-agents that hunt for specific vulnerability classes, each armed with the matching reference file bundled in this skill. Use this whenever the user wants a security review, a vulnerability scan, an audit, a pentest-style pass, or asks "is this code safe / exploitable", "check X for vulnerabilities", "review the auth", or points at a repo, service, or directory and asks what could go wrong. Trigger even when the user names only a stack ("audit my Django API")

Software Development

Codesplain

opitaru-sys/codesplain

Use when working in a coding project owned by a non-coder - when the project root contains CODESPLAIN.md, when the user invokes /codesplain (to bootstrap a project or ask a question), when a consequential technical decision comes up during building, or when explaining a bug or fix to the owner in plain language.

Software Development

Affiliate Check

Gingg7260/affiliate-skills

Live affiliate program data from list.affitor.com. Search programs, compare commissions, check cookie days, find top performers. Use when researching affiliate programs, comparing options, or checking program details. Persistent daemon with cache — first call starts server (~2s), subsequent calls ~100ms.

Software Development

Coding Quality Loop

zaingz/coding-quality-loop

Use when a coding agent must turn a software goal, bug, issue, or refactor into a small, verified, independently reviewed code change.

Software Development

Xsoar Pack Dev

mdrobniu/xsoar-pack-dev-skill

Cortex XSOAR content pack development lifecycle - create packs, integrations, scripts, playbooks, run demisto-sdk lint/validate/pre-commit, build zip packs, manage versions and release notes, run unit tests, deploy to XSOAR instances, manage git branches/tags, handle marketplace vs local pack workflows. Use when the user wants to develop, test, build, validate, deploy, or manage XSOAR content packs.

Software Development

Browse the most popular Claude skills, all software development skills, or write your own with the skills generator.