Model or dataset
AThevon/genjutsu avatar
AThevon/genjutsu

genjutsu: Claude Code skills that ask before they animate

Creative coding skills for Claude Code, claude.ai and Cowork. Motion, micro-interactions and design systems across Web (GSAP, Motion, Three.js, CSS), Android (Jetpack Compose) and Apple (SwiftUI). Proposes an interaction thesis you approve before it writes any code. Anti-AI-slop.

652 stars48 forksPythonNOASSERTION

At a glance

What is it?
genjutsu is a set of Claude Code skills for motion, micro-interactions and design systems across web, Android and Apple platforms, built around a rule that the agent proposes an interaction thesis for you to approve before it writes any code. The three entry points are cast for a single interface, paint for a product's look, and bunshin for a whole site.
Who is it for?
genjutsu suits a developer who uses Claude Code and has found that generated interfaces look competent but inert, since the thesis gate is the part that changes the output rather than the prompting tricks around it. It does not suit you if you want the agent to run without checking in, because the whole design is built around approval steps, and bunshin in particular asks twice before it starts.
Can I use it commercially?
Check first. The repository uses a licence we do not classify automatically, so read its LICENSE file before any commercial use.
Is it still maintained?
Yes. The repository last received commits 18 days ago.
What is it written in?
Mainly Python, according to GitHub's language statistics.

Answers come from the project's GitHub data, last synced on October 23, 2026, and from our analysis. They are not legal advice.

Editorial analysis

Three scales, and the approval gate in the middle of each

genjutsu is a set of Claude Code skills for making an interface move, giving a product its look, and building a whole website. The positioning is motion and design work rather than general coding help.

The core mechanism is a gate. The project description says it proposes an interaction thesis you approve before it writes any code, and the table of the three scales shows the same shape in each case, with the request you type and what you get back.

cast is for one interface moving, for example /genjutsu:cast make the pricing cards feel physical on hover. You get an interaction thesis you approve, shown the way you pick, and the ways named are a rendered page with a replay button, a route in your project, or one sentence. Then you get the code in the stack you already use, with a short audit of what it wrote.

paint is for a product's whole look, for example /genjutsu:paint build me a portfolio from scratch. You get a brainstorm, a visual and an interaction thesis, a MASTER.md design system for your stack, the page, and a full audit. The detail that matters here is that on a project that already has a design, it asks first whether to keep the brand, change part of it, or redesign.

bunshin is for a whole site, by a team of agents, for example /genjutsu:bunshin redesign our architecture practice's whole site from the current one and our project PDFs. It states its cost, then asks you twice, the tier and then the direction. An art director runs research, one builder per page, reviewers and fix rounds until a stop rule ends the loop. You get the site, DESIGN.md, AGENTS.md and a report of what was verified and what was not.

If you are unsure which to use, you can ask for the result you want and the right skill is picked, and cast and paint propose bunshin once, with its cost, when the brief is a whole site.

One caveat on the table itself, which is easy to miss: the requests in the middle column are examples of what you might type, not recorded runs.

Installing the skills, and the trap in the command

Installation is one command, and the documentation is unusually insistent about the details of it.

bash
npx skills add https://genjutsu.athevon.dev -g

Then you describe the task in Claude Code, or type /genjutsu. To follow releases, you use npx skills update -g, and the instruction is to keep the -g on both commands and to use the URL, not the repository: npx skills add AThevon/genjutsu installs the skills without their modules.

That warning is the kind of detail that costs an hour if you get it wrong. The site URL serves the skills together with the modules they depend on, and installing from the GitHub repository gives you a partial installation where the skills exist but the supporting modules do not.

The alternative route is as a Claude Code plugin, installed from inside a session, which gives you the slash commands /genjutsu:cast, /genjutsu:paint and /genjutsu:bunshin:

text
/plugin marketplace add AThevon/genjutsu
/plugin install genjutsu

The README is careful about scope here too. There is a separate documentation page covering project scope, claude.ai, Cowork, other agents, and what bunshin needs beside it.

Platform coverage is broad. The project description lists Web, covering GSAP, Motion, Three.js and CSS, and the README is more specific, naming React, Vue, Svelte, Astro, vanilla CSS, Three.js and Canvas for the web, Jetpack Compose and Compose Multiplatform for Android, and SwiftUI for Apple on iOS and macOS. One exception is stated plainly: bunshin is web only for now.

The repository layout matches a Claude plugin distribution rather than a normal package. There is a .claude-plugin/ directory, a skills/ directory holding the skills themselves, an evals/ directory, a packaging/ directory, a package-for-claude-ai.sh script, a PLATFORM-CONTRACT.md, and docs/ and assets/ directories.

The receipts, and what the project publishes about its own runs

The examples section is unusual enough to be worth reading on its own, because it is a description of how the project makes its claims checkable.

The examples are recorded runs on fictional clients and one real one, captured from the code each run left or, for the real client, from the live site. Each one gives the first line of the request, how it ran, what it cost, and a receipt with the full prompt, what the run checked, and what it left unverified or got wrong.

Everything they link lives in a separate genjutsu-examples repository at a specific tag, readme-2026-10-05, holding the code each run wrote, its receipt, its conversation and its media. Each one also runs as a live demo built from that code as it stands.

Two distinctions are spelled out. A one-shot headless run is a single claude plugin eval session, where the prompt answers the gates up front and nobody replies after that, so there is no conversation to publish. A conversation is a session in which an agent plays the client and answers the gates, and its full transcript, the brief that agent was given and the first message it sent are linked.

Two more caveats about specific examples. The bunshin example is the run bunshin was extracted from, made before v4.1.0 shipped, its cost is in subagent tokens as genjutsu publishes it, and its request and its client's inputs stay private. And a run on a build that is not a release names the branch and commit it ran on instead of a version.

The Nocturne example shows the shape of a run in practice. The request was to build the landing page for Nocturne, the late program of a planetarium in Lisbon. The run started from a new page on an empty React template and a star catalogue, asked questions on the mood and the hero, showed two theses as a rendered page, and then drew the dome from data/stars.json with 403 stars and Saturn where they stand over Lisbon at 22:00 on 9 October 2026.

The general point is that the receipts carry a statement of what was not verified. A design tool that shows you only its successes is asking to be trusted rather than checked.

Design system output, platform contracts, and a licence that needs reading

Two of the outputs are worth naming separately, because they are files rather than pixels.

paint produces a MASTER.md design system for your stack, and bunshin produces both DESIGN.md and AGENTS.md alongside the site and a report of what was verified and what was not. The design system as a committed file rather than as a set of styles inside a component tree is the thing that makes a later redesign a document edit rather than a rewrite.

The PLATFORM-CONTRACT.md file at the repository root suggests that the project takes the difference between platforms seriously, and the topic tags support that, listing compose-multiplatform, jetpack-compose, swiftui, ios, android, gsap, motion, framer-motion and threejs alongside the Claude Code and plugin terms. A skill that claims to work on Compose Multiplatform and SwiftUI and the browser is making a promise about three quite different rendering and interaction models, and the contract file is where that promise would be pinned down.

The licence needs a note. The repository is recorded as using a custom licence that GitHub cannot classify, with the instruction to see the LICENSE file, while the badge in the README reads MIT. Those two statements do not obviously agree, and the recorded licence identifier is the one that says the automatic classification failed. Read the LICENSE file before you use this in a commercial product, particularly since a skills package that writes code into your project has downstream licence implications of its own.

The homepage is genjutsu.athevon.dev, with the documentation under genjutsu.athevon.dev/docs, and the release history shows v4.0.0 on 2026-09-28, v4.1.0 on 2026-09-30 and v4.1.1 on 2026-10-04, with the last push on 2026-10-05.

Editorial conclusion

genjutsu suits a developer who uses Claude Code and has found that generated interfaces look competent but inert, since the thesis gate is the part that changes the output rather than the prompting tricks around it. It does not suit you if you want the agent to run without checking in, because the whole design is built around approval steps, and bunshin in particular asks twice before it starts. Before you install it, read the plugin instructions carefully, since installing from the GitHub repository rather than the site URL gives you the skills without their modules, and check the licence file yourself, because the repository carries a custom licence that GitHub could not classify even though the badge reads MIT.

Frequently asked questions

How do I install the genjutsu skills?

Run npx skills add https://genjutsu.athevon.dev -g, then describe the task in Claude Code or type /genjutsu. Use the URL rather than the repository, because npx skills add AThevon/genjutsu installs the skills without their modules, and keep the -g flag on the update command as well.

What is the difference between genjutsu cast, paint and bunshin?

cast handles one interface moving, paint handles a product's whole look and produces a MASTER.md design system, and bunshin handles a whole site built by a team of agents and produces DESIGN.md, AGENTS.md and a report of what was verified. cast and paint propose bunshin once, with its cost, when the brief is a whole site.

Which platforms does genjutsu support?

Web with React, Vue, Svelte, Astro, vanilla CSS, Three.js and Canvas, Android with Jetpack Compose and Compose Multiplatform, and Apple with SwiftUI on iOS and macOS. bunshin is web only for now.

How do I install genjutsu as a Claude Code plugin?

Inside a session, run /plugin marketplace add AThevon/genjutsu and then /plugin install genjutsu. That gives you the /genjutsu:cast, /genjutsu:paint and /genjutsu:bunshin commands.

Official sources

  1. AThevon/genjutsu on GitHub
  2. Issues
  3. Project website
  4. README
  5. Releases
Add this badge to your README

If you maintain this project, the badge below links readers to this analysis and shows its maintenance status from the daily GitHub snapshot. Paste the markdown into your README; add ?metric=license or ?metric=stars to the image URL for a different field.

Add this badge to your README

markdown
[![Hysen Labs](https://hysenlabs.com/badge/athevon-genjutsu.svg)](https://hysenlabs.com/projects/athevon-genjutsu)

Was this useful?