shaders
This skill should be used when the user asks to "write a custom Three.js shader", "create a GLSL shader effect", "build a TSL shader", "debug a WebGL or WebGPU shader issue", or "build a post-processing pipeline". Covers shader workflow, the TSL node system, GLSL patterns, debugging, performance optimization, and post-processing with pmndrs/postprocessing.

Install the complete plugin to include its agents, hooks, commands, and runtime context.
- PUBLISHER
- b-open-io
- RELATIONSHIP
- authored
- VERSION
- 1.0.0
- BENCHMARK
- unknown
Install bOpen Creative
The complete plugin is the supported path. It preserves everything the publisher designed to work alongside this skill.
Codex
VERIFIEDGrok Build
VERIFIED- This is the grok CLI, not Grok Bot.
- grok plugin details creative
Grok Bot
GUIDED SETUP- Paste this request into your Bot’s conversation. It will report what it can add.
OpenCode
VERIFIED- Paste into OpenCode. Restart after installation.
- Includes native agents, commands, skills and supported hooks/MCP. HammerTime uses bounded follow-up turns in persistent sessions.
Install only this skill
Use this narrower path only when you intentionally want the portable SKILL.md without the plugin’s surrounding capabilities.
Skills CLI
VERIFIED- Installs only the portable skill; it omits plugin hooks, agents, commands, apps/MCP configuration, and unlisted companion skills.
Grok Bot
GUIDED SETUP- Paste into your Bot’s conversation. Once saved, use / to select the skill.
Trace it to the source.
- DISTRIBUTED SOURCE
- modules/creative/skills/shaders/SKILL.md ↗
- UPSTREAM SOURCE
- No separate upstream declared
- DISTRIBUTED DIGEST
- sha256:6f8d0fe68b7c95dca3115b057dc439991ce4749b4e25bc677d0b43cf3e6efeb2
- LOCK HASH
- Not applicable
Companion skills
No required companion skills are declared.
Agents using this skill

Leaf
Map and geospatial specialist covering MapLibre, Mapbox, Leaflet, CesiumJS, deck.gl, OpenLayers, Turf.js, and Protomaps/PMTiles. Use this agent when the user asks to "build a map", "add marker clustering", "add a heatmap", "debug why tiles aren't loading", "swap Leaflet for MapLibre", "build a 3D globe", "visualize millions of points on a map", or needs help choosing a mapping platform, theming maps, self-hosting tiles, or geospatial analysis. Not for general React architecture (use nextjs) or backend APIs (use integration-expert).

Kris
Creative 3D web developer for Three.js and React Three Fiber, including diegetic and world-space UI. Use this agent when the user asks to "create a 3D scene", "build a Three.js demo", "write a shader", "add physics to a scene", "build a WebGL prototype", or "optimize 3D performance". Covers R3F, Drei, GLSL, TSL, and 3D asset pipelines. Not for 2D interface design (use designer).
Share this skill.
Pass the canonical page to a teammate or keep it close for later.
threejs-r3f
This skill should be used when the user asks to "build a Three.js scene", "set up React Three Fiber", "animate a mesh with useFrame", "load a GLTF or GLB model", or "add physics with react-three/rapier". Covers scene setup, Drei helpers, the asset pipeline, responsive canvas, and performance budgets for Three.js and React Three Fiber projects.