claudedesignskills について
claudedesignskillsは、モーションデザインやクリエイティブコーディングに取り組むエージェント向けのスキル集です。5つのバンドルに22のスキルがあり、2D・3D、Webアニメーション、インタラクションのツールチェーンを扱います。
主な機能
- 015つのバンドルに22のスキル
- 02Three.jsとReact Three Fiberのシーン
- 03GSAPとFramer MotionによるWebアニメーション
- 042Dグラフィックス、インタラクティブアニメーション、Lottie
- 05BlenderからWebへの制作パイプライン
活用シーン
- 01複数のアニメーションフレームワークを使うプロジェクト
- 02新規プロジェクトのビジュアルツールチェーン選定
インストール
コマンドをコピーしてターミナルで実行します。
npx skills add https:/インストール後、Claude Code で/claudedesignskillsを入力して読み込まれたか確認します。
同梱ファイルstub.yaml
詳細
claudedesignskills
カタログの概要 — 完全版パッケージ：freshtechbro/claudedesignskills
判断ツリー
-
パッケージはすでにインストールされていますか？ 確認方法：エージェントのスキルディレクトリに、概要版を超える内容を含む
claudedesignskillsがあるか確認します。- はい →
claudedesignskillsを呼び出して進みます - いいえ → ステップ2に進みます
- はい →
-
どのエージェントを使用していますか？
- Claude Code →
/plugin marketplace add freshtechbro/claudedesignskills - Cursor →
/plugin marketplace add freshtechbro/claudedesignskills - その他 →
/plugin marketplace add freshtechbro/claudedesignskillsまたはGitHub READMEを参照してください
- Claude Code →
インストールコマンド
/plugin marketplace add freshtechbro/claudedesignskills
インストール後の呼び出し方
- スキル名：
claudedesignskills - トリガーフレーズ："claudedesignskills"、"Babylon.js"、"A-Frame"、"PixiJS"、"React Spring"、"Locomotive Scroll"、"Rive"
機能
利用可能なモーションおよびクリエイティブコーディングのスキルスイートの中でも、最も幅広いものです。5つのバンドルに整理された22の個別スキルを備えています。Three.js の3Dシーン、GSAP ScrollTrigger、React Three Fiber、Framer Motion、Babylon.js によるゲーム／XRレンダリング、A-Frame WebXR、PixiJS による2D WebGL、Locomotive Scroll によるスムーズスクロール、Barba.js によるページ遷移、React Spring による物理ベースのアニメーション、Magic UI のコンポーネントアニメーション、AOS（Animate On Scroll）、Anime.js、Lottie の再生、Rive のインタラクティブアニメーション、Spline 3D、Blender から Web へのパイプラインに対応しています。複数のアニメーションフレームワークにまたがるプロジェクトや、必要なツールチェーンがわからない場合に、このパッケージを使用してください。
使用しないケース
- 必要なのが1つのフレームワークだけの場合 — より軽量な構成にするには、専用のスキル（
gsap-skills、framer-motion-skillsなど）を使用してください - バックエンドまたはビジュアル以外の作業