skills.rest
dthuy62
dthuy62COMMUNITY
Explore all skills by this author →
GitHub

ck:shader

Create GLSL fragment shaders for procedural graphics and visual effects.

Updated May 10, 2026
Search Tags:#glsl#webgl#generative-art#sdf#noise#procedural-graphics#fragment-shaders
One-click install
npx skills add https://github.com/dthuy62/kollet-app --skill ck-shader-dthuy62
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: ck:shader
Source: https://github.com/dthuy62/kollet-app/tree/main/.opencode/skills/shader
Command: npx skills add https://github.com/dthuy62/kollet-app --skill ck-shader-dthuy62

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve?

This Skill helps you design GLSL fragment shaders for procedural graphics without piecing together noise functions, color utilities, and shape math from scratch.

Core Features & Use Cases

  • Procedural shapes with signed distance fields for circles, rectangles, polygons, stars, and outlines.
  • Noise, fBm, cellular, and domain warping patterns for clouds, marble, wood, lava, terrain, and other organic effects.
  • Color systems, gradients, animation, symmetry, and tiling for polished real-time visuals in WebGL, Three.js, or shader editors.
  • Example: build a looping animated background with layered noise, a radial gradient, and a repeating tile motif.

Quick Start

Ask for a GLSL fragment shader that matches your desired effect and include the target platform, visual style, and any shape, noise, and animation requirements.

Frequently Asked Questions about ck:shader

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I create GLSL fragment shaders for procedural graphics?▼

To create GLSL fragment shaders for procedural graphics, you specify your desired visual effect, target platform, and requirements like noise, shapes, or animation, and the Skill generates the corresponding code. It handles coordinate normalization, color handling, and matrix-based transformations.

What is the best way to render SDF shapes and noise patterns in WebGL?▼

The best way to render SDF shapes and noise patterns in WebGL is using a Skill that provides pre-built signed distance fields for circles and polygons, alongside fBm, cellular, and domain warping noise functions for organic effects like clouds, marble, and lava.

Can I use this to generate shaders for Three.js and ShaderToy?▼

Yes, you can use this to generate shaders for Three.js and ShaderToy. The Skill is explicitly designed for real-time GPU visual workflows across WebGL, Three.js, and similar shader editors, supporting color gradients, symmetry, tiling, and animation.

How do I add procedural textures and color gradients to a fragment shader?▼

You add procedural textures and color gradients to a fragment shader by requesting specific visual styles and animation requirements. The Skill implements RGB and HSB color systems, tiling motifs, and layered noise to produce polished real-time visuals.

Do I need external libraries to build procedural noise and domain warping effects?▼

No, you do not need external libraries to build procedural noise and domain warping effects. The Skill is self-contained with no dependencies, providing the necessary math for fBm, cellular patterns, and matrix-based transformations directly in the generated GLSL code.

Related Skills

Explore More Design & Creative Skills→
AlexiosBluffMaraAlexiosBluffMara
2

glsl-shader

Create and explain GLSL shaders for Three.js and React Three Fiber projects.

Community
Intermediate
yogaprasetya22yogaprasetya22

threejs-shaders

Create custom Three.js ShaderMaterial effects with GLSL vertex and fragment programs.

Community
Basic
daffy0208daffy0208
34

3d-visualizer

Create interactive Three.js and React Three Fiber 3D visualizations with lighting and camera controls.

Community
Intermediate
DatTran26DatTran26

ck:shader

Generate GLSL fragment shaders for procedural graphics in WebGL and Three.js contexts.

Community
Advanced