freemcplab / الدليل / الملعب / WebGPU Claude Skill

● مجتمع dgreenheck ⚡ فوري

WebGPU Claude Skill

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

بواسطة dgreenheck · dgreenheck/webgpu-claude-skill

أنشئ مشاريع WebGPU + Three.js مع Claude — boilerplate وأنماط shader وفحوصات أداء، كل ذلك في skill واحد.

WebGPU جديد بما يكفي حتى إن Claude كثيراً ما يهلوس API الخاص به. هذا الـ skill يُرسّخه: هياكل Three.js + WebGPU تعمل، مكتبة مقتطفات shader شائعة، مؤشرات أداء المتصفح.

▶ شاهد العرض 📦 التثبيت 💡 حالات الاستخدام

لماذا تستخدمه

الميزات الأساسية

هيكلة Three.js WebGPU
مكتبة مقتطفات shader
مؤشرات أداء المتصفح
تراجع إلى WebGL عند الحاجة
أمثلة لكل نوع shader

عرض مباشر

كيف يبدو في الممارسة

جاهز

التثبيت

اختر العميل

~/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 مصفوفة من كائنات الخادم بدلاً من خريطة.

~/.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.✓ تم النسخ

→ الملفات مكتوبة
التكرار

اضبط الـ shader؛ يُطبّق الـ 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 stable؛ WebGPU موجود في معظمه لكن الغرائب لا تزال موجودة

الأمان

الصلاحيات والأسرار ونطاق الأثر

تخزين بيانات الاعتماد: لا شيء

نقل البيانات الخارجي: لا شيء

استكشاف الأخطاء

الأخطاء الشائعة وحلولها

WebGPU غير متاح

الـ skill يُصدر fallback لـ WebGL عند الطلب

البدائل