WebGPU Claude Skill

Name: WebGPU Claude Skill (Claude Skill)
Author: dgreenheck

por dgreenheck · dgreenheck/webgpu-claude-skill

Arranca proyectos WebGPU + Three.js con Claude — boilerplate, patrones de shader, verificaciones de rendimiento, todo envuelto en un skill.

WebGPU es suficientemente nuevo para que Claude a menudo alucine la API. Este skill lo fundamenta: scaffolds funcionales de Three.js + WebGPU, patrones comunes de shader, heurísticas de rendimiento para navegadores.

▶ Ver demo 📦 Instalar 💡 Casos de uso

Por qué usarlo

Características clave

Scaffolding de Three.js WebGPU
Biblioteca de snippets de shader
Heurísticas de rendimiento en navegador
Fallback a WebGL donde sea apropiado
Ejemplos por tipo de shader

Demo en vivo

Cómo se ve en la práctica

listo

Instalar

Elige tu cliente

~/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
    }
  }
}

Abre Claude Desktop → Settings → Developer → Edit Config. Reinicia después de guardar.

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

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

Cursor usa el mismo esquema mcpServers que Claude Desktop. La configuración del proyecto prevalece sobre la global.

VS Code → Cline → MCP Servers → Edit

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

Haz clic en el icono MCP Servers de la barra lateral de Cline y luego en "Edit Configuration".

~/.codeium/windsurf/mcp_config.json

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

Mismo formato que Claude Desktop. Reinicia Windsurf para aplicar.

~/.continue/config.json

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

Continue usa un array de objetos de servidor en lugar de un mapa.

~/.config/zed/settings.json

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

Añádelo a context_servers. Zed recarga en caliente al guardar.

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

Un solo comando. Verifica con claude mcp list. Quita con claude mcp remove.

Casos de uso

Usos del mundo real: WebGPU Claude Skill

Crear scaffold de una escena WebGPU

👤 Usuarios de Claude Code ⏱ ~15 min intermediate

Cuándo usarlo: Quieres un starter funcional de WebGPU + Three.js sin perder tiempo en configuración.

Flujo

Briefing

Describe scene; skill drafts.✓ Copiado

→ Archivos escritos
Iterar

Tweak shader; skill applies✓ Copiado

→ Salida visible

Resultado: Escena WebGPU ejecutándose en tu navegador rápidamente.

Combinaciones

Combínalo con otros MCPs para multiplicar por 10

webgpu-claude-skill + filesystem

Escribir la escena en tu proyecto

Combine webgpu-claude-skill with filesystem: Write the scene into your project✓ Copiado

Herramientas

Lo que expone este MCP

Herramienta	Entradas	Cuándo llamar	Coste
scaffold / shade	(see docs)	Dos flujos	1 call

Coste y límites

Lo que cuesta ejecutarlo

Cuota de API: N/A
Tokens por llamada: Medio
Monetario: Gratuito
Consejo: Prueba en Chrome estable; WebGPU está casi completo pero quedan peculiaridades