VividKit Crystal clear AI coding
VI
Choose Your Setup Get Started with AgentKit Continue with ClaudeKit Migrate from ClaudeKit to AgentKit Clean cutover from ClaudeKit What Is AgentKit? How AgentKit Works AgentKit Kits, Skills, Agents & Hooks AgentKit Runtime Support AgentKit Desktop App AgentKit Configuration AgentKit CLI Quick Reference AgentKit Skills Cheatsheet AgentKit Workflows AgentKit Statusline Update AgentKit CLI & Kits AgentKit Helper Clean reinstall of AgentKit AgentKit Troubleshooting What is ClaudeKit? ClaudeKit CLI Guide Command Finder Commands Cheat Sheet Workflow Recipes CLI Quick Reference Claude Mechanics Permission Modes ClaudeKit Hooks Coexistence ClaudeKit x Codex CK → Other coding tools How ClaudeKit Works Inside ClaudeKit Finding Your Unknowns Session Recovery Fix from Logs UI/UX Guide Accounts Switcher IDE Config Remote Control Codex App System Diagramming UI Review Gate Promotions Support VividKit

Quick Ref / Command

Engineer Kit

/ak:shader

GLSL fragment shaders

Author GLSL fragment shaders for procedural textures, SDF shapes, gradients, noise, fBm, tiling, animation, WebGL, Three.js, and generative effects.

01

Frame the effect

02

Set uniforms

03

Normalize coordinates

04

Build primitives

Rule 01

Fragment shaders run the same program independently for every pixel

Rule 02

Coordinates and aspect ratio decide most visual correctness

Rule 03

Smooth thresholds beat jagged hard edges for polished procedural graphics

Rule 04

Layer primitives, patterns, and noise instead of hardcoding pixels

Execution Map

Core lanes from input to output, aligned with the command's real execution path.

01

Start

Input, scope, route

  1. 1 Frame the effect Identify whether the request is a texture, SDF shape, pattern, noise field, animation, WebGL effect, or Three.js shader.
  2. 2 Set uniforms Use standard uniforms for time, resolution, and mouse input; map ShaderToy names when needed.
02

Work

Agent / skill execution

  1. 3 Normalize coordinates Convert gl_FragCoord into normalized `st`, correct aspect ratio when necessary, and keep pixel threads stateless.
  2. 4 Build primitives Compose shapes with distance, length, step, smoothstep, atan, dot, normalize, mix, clamp, fract, and mod.
03

Verify

Gate, review, validation

  1. 5 Layer pattern and noise Add tiling, matrices, symmetry, domain warping, Perlin/simplex/cellular noise, Voronoi, or fBm for procedural richness.
  2. 6 Color and animate Use RGB/HSB gradients, mix curves, sine waves, u_time, and smooth thresholds for motion and visual polish.
04

Close

Report, handoff, artifact

  1. 7 Test in viewer Run or paste into The Book of Shaders editor, glslViewer, glslCanvas, ShaderToy, WebGL, or Three.js context.

Syntax, arguments, subcommands

How to invoke the skill: syntax, positional arguments, shared options, then each subcommand with its own syntax and outcome.

Syntax

/ak:shader [effect or pattern]

Arguments

[effect or pattern] Required

Effect or pattern

Natural-language shader brief describing the visual outcome plus the host graphics contract: GLSL/WebGL version, uniforms, coordinate conventions, material or texture inputs, motion, performance boundary, fallback needs, and required compile or render evidence. The Skill declares no fixed flags or output path.

/ak:shader "Create a WebGL 1 fragment shader for a subtle animated marble background using the project's u_time and u_resolution uniforms. Keep motion slow, preserve text contrast, add a reduced-motion static path, and verify it in the existing preview without adding dependencies."

Sample Prompt

Concrete invocations for each flag, subcommand, mode, or route available in the live workflow.

Procedural texture Recommended 
/ak:shader animated marble texture with slow flowing veins
Use when:
Use when you need GLSL for a formula-driven texture such as marble, wood, clouds, or terrain.
Expected:
Returns fragment-shader logic built from normalized coordinates, noise or fBm, gradients, u_time animation, and a gl_FragColor output.
SDF shape 
/ak:shader pulsing neon circle field with smooth edges
Use when:
Use when the visual should be drawn from distance-field shapes rather than image assets.
Expected:
Produces GLSL that measures pixel distance, applies step or smoothstep thresholds, layers color with mix, and animates each pixel statelessly.
ShaderToy-style effect 
/ak:shader ShaderToy-style cellular Voronoi energy field
Use when:
Use for procedural WebGL effects that depend on time, resolution, or mouse-style uniforms.
Expected:
Outlines the standard uniforms, normalizes gl_FragCoord, combines cellular or Voronoi noise with color shaping, and notes ShaderToy uniform mapping.
Three.js material 
/ak:shader fragment shader for a Three.js hologram material
Use when:
Use when integrating a custom fragment shader into a Three.js or WebGL material.
Expected:
Provides shader code and integration-minded uniform choices for resolution, elapsed time, and optional mouse input, ready to adapt inside a material.

Handled Scope

  • SDF circles, rectangles, polygons, and stars
  • RGB/HSB gradients
  • Tiling and transforms
  • Perlin, simplex, cellular, and Voronoi noise
  • fBm and turbulence
  • ShaderToy and WebGL uniforms

Next