walid@portfolio:~/lab/claude-code-animation-skills$
cd../lab
11ideaAug 2026

Five skills that turn Claude Code into an animation studio

Design DNA, GSAP, Three.js, Motion Design, Genjutsu — in the order that matters

A skill is not a plugin that adds a button — it is a manual Claude reads before writing. It stops inventing an API from memory and starts using the real one, pitfalls included. Five of them, each with its exact install command and the prompt to send immediately after. All MIT licensed.

Claude CodeSkillsGSAPThree.jsLottieWeb animationMIT
Read this first

In what order, and why

A skill is not a plugin that adds a button: it is a manual Claude reads before it writes. It stops inventing an API signature from memory and starts using the real one, with its known pitfalls. Hence the order below — give it a direction first, then the tools, then the finish.

What this is not: a list of repos to collect. Installing all five at once is pointless. Each one solves a specific problem, and the order of installation matters more than the number.

The five, and the layer each one occupies

01·THE DIRECTION

Design DNA

Extracts the taste of an existing site into tokens Claude can actually apply.

02·THE ENGINE

GSAP

The animation engine of the web. The only official skill in the list.

03·THE DEPTH

Three.js

3D in the browser, for when a page needs depth rather than decoration.

04·THE DETAIL

Motion Design

Lottie, SVG, micro-interactions. The layer that makes an interface feel alive.

05·THE FINISH

Genjutsu

Goes back over the whole thing and pushes the render toward premium.

i
One at a time

Install it, test it on a real project, then keep it or drop it. Five skills you never tested are worth zero. Used together they do not fight — Design DNA sets the palette and typography, GSAP makes it move, Three.js adds depth, Motion Design handles the detail, Genjutsu re-reads everything. Each occupies its own layer.

Skill 01 · senlindesign/taste-skill

Design DNA

Captures a site, reads the DOM, and outputs tokens — colours, fonts, spacing — plus the reasoning behind the choices, not just the values. Exports to Cursor rules, Windsurf rules, or straight into your CLAUDE.md. It is the only one of the five installed by git clone rather than the marketplace, so do not go looking for a /plugin command for it.

design-dna.sh9 lines
# this one clones straight into your skills folder
git clone https://github.com/senlindesign/taste-skill \
  ~/.claude/skills/taste

# it needs Playwright to actually go and look at the site
claude mcp add playwright -s user -- \
  npx -y @playwright/mcp@latest --isolated

# then restart Claude Code

The prompt right after

design-dna.prompt6 lines
/taste https://the-site-you-like.com

Then, straight after:
Take the Taste DNA you just extracted and write it into my
CLAUDE.md. I want the tokens AND the trade-offs behind them,
not only the hex values.
Skill 02 · greensock/gsap-skills

GSAP

The official GreenSock skill, written by the library’s own authors. Eight skills in one — core, timeline, ScrollTrigger, plugins, utils, React, performance, frameworks — and it covers Vue and Svelte alongside React. Claude stops inventing API signatures and uses the ones that exist.

gsap.sh1 lines
/plugin marketplace add greensock/gsap-skills

The prompt right after

An example that shows the difference clearly.

gsap.prompt4 lines
Animate the heading reveal on scroll with ScrollTrigger.
The heading splits into words and each word rises with a slight
offset. Trigger it when the section enters at 80% of the viewport,
and nothing replays on scrolling back up.
Skill 03 · freshtechbro/claudedesignskills

Three.js

Scenes, camera, lights, particles. The threejs-webgl plugin brings the skill plus quick commands and dedicated agents; the core-3d-animation bundle groups five technologies — Three.js, GSAP, React Three Fiber, Motion and Babylon.js. Skills can also be uploaded one by one on claude.ai under Settings → Features → Skills as .zip files.

threejs.sh5 lines
/plugin marketplace add freshtechbro/claudedesignskills
/plugin install threejs-webgl

# or the full 3D-and-animation bundle
/plugin install core-3d-animation

The prompt right after

threejs.prompt6 lines
Build a full-screen Three.js scene: a central object rotating
slowly, three-point lighting, and a camera that pulls back on
scroll.

Constraints: 60 frames per second on a mid-range laptop, and a
static fallback image if WebGL is unavailable.
Skill 04 · iart-ai/web-animation-skills

Motion Design

Nine capabilities, including Lottie, SVG animation (progressive drawing, path morphing) and micro-interactions, plus page transitions for the Next.js app router and accessible animation that respects prefers-reduced-motion. This is the layer everyone forgets — the one you only notice when it is missing.

motion-design.sh5 lines
npx skills add iart-ai/web-animation-skills

# or through the marketplace
/plugin marketplace add iart-ai/web-animation-skills
/plugin install web-animation-skills

The prompt right after

motion-design.prompt6 lines
Add the page's micro-interactions: card hover, menu toggle,
notifications appearing.

Non-negotiable rule: every movement respects
prefers-reduced-motion, and no animation runs longer than
250 ms. Nothing may delay a click.
Skill 05 · AThevon/genjutsu

Genjutsu

Fifteen internal modules loaded dynamically according to the stack it detects. Two commands: /genjutsu:cast for a targeted request, /genjutsu:paint to build a complete visual system. Covers the web (GSAP, Framer Motion, native CSS, Three.js and R3F, generative canvas) but also Android via Compose and Apple via SwiftUI. It runs on claude.ai and Cowork too, not only in Claude Code.

genjutsu.sh2 lines
/plugin marketplace add AThevon/genjutsu
/plugin install genjutsu

The prompt right after

genjutsu.prompt5 lines
/genjutsu:paint Take the whole home page and build it a
coherent visual system: typographic hierarchy, section rhythm,
and one motion rule applied throughout.

For a targeted request, /genjutsu:cast is enough.
The traps

What makes an install fail

MistakeWhat actually happens
Confusing marketplace and pluginAdding the repo does not install it. You need the second command — except for GSAP, where the marketplace add is enough on its own.
Forgetting PlaywrightDesign DNA has no way to go and look at the site without it, and it fails without explaining why.
Not restarting Claude CodeAfter a git clone into the skills folder, the skill is not picked up until you restart.
Installing all five at onceFive mechanisms firing at the same time make it impossible to tell which one produced what.
Verification

How to know a skill is actually loaded

Ask Claude to cite a precise API from the library before installing, then again after. Before, it improvises a plausible-looking signature. After, it gives the real one and mentions the pitfalls. If the answer does not change, the skill is not loaded.

Repos change name and organisation. If a command fails, check the address on GitHub before looking any further.

The card to keep

All five, in order

All five are MIT licensed — free, modifiable, usable in commercial projects, none of them asking for an account.

animation-skills.txt14 lines
01  DESIGN DNA   senlindesign/taste-skill
    git clone … ~/.claude/skills/taste          (+ Playwright)

02  GSAP         greensock/gsap-skills               OFFICIAL
    /plugin marketplace add greensock/gsap-skills

03  THREE.JS     freshtechbro/claudedesignskills
    /plugin install threejs-webgl

04  MOTION       iart-ai/web-animation-skills
    npx skills add iart-ai/web-animation-skills

05  GENJUTSU     AThevon/genjutsu
    /plugin install genjutsu
i
If you only install one

Take GSAP. It is the only official one, it covers the most ground, and it is the one whose effect shows from the very first response.

← previous
The free agent web access setup
next →
The Airbnb listing video system
← all experiments