WebGPU Claude Skill — Installer & Démo en direct

Pourquoi l'utiliser

Fonctionnalités clés

Scaffolding Three.js WebGPU
Bibliothèque de snippets de shaders
Heuristiques de performance navigateur
Repli sur WebGL si approprié
Exemples par type de shader

Démo en direct

Aperçu en pratique

prêt

Installer

Choisissez votre client

~/Library/Application Support/Claude/claude_desktop_config.json · Windows: %APPDATA%\Claude\claude_desktop_config.json

{
  "mcpServers": {
    "webgpu-claude-skill": {
      "command": "git",
      "args": [
        "clone",
        "https://github.com/dgreenheck/webgpu-claude-skill"
      ],
      "_inferred": true
    }
  }
}

Ouvrez Claude Desktop → Settings → Developer → Edit Config. Redémarrez après avoir enregistré.

~/.cursor/mcp.json · .cursor/mcp.json

{
  "mcpServers": {
    "webgpu-claude-skill": {
      "command": "git",
      "args": [
        "clone",
        "https://github.com/dgreenheck/webgpu-claude-skill"
      ],
      "_inferred": true
    }
  }
}

Cursor utilise le même schéma mcpServers que Claude Desktop. La config projet l'emporte sur la globale.

VS Code → Cline → MCP Servers → Edit

{
  "mcpServers": {
    "webgpu-claude-skill": {
      "command": "git",
      "args": [
        "clone",
        "https://github.com/dgreenheck/webgpu-claude-skill"
      ],
      "_inferred": true
    }
  }
}

Cliquez sur l'icône MCP Servers dans la barre latérale Cline, puis "Edit Configuration".

~/.codeium/windsurf/mcp_config.json

{
  "mcpServers": {
    "webgpu-claude-skill": {
      "command": "git",
      "args": [
        "clone",
        "https://github.com/dgreenheck/webgpu-claude-skill"
      ],
      "_inferred": true
    }
  }
}

Même format que Claude Desktop. Redémarrez Windsurf pour appliquer.

~/.continue/config.json

{
  "mcpServers": [
    {
      "name": "webgpu-claude-skill",
      "command": "git",
      "args": [
        "clone",
        "https://github.com/dgreenheck/webgpu-claude-skill"
      ]
    }
  ]
}

Continue utilise un tableau d'objets serveur plutôt qu'une map.

~/.config/zed/settings.json

{
  "context_servers": {
    "webgpu-claude-skill": {
      "command": {
        "path": "git",
        "args": [
          "clone",
          "https://github.com/dgreenheck/webgpu-claude-skill"
        ]
      }
    }
  }
}

Ajoutez dans context_servers. Zed recharge à chaud à la sauvegarde.

claude mcp add webgpu-claude-skill -- git clone https://github.com/dgreenheck/webgpu-claude-skill

Une seule ligne. Vérifiez avec claude mcp list. Supprimez avec claude mcp remove.

Cas d'usage

Usages concrets : WebGPU Claude Skill

Scaffolder une scène WebGPU

👤 Utilisateurs Claude Code ⏱ ~15 min intermediate

Quand l'utiliser : Vous souhaitez un starter WebGPU + Three.js fonctionnel sans vous perdre dans les détails.

Déroulement

Briefer

Décrivez la scène ; le skill rédige.✓ Copié

→ Fichiers écrits
Itérer

Modifiez le shader ; le skill applique✓ Copié

→ Sortie visible

Résultat : Scène WebGPU en cours d'exécution dans votre navigateur rapidement.

Combinaisons

Associez-le à d'autres MCPs pour un effet X10

webgpu-claude-skill + filesystem

Écrire la scène dans votre projet

Combiner webgpu-claude-skill avec filesystem : écrire la scène dans votre projet✓ Copié

Outils

Ce que ce MCP expose

Outil	Entrées	Quand appeler	Coût
scaffold / shade	(voir la documentation)	Deux flux	1 appel

Coût et limites

Coût d'exécution

Quota d'API: N/A
Tokens par appel: Moyen
Monétaire: Gratuit
Astuce: Testez sur Chrome stable ; WebGPU est globalement là mais des quirks subsistent