The art of illusion.
A creative-coding skill for Claude Code and claude.ai. It takes the interface you are already building and gives it a look and a way of moving, written in your framework with your animation library. When the job is a whole website, it can summon a team of agents to build it under one art director.
- 17 modules
- Web, Apple, Android
- MIT
scroll to paint
Everything here is drawn in code.
Nothing on this page is an image file. The ink you have been scrolling through is painted on a canvas, stroke by stroke, at the pace of your own scroll. Three more techniques below, running live, each one named.
wet ink
canvas 2d · marbling maps
Comb the stroke with your pointer, or tap it. Each pass bends the bristles by an area-preserving map and is logged; let go and the log plays backwards to the exact print.
verlet chain
canvas 2d · physics
Position-based dynamics with distance constraints, relaxed over several iterations per frame. Hover to pull it out of rest.
scroll-driven
css only · animation-timeline
No JavaScript at all. A view-progress timeline drives the stroke, behind a @supports guard with a static fallback.
Named, then struck.
Left alone, a model reaches for the same defaults on every page. genjutsu names them, holds each one up against the thesis you approved, and takes out the ones nobody asked for. These three are quoted from the pages a model wrote without genjutsu in our eval runs.
Reflex convergence Monospace everywhere
Independent design studio · three peopleWhich of Fenwick's words are code or tabular data, and does the mono stop there? Design studio landing, the eyebrow over the hero
Reflex convergence Display face by reflex
Design for people who make food and drink.Which sentence of the thesis names this serif, and says why this face for Fenwick? Design studio landing, the hero headline
Hollow copy One intent, several labels
Sign up free Create a free accountWhat is the one action this page asks a translator for, and what does Ledgerline call it? Invoicing SaaS landing, the header button and the hero button
Tells left on the page
| case | without genjutsu | with genjutsu |
|---|---|---|
| Design studio landing | 2 | 0 |
| Invoicing SaaS landing | 2 | 0 |
Counted by genjutsu's own audit, audit.py --group tells, which counts what a script can see: here a numbered eyebrow and a run of middle dots on the studio page, and the split call to action on the SaaS page. The mono and the serif above are manual reads, and this site keeps a serif and mono labels of its own because its thesis names them in its Allowed patterns line. Our cases and our checks: read it as a measure of what the module does, not as a benchmark. claude plugin eval, --ablation with-without, first run of each arm, 2026-09-28, genjutsu ef31234.
Run it on your own project
No model involved: a standard-library Python script reads your source and lists each tell it finds with its file:line and the text, for you to hold against your thesis.
It cannot see copy held in JavaScript data, and some tells are manual reads. With the Claude Code plugin the script sits under the plugin install; the field guide gives the path.
Two arts, one hand.
In Claude Code they are slash commands. On claude.ai you ask. Both read your project before they touch it, and both audit their own work before they call it finished.
/genjutsu:cast
The Illusionist
Gives an interface motion.
- scanDetects your framework, your CSS layer and your animation library, or the deliberate absence of one.
- discoverAsks about mood, references and constraints. One question at a time, and only when the request is genuinely open-ended.
- thesisStates in one sentence what will move, how fast, with which easing, and what it refuses to do. Then waits for your yes.
- implementWrites the motion with your stack's own APIs. Proposes two or three variants once the scope is a section or larger.
- auditFrame budget, reduced motion, exit animations, focus visibility, contrast, four breakpoints.
/genjutsu:paint
The Master Painter
Builds a visual universe from nothing.
- brainstormNever skipped, least of all when you say just make it look good. Product, audience, mood, references, stack.
- two thesesA visual thesis naming color, typography, spacing and component style. An interaction thesis naming timing, hover, scroll and forbidden patterns.
- design systemWrites MASTER.md into your project, plus the token files your stack expects: CSS custom properties, Theme.kt, or Color+App.swift.
- implementPage by page, validated page by page. Every value traces back to the system. No magic numbers, no rogue hex.
- auditThe full design audit, every time, even when you already look happy.
cast adapts to what already exists. paint replaces the visual layer entirely. Same sub-skills underneath, opposite entry points. When the brief is a whole site, either one proposes the third art, once, and waits for your yes.
One art director, many clones.
The third art is for the one job the first two are too small for: a whole website or web app, first version. One agent keeps the direction and builds the home page itself. A team of subagents carries the width, in parallel, on files that never overlap, reviews it through lenses that never see each other, and refines it until only minor issues are left, the tier's round cap is reached, or a round fixes nothing. You are asked twice, and once more only to go past the cap.
/genjutsu:bunshin
The Shadow Clones
Builds a whole site with a team of agents.
read art director
The stack, the brief, every source it names, what this host can summon, and how big the job is. Anything smaller than a site steps down to cast or paint here.
summon you, first answer
The plan, what this host can do, whether Impeccable is there, the stack and the scaffold it would install, and what each tier costs. Then one set of questions: the tier first, then the product.
harvest art director
The client's own material: their images, their texts, the facts with their sources, and the list of what is missing.
research four clones, then a synthesis
Direct competitors, the premium end, the second audience, the path from the main channel to a request. Real pages, and a source for every claim.
direction you, second answer
Directions drawn rather than defaulted, by Impeccable when it is installed. Each card carries its interaction thesis and its Allowed patterns line, so one choice validates both.
material art director
Type chosen from rendered specimens, photographs cropped, cutouts fitted to the object's own edge. By evidence, not by reflex.
foundation art director
The scaffold when there is none, tokens, every text in typed content files, the shared components, every route, and the home page with its one signature interaction, captured, fixed and captured again.
clones one clone per page
The other pages in parallel. Each clone owns its files and nothing else, builds in a copy of its own, and asks for any shared change instead of making it.
prove art director
Build, type check, the tells audit, every page captured at four sizes without a dev server, and scripted tests of the paths that sell.
review a clone per lens, then a plan
Once: finish, mobile, desktop, truth, tech (three lenses on lean), each blind to the others. A plan clone checks every finding against the code and groups the fixes by owner; the finish disposition decides what comes next.
refine a clone per owner, then the verdict
Each round: the fixes in parallel, new captures, a verdict that scores them and writes the next plan, cold eyes when the tier calls for them, and rules from their notes. It stops at minor only, the tier's cap, or a round that fixed nothing.
seal art director
DESIGN.md, an AGENTS.md for the AI that will maintain the site, a launch guard for the facts still missing, the audit, and the report.
The cost, announced first
| tier | refine rounds | estimate |
|---|---|---|
| lean | 1 | about 6M subagent tokens, 3 to 4 hours |
| standardrecommended | up to 2 | about 8 to 9M subagent tokens, 4 to 6 hours |
| full | up to 4 | about 12 to 13M subagent tokens, 6 to 10 hours |
Estimated from the per-unit costs of one measured run: a seven-page site in two languages, about 10.5M subagent tokens over six to eight hours, not counting the main session's own. Two of those units, a three-lens review and a verdict without cold eyes, were not measured and are estimates themselves. Yours scales with the page count, and bunshin works it out before the first clone.
What the host needs
- A session that can spawn subagents: Claude Code, as far as the repository has checked; claude.ai and Cowork are not tested yet. Without one, bunshin says so and hands over to paint.
- Node 22 and Chrome, to capture the static build without a dev server.
- Impeccable, optional. It leads the interview and draws the direction.
genjutsu never bundles Impeccable, and bunshin installs nothing without your yes: the one install your answer to the tier covers is the scaffold it names. Web only, for now. Nothing is committed, pushed or deployed unless you ask.
Seventeen jutsu, loaded on demand.
genjutsu does not empty seventeen manuals into the context window. The skills detect your stack first, so a Compose project never pays for Metal shaders and a static site never pays for Three.js.
Foundations
motion-principles
The foundation, loaded every single time. Duration by context, easing by direction, the five things motion must never do, and reduced-motion handling for web, SwiftUI and Compose.
Foundations
design-audit
A tested script, not a checklist: hygiene checks for missing exits, stripped focus rings and animated layout properties, a tells group, and an inventory of the durations, easings, colours, radii and fonts in use. Every finding comes with file:line.
Foundations
tells
The defaults a model reaches for when nobody asked: an invented build status, a numbered eyebrow, three equal cards, a filler verb. Each one is named with its evidence and a question back to the thesis, never a replacement. Web for now.
Foundations
ui-ux-pro-max
A searchable dataset with a CLI: 84 styles, 192 palettes, 74 font pairings, 25 chart types and 99 UX guidelines across 22 stacks. cast and paint read it; you never call it.
Foundations
mobile-principles
44pt on iOS, 48dp on Android, 24px minimum on the web. Thumb zones, safe areas, gesture conflicts, and the rule that anything reachable only by hover is gone on a phone.
Foundations
desktop-principles
Hover states, pointer precision, keyboard shortcuts, multi-window state and focus management, across macOS, Windows, Linux and desktop web.
Foundations
orchestration
How bunshin runs a team of subagents: a six-part brief for every clone, one owner per file, builds in isolated copies, captures of the static build without a dev server, independent review lenses, a fix plan on disk, cold eyes and a stop rule. Five workflow templates that CI runs against stubbed agents, answering and answering null, and two scripts, shoot.mjs for the captures and brief.mjs for a host without a workflow tool. Loaded by bunshin alone.
Web
css-native
Zero-dependency motion: scroll-driven animation timelines, the View Transitions API, @starting-style with allow-discrete, anchor positioning, container queries, clip-path reveals.
Web
gsap
GSAP core, timelines, ScrollTrigger and the full plugin set, all free since 3.13. Loaded only when GSAP is already in package.json.
Web
framer-motion
AnimatePresence, layout animations, shared layout transitions, gestures and motion values. Two package names, one library: motion and framer-motion publish the same v14.
Web
threejs-r3f
Three.js r187 and R3F 9, React 19 only. Scene composition, custom shader materials, postprocessing, and the budget you have to hit: 100 draw calls, 1M triangles, 60fps.
Web
canvas-generative
Algorithmic art in Canvas 2D: noise families, particle pools with no allocation in the hot loop, flow fields, L-systems, attractors, double buffering for trails.
Apple
swiftui-motion
withAnimation, transitions, matchedGeometryEffect, PhaseAnimator, KeyframeAnimator, spring configuration and gesture-driven animation.
Apple
swiftui-graphics
Metal shaders through colorEffect, layerEffect and distortionEffect, plus visualEffect, Liquid Glass on iOS 26, Canvas, and holographic or CRT treatments.
Android
compose-motion
The Compose animation foundations: animate*AsState, AnimatedVisibility, Crossfade, updateTransition, SharedTransitionLayout and gesture handling.
Android
compose-graphics
Material 3 Expressive motion physics, AGSL runtime shaders on Android 13 and up, generative DrawScope work, and graphicsLayer effects.
Android
compose-multiplatform
KMP patterns: expect/actual composables, platform-specific code paths, density and font handling across targets, and iOS interop.
Every surface, native.
No wrapper, no lowest common denominator. What lands in your project is what that platform actually wants.
Web
GSAP and its plugins, Motion for React, native CSS scroll-driven animation and View Transitions, Three.js and React Three Fiber, generative Canvas 2D.
Apple
SwiftUI animation and transitions, Metal shaders through colorEffect, layerEffect and distortionEffect, Liquid Glass, Canvas. iOS and macOS, told apart before anything is written.
Android
Jetpack Compose animation, AGSL runtime shaders, Material 3 Expressive motion physics, generative DrawScope, and Compose Multiplatform with expect/actual composables.
Against the default.
AI already writes interfaces that are clean, correct and forgettable. The gap is not capability, it is the absence of a position. genjutsu gives Claude one, and holds it to it.
Principles before code.
Motion foundations load before a single line is written. Duration chosen by context, easing chosen by direction, and the more often an interaction fires the shorter it gets.
A thesis before motion.
One sentence, stated out loud and validated, naming what moves and what deliberately does not. No thesis, no code.
An audit before it ships.
Reduced motion, frame budget, exit animations, focus rings, contrast at every frame of a transition. Run every time, not when it is convenient.
Your stack, not ours.
No dependency is installed without asking first. If your project already chose GSAP, that choice is respected instead of argued with.
Three doors in.
Same skill, same brush. One command in any terminal, the Claude Code plugin, or the browser.
Any terminal · npx
One command, installed for your user rather than into the project you happen to be in. Then type /genjutsu in Claude Code, or just say what you want.
npx skills update -g brings it to the newest release.
Codex, Cursor and the other agents the skills CLI knows get it from the same command. It runs there, but the maintainer does not test it there and does not support it.
Claude Code · plugin
Two slash commands, typed inside a Claude Code session. The first adds the marketplace, the second installs the plugin. Then run /genjutsu:cast or /genjutsu:paint.
claude.ai · web and apps
One file, the whole skill.
- Download the zip below.
- In claude.ai, open Customize, then Skills, then Upload skill. Upload it and switch it on.
- Type /genjutsu in any chat, or just say what you want.
The link always serves the newest release from GitHub. Needs the code execution feature: Pro, Max, Team and Enterprise.