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プラグインであり、幅広いフロントエンドスタック（Web: React/Vue/Svelte、Android Compose、Apple SwiftUI）において、動きの多いUI要素の追加または再設計をLLMに依頼できるようにします。2つの高レベルな「スキル」を通じて動作します：

スキル	使用タイミング	機能
`/genjutsu:cast`	小規模で独立した改善 – ホバー効果、スクロール駆動アニメーション、スナップ感のあるボタン遷移。	プロジェクトの依存関係をスキャンし、インタラクション理論（意図する動きの短い説明）を提案。その後、具体的なコード（GSAP、Framer Motion、Compose、SwiftUIなど）を生成し、アクセシビリティおよびパフォーマンスの迅速な審査を実施。
`/genjutsu:paint`	大規模な再設計 – トップページ全体、まったく新しいデザインシステム、ポートフォリオサイト。	ブレインストーミングセッションから始まり、完全なビジュアルデザインシステム（Tailwind/CSS、`Theme.kt`、`Color+App.swift`）を作成。UIを実装し、動きのギャップ、色のコントラスト、レスポンシブ性、ネイティブな問題を含む包括的な審査を終了。

両方のスキルは、いくつかの承認ゲート（理論、ビジュアルアイデンティティ、デザインシステム）で一時停止し、ライブプレビュー、アーティファクト（例：一時ルートや@Previewファイル）、またはインラインテキストとして結果を提示できます。

パッケージ構成

Claude AI（Web/アプリ） – 単一のgenjutsu.zipバンドル、または各スキル/サブスキル用の個別ZIPをアップロード。
Claude Code（CLI） – プラグインマーケットプレイスから追加（/plugin marketplace add AThevon/genjutsu）。
Cowork – プラグインパネルからインストール。同じコマンドが使用可能で、ホスト固有のプレビュー処理が行われます。

リポジトリには、バンドルと17個の個別スキルZIPを生成する小さなビルドスクリプト（package-for-claude-ai.sh）が含まれています。

アーキテクチャの概要

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 に文書化されています。
6つのプラットフォームで736のAPIシンボルを維持することはコミュニティ主導の取り組みであり、特定のスタック（Web、Android、Apple）の管理責任を引き受けることが可能です。

ライセンス

MIT – 使用、変更、再配布が自由です。

TL;DR – genjutsu は、自然言語によるデザインリクエストを、Web、Android、Appleプラットフォーム向けの本番環境対応のモーションコードに変換するClaude‑AIプラグインであり、クイックフィックス「cast」アクションと大規模「paint」再設計を提供。すべてがモジュール式の内部サブスキルによって支えられています。