freshtechbro/claudedesignskills

これは何？

主な機能

• 013Dシーン向けにThree.js、React Three Fiber、Babylon.js、PlayCanvasに対応。
• 02アニメーション向けにGSAP ScrollTrigger、Framer Motion、Anime.js、Lottieを収録。
• 03Claude Codeで個別のプラグイン、または5つのカテゴリ別バンドルとしてインストール可能。
• 04各スキルにSKILL.mdの指示、リファレンス資料、ヘルパースクリプトを同梱。
• 05スキルをclaude.aiにアップロードするか、ローカルプロジェクトにコピーして利用可能。

ユースケース

• PBRマテリアルを使ったThree.jsシーンやReact Three Fiberコンポーネントの作成をClaudeに依頼する。
• GSAPによるスクロール連動アニメーションやFramer MotionのトランジションをWebページに追加する。
• Claudeの支援を受けながら、3Dエンジンやアニメーションライブラリを比較して選ぶ。
• インタラクティブなWebGLやWebXR体験のボイラープレートを生成する。

クイックスタート

1. 1

   マーケットプレイスをClaude Codeに追加

   /plugin marketplace add freshtechbro/claudedesignskills
2. 2

   個別のプラグインをインストール

   /plugin install threejs-webgl
3. 3

   または、バンドル一式をインストール

   /plugin install core-3d-animation

使う前に知っておきたいこと

• !SkillsはClaude Code向けの指示パッケージであり、単独で動作するソフトウェアではないため、直接実行するものはありません。
• !ジェネレータースクリプトの実行にはPython 3と、プロジェクトで指定されている標準ライブラリのみの環境が必要です。

トピック

よくある質問

claudedesignskills とは？

Three.jsやGSAPなどのWeb 3D・アニメーション技術をClaude Codeに教えるスキルとプラグイン集。 このリポジトリは、3Dグラフィックス、アニメーション、インタラクティブなWeb体験に特化した、モダンなWeb開発向けの22個のスキルを収録するClaude Codeプラグインマーケットプレイスです。各スキルは、Claudeが必要なタスクに応じて読み込む指示やパターンを記載したSKILL.mdファイルを中心に、リファレンス資料、ヘルパースクリプト、テンプレートをまとめたフォルダです。

claudedesignskills は無料で使えますか？ライセンスは？

claudedesignskills は MIT ライセンスのオープンソースです。商用製品で使う前にライセンス条件を確認してください。

claudedesignskills は今もメンテナンスされていますか？

半年以上コミットなし。claudedesignskills の最終コミットは 2025年11月20日 です。

claudedesignskills は何に使えますか？

PBRマテリアルを使ったThree.jsシーンやReact Three Fiberコンポーネントの作成をClaudeに依頼する。 GSAPによるスクロール連動アニメーションやFramer MotionのトランジションをWebページに追加する。 Claudeの支援を受けながら、3Dエンジンやアニメーションライブラリを比較して選ぶ。 インタラクティブなWebGLやWebXR体験のボイラープレートを生成する。

claudedesignskills のインストール方法は？

マーケットプレイスをClaude Codeに追加: /plugin marketplace add freshtechbro/claudedesignskills 個別のプラグインをインストール: /plugin install threejs-webgl または、バンドル一式をインストール: /plugin install core-3d-animation

claudedesignskills はどこで入手できますか？

ソースコードとインストール手順は GitHub にあります：https://github.com/freshtechbro/claudedesignskills