Agent skill

P5js

Generative visual art and sketches in p5.js (self-contained HTML)

Apache-2.0Auto-check passedMedia & Creative

Install P5js

skills CLI

$ npx skills add taracodlabs/aiden --skill p5js -a claude-code

Project install by default; add -g for ~/.claude/skills/.

GitHub CLI

$ gh skill install taracodlabs/aiden p5js --agent claude-code

Project scope by default; add --scope user for a personal install. Needs GitHub CLI 2.90.0 or later (public preview).

Manual copy

$ git clone --depth 1 https://github.com/taracodlabs/aiden.git skills-src && mkdir -p .claude/skills && cp -r skills-src/skills/p5js .claude/skills/p5js && rm -rf skills-src

Use ~/.claude/skills/ instead of .claude/skills for a personal install. The folder must contain SKILL.md.

Claude Code skills documentation · loads skills from .claude/skills/

Paste into Claude Code

Install the "p5js" agent skill from https://github.com/taracodlabs/aiden/tree/main/skills/p5js into .claude/skills/p5js/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "p5js", then confirm the skill loads.

Claude Code copies the folder itself, the same result as the manual copy. Check what it changed before you commit it.

$skill-installer

$skill-installer install https://github.com/taracodlabs/aiden/tree/main/skills/p5js

Type this inside Codex. $skill-installer <name> installs a curated skill from openai/skills. The installer writes to $CODEX_HOME/skills (default ~/.codex/skills). Restart Codex if the skill does not show up.

skills CLI

$ npx skills add taracodlabs/aiden --skill p5js -a codex

Project install goes to .agents/skills/; add -g for ~/.codex/skills/.

GitHub CLI

$ gh skill install taracodlabs/aiden p5js --agent codex

Project scope by default (.agents/skills/); add --scope user for a personal install.

Manual copy

$ git clone --depth 1 https://github.com/taracodlabs/aiden.git skills-src && mkdir -p .agents/skills && cp -r skills-src/skills/p5js .agents/skills/p5js && rm -rf skills-src

Use ~/.agents/skills/ instead of .agents/skills for a personal install.

Codex skills documentation · loads skills from .agents/skills/

Paste into Codex

Install the "p5js" agent skill from https://github.com/taracodlabs/aiden/tree/main/skills/p5js into .agents/skills/p5js/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "p5js", then confirm the skill loads.

Codex copies the folder itself, the same result as the manual copy. Check what it changed before you commit it.

skills CLI

$ npx skills add taracodlabs/aiden --skill p5js -a cursor

Project install goes to .agents/skills/; add -g for ~/.cursor/skills/.

GitHub CLI

$ gh skill install taracodlabs/aiden p5js --agent cursor

Project scope by default (.agents/skills/); add --scope user for a personal install.

Manual copy

$ git clone --depth 1 https://github.com/taracodlabs/aiden.git skills-src && mkdir -p .cursor/skills && cp -r skills-src/skills/p5js .cursor/skills/p5js && rm -rf skills-src

Use ~/.cursor/skills/ instead of .cursor/skills for a personal install.

Cursor skills documentation · loads skills from .cursor/skills/, .agents/skills/, .claude/skills/, .codex/skills/

Paste into Cursor

Install the "p5js" agent skill from https://github.com/taracodlabs/aiden/tree/main/skills/p5js into .cursor/skills/p5js/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "p5js", then confirm the skill loads.

Cursor copies the folder itself, the same result as the manual copy. Check what it changed before you commit it.

gemini skills install

$ gemini skills install https://github.com/taracodlabs/aiden.git --path skills/p5js

--scope user (default) or --scope workspace; --path is the subfolder of the repo that holds the skill; --consent skips the security confirmation prompt.

skills CLI

$ npx skills add taracodlabs/aiden --skill p5js -a gemini-cli

Project install goes to .agents/skills/; add -g for ~/.gemini/skills/.

GitHub CLI

$ gh skill install taracodlabs/aiden p5js --agent gemini-cli

Project scope by default (.agents/skills/); add --scope user for a personal install.

Manual copy

$ git clone --depth 1 https://github.com/taracodlabs/aiden.git skills-src && mkdir -p .gemini/skills && cp -r skills-src/skills/p5js .gemini/skills/p5js && rm -rf skills-src

