WebGPUシーンをスキャフォールドする
使うタイミング： 余計な作業なしに動作するWebGPU + Three.jsのスターターが欲しい場合。
フロー
-
ブリーフシーンを説明する；skillが下書きを作成します。✓ コピーしました→ ファイルが書き込まれている
-
反復シェーダーを調整する；skillが適用します✓ コピーしました→ 可視出力
結果： WebGPUシーンがブラウザで高速に動作します。
作者 dgreenheck · dgreenheck/webgpu-claude-skill
ClaudeでWebGPU + Three.jsプロジェクトを立ち上げる — ボイラープレート、シェーダーパターン、パフォーマンスチェックがすべて1つのskillに。
WebGPUはまだ新しくClaudeがAPIをハルシネーションしがちです。このskillがそれを解消します：動作するThree.js + WebGPUのスキャフォールド、よく使うシェーダーパターン、ブラウザのパフォーマンスヒューリスティックを提供します。
%APPDATA%\Claude\claude_desktop_config.json{
"mcpServers": {
"webgpu-claude-skill": {
"command": "git",
"args": [
"clone",
"https://github.com/dgreenheck/webgpu-claude-skill"
],
"_inferred": true
}
}
}Claude Desktop → Settings → Developer → Edit Config を開く。保存後、アプリを再起動。
{
"mcpServers": {
"webgpu-claude-skill": {
"command": "git",
"args": [
"clone",
"https://github.com/dgreenheck/webgpu-claude-skill"
],
"_inferred": true
}
}
}Cursor は Claude Desktop と同じ mcpServers スキーマを使用。プロジェクト設定はグローバルより優先。
{
"mcpServers": {
"webgpu-claude-skill": {
"command": "git",
"args": [
"clone",
"https://github.com/dgreenheck/webgpu-claude-skill"
],
"_inferred": true
}
}
}Cline サイドバーの MCP Servers アイコンをクリックし、"Edit Configuration" を選択。
{
"mcpServers": {
"webgpu-claude-skill": {
"command": "git",
"args": [
"clone",
"https://github.com/dgreenheck/webgpu-claude-skill"
],
"_inferred": true
}
}
}Claude Desktop と同じ形式。Windsurf を再起動して反映。
{
"mcpServers": [
{
"name": "webgpu-claude-skill",
"command": "git",
"args": [
"clone",
"https://github.com/dgreenheck/webgpu-claude-skill"
]
}
]
}Continue はマップではなくサーバーオブジェクトの配列を使用。
{
"context_servers": {
"webgpu-claude-skill": {
"command": {
"path": "git",
"args": [
"clone",
"https://github.com/dgreenheck/webgpu-claude-skill"
]
}
}
}
}context_servers に追加。保存時に Zed がホットリロード。
claude mcp add webgpu-claude-skill -- git clone https://github.com/dgreenheck/webgpu-claude-skillワンライナー。claude mcp list で確認、claude mcp remove で削除。
使うタイミング： 余計な作業なしに動作するWebGPU + Three.jsのスターターが欲しい場合。
結果： WebGPUシーンがブラウザで高速に動作します。
シーンをプロジェクトに書き込む
| ツール | 入力 | 呼び出すタイミング | コスト |
|---|---|---|---|
| scaffold / shade | (ドキュメント参照) | 2つのフロー | 1 call |
WebGPUが使用できないskillは要求されるとWebGLフォールバックを出力します
| 代替案 | 代わりに使う場面 | トレードオフ |
|---|---|---|
| 直接Three.jsドキュメント参照 | WebGPUをよく知っている場合 | 立ち上げが遅い |