Algorithmic Art

Reviewed 2026-10-14mediaPrompt / Rule# generative-art # p5js # creative-coding # design # anthropic

Anthropic's official algorithmic-art skill: a written algorithmic philosophy, then a self-contained p5.js viewer with seeded randomness, parameter sliders and seed navigation.

Security Reviewed

Instruction-and-template skill with no scripts; the generated HTML page loads p5.js from cdnjs and fonts from Google when opened, and makes no other network calls.

Install Algorithmic Art in Google Antigravity

Antigravity loads skills from .agents/skills/ in your project or ~/.gemini/config/skills/ for all projects (official docs). Full guide

EasiestOption 1: paste this to your Antigravity agent

Install the "Algorithmic Art" skill for Google Antigravity.
Follow the steps at https://www.antigravityskills.org/install/algorithmic-art.md (source: https://github.com/anthropics/skills/tree/main/skills/algorithmic-art).
Before running anything, show me what you will download and whether it includes scripts, and wait for my OK.
Install it into this project (.agents/skills/) unless I say global. When done, check that Antigravity lists it as an installed skill.

The agent reads the install file, shows you what it will download and waits for your OK.

Option 2: install it yourself

1. Download the repository
```
git clone --depth 1 https://github.com/anthropics/skills /tmp/anthropic-skills && git -C /tmp/anthropic-skills log -1 --format=%h -- skills/algorithmic-art
```
The last change to the skill folder at our review was b9e19e6 (2026-04-20); a different hash means the skill changed after our review.
2. Copy the skill into this project (workspace skill)
```
mkdir -p .agents/skills && cp -r /tmp/anthropic-skills/skills/algorithmic-art .agents/skills/
```
Run from your project root. Antigravity then reads .agents/skills/algorithmic-art/SKILL.md; the templates/ folder (viewer.html and generator_template.js) comes with it.
3. Or install it for all projects (global skill)
```
mkdir -p ~/.gemini/config/skills && cp -r /tmp/anthropic-skills/skills/algorithmic-art ~/.gemini/config/skills/
```
Use this instead of the previous step. For the Antigravity CLI the global folder is ~/.gemini/antigravity-cli/skills/.
4. Check that Antigravity sees it
Antigravity 2.0 app: start a new conversation and ask "What skills do you have?" (the app has no /skills command). Antigravity CLI: run /skills; in a session that was already open, run /skills reload first. The skill is listed as algorithmic-art.

Anthropic documents only Claude Code, Claude.ai and the API; Antigravity is not mentioned. No API keys, binaries or scripts are needed. The generated page needs internet access to load p5.js and the Google Fonts when you open it.

Using Claude Code, Cursor or Codex? See other assistants below.

What is Algorithmic Art?

For designers and developers who want an agent to make generative art they can explore, not a single static image. algorithmic-art is Anthropic's official skill: the agent writes a short "algorithmic philosophy" as a Markdown file, then builds one self-contained HTML page that runs a p5.js sketch with seeded randomness, parameter sliders and seed navigation. What we counted at commit dbd4588 (2026-10-09; folder last touched in b9e19e6 on 2026-04-20, a LICENSE.txt update; SKILL.md was last changed in ef74077 on 2025-12-01): 4 files and 59,784 bytes. SKILL.md is 404 lines / 2,746 words / 19,769 bytes; templates/viewer.html is 598 lines / 20,844 bytes; templates/generator_template.js is 222 lines / 7,826 bytes (best-practice structure, not a pattern menu); plus an Apache 2.0 LICENSE.txt.

How to use Algorithmic Art?

Copy the folder into Antigravity's skills folder and ask for generative or algorithmic art, flow fields or particle systems, in normal words. Per SKILL.md the agent reads templates/viewer.html first and uses it as the literal starting point, writes the philosophy .md, replaces the algorithm and the parameter controls, and delivers one HTML file you open in a browser. Seeds make a piece reproducible: the same seed always gives the same output.

Key features of Algorithmic Art

✓Two-step method: an algorithmic philosophy (.md), then a single HTML artifact with the p5.js sketch inline
✓Seeded randomness: SKILL.md requires randomSeed and noiseSeed, and seed navigation (previous, next, random, jump) in the viewer
✓viewer.html template we counted: 4 sliders (particle count, flow speed, noise scale, trail length), 3 colour pickers, a seed input and 4 buttons (Prev, Next, Random, Reset); its demo is a flow field of 5,000 particles
✓Five example philosophies in SKILL.md (Organic Turbulence, Quantum Harmonics, Recursive Whispers, Field Dynamics, Stochastic Crystallization)
✓Can offer seed presets or a gallery mode, and generate seeds 1-100 when asked
✓Everything inline in one file; p5.js 1.7.0 loads from cdnjs

When to use Algorithmic Art

1Generative backgrounds or hero art for a landing page concept
2Flow-field, particle or recursive-pattern pieces you can tune and re-seed
3A shareable single HTML file of an interactive art piece
4Exploring variations: step through seeds and keep your favourites

Installation & Setup Guide

Agent Rules / Prompt Setup

Follow these steps (taken from the project's own docs) to configure Algorithmic Art in your development environment.

Step 1: Claude Code: anthropics/skills marketplaceclaude

/plugin marketplace add anthropics/skills
/plugin install example-skills@anthropic-agent-skills

Documented in the anthropics/skills README. algorithmic-art is one of the 12 skills in the example-skills plugin (.claude-plugin/marketplace.json), so this installs it with the others.

Step 2: Claude.aiclaude

The anthropics/skills README says its example skills are already available to paid Claude.ai plans.

Step 3: Cursorcursor

Not documented by the project.

Usage Example & Verification

Prompt / Request Example

1) Our example (SKILL.md and the repository README give no sample prompt): "Create algorithmic art of ink spreading in water, using the algorithmic-art skill."
-> What should happen: a philosophy .md and one HTML file with seeded p5.js code, sliders for the parameters it needs and seed buttons.

