WebGPU Claude Skill

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

автор dgreenheck · dgreenheck/webgpu-claude-skill

Разворачивайте проекты на WebGPU + Three.js с Claude — шаблонный код, паттерны шейдеров, проверки производительности — всё в одном skill.

WebGPU достаточно новый, чтобы Claude часто галлюцинировал API. Этот skill заземляет его: рабочие шаблоны Three.js + WebGPU, распространённые паттерны шейдеров, эвристики производительности для браузеров.

▶ Смотреть демо 📦 Установить 💡 Сценарии

Зачем использовать

Ключевые функции

Скаффолдинг Three.js WebGPU
Библиотека фрагментов шейдеров
Эвристики производительности браузера
Fallback на WebGL там, где уместно
Примеры по каждому типу шейдера

Живое демо

Как выглядит на практике

готово

Установка

Выберите клиент

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

Откройте Claude Desktop → Settings → Developer → Edit Config. Перезапустите после сохранения.

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

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

Cursor использует ту же схему mcpServers, что и Claude Desktop. Конфиг проекта приоритетнее глобального.

VS Code → Cline → MCP Servers → Edit

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

Щёлкните значок MCP Servers на боковой панели Cline, затем "Edit Configuration".

~/.codeium/windsurf/mcp_config.json

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

Тот же формат, что и Claude Desktop. Перезапустите Windsurf для применения.

~/.continue/config.json

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

Continue использует массив объектов серверов, а не map.

~/.config/zed/settings.json

{
  "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 Claude Skill

Создать заготовку WebGPU-сцены

👤 Пользователи Claude Code ⏱ ~15 min intermediate

Когда использовать: Вы хотите рабочий стартер WebGPU + Three.js без лишних усилий.

Поток

Бриф

Опишите сцену; skill составляет черновик.✓ Скопировано

→ Файлы записаны
Итерация

Настройте шейдер; skill применяет изменения✓ Скопировано

→ Видимый результат

Итог: WebGPU-сцена быстро работает в браузере.

Комбинации

Сочетайте с другими MCP — эффект x10

webgpu-claude-skill + filesystem

Записать сцену в проект

Combine webgpu-claude-skill with filesystem: Write the scene into your project✓ Скопировано

Инструменты

Что предоставляет этот MCP

Инструмент	Входные данные	Когда вызывать	Стоимость
scaffold / shade	(см. документацию)	Два потока	1 вызов

Стоимость и лимиты

Во что обходится

Квота API: Не применимо
Токенов на вызов: Средний
Деньги: Бесплатно
Совет: Тестируйте на стабильном Chrome; WebGPU практически готов, но причуды остаются