AThevon/genjutsu

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.

genjutsu – 为 Claude 提供的 AI 驱动的创意编程助手

是什么 – genjutsu 是一个 Claude‑AI 插件，允许您通过 LLM 为广泛的前端栈（Web：React/Vue/Svelte，Android Compose，Apple SwiftUI）添加或重新设计高动态 UI 元素。它通过两个高级“技能”实现：

技能	使用场景	功能
`/genjutsu:cast`	小规模、独立的增强 – 悬停效果、滚动驱动动画、快速按钮过渡。	扫描项目依赖项，提出交互理论（对预期动效的简要描述），然后生成具体代码（GSAP、Framer Motion、Compose、SwiftUI 等），并快速审计可访问性和性能。
`/genjutsu:paint`	大规模重设计 – 整个着陆页、全新设计系统、作品集网站。	从头脑风暴开始，创建完整的视觉设计系统（Tailwind/CSS、`Theme.kt`、`Color+App.swift`），实现 UI，并完成全面审计，涵盖动效缺失、色彩对比度、响应式设计和原生问题。

两个技能在几个审批节点（理论、视觉身份、设计系统）暂停，并可将结果以实时预览、工件（如临时路由或 @Preview 文件）或内联文本形式呈现。

打包方式

Claude AI（网页/应用） – 上传单个 genjutsu.zip 包或每个技能/子技能的独立 ZIP。
Claude Code（CLI） – 通过插件市场添加（/plugin marketplace add AThevon/genjutsu）。
Cowork – 从插件面板安装；相同命令适用，支持主机特定的预览处理。

仓库包含一个小型构建脚本（package-for-claude-ai.sh），用于生成包和 17 个独立技能 ZIP。

架构概览

genjutsu/
├─ .claude-plugin/          # 插件清单文件
├─ skills/
│   ├─ cast/                # 「幻术师」流程的协调器
│   ├─ paint/               # 「大师画家」流程的协调器
│   └─ _jutsu/              # 内部子技能（不直接调用）
│       ├─ motion-principles/      # 核心时间/缓动规则
│       ├─ mobile-principles/      # 触摸目标与手势指导
│       ├─ desktop-principles/     # 悬停、键盘、多窗口规则
│       ├─ design-audit/           # 包大小与性能检查
│       ├─ ui-ux-pro-max/          # 设计系统数据（样式、调色板…）
│       ├─ gsap/                  # Web 动画库支持
│       ├─ framer-motion/          # 替代 Web 动画库
│       ├─ css-native/             # 仅 CSS 动画（滚动驱动、视图过渡）
│       ├─ threejs-r3f/            # 通过 React-Three-Fiber 的 WebGL/Three.js
│       ├─ canvas-generative/      # 程序化画布图形
│       ├─ compose-motion/         # Android Compose 动画 API
│       ├─ compose-graphics/       # Compose 图形与着色器
│       ├─ compose-multiplatform/  # KMP/CMP 共享代码
│       ├─ swiftui-motion/         # SwiftUI 动画原语
│       └─ swiftui-graphics/       # Apple 的 Metal 基础视觉效果
├─ package-for-claude-ai.sh   # 构建 ZIP 包
└─ README.md

协调器（cast 和 paint）会检测主机环境（Claude AI、Claude Code、Cowork），仅加载与检测到的栈相关的子技能，保持运行时占用最小。

快速入门（开始使用）

下载 – 从发布页面下载最新包（genjutsu.zip）。
上传 – 在 Claude AI 中进入 自定义 > 技能 > 上传技能 或通过 Claude Code 市场添加（/plugin marketplace add AThevon/genjutsu）。

在聊天中调用技能：

/genjutsu:cast 让价格卡片在悬停时有物理感

或

/genjutsu:paint 使用新的运动驱动设计系统重设计着陆页

跟随交互式提示 – 批准建议的交互理论，审查生成的预览，并让技能将文件写入您的项目。

适合谁使用？

希望借助 AI 实现动效设计，而无需手动查阅库文档的前端开发者。
寻求一致且经过性能检查的动画的移动工程师（Compose 或 SwiftUI）。
已在使用 Claude AI 进行代码生成，并希望拥有专用“设计-动效”助手的团队。

贡献与治理

该仓库是 知识库插件 – 贡献应为事实性修正（例如：“关于 GSAP 的 ScrollTrigger 版本的这一说法已过时”）。
严格的基于证据的流程在 CONTRIBUTING.md 和 PLATFORM-CONTRACT.md 中有文档记录。
在六个平台上维护 736 个 API 符号是一项社区驱动的工作；任何人都可承担特定栈（Web、Android、Apple）的管理职责。

许可证

MIT – 可自由使用、修改和重新分发。

TL;DR – genjutsu 是一个 Claude‑AI 插件，可将自然语言设计请求转化为适用于 Web、Android 和 Apple 平台的生产就绪动效代码，提供快速修复“cast”操作和全面“paint”重设计，全部由一组模块化内部子技能支持。