Use ~/.gemini/skills/ instead of .gemini/skills for a personal install, then run /skills reload.

Gemini CLI skills documentation · loads skills from .gemini/skills/, .agents/skills/

Paste into Gemini CLI

Install the "p5js" agent skill from https://github.com/taracodlabs/aiden/tree/main/skills/p5js into .gemini/skills/p5js/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "p5js", then confirm the skill loads.

Gemini CLI copies the folder itself, the same result as the manual copy. Check what it changed before you commit it.

GitHub CLI

$ gh skill install taracodlabs/aiden p5js

Installs for Copilot at project scope by default; add --scope user for a personal install. Preview a skill first with gh skill preview. Needs GitHub CLI 2.90.0 or later (public preview).

skills CLI

$ npx skills add taracodlabs/aiden --skill p5js -a github-copilot

Project install goes to .agents/skills/; add -g for ~/.copilot/skills/.

Manual copy

$ git clone --depth 1 https://github.com/taracodlabs/aiden.git skills-src && mkdir -p .github/skills && cp -r skills-src/skills/p5js .github/skills/p5js && rm -rf skills-src

Use ~/.copilot/skills/ instead of .github/skills for a personal install. Commit .github/skills so cloud agent and code review can use it.

GitHub Copilot skills documentation · loads skills from .github/skills/, .claude/skills/, .agents/skills/

Paste into GitHub Copilot

Install the "p5js" agent skill from https://github.com/taracodlabs/aiden/tree/main/skills/p5js into .github/skills/p5js/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "p5js", then confirm the skill loads.

GitHub Copilot copies the folder itself, the same result as the manual copy. Check what it changed before you commit it.

skills CLI

$ npx skills add taracodlabs/aiden --skill p5js -a opencode

OpenCode documents no install command of its own. Project install goes to .agents/skills/; add -g for ~/.config/opencode/skills/.

GitHub CLI

$ gh skill install taracodlabs/aiden p5js --agent opencode

Project scope by default (.agents/skills/); add --scope user for a personal install.

Manual copy

$ git clone --depth 1 https://github.com/taracodlabs/aiden.git skills-src && mkdir -p .opencode/skills && cp -r skills-src/skills/p5js .opencode/skills/p5js && rm -rf skills-src

Use ~/.config/opencode/skills/ instead of .opencode/skills for a personal install.

OpenCode skills documentation · loads skills from .opencode/skills/, .claude/skills/, .agents/skills/

Paste into OpenCode

Install the "p5js" agent skill from https://github.com/taracodlabs/aiden/tree/main/skills/p5js into .opencode/skills/p5js/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "p5js", then confirm the skill loads.

OpenCode copies the folder itself, the same result as the manual copy. Check what it changed before you commit it.

Facts

Skill name: p5js
GitHub stars: 851
Token cost: ~1.1k tokens
SKILL.md length: 231 words
Files: 2
Skills in repo: 63
Repo updated: Sep 13, 2026
First seen: Oct 7, 2026
Licence: Apache-2.0

At a glance

Generative visual art and sketches in p5.js (self-contained HTML)

Works in 5 steps: Basic p5.js HTML template → Flowing particles sketch → Recursive fractal tree → …
Tasks that involve Generative and creative coding
SKILL.md covers When to Use, How to Use, Examples and Cautions
Reaches cdnjs.cloudflare.com

What it does

P5js is an agent skill from taracodlabs/aiden. Generative visual art and sketches in p5.js (self-contained HTML)

Its SKILL.md is about 1.1k tokens, which your agent loads only when the skill is triggered. The skill folder holds 1 other file (for example `skill.json`).

It sits in Media & Creative, covering Generative and creative coding. The repository describes itself as: Aiden — an autonomous AI agent and work engine built solo. It can operate your browser, terminal, files, apps, APIs, skills and tools, remember context, recover from failures… The licence is Apache-2.0.

When your agent uses it

Tasks that involve Generative and creative coding

Example prompts

“/p5js”

Requirements

Python 3

Workflow steps

5 steps, taken from the step headings in SKILL.md.

Basic p5.js HTML template
Flowing particles sketch
Recursive fractal tree
Interactive mouse repulsion
Generate and save the sketch file

What it can do on your machine

Read from SKILL.md and the folder at commit 3704204. It shows what the files ask for, not the result of running them.

