mcpField
W
webgpu-claude-skill

webgpu-claude-skill

github.com/podo開発29162 回インストール1 日前に更新
リポジトリ

webgpu-claude-skill について

webgpu-claude-skillは、Claude CodeとCursor向けのThree.js r183+ WebGPU開発スキルです。TSLマテリアル、GPUコンピュート、ポストプロセス、WGSL連携を扱います。

主な機能

  1. 01Three.js WebGPUレンダリングのガイダンス
  2. 02TSLのノードベースマテリアル
  3. 03GPUコンピュートシェーダー
  4. 04WebGPUポストプロセス
  5. 05WGSLシェーダー連携

活用シーン

  1. 01WebGPUベースの3D体験の構築
  2. 02Three.jsでのTSLマテリアル作成
  3. 03非レンダリング処理でのGPUコンピュート活用

インストール

コマンドをコピーしてターミナルで実行します。

$npx skills add https://github.com/podo/design-agent-skills --skill webgpu-claude-skill

インストール後、Claude Code で/webgpu-claude-skillを入力して読み込まれたか確認します。

同梱ファイルstub.yaml

詳細

webgpu-claude-skill

カタログ用の簡易説明 — 完全なパッケージはこちら：dgreenheck/webgpu-claude-skill

判断フロー

  1. パッケージはすでにインストールされていますか？ 確認：~/.design-agent-skills/skills/webgpu-claude-skill/SKILL.md が存在するか確認します。

    • はい → webgpu-claude-skill を呼び出して続行します
    • いいえ → 手順 2 に進みます

  2. シェルにアクセスできますか？

    • はい → 以下のインストールコマンドを実行してから、スキルを呼び出します
    • いいえ → インストールコマンドを表示します。Claude Code では、先頭に ! を付けたチャットメッセージとして送信します。グローバルインストールの場合は -g を追加し、プロジェクトのみにインストールする場合は省略します

インストールコマンド

npx skills add dgreenheck/webgpu-claude-skill

インストール後の呼び出し

  • スキル名：webgpu-claude-skill
  • トリガーフレーズ：「WebGPU」、「TSL Three.js」、「GPU compute shaders」、「WGSL」

概要

Three.js（r183 以降）の WebGPU レンダリングパイプラインに関する深い知識を提供します。ノードベースのマテリアル作成に使用する Three.js Shading Language（TSL）、レンダリング以外のワークロード向けの GPU コンピュートシェーダー、WebGPU パスを使った高度なポストプロセス、WGSL シェーダーの統合などが含まれます。Claude Code と Cursor の両方に対応するデュアル形式で提供されます。GPU コンピュートや次世代のシェーダー作成が必要な高性能 3D エクスペリエンスの構築に使用します。

使用しない場合

  • WebGPU を使わない標準的な Three.js シーン — 代わりに cloudai-threejs を使用します
  • WebGL での GLSL シェーダー作業 — 代わりに標準的な Three.js スキルを使用します
  • アーキテクチャ／BIM のワークフロー — 代わりに threejs-claude-skill-package を使用します

コメント

Markdown 対応