por dgreenheck · dgreenheck/webgpu-claude-skill
Crie projetos WebGPU + Three.js com Claude — boilerplate, padrões de shader, verificações de performance, tudo em uma skill.
WebGPU é novo o suficiente para que o Claude frequentemente alucine a API. Esta skill fundamenta isso: scaffolds Three.js + WebGPU funcionando, padrões comuns de shader, heurísticas de performance para browsers.
%APPDATA%\Claude\claude_desktop_config.json{
"mcpServers": {
"webgpu-claude-skill": {
"command": "git",
"args": [
"clone",
"https://github.com/dgreenheck/webgpu-claude-skill"
],
"_inferred": true
}
}
}Abra Claude Desktop → Settings → Developer → Edit Config. Reinicie após salvar.
{
"mcpServers": {
"webgpu-claude-skill": {
"command": "git",
"args": [
"clone",
"https://github.com/dgreenheck/webgpu-claude-skill"
],
"_inferred": true
}
}
}Cursor usa o mesmo esquema mcpServers que o Claude Desktop. Config de projeto vence a global.
{
"mcpServers": {
"webgpu-claude-skill": {
"command": "git",
"args": [
"clone",
"https://github.com/dgreenheck/webgpu-claude-skill"
],
"_inferred": true
}
}
}Clique no ícone MCP Servers na barra lateral do Cline, depois "Edit Configuration".
{
"mcpServers": {
"webgpu-claude-skill": {
"command": "git",
"args": [
"clone",
"https://github.com/dgreenheck/webgpu-claude-skill"
],
"_inferred": true
}
}
}Mesmo formato do Claude Desktop. Reinicie o Windsurf para aplicar.
{
"mcpServers": [
{
"name": "webgpu-claude-skill",
"command": "git",
"args": [
"clone",
"https://github.com/dgreenheck/webgpu-claude-skill"
]
}
]
}O Continue usa um array de objetos de servidor em vez de um map.
{
"context_servers": {
"webgpu-claude-skill": {
"command": {
"path": "git",
"args": [
"clone",
"https://github.com/dgreenheck/webgpu-claude-skill"
]
}
}
}
}Adicione em context_servers. Zed recarrega automaticamente ao salvar.
claude mcp add webgpu-claude-skill -- git clone https://github.com/dgreenheck/webgpu-claude-skillUma linha só. Verifique com claude mcp list. Remova com claude mcp remove.
Quando usar: Você quer um starter WebGPU + Three.js funcionando sem perder tempo com detalhes.
Resultado: Cena WebGPU rodando no seu browser rapidamente.
Escreva a cena no seu projeto
| Ferramenta | Entradas | Quando chamar | Custo |
|---|---|---|---|
| scaffold / shade | (ver docs) | Dois fluxos | 1 chamada |
WebGPU não disponívelSkill emite um fallback WebGL quando solicitado
| Alternativa | Quando usar | Troca |
|---|---|---|
| Direct Three.js docs | Você conhece bem WebGPU | Bootstrap mais lento |