/ ディレクトリ / プレイグラウンド / WebGPU Claude Skill
● コミュニティ dgreenheck ⚡ 即起動

WebGPU Claude Skill

作者 dgreenheck · dgreenheck/webgpu-claude-skill

ClaudeでWebGPU + Three.jsプロジェクトを立ち上げる — ボイラープレート、シェーダーパターン、パフォーマンスチェックがすべて1つのskillに。

WebGPUはまだ新しくClaudeがAPIをハルシネーションしがちです。このskillがそれを解消します:動作するThree.js + WebGPUのスキャフォールド、よく使うシェーダーパターン、ブラウザのパフォーマンスヒューリスティックを提供します。

なぜ使うのか

主な機能

ライブデモ

実際の動作

準備完了

インストール

作者のリポジトリ · Claude Skills の公式ドキュメント

ユースケース

実用的な使い方: WebGPU Claude Skill

WebGPUシーンをスキャフォールドする

👤 Claude Codeユーザー ⏱ ~15 min intermediate

使うタイミング: 余計な作業なしに動作するWebGPU + Three.jsのスターターが欲しい場合。

フロー
  1. ブリーフ
    シーンを説明する;skillが下書きを作成します。✓ コピーしました
    → ファイルが書き込まれている
  2. 反復
    シェーダーを調整する;skillが適用します✓ コピーしました
    → 可視出力

結果: WebGPUシーンがブラウザで高速に動作します。

組み合わせ

他のMCPと組み合わせて10倍の力を

webgpu-claude-skill + filesystem

シーンをプロジェクトに書き込む

webgpu-claude-skillとfilesystemを組み合わせる:シーンをプロジェクトに書き込む✓ コピーしました

ツール

このMCPが提供する機能

ツール入力呼び出すタイミングコスト
scaffold / shade (ドキュメント参照) 2つのフロー 1 call

コストと制限

運用コスト

APIクォータ
N/A
呼び出しあたりのトークン
中程度
金額
無料
ヒント
Chrome安定版でテストする;WebGPUはほぼ対応済みですが癖があります

セキュリティ

権限、シークレット、影響範囲

認証情報の保管: なし
データ送信先: なし

トラブルシューティング

よくあるエラーと対処法

WebGPUが使用できない

skillは要求されるとWebGLフォールバックを出力します

代替案

WebGPU Claude Skill 他との比較

代替案代わりに使う場面トレードオフ
直接Three.jsドキュメント参照WebGPUをよく知っている場合立ち上げが遅い

その他

リソース

📖 GitHub の公式 README を読む

🐙 オープンな issue を見る

🔍 400以上のMCPサーバーとSkillsを見る