{"id":44487747,"url":"https://github.com/dgreenheck/webgpu-claude-skill","last_synced_at":"2026-02-13T02:15:29.836Z","repository":{"id":334149713,"uuid":"1140251276","full_name":"dgreenheck/webgpu-claude-skill","owner":"dgreenheck","description":"A Claude skill for developing WebGPU applications with Three.js","archived":false,"fork":false,"pushed_at":"2026-01-23T04:35:29.000Z","size":53,"stargazers_count":68,"open_issues_count":0,"forks_count":8,"subscribers_count":1,"default_branch":"main","last_synced_at":"2026-01-23T20:52:39.285Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":null,"language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/dgreenheck.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null,"zenodo":null,"notice":null,"maintainers":null,"copyright":null,"agents":null,"dco":null,"cla":null}},"created_at":"2026-01-23T02:51:19.000Z","updated_at":"2026-01-23T20:52:02.000Z","dependencies_parsed_at":null,"dependency_job_id":null,"html_url":"https://github.com/dgreenheck/webgpu-claude-skill","commit_stats":null,"previous_names":["dgreenheck/webgpu-claude-skill"],"tags_count":null,"template":false,"template_full_name":null,"purl":"pkg:github/dgreenheck/webgpu-claude-skill","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/dgreenheck%2Fwebgpu-claude-skill","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/dgreenheck%2Fwebgpu-claude-skill/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/dgreenheck%2Fwebgpu-claude-skill/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/dgreenheck%2Fwebgpu-claude-skill/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/dgreenheck","download_url":"https://codeload.github.com/dgreenheck/webgpu-claude-skill/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/dgreenheck%2Fwebgpu-claude-skill/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":29393218,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-02-13T00:53:09.511Z","status":"online","status_checked_at":"2026-02-13T02:00:10.076Z","response_time":78,"last_error":null,"robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":true,"can_crawl_api":true,"host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":[],"created_at":"2026-02-13T02:15:27.269Z","updated_at":"2026-02-13T02:15:29.830Z","avatar_url":"https://github.com/dgreenheck.png","language":"JavaScript","funding_links":[],"categories":["🧠 Agent Skills"],"sub_categories":[],"readme":"# WebGPU Three.js TSL Skill\n\nAn Agent Skill for developing WebGPU-enabled Three.js applications using TSL (Three.js Shading Language).\n\n## Overview\n\nThis skill provides Claude with comprehensive knowledge for:\n\n- Setting up Three.js with WebGPU renderer\n- Writing shaders using TSL (Three.js Shading Language)\n- Creating node-based materials\n- Building GPU compute shaders\n- Implementing post-processing effects\n- Integrating custom WGSL code\n\n## Installation\n\n### Claude Code\n\n```bash\n# Install from this repository\n/skill install webgpu-threejs-tsl@\u003cyour-github-username\u003e/webgpu-claude-skill\n```\n\n### Manual Installation\n\nCopy the `skills/webgpu-threejs-tsl` folder to:\n- **Global**: `~/.claude/skills/`\n- **Project**: `\u003cproject\u003e/.claude/skills/`\n\n## Skill Structure\n\n```\nskills/webgpu-threejs-tsl/\n├── SKILL.md                    # Entry point with overview\n├── REFERENCE.md                # Quick reference cheatsheet\n├── docs/\n│   ├── core-concepts.md        # Types, operators, uniforms, control flow\n│   ├── materials.md            # Node materials and properties\n│   ├── compute-shaders.md      # GPU compute documentation\n│   ├── post-processing.md      # Built-in and custom effects\n│   ├── wgsl-integration.md     # Custom WGSL functions\n│   └── device-loss.md          # GPU device loss handling and recovery\n├── examples/\n│   ├── basic-setup.js          # Minimal WebGPU project\n│   ├── custom-material.js      # Custom shader material\n│   ├── particle-system.js      # GPU compute particles\n│   ├── post-processing.js      # Effect pipeline\n│   └── earth-shader.js         # Complete Earth with atmosphere\n└── templates/\n    ├── webgpu-project.js       # Starter project template\n    └── compute-shader.js       # Compute shader template\n```\n\n## Topics Covered\n\n### Core Concepts\n- Types and constructors (float, vec2, vec3, vec4, color, uniform)\n- Vector swizzling\n- Operators and math functions\n- Control flow (If, Loop, Fn)\n- Time and animation\n\n### Materials\n- All node material types\n- Material properties (color, roughness, metalness, etc.)\n- Physical material features (clearcoat, transmission, iridescence)\n- Vertex displacement\n\n### Compute Shaders\n- Instanced array buffers\n- Parallel physics simulation\n- Particle systems\n- Atomic operations and barriers\n\n### Post-Processing\n- Built-in effects (bloom, blur, FXAA, DOF)\n- Custom effects with Fn()\n- Effect chaining\n- Multiple render targets\n\n### WGSL Integration\n- Custom WGSL functions with wgslFn()\n- Hybrid TSL/WGSL approaches\n- Performance optimization\n\n### Device Loss Handling\n- Detecting GPU device loss\n- Recovery strategies\n- Testing with destroy() and Chrome GPU crash\n- State preservation and restoration\n\n## Quick Example\n\n```javascript\nimport * as THREE from 'three/webgpu';\nimport { color, time, oscSine, normalWorld, cameraPosition, positionWorld, Fn, float } from 'three/tsl';\n\n// WebGPU renderer\nconst renderer = new THREE.WebGPURenderer();\nawait renderer.init();\n\n// TSL material with animated fresnel\nconst material = new THREE.MeshStandardNodeMaterial();\n\nmaterial.colorNode = color(0x0066ff);\n\nmaterial.emissiveNode = Fn(() =\u003e {\n  const viewDir = cameraPosition.sub(positionWorld).normalize();\n  const fresnel = float(1).sub(normalWorld.dot(viewDir).saturate()).pow(3);\n  return color(0x00ffff).mul(fresnel).mul(oscSine(time));\n})();\n```\n\n## Compatibility\n\n- **Recommended Three.js version**: r171+\n- **Target browsers**: Chrome 113+, Edge 113+, Firefox (behind flag), Safari (WebGPU preview)\n\n### Version Notes\n\n- **r178+**: `PI2` deprecated (use `TWO_PI`), `transformedNormalView/World` renamed to `normalView/World`\n- **r171+**: Stable TSL API, requires `three/webgpu` import map entry\n\n## Resources\n\n- [Three.js TSL Documentation](https://threejs.org/docs/pages/TSL.html)\n- [Three.js Shading Language Wiki](https://github.com/mrdoob/three.js/wiki/Three.js-Shading-Language)\n- [Three.js WebGPU Examples](https://github.com/mrdoob/three.js/tree/master/examples)\n- [WebGPU Best Practices](https://toji.dev/webgpu-best-practices/)\n- [Agent Skills Specification](https://github.com/anthropics/skills)\n\n## License\n\nMIT License\n\nCode examples derived from [Three.js](https://github.com/mrdoob/three.js) (MIT License).\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fdgreenheck%2Fwebgpu-claude-skill","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fdgreenheck%2Fwebgpu-claude-skill","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fdgreenheck%2Fwebgpu-claude-skill/lists"}