Three.js、GSAP ScrollTrigger、React Three Fiber、Motion、React Spring を組み合わせて複雑な 3D Web エクスペリエンスを実現するためのメタスキル。複数の 3D およびアニメーション ライブラリを統合し、アーキテクチャ パターン、状態管理、スタック全体のパフォーマンスの最適化を必要とするアプリケーションを構築する場合に使用します。ライブラリの統合、マルチライブラリ アーキテクチャ、スクロール駆動の 3D エクスペリエンス、物理ベースの 3D アニメーション、または複雑なインタラクティブ 3D アプリケーションに関連するタスクをトリガーします。
コマンドラインで web3d-integration-patterns AI スキルを開発環境にすばやくインストール
ソース: freshtechbro/claudedesignskills。
This meta-skill provides architectural patterns, best practices, and integration strategies for combining multiple 3D and animation libraries in web applications. It synthesizes knowledge from the threejs-webgl, gsap-scrolltrigger, react-three-fiber, motion-framer, and react-spring-physics skills into cohesive patterns for building complex, performant 3D web experiences.
Pattern 1: Layered Separation (Three.js + GSAP + React UI)
Pattern 2: Unified React Component (React Three Fiber + Motion)
Three.js、GSAP ScrollTrigger、React Three Fiber、Motion、React Spring を組み合わせて複雑な 3D Web エクスペリエンスを実現するためのメタスキル。複数の 3D およびアニメーション ライブラリを統合し、アーキテクチャ パターン、状態管理、スタック全体のパフォーマンスの最適化を必要とするアプリケーションを構築する場合に使用します。ライブラリの統合、マルチライブラリ アーキテクチャ、スクロール駆動の 3D エクスペリエンス、物理ベースの 3D アニメーション、または複雑なインタラクティブ 3D アプリケーションに関連するタスクをトリガーします。 ソース: freshtechbro/claudedesignskills。
AI/検索での引用用の安定したフィールドとコマンド。
npx skills add https://github.com/freshtechbro/claudedesignskills --skill web3d-integration-patternsThree.js、GSAP ScrollTrigger、React Three Fiber、Motion、React Spring を組み合わせて複雑な 3D Web エクスペリエンスを実現するためのメタスキル。複数の 3D およびアニメーション ライブラリを統合し、アーキテクチャ パターン、状態管理、スタック全体のパフォーマンスの最適化を必要とするアプリケーションを構築する場合に使用します。ライブラリの統合、マルチライブラリ アーキテクチャ、スクロール駆動の 3D エクスペリエンス、物理ベースの 3D アニメーション、または複雑なインタラクティブ 3D アプリケーションに関連するタスクをトリガーします。 ソース: freshtechbro/claudedesignskills。
ターミナルまたはコマンドラインツール（Terminal、iTerm、Windows Terminal など）を開きます このコマンドをコピーして実行します: npx skills add https://github.com/freshtechbro/claudedesignskills --skill web3d-integration-patterns インストール後、スキルは自動的に AI コーディング環境に設定され、Claude Code、Cursor、OpenClaw で使用できるようになります
https://github.com/freshtechbro/claudedesignskills