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

Ready to run

npx skills add https://github.com/dthuy62/kollet-app --skill ck-shader-dthuy62

💬 Prompt for ChatGPT / Claude Chat▼

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.