genjutsu

Install

npx skillfoxx add skills/genjutsu

npx skills add athevon/genjutsu --skill genjutsu:cast genjutsu:paint motion-principles mobile-principles desktop-principles design-audit ui-ux-pro-max gsap framer-motion css-native threejs-r3f canvas-generative compose-motion compose-graphics compose-multiplatform swiftui-motion swiftui-graphics -a claude-code -y

npx skills add athevon/genjutsu --skill genjutsu:cast genjutsu:paint motion-principles mobile-principles desktop-principles design-audit ui-ux-pro-max gsap framer-motion css-native threejs-r3f canvas-generative compose-motion compose-graphics compose-multiplatform swiftui-motion swiftui-graphics -a cursor -y

npx skills add athevon/genjutsu --skill genjutsu:cast genjutsu:paint motion-principles mobile-principles desktop-principles design-audit ui-ux-pro-max gsap framer-motion css-native threejs-r3f canvas-generative compose-motion compose-graphics compose-multiplatform swiftui-motion swiftui-graphics -a github-copilot -y

npx skills add athevon/genjutsu --skill genjutsu:cast genjutsu:paint motion-principles mobile-principles desktop-principles design-audit ui-ux-pro-max gsap framer-motion css-native threejs-r3f canvas-generative compose-motion compose-graphics compose-multiplatform swiftui-motion swiftui-graphics -a codex -y

npx skills add athevon/genjutsu --skill genjutsu:cast genjutsu:paint motion-principles mobile-principles desktop-principles design-audit ui-ux-pro-max gsap framer-motion css-native threejs-r3f canvas-generative compose-motion compose-graphics compose-multiplatform swiftui-motion swiftui-graphics -a gemini-cli -y

npx skills add athevon/genjutsu --skill genjutsu:cast genjutsu:paint motion-principles mobile-principles desktop-principles design-audit ui-ux-pro-max gsap framer-motion css-native threejs-r3f canvas-generative compose-motion compose-graphics compose-multiplatform swiftui-motion swiftui-graphics -a cline -y

npx skills add athevon/genjutsu --skill genjutsu:cast genjutsu:paint motion-principles mobile-principles desktop-principles design-audit ui-ux-pro-max gsap framer-motion css-native threejs-r3f canvas-generative compose-motion compose-graphics compose-multiplatform swiftui-motion swiftui-graphics -a roo -y

npx skills add athevon/genjutsu --skill genjutsu:cast genjutsu:paint motion-principles mobile-principles desktop-principles design-audit ui-ux-pro-max gsap framer-motion css-native threejs-r3f canvas-generative compose-motion compose-graphics compose-multiplatform swiftui-motion swiftui-graphics -a opencode -y

/plugin marketplace add AThevon/genjutsu
/plugin install genjutsu

This is third-party code. Review the repository files before installing.

What it does

The skill installs a set of animation and UI design skills plus a shared router. Before writing code it proposes an interaction thesis for you to approve. Then it applies patterns for motion, micro-interactions and visual systems across several platforms: web with GSAP, Motion, Three.js and native CSS, Android with Jetpack Compose and Compose Multiplatform, Apple with SwiftUI. Baseline references like motion principles and a design audit load on every invocation, with stack-specific skills added on top. API version data is kept separate and dated so it does not rely on stale facts.

Who it is for. For frontend, Android and Apple developers who want taste in motion and interface detail.

Example request

Make the pricing cards feel physical on hover

Limitations

The skill provides knowledge and patterns but does not replace building and testing the project. Some skills depend on SDK and browser versions; the data is dated and needs rechecking over time. In claude.ai it needs a plan with code execution enabled to load sub-skills. It requires no keys or paid external services.

How to disable. Remove the genjutsu plugin via /plugin, or if you installed it on claude.ai, disable the uploaded skill.

Security check

• The skill is references and patterns; you write and run the project code yourself

README in short

The README describes genjutsu as a creative coding skill set for Claude Code, claude.ai and Cowork that turns a functional interface into an expressive one through motion, interaction patterns and visual systems. It covers web with React, Vue, Svelte, plain CSS, Three.js and Canvas, Android with Jetpack Compose and Compose Multiplatform, Apple with SwiftUI. Before writing code the skill proposes an interaction thesis to approve. The project was formerly creative-excellence, with commands renamed to cast and paint. It installs as a Claude Code plugin or by uploading a zip on claude.ai. MIT licensed.

SKILL.md

---
name: motion-principles
description: "Motion design foundation - timing, easing, enter/exit patterns, accessibility, performance."
---

# Motion Principles

> The foundation. Loaded by every creative skill invocation.
> Concise rules here. Deep-dive in `references/`.

## Timing Rules

| Context | Duration | Why |
|---|---|---|
| Micro-interaction (toggle, hover, focus) | 100-150ms | Instant feedback, no perceived delay |
| UI transition (modal, drawer, tab switch) | 200-300ms | Smooth but never sluggish |
| Page/route transition | 300-500ms | Establishes spatial narrative |
| Scroll-driven / 3D | Free (progress-based) | Tied to user input, no fixed duration |

**Frequency rule:** The more often an animation plays, the shorter and subtler it must be.

Related