2) Our example: "Same piece, but give me seed presets for seeds 1 to 100 and a gallery view."
-> What should happen: per the Variations section the viewer gets seed presets and a Gallery Mode with thumbnails of several seeds, still inside the one file.

3) Our example: "Make the sketch static with noLoop and add a button that saves the canvas as a PNG."
-> What should happen: expect the agent to add the save button itself: SKILL.md asks for a Download PNG button but the template has none (we checked).

Security Review

Static review

Reviewed Date

2026-10-14

Audited Ref / Commit

dbd4588f9e1033efb41dad4bef2f7947c8993d44

Reviewer

antigravityskills.org (static code review)

Instruction-and-template skill with no scripts; the generated HTML page loads p5.js from cdnjs and fonts from Google when opened, and makes no other network calls.

Full review: scope, findings, risks

Audit Scope:anthropics/skills at HEAD dbd4588 (2026-10-09): skills/algorithmic-art/SKILL.md in full, templates/viewer.html (structure, URL, button and control scan, script section), templates/generator_template.js (header and structure), LICENSE.txt header, README.md and .claude-plugin/marketplace.json, and a diff against the sickn33/antigravity-awesome-skills copy at bdacd76. Nothing was run or opened in a browser.

Key Findings:Instruction plus template skill. SKILL.md has no shell commands and no allowed-tools field. viewer.html is a browser page: one script tag to cdnjs.cloudflare.com (p5.js 1.7.0), a stylesheet link to fonts.googleapis.com (Poppins, Lora), inline p5.js code; we found no fetch, XMLHttpRequest, WebSocket, localStorage, eval or cookie use. generator_template.js is plain p5.js structure guidance.

Identified Operational Risks & Permissions:Low. The generated page loads third-party resources (cdnjs, Google Fonts) when opened, and p5.js sketches with thousands of particles can be heavy on a slow machine. The agent writes .md and .html files in your working folder.

Static review at commit dbd4588 of anthropics/skills (nothing was executed). skills/algorithmic-art has 4 files: SKILL.md (404 lines), LICENSE.txt (Apache License 2.0), templates/viewer.html (598 lines) and templates/generator_template.js (222 lines). SKILL.md's frontmatter has name, description and license only; its body is Markdown guidance plus p5.js snippets for the agent to adapt, with no shell commands. It requires the agent to read viewer.html first and keep its structure and Anthropic styling. viewer.html's absolute URLs are the p5.js 1.7.0 script on cdnjs.cloudflare.com, fonts.googleapis.com and fonts.gstatic.com (Poppins and Lora); its inline script defines p5.js setup/draw, seed and parameter handlers (updateParam, updateColor, updateSeed, previousSeed, nextSeed, randomSeedAndUpdate, resetParameters) and uses no network, storage or dynamic-evaluation calls. License: Apache-2.0.

Operational Notes & Known Limitations

Known Limitations

•Needs a browser to view the result and internet access when you open it: viewer.html loads p5.js 1.7.0 from cdnjs.cloudflare.com and Poppins and Lora from Google Fonts (the only URLs in the template, we counted)
•SKILL.md tells the agent to keep Anthropic branding (Anthropic colours, Poppins/Lora fonts, layout) in the viewer's interface, so your page looks like an Anthropic artifact unless you ask for something else
•The template and SKILL.md disagree: SKILL.md lists Regenerate, Reset and Download PNG as fixed actions, but viewer.html has no Download button and no separate Regenerate button (it has Prev, Next, Random and Reset), so the agent has to add them
•Instruction plus template only: no scripts, no build step, no tests. It works in claude.ai artifacts per SKILL.md; in Antigravity you save the HTML and open it in a browser
•Output is art, not product UI. For web interface work use frontend-design, Impeccable or UI/UX Pro Max
•anthropics/skills' README says its skills are for demonstration and educational purposes and may differ from built-in Claude behavior
•Neither the README nor SKILL.md mentions Antigravity (we searched). A modified community copy in sickn33/antigravity-awesome-skills shortens the description, adds a risk: critical label and generic sections; this page covers the Anthropic original

Frequently Asked Questions

What is the algorithmic-art skill?

Anthropic's official skill for generative art: the agent writes an algorithmic philosophy (.md), then one HTML file with a seeded p5.js sketch, parameter sliders and seed navigation.

How do I install algorithmic-art in Antigravity?

Clone github.com/anthropics/skills and copy skills/algorithmic-art into .agents/skills/ in your project, or into ~/.gemini/config/skills/ for all projects. Then ask "What skills do you have?" (CLI: /skills).

Is the algorithmic-art skill safe?

In our static review of commit dbd4588 the folder has no scripts and no network code of its own. The viewer template loads p5.js from cdnjs and two fonts from Google Fonts when you open the generated page; it has no fetch calls or storage.

How do I open the result?

Save the generated HTML file and open it in a browser. The same seed always reproduces the same picture; use the seed controls to explore.

Is this the same as the sickn33 version?

No. The community copy changes the description and adds generic sections; this page covers Anthropic's original in anthropics/skills.

Supported Platforms

antigravityclaude

View Source on GitHub

Keep exploring this topic

Browse the full Antigravity skills directory for more source-linked skills with install steps and static safety reviews.

More media skills #generative-art #p5js #creative-coding #design Use cases

Related Skills

🎨

Canvas Design

@anthropics

Anthropic's official canvas-design skill: turns a poster or art request into a written design philosophy, then a one-page PNG or PDF, with 29 bundled font families.

Static reviewinstructions onlywrites filesnetwork access

designposter

💻