vtj-shader-development
CommunityBuild custom GLSL shaders with live debug panels.
System Documentation
What problem does it solve?
This Skill enables developers to write and manage GLSL shaders within a Three.js + Vue 3 project using vite-plugin-glsl. It ensures shaders are organized in a dedicated directory and exposes uniforms via a debug panel.
Core Features & Use Cases
- Shader import and management: allows importing .glsl files from src/shaders/ and includes support for includes.
- ShaderMaterial debugging: automatically exposes uniforms to a UI for live tweaking.
- Use Case: Create custom visual effects, skyboxes, and post-processing by wiring shader code to a ShaderMaterial and tweaking uniforms in real time.
Quick Start
Use the shader development skill to create a new shader under src/shaders/, configure vite-plugin-glsl in vite.config.js, and import shader modules as needed to drive a ShaderMaterial in three.js. Then run the dev server and adjust uniforms in the debug panel to see changes live.
Dependency Matrix
Required Modules
None requiredComponents
Standard package💻 Claude Code Installation
Recommended: Let Claude install automatically. Simply copy and paste the text below to Claude Code.
Please help me install this Skill: Name: vtj-shader-development Download link: https://github.com/hexianWeb/Third-Person-MC/archive/main.zip#vtj-shader-development Please download this .zip file, extract it, and install it in the .claude/skills/ directory.
Agent Skills Search Helper
Install a tiny helper to your Agent, search and equip skill from 223,000+ vetted skills library on demand.