ck:shader

Write GLSL fragment shaders for procedural graphics in WebGL/Three.js pipelines.

Updated Feb 27, 2026

Search Tags:#glsl #webgl #generative-art #shader #noise #procedural-textures #fbm

Ready to run

npx skills add https://github.com/haidonglethqb/CloudSchool --skill ck-shader-haidonglethqb

💬 Prompt for ChatGPT / Claude Chat▼

Please help me install this Agent Skill.
Skill: ck:shader
Source: https://github.com/haidonglethqb/CloudSchool/tree/main/.qwen/skills/shader
Command: npx skills add https://github.com/haidonglethqb/CloudSchool --skill ck-shader-haidonglethqb

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve?

GLSL shader authorship and experimentation for procedural graphics, textures, and visual effects in WebGL/Three.js pipelines.

Core Features & Use Cases

Learn and apply fragment shader concepts including shapes, patterns, noise, and color spaces.
Build procedural textures and visual effects for interactive graphics and generative art.
Use as a reference hub with a curated set of GLSL examples and notes.

Quick Start

Open a shader editor, paste a fragment shader, and run to render a basic procedural visualization.

Frequently Asked Questions about ck:shader

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

FAQPage Schema

How do I write GLSL fragment shaders for procedural textures in WebGL?▼

To write GLSL fragment shaders for procedural textures in WebGL, you define core uniforms like u_time and u_resolution, then implement noise and fbm functions to generate patterns. This Skill provides curated references for shapes, colors, and SDF fundamentals.

What are the fundamentals of generating fbm noise for generative art?▼

Generating fbm noise for generative art involves layering multiple octaves of base noise functions to create complex procedural textures. This Skill supports learning these noise fundamentals and applying them to produce interactive visual effects in shader pipelines.

Can I use this to create procedural graphics for Three.js pipelines?▼

Yes, you can use this to create procedural graphics for Three.js pipelines. It writes GLSL fragment shaders designed for consistent integration with WebGL environments, defining standard utilities and uniforms to ensure extensibility across interactive graphics projects.

What is the best way to start experimenting with generative shader patterns?▼

The best way to start experimenting with generative shader patterns is to open a shader editor, paste a fragment shader, and run it to render a basic procedural visualization. The Skill serves as a reference hub for GLSL examples.

Does this Skill provide reference examples for SDF and color spaces?▼

Yes, this Skill provides reference examples for SDF and color spaces. It includes a references directory containing curated GLSL examples and notes covering shapes, patterns, textures, and color spaces to support both learning and production visuals.