design-generative-artlisted
Install: claude install-skill kensaurus/cursor-kenji
# Algorithmic Art Skill
Create generative, procedural, and mathematical art using code. Transform algorithms into visual experiences.
## CRITICAL: Check Existing First
**Before creating ANY generative art, verify:**
1. **Check for existing creative coding setup:**
```bash
cat package.json | grep -i "p5\|three\|canvas\|pixi\|paper"
ls -la src/components/art/ src/components/generative/ 2>/dev/null
```
2. **Check for existing canvas/WebGL usage:**
```bash
rg "Canvas|useFrame|getContext.*2d|WebGL" --type tsx -l
```
3. **Check for existing noise/random utilities:**
```bash
rg "simplex\|perlin\|noise\|seedrandom" --type ts
```
**Why:** Don't conflict with existing rendering pipelines or duplicate utility code.
## Core Principles
### 1. Seeded Randomness
Every piece should be reproducible with a seed:
```typescript
// Deterministic random number generator
function mulberry32(seed: number) {
return function() {
let t = seed += 0x6D2B79F5
t = Math.imul(t ^ t >>> 15, t | 1)
t ^= t + Math.imul(t ^ t >>> 7, t | 61)
return ((t ^ t >>> 14) >>> 0) / 4294967296
}
}
// Usage
const rng = mulberry32(42) // Same seed = same output
const value = rng() // 0-1 deterministic random
```
### 2. Parameterized Generation
Make art controllable via parameters:
```typescript
interface ArtParams {
seed: number
density: number // 0-1
palette: string[]
scale: number
speed: number
complexity: number // 0-1
}
```
### 3. Resolution Independence
Design for any canvas size:
```typescript
//