genjutsu
为界面注入动效的创意编码技能
安装使用
复制下面这段提示词发给你的 AI（Claude / Cursor / TRAE / Codex / WorkBuddy 等），它会自动帮你完成安装：
帮我安装这个 AI Skill：genjutsu。 它的用途是：为界面注入动效的创意编码技能 完整的 Skill 内容见：https://321skill.com/skills/genjutsu/raw/index.md 请读取该页面内容，如果是 SKILL.md 格式直接安装，如果是 README 提炼核心 prompt 后安装。
提示词包含完整的 Skill 内容链接，AI 读取后即可完成安装。你也可以 查看完整内容 确认无误。
使用示例
'用cast技能为我的React页面添加一个滚动驱动的视差效果，要求使用GSAP和Intersection Observer'，它首先会扫描项目package.json，确认已安装GSAP，然后提出一个包含视差层级、滚动触发时机和减动备选方案的交互论点，之后生成代码并运行微审计，确保无性能问题。
介绍
Genjutsu 是一套专为 Claude Code 设计的创意编码技能，旨在将普通的用户界面转化为富有表现力的交互体验。它涵盖 Web（React、Vue、Svelte、Three.js、Canvas）、Android（Jetpack Compose、Compose Multiplatform）和 Apple（SwiftUI iOS/macOS）平台，通过两个核心子技能——/genjutsu:cast（幻术师）和/genjutsu:paint（大师画家）——帮助开发者快速实现从单点悬停效果到完整滚动驱动页面、从即兴动效到完整设计系统的全流程创意编码。
使用时，只需在 Claude Code 中调用对应的技能命令。cast 会先扫描项目依赖，自动识别你使用的框架和动画库，然后提出一个“交互论点”并快速实现，最后执行微型审计（检查减动、退出动画、重排性能等）。paint 则从构思阶段开始，引导你定义视觉与交互论点，生成完整的设计系统并持久化到 MASTER.md，再逐模块实现并执行全面审计。整个过程无需离开编辑器，创意与实现无缝衔接。
适合前端开发者、全栈开发者、UI/UX 设计师以及任何希望为产品提升视觉品质的创作者。无论你是做一个简单的按钮微动效，还是构建一个跨平台的设计语言，Genjutsu 都能提供结构化的创作流程和最佳实践模板。
建议配合 Claude Code 的上下文感知能力使用，在项目根目录下调用技能以获得最佳依赖检测效果。对于已有设计系统的团队，可先用 paint 生成统一规范，再用 cast 在各组件中快速落地。注意，该技能偏向创意与动效实现，不适用于纯后端逻辑或静态页面生成。
核心特点
与通用代码生成类技能不同，Genjutsu 专注于交互动效和视觉系统，有完整的“交互论点”前置设计流程，且能根据项目依赖自动选择最佳动画方案（GSAP、Framer Motion、CSS 等），并附带性能审计。
注意事项
不适合纯后端开发、文本处理或数据分析任务，且对非现代前端框架（如 jQuery）的支持有限。
常见问题
Genjutsu 和普通的动画库有什么区别？
Genjutsu 不是动画库，而是一个 Claude Code 技能，它自动根据你的项目栈选择最佳动画方案，并帮你完成从构思到实现的完整流程，包括性能审计。
可以在 React 和 Vue 项目中同时使用吗？
可以。Genjutsu 会自动检测项目中的依赖，如果是 React 会优先使用 Framer Motion 或 GSAP，Vue 则使用 Vue Transition 或 GSAP。
给 AI 助手的安装指引
如果你的 AI 编程助手（Claude Code、Cursor、TRAE 等）能看到这个页面，把下面这段发给它即可自动完成安装：
请访问 https://321skill.com/skills/genjutsu/raw/index.md 读取 genjutsu 的原始 Skill 定义（Markdown 格式），按其中说明在我的环境里完成安装和配置。
AI 可直接读取的原始 Markdown 地址：/skills/genjutsu/raw/index.md（查看排版版本）