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」重設計，全部由一組模組化內部子技能支援。