{
  "$schema": "https://humangarden.ai/.well-known/skill-spec.schema.json",
  "canonical_url": "https://humangarden.ai/skills/algorithmic-art/spec.json",
  "slug": "algorithmic-art",
  "last_tested": "2026-06-05",
  "tested_by": "humangarden",
  "verdict_one_line": "A p5.js generative-art harness with a strong philosophy-first protocol and a real (if opinionated) HTML template — produces gallery-quality flow-field art in ~4s of headless render time, but the craftsmanship is the author's, not the sliders'.",
  "fires_when": [
    "user asks for generative art, algorithmic art, flow fields, or particle systems built in code",
    "user wants a single self-contained interactive p5.js HTML artifact (claude.ai-compatible)",
    "user wants seeded, reproducible generative art (Art Blocks pattern) with seed navigation",
    "user wants a written manifesto / philosophy alongside the visual output"
  ],
  "skip_when": [
    "user wants the assistant to \"make this exact picture\" — the skill explicitly resists style-copying and steers toward original algorithmic expression",
    "user needs a 3D / WebGL / shader pipeline — this is 2D p5.js only",
    "user wants the art on a non-HTML surface (SVG export, vector PDF, native canvas in a Figma plugin, etc.)",
    "user wants a fill-in-the-blanks generator with no creative authoring — this is \"write the algorithm\" not \"click a preset\"",
    "user wants animation that loops forever — the skill assumes a single rendered composition with optional seed navigation"
  ],
  "inputs": [
    {
      "type": "prompt",
      "format": "free text",
      "constraint": "a brief, evocative request — the skill explicitly leaves \"creative space\" for interpretation rather than expecting a tight spec"
    }
  ],
  "outputs": [
    {
      "type": "file",
      "format": "markdown",
      "quality_note": "4-6 paragraph algorithmic philosophy (.md); structured per SKILL.md's manifesto template"
    },
    {
      "type": "file",
      "format": "html",
      "quality_note": "self-contained p5.js viewer (~20KB), seed controls + parameter sliders + Download PNG; renders to 1200×1200 canvas in ~3.7s headless"
    }
  ],
  "installation": {
    "pip": [],
    "npm": [],
    "system": {},
    "notes": "Zero install footprint. The skill is pure SKILL.md + a viewer.html template + a generator_template.js reference. Output runs in any browser via the p5.js CDN; no toolchain required for the user. (Our review used Node + Puppeteer + system Chrome to capture the canvas as PNG headlessly — that's our test rig, not a skill dependency.)"
  },
  "artifacts": [
    {
      "kind": "image",
      "file": "https://humangarden.ai/spec-artifacts/algorithmic-art/seed-1978.png",
      "caption": "Seed 1978 — \"Vertical Solitude\". Default render at the philosophy's tuned parameters. Lower-half density is the climb; the bone-white upper region is the summit deliberately left unreached. 855 KB, rendered in 3.7s.",
      "role": "output",
      "hero": true
    },
    {
      "kind": "image",
      "file": "https://humangarden.ai/spec-artifacts/algorithmic-art/seed-1953.png",
      "caption": "Seed 1953 — same algorithm, different morning. Note the central crest that emerges from the vertical bias colliding with a Perlin ridge. Reproducible byte-for-byte from the seed.",
      "role": "output",
      "hero": true
    },
    {
      "kind": "image",
      "file": "https://humangarden.ai/spec-artifacts/algorithmic-art/seed-42.png",
      "caption": "Seed 42 — control seed. Confirms the algorithm's family resemblance across very different noise fields: dense ribboning lower band, untouched upper field, same restricted palette.",
      "role": "output",
      "hero": true
    },
    {
      "kind": "image",
      "file": "https://humangarden.ai/spec-artifacts/algorithmic-art/edge-extreme.png",
      "caption": "Edge case — all six sliders at extremes (6000 particles, lifespan=60, noise=0.01, bias=1.0, step=2.0, flare=0.6). Algorithm completes (2.4s) but the \"honorable retreat\" thesis visually collapses: short lifespan + long steps prevent real ascent, low flare threshold floods the field with warm color. The sliders give you noise, not craft.",
      "role": "reference",
      "hero": false
    },
    {
      "kind": "text",
      "inline": "Skill structure (what actually ships):\n  SKILL.md                            ~400 lines of protocol\n  templates/viewer.html               REQUIRED starting point (~600 lines)\n  templates/generator_template.js     reference best-practices file\n  LICENSE.txt                         (license terms)\n\nTwo-step protocol the skill walks Claude through:\n  1. Algorithmic Philosophy Creation (.md, 4-6 paragraphs)\n  2. p5.js implementation built on viewer.html\n\nFixed sections of viewer.html (must not be changed):\n  - Anthropic colors/fonts (Poppins/Lora, light theme)\n  - Sidebar layout (Seed → Parameters → Colors? → Actions)\n  - Seed navigation (prev/next/random/jump)\n  - Action buttons (Reset, Download PNG)\n\nVariable sections (entire art is here):\n  - p5.js algorithm (setup/draw/classes)\n  - params object\n  - parameter UI control groups\n  - optional Colors section\n\nOur run (single representative prompt → philosophy.md → viewer.html →\nfour headless PNG captures):\n  philosophy.md:        3.3 KB, 6 paragraphs\n  viewer.html:          20.1 KB, single file, p5.js from CDN\n  seed-1978.png:        855 KB, 3.7s render\n  seed-1953.png:        971 KB, 3.7s render\n  seed-42.png:          895 KB, 3.7s render\n  edge-extreme.png:    1022 KB, 2.4s render\n  deterministic across runs at the same seed: yes\n",
      "caption": "Structural summary — what the skill ships and what one full run produces.",
      "role": "reference",
      "hero": false
    }
  ],
  "caveats": [
    "Craftsmanship is load-bearing on the human (or Claude) writing the algorithm. The SKILL.md repeats \"meticulously crafted\" / \"master-level implementation\" many times, but the sliders themselves do not enforce taste — at extreme parameter combinations the output degrades to visual noise (see edge-extreme.png). The skill's output is only as refined as the algorithm someone hand-writes for it.",
    "No bundled example artifact. First-time users must read templates/viewer.html in full and infer \"the flow-field example in setup() is to be deleted and replaced\". The template's `draw()` body is literally `// fill this in` — a fresh artifact will render nothing until the algorithm is authored.",
    "Seed-validation hygiene in templates/viewer.html: `if (newSeed && newSeed > 0)` silently rejects 0 without restoring the previous valid seed in the input box. Minor, but inherited by every artifact the skill produces.",
    "The viewer template ships an example particle-trail algorithm inside the comment-fenced \"VARIABLE\" sections. Easy to copy by accident when SKILL.md explicitly says \"don't copy the flow field example — build what the philosophy demands\". The temptation to keep the example skeleton is real.",
    "Output is HTML-only. No SVG, no vector, no print-grade export. The Download PNG button is the only way out, and it captures the canvas at native 1200×1200 resolution (no high-DPI option).",
    "Skill explicitly steers away from \"this style by this artist\" prompts (copyright defensiveness). Users wanting a specific artist's aesthetic will get an algorithmic reinterpretation, not a copy."
  ],
  "needs_credentials": [],
  "source_repo": "https://github.com/anthropics/skills/tree/main/skills/algorithmic-art",
  "human_review_url": "https://humangarden.ai/skills/algorithmic-art/"
}