← LeaderboardThe Skill Leaderboard

threejs-shaders

Three.js shaders - GLSL, ShaderMaterial, uniforms, custom effects. Use when creating custom visual effects, modifying vertices, writing fragment shaders, or extending built-in materials.

Published by sickn33 ↗sickn33/agentic-awesome-skills

Try your first task

threejs-shaders

Start a fresh conversation. Replace the highlighted placeholders.

Use threejs-shaders to extend the existing WebGL material in [component or scene] with [vertex or fragment effect], exposing [required uniforms and animation behavior].

Required inputs

  • [component or scene]
  • [vertex or fragment effect]
  • [required uniforms and animation behavior]

User-approved starter prompt based on a pinned source version; check current skill requirements before running. Task evidence ↗

SKILL.md

name: threejs-shadersdescription: Three.js shaders - GLSL, ShaderMaterial, uniforms, custom effects. Use when creating custom visual effects, modifying vertices, writing fragment shaders, or extending built-in materials.risk: criticalsource: communitydate_added: "2026-03-06"

Three.js Shaders

Detailed Guide

Read the detailed guide before executing this skill. It retains the complete procedure and reference material. Treat its safety, prerequisites, and validation requirements as mandatory. For focused work, load the relevant sections; for end-to-end work, read the guide completely.

When to Use

  • You need custom shader logic in Three.js.
  • The task involves ShaderMaterial, uniforms, GLSL, vertex deformation, or fragment-based effects.
  • You are extending material behavior beyond what built-in materials provide.

Limitations

  • Use this skill only when the task clearly matches the scope described above.
  • Do not treat the output as a substitute for environment-specific validation, testing, or expert review.
  • Stop and ask for clarification if required inputs, permissions, safety boundaries, or success criteria are missing.