Claude Code · 6 agents · 4 skills

Code that makes art.

A pack of specialized agents and skills for generative art & creative coding — flow fields, packing, attractors, reaction-diffusion, GLSL shaders, perceptual palettes and hash-seeded series. From sketch to print, loop, or mint.

Get the pack See the gallery
0Agents
0Skills
0Live techniques
0Seed = reproducible
In motion

And these ones are alive.

Real-time generative systems running on canvas — they only animate while on screen, and pause when you scroll away. Hit ↻ to re-seed.

Particle swarm
Game of Life
Plasma field
Harmonograph
What is this

A creative-coding studio, wired into Claude Code.

Six agents and four skills that turn an idea into a finished generative piece — one owns the concept & composition, others the p5.js sketch, the algorithms, the GLSL shaders, the color, and the export to print, video or a mint-ready series. You explore the space; the agents handle the craft.

06 — Agents

Six hands on the canvas.

◳

generative-art-director

Plans the technique, composition, palette strategy, medium and seed plan — the creative brief.

✎

p5-sketch-engine

Implements p5.js / canvas sketches — instance mode, seeded, re-rollable, smooth.

∿

generative-systems

The algorithms — flow fields, packing, automata, reaction-diffusion, attractors, WFC.

✦

shader-artist

GLSL & TSL shaders — noise, domain warping, raymarching. Shared with the 3D Web Pack.

◐

color-composition

Palettes & composition — OKLCH ramps, palette-from-image, grain, focal balance.

⤢

art-export-engineer

High-res print, video/GIF loops, and hash-seeded series (fxhash / Art Blocks).

04 — Skills

One command, one workflow.

/scaffold-sketch

Spin up a clean, seeded p5.js or vanilla-canvas sketch.

/flow-field

The signature technique — noise-driven particles into flowing forms.

/export-art

Print-ready stills & perfect video/GIF loops (ffmpeg / WebCodecs).

/generative-series

Deterministic, hash-seeded editions with traits & rarity.

Toolkit

What the pack reaches for.

Author

  • p5.js
  • HTML5 canvas
  • GLSL / shaders
  • three.js (3D)

Systems

  • Perlin / simplex / curl noise
  • flow fields · packing
  • reaction-diffusion · CA
  • attractors · WFC

Color

  • OKLCH / OKLab ramps
  • culori
  • palette-from-image
  • dither · grain

Export

  • high-res PNG / SVG
  • CCapture · WebCodecs
  • ffmpeg loops · GIF
  • fxhash · Art Blocks
Install

Drop it into Claude Code.

Clone and copy the agents & skills into your global ~/.claude — they work in every project.

# 1. clone
git clone https://github.com/skinnye/generative-art-pack.git

# 2. install agents + skills globally
cp -r generative-art-pack/agents/* ~/.claude/agents/
cp -r generative-art-pack/skills/* ~/.claude/skills/

# 3. make something
"Art-direct a calm flow-field piece in teal"   → generative-art-director
"/flow-field"                                  → instant signature piece
"Turn it into a mint-ready series on fxhash"    → /generative-series
Part of a set

Also building 3D for the web?

The sibling 3D Web Pack covers Three.js, React Three Fiber, WebGPU, scroll-motion and asset pipelines. shader-artist is shared between both.

3D Web Pack →