Algorithmic Art (Anthropic, official)

tl;dr: a two-step procedure, not a one-shot prompt. First the skill writes an algorithmic philosophy (4–6 paragraphs as .md) — a “manifesto for a generative art movement.” Then it expresses that philosophy as a self-contained p5.js HTML artifact, seeded (Art Blocks pattern), with a sidebar of parameter controls built from templates/viewer.html. Static images with randomness are not the goal — living algorithms are.

What it actually does

The SKILL.md we fetched on 2026-09-10 (anthropics/skills/main/skills/algorithmic-art/SKILL.md, 6.9 KB) is a workflow doc, not a library. The procedure in plain English:

Step 1 — Algorithmic philosophy (.md)

The skill names a generative aesthetic movement (1–2 words — “Organic Turbulence,” “Quantum Harmonics,” “Recursive Whispers”), then writes 4–6 paragraphs of computational philosophy. Key constraints the skill enforces:

• Emphasize process over product — each run is unique, beauty lives in the algorithm’s execution.
• Emphasize craftsmanship repeatedly — phrases like “meticulously crafted,” “painstaking optimization,” “master-level implementation” must recur. This is by design; it’s how the downstream agent gets the calibration right.
• Deduce a conceptual seed before coding — a subtle reference woven into the parameters, not pasted into the title. “Someone familiar with the subject should feel it intuitively, while others simply experience a masterful generative composition.”
• No redundancy across the 4–6 paragraphs. Each algorithmic aspect mentioned once.

The skill gives five worked examples (Organic Turbulence, Quantum Harmonics, Recursive Whispers, Field Dynamics, Stochastic Crystallization). Each is condensed — the actual philosophy must be 4–6 substantial paragraphs.

Step 2 — p5.js implementation (.html)

The HTML artifact is built off templates/viewer.html (in the same repo folder), not from scratch. The skill is explicit: “Use that file as the LITERAL STARTING POINT — not just inspiration.” Fixed vs. variable sections:

templates/viewer.html and templates/generator_template.js ship in the repo. The JS template is a reference for p5.js best practices (seeded randomness, parameter structure, class organization) — not a pattern menu. The skill is explicit: “Don’t copy the flow field example — build what the philosophy demands.”

Seeded randomness (Art Blocks pattern)

let seed = 12345;
randomSeed(seed);
noiseSeed(seed);

Same seed → identical output. Same algorithm + different seed → a different print from the same plate. The skill treats this as a hard requirement: “Same seed ALWAYS produces identical output.” The seed nav (Prev/Next/Random/Jump) lets the user explore the seed space without creating multiple artifacts.

Output contract

The artifact is one self-contained HTML file. It embeds p5.js from CDN (cdnjs.cloudflare.com/ajax/libs/p5.js/1.7.0/p5.min.js), inlines all styling and scripts, and runs immediately in claude.ai artifacts or any browser — no server, no setup.

<!DOCTYPE html>
<html>
<head>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/1.7.0/p5.min.js"></script>
  <style>/* inline */</style>
</head>
<body>
  <div id="canvas-container"></div>
  <div id="controls"><!-- inline --></div>
  <script>/* inline p5.js */</script>
</body>
</html>

Install

The skill ships inside the example-skills plugin in anthropic-agent-skills (per .claude-plugin/marketplace.json on 2026-09-10). The plugin bundles twelve skills: algorithmic-art, brand-guidelines, canvas-design, doc-coauthoring, frontend-design, internal-comms, mcp-builder, skill-creator, slack-gif-creator, theme-factory, web-artifacts-builder, webapp-testing. Install requires registering the marketplace first.

# Claude Code — one-time marketplace registration
/plugin marketplace add anthropics/skills

# Install just the algorithmic-art skill
/plugin install example-skills@anthropic-agent-skills

# Or browse + pick the plugin interactively
# 1. /plugin marketplace add anthropics/skills
# 2. Select "Browse and install plugins"
# 3. Select "anthropic-agent-skills"
# 4. Select "example-skills"
# 5. Select "Install now"

The README does not document an npx skills add path — only the marketplace workflow. On Claude.ai, the skill is not pre-built (only the document skills are); upload as a custom skill. On the API, attach via container.skills with code_execution_20250825.

Gotchas

• Two steps, not one. Don’t skip the philosophy .md. The skill is explicit: “Beauty lives in the process, not the final frame.” A pretty p5 sketch without the philosophy is not what this skill produces.
• No static images. “This is about making LIVING ALGORITHMS, not static images with randomness.” A noLoop() sketch with a baked seed is closer to the bar than a 60fps loop with no philosophy, but neither matches the workflow unless both are present.
• templates/viewer.html is the starting point, not inspiration. The skill bans “Creating HTML from scratch” and “Inventing custom styling or color schemes.” Anthropic branding (Poppins/Lora, light gradient, sidebar structure) stays.
• Every artwork must have unique parameters and algorithm. The fixed UX parts provide consistency; everything else expresses the unique vision. Reusing the flow field example across two pieces breaks the contract.
• Skill discourages copying existing artists. The skill description explicitly bans “copying existing artists’ work to avoid copyright violations.” The conceptual seed is a subtle reference, not a remix.
• sandbox_test is untested. We read SKILL.md and the marketplace manifest; we did not generate a piece in a sandbox.
• Apache 2.0 (per the example-skills subset); the four proprietary document skills don’t apply here.

Related

• frontend-design (Anthropic) — same Anthropic skills shelf, design-system companion
• canvas-design (Anthropic) — p5.js / design skill, same example-skills plugin
• web-artifacts-builder (Anthropic) — same plugin, sibling HTML-artifact workflow