Tool permissions
Pre-approves nothing: there is no allowed-tools line, so your agent's usual permission prompts apply.
From allowed-tools in the SKILL.md frontmatter.
Runs code
No scripts in the folder and no shell commands in SKILL.md (its code samples are javascript, html and python).
From the folder's file list and the shell code blocks in SKILL.md.
Network
Hosts in commands or code, which the agent is likely to contact:
- cdnjs.cloudflare.com
From URLs in SKILL.md, links to its own repository left out.
Credentials
Names no API keys, tokens, secrets or passwords.
From names ending in _API_KEY, _TOKEN, _SECRET, _KEY or _PASSWORD in SKILL.md.

Context cost

P5js loads about 1.1k tokens when it runs. Until then it costs about 18 tokens; SKILL.md has 231 words of instructions outside code blocks.

Always · name and description, kept in context so the agent knows when to use it: ~18
When it runs · the whole SKILL.md, loaded when a task matches: ~1.1k

Estimates: characters ÷ 4, the usual rule of thumb; real counts depend on the model's tokenizer. Scripts and assets cost tokens only if the agent reads them.

Safety

Auto-check passed

The automated check found no risky patterns in SKILL.md.

Automated static check — not a guarantee. Review scripts before installing. It scans the text of SKILL.md for risky patterns (piping downloads into a shell, reading credential files, hidden Unicode, destructive commands); files beside SKILL.md are not scanned.

SKILL.md

The full file from taracodlabs/aiden at commit 3704204, republished under its Apache-2.0 licence (© taracodlabs). 231 words, ~1,112 tokens.

Download SKILL.mdSave it as .claude/skills/p5js/SKILL.md (or your agent's skills folder). This skill also uses 1 other file; get the full folder from GitHub.

name: p5js
description: Generative visual art and sketches in p5.js (self-contained HTML)
category: creative
version: 1.0.0
origin: aiden
license: Apache-2.0
tags: p5js, generative-art, creative-coding, canvas, animation, visualization, javascript, interactive

p5.js Generative Art and Creative Coding

Create generative visual art, animations, and interactive sketches using p5.js. Output is a self-contained HTML file that opens in any browser — no build step required.

When to Use

User wants generative or procedural visual art
User wants an interactive animation or visualization
User wants to visualize data in a creative, non-standard way
User wants a screensaver-style animation
User wants to experiment with creative coding

How to Use

1. Basic p5.js HTML template

html

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>p5.js Sketch</title>
  <style>body { margin: 0; background: #0d1117; overflow: hidden; }</style>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/1.9.0/p5.min.js"></script>
</head>
<body>
<script>
// Your p5.js sketch code goes here

function setup() {
  createCanvas(windowWidth, windowHeight);
  background(13, 17, 23);
}

function draw() {
  // Called every frame (~60fps)
}
</script>
</body>
</html>

2. Flowing particles sketch

javascript

let particles = [];

function setup() {
  createCanvas(windowWidth, windowHeight);
  colorMode(HSB, 360, 100, 100, 100);
  background(220, 30, 10);
  for (let i = 0; i < 300; i++) {
    particles.push({ x: random(width), y: random(height), hue: random(180, 280) });
  }
}

function draw() {
  fill(220, 30, 10, 8);
  noStroke();
  rect(0, 0, width, height);

  for (let p of particles) {
    let angle = noise(p.x * 0.003, p.y * 0.003) * TWO_PI * 4;
    p.x += cos(angle) * 2;
    p.y += sin(angle) * 2;
    if (p.x < 0 || p.x > width || p.y < 0 || p.y > height) {
      p.x = random(width); p.y = random(height);
    }
    stroke(p.hue, 70, 90, 60);
    strokeWeight(1.5);
    point(p.x, p.y);
  }
}

3. Recursive fractal tree

javascript

function setup() {
  createCanvas(800, 600);
  background(13, 17, 23);
  stroke(100, 200, 120, 180);
  translate(width / 2, height);
  branch(120);
}

function branch(len) {
  strokeWeight(map(len, 5, 120, 0.5, 4));
  line(0, 0, 0, -len);
  translate(0, -len);
  if (len > 8) {
    push(); rotate(0.4);  branch(len * 0.67); pop();
    push(); rotate(-0.4); branch(len * 0.67); pop();
  }
}

4. Interactive mouse repulsion

javascript

let circles = [];

function setup() {
  createCanvas(windowWidth, windowHeight);
  for (let i = 0; i < 100; i++) {
    circles.push({ x: random(width), y: random(height), vx: 0, vy: 0, r: random(5, 15) });
  }
}

function draw() {
  background(13, 17, 23, 25);
  for (let c of circles) {
    let dx = c.x - mouseX, dy = c.y - mouseY;
    let dist = sqrt(dx*dx + dy*dy);
    if (dist < 100) { c.vx += dx / dist * 2; c.vy += dy / dist * 2; }
    c.vx *= 0.95; c.vy *= 0.95;
    c.x = constrain(c.x + c.vx, 0, width);
    c.y = constrain(c.y + c.vy, 0, height);
    fill(180, 100, 220, 180); noStroke();
    ellipse(c.x, c.y, c.r * 2);
  }
}

5. Generate and save the sketch file

python

template = open("sketch_template.html").read()
sketch_code = """/* paste sketch code here */"""
html = template.replace("// Your p5.js sketch code goes here", sketch_code)
with open("my_sketch.html", "w") as f:
  f.write(html)
print("Open my_sketch.html in a browser")

Examples

"Create a flowing particle animation with a dark background" → Use template from step 1, insert sketch code from step 2. Save as particles.html.

"Make an interactive sketch where particles run away from the mouse" → Use step 4 pasted into the template from step 1.

"Generate a fractal tree visualization" → Use step 3 inside the basic template. Adjust branch length and angle for different tree shapes.

Cautions

p5.js sketches run in the browser — they cannot access the local filesystem directly
The CDN link requires internet access; for offline use, download p5.min.js locally
Very high particle counts (> 5000) may cause frame rate drops — start with 300-500 particles
windowWidth/windowHeight resize the canvas to fill the browser window — add windowResized() handler for responsive sketches
For offline-first output, embed the p5.js library inline rather than using the CDN

Files

SKILL.md and 1 other file in skills/p5js of taracodlabs/aiden.

SKILL.md
skill.json

Open the folder on GitHubat commit 3704204

Compare with similar skills

P5js next to the 5 skills that share the most tags, products or categories with it. Stars are the repository's; “used in” counts other GitHub owners with a copy.

P5js compared with similar skills
Skill	Stars	Used in	Tokens	Auto-check	Licence	Repo updated
P5js this skilltaracodlabs/aiden	851	—	~1.1k	Automated safety check: Pass	Apache-2.0	25 days ago
Algorithmic Art with p5.jsanthropics/skills	180k	38 repos	~4.9k	Automated safety check: Pass	Apache-2.0	3 days ago
Canvas Designanthropics/skills	180k	52 repos	~3k	Automated safety check: Pass	Apache-2.0	3 days ago
Photo Abstract EditorialZzzLc0405/photo-abstract-editorial	5.9k	—	~815	Automated safety check: Pass	Proprietary	1 mo ago
Mono Coloryanliudesign/mono-color-skill	3.4k	—	~8.5k	Automated safety check: Pass	MIT	1 mo ago
Gathered Scenes Zine PosterZeejay0/gathered-scenes-zine-skill	5.3k	—	~3.8k	Automated safety check: Pass	Custom licence	1 mo ago

Similar skills

Algorithmic Art with p5.js
anthropics/skills
Official
Creates original generative art in two steps: a written algorithmic philosophy, then a p5.js sketch with seeded randomness and an interactive viewer for exploring parameters.
180k GitHub starsUsed in 38 repos~4.9k tokens
Media & CreativeAuto-check passed
Canvas Design
anthropics/skills
Official
Creates original posters and static art as PNG or PDF by first writing a short design philosophy, then expressing it visually on a canvas.
180k GitHub starsUsed in 52 repos~3k tokens
Media & CreativeAuto-check passed
Photo Abstract Editorial
ZzzLc0405/photo-abstract-editorial
Creates one vertical editorial image from an uploaded photo, keeping the photo untouched and adding an abstract panel and short English title derived from it.
5.9k GitHub stars~815 tokensUpdated 1 mo ago
Media & CreativeAuto-check passed
Mono Color
yanliudesign/mono-color-skill
Generate original one-ink or controlled two-ink editorial images from any theme, sentence, article idea, object, or reference photo.
3.4k GitHub stars~8.5k tokensUpdated 1 mo ago
Media & CreativeAuto-check passed
Gathered Scenes Zine Poster
Zeejay0/gathered-scenes-zine-skill
Turns a photo into a tactile collage poster where part stays an untouched photographic anchor and the rest becomes a simplified, color-fading illustration of the hidden scene.
5.3k GitHub stars~3.8k tokensUpdated 1 mo ago
Media & CreativeAuto-check passed
CRT Interface Illustration
TaiT-tt/tait-crt-interface-skill
Generates one finished retro CRT computer-interface illustration from a portrait, photo, creature, object or theme, as an exaggerated 1980s bitmap caricature.
512 GitHub stars~9.4k tokensUpdated 1 mo ago
Media & CreativeAuto-check passed

Questions about P5js

What does P5js do?

Generative visual art and sketches in p5.js (self-contained HTML). P5js is an agent skill from taracodlabs/aiden.

When should I use P5js?

P5js fits situations like: tasks that involve Generative and creative coding.

How do I install P5js in Claude Code?

Run `npx skills add taracodlabs/aiden --skill p5js -a claude-code`. Or copy the skill folder (skills/p5js in taracodlabs/aiden) into .claude/skills/p5js in your project. Claude Code loads it when a task matches its description.

How do I install P5js in Codex?

Run `npx skills add taracodlabs/aiden --skill p5js -a codex`. Or copy the skill folder (skills/p5js in taracodlabs/aiden) into .agents/skills/p5js in your project. Codex loads it when a task matches its description.

Can I use P5js in Cursor, Gemini CLI or GitHub Copilot?

Cursor, Gemini CLI, GitHub Copilot and OpenCode also load SKILL.md folders. With the skills CLI, run `npx skills add taracodlabs/aiden --skill p5js -a cursor` (or -a gemini-cli, github-copilot or opencode for the others). To copy it by hand, put the folder in .cursor/skills/p5js, .gemini/skills/p5js, .github/skills/p5js and .opencode/skills/p5js in your project.

What does P5js need to run?

SKILL.md names no scripts, command-line tools or credentials: P5js is instructions for the agent only. Our summary lists: Python 3.

Does P5js access the network?

SKILL.md names 1 domain. In commands or code: cdnjs.cloudflare.com; the agent is likely to contact it when it follows the instructions. This is read from the text; nothing was executed.

Is P5js safe to install?

Our automated static check of SKILL.md found no risky patterns, such as piping downloads into a shell, reading credential files or hidden Unicode. It is not a guarantee. Review the folder before installing.

What licence does P5js use?

P5js is published under the Apache-2.0 licence (declared in SKILL.md). It allows redistribution, so the full SKILL.md is shown on this page.

How many tokens does P5js use?

About 1.1k tokens (SKILL.md is roughly 4.4k characters). Agents keep only the skill's name and description in context until a task matches; then they load SKILL.md in full.

What are the alternatives to P5js?

Skills that share tags, products or a category with P5js: Algorithmic Art with p5.js (anthropics/skills, 180k stars), Canvas Design (anthropics/skills, 180k stars), Photo Abstract Editorial (ZzzLc0405/photo-abstract-editorial, 5.9k stars) and Mono Color (yanliudesign/mono-color-skill, 3.4k stars). The comparison table on this page puts their stars, adoption, token cost, safety result and licence side by side.

Who maintains P5js?

taracodlabs (a GitHub organization) maintains it in taracodlabs/aiden, which has 851 GitHub stars. The repository holds 63 skills in this directory. The repository was last updated on September 13, 2026.

Source: taracodlabs/aiden on GitHub. Facts on this page come from the repository at the commit we read; the author's words are quoted as theirs.

Install P5js

Facts

At a glance

What it does

When your agent uses it

Example prompts

Requirements

Workflow steps

What it can do on your machine

Tool permissions

Runs code

Network

Credentials

Context cost

Safety

SKILL.md

p5.js Generative Art and Creative Coding

When to Use

How to Use

1. Basic p5.js HTML template

2. Flowing particles sketch

3. Recursive fractal tree

4. Interactive mouse repulsion

5. Generate and save the sketch file

Examples

Cautions

Files

Compare with similar skills

Similar skills

More from taracodlabs/aiden

Related

Questions about P5js