AThevon/genjutsu

genjutsu – AI‑powered creative‑coding assistant for Claude

What it is – genjutsu is a Claude‑AI plugin that lets you ask an LLM to add or redesign motion‑heavy UI elements across a wide range of front‑end stacks (web React/Vue/Svelte, Android Compose, Apple SwiftUI). It works through two high‑level “skills”:

Skill	When to use	What it does
/genjutsu:cast	Small, isolated enhancements – a hover effect, a scroll‑driven animation, a snappy button transition.	Scans your project’s dependencies, proposes an interaction thesis (a short description of the intended motion), then generates the concrete code (GSAP, Framer Motion, Compose, SwiftUI, etc.) and runs a quick audit for accessibility and performance.
/genjutsu:paint	Large‑scale redesigns – a whole landing page, a brand‑new design system, a portfolio site.	Starts with a brainstorming session, creates a full visual‑design system (Tailwind/CSS, Theme.kt, Color+App.swift), implements the UI, and finishes with a comprehensive audit covering motion gaps, color contrast, responsiveness and native hitches.

Both skills pause at a few approval gates (thesis, visual identity, design system) and can present the result as a live preview, an artifact (e.g., a temporary route or a @Preview file), or inline text.

---

How it’s packaged

• Claude AI (web/app) – upload a single genjutsu.zip bundle or individual ZIPs for each skill/sub‑skill.
• Claude Code (CLI) – add via the plugin marketplace (/plugin marketplace add AThevon/genjutsu).
• Cowork – install from the plugin panel; the same commands work, with host‑specific preview handling.

The repository contains a small build script (package-for-claude-ai.sh) that produces the bundle and the 17 individual skill ZIPs.

---

Architecture at a glance

genjutsu/
├─ .claude-plugin/          # plugin manifest files
├─ skills/
│   ├─ cast/                # orchestrator for the "Illusionist" pipeline
│   ├─ paint/               # orchestrator for the "Master Painter" pipeline
│   └─ _jutsu/              # internal sub‑skills (never invoked directly)
│       ├─ motion‑principles/      # core timing/easing rules
│       ├─ mobile‑principles/      # touch‑target & gesture guidance
│       ├─ desktop‑principles/     # hover, keyboard, multi‑window rules
│       ├─ design‑audit/           # bundle‑size & performance checks
│       ├─ ui‑ux‑pro‑max/          # design‑system data (styles, palettes…)
│       ├─ gsap/                  # web motion library support
│       ├─ framer‑motion/          # alternative web motion library
│       ├─ css‑native/             # CSS‑only motion (scroll‑driven, view‑transitions)
│       ├─ threejs‑r3f/            # WebGL/Three.js via React‑Three‑Fiber
│       ├─ canvas‑generative/      # procedural canvas graphics
│       ├─ compose‑motion/         # Android Compose animation APIs
│       ├─ compose‑graphics/       # Compose graphics & shaders
│       ├─ compose‑multiplatform/  # KMP/CMP shared code
│       ├─ swiftui‑motion/         # SwiftUI animation primitives
│       └─ swiftui‑graphics/       # Metal‑based visual effects for Apple
├─ package‑for‑claude‑ai.sh   # builds the ZIP bundles
└─ README.md

The orchestrators (cast and paint) detect the host environment (Claude AI, Claude Code, Cowork) and load only the sub‑skills relevant to the detected stack, keeping the runtime footprint small.

---

Getting started (quick‑start)

1. Download the latest bundle from the releases page (genjutsu.zip).
2. Upload it in Claude AI → Customize > Skills > Upload skill or add it via the Claude Code marketplace (/plugin marketplace add AThevon/genjutsu).
3. In a chat, invoke the skill:

   /genjutsu:cast make the pricing cards feel physical on hover
   

   or

   /genjutsu:paint redesign the landing page with a new motion‑driven design system
   

4. Follow the interactive prompts – approve the proposed interaction thesis, review the generated preview, and let the skill write the files into your project.

---

Who might use it?

• Front‑end developers who want AI‑assisted motion design without manually hunting library docs.
• Mobile engineers (Compose or SwiftUI) looking for consistent, performance‑checked animations.
• Teams that already use Claude AI for code generation and want a dedicated “design‑motion” assistant.

---

Contribution & governance

• The repo is a knowledge‑base plugin – contributions are expected to be factual corrections (e.g., “this claim about GSAP’s ScrollTrigger version is outdated”).
• A strict evidence‑based process is documented in CONTRIBUTING.md and PLATFORM‑CONTRACT.md.
• Maintaining the 736 API symbols across six platforms is a community‑driven effort; owners can take stewardship of a specific stack (Web, Android, Apple).

---

License

MIT – free to use, modify, and redistribute.

---

TL;DR – genjutsu is a Claude‑AI plugin that turns natural‑language design requests into production‑ready motion code for web, Android, and Apple platforms, offering both quick‑fix “cast” actions and full‑scale “paint” redesigns, all backed by a modular set of internal sub‑skills.