mcpField
P
p5js-hermes

p5js-hermes

github.com/podoCreative & media29168 installsUpdated 1d ago
Repository

About p5js-hermes

p5js-hermes is a skill for producing interactive and generative visual art with p5.js. It covers rendering, shaders, typography, and audio-reactive visuals, with reference material for building full production workflows.

Key features

  1. 012D and 3D rendering with noise functions
  2. 02Particle systems and flow fields
  3. 03GLSL shader integration and WebGL
  4. 04Pixel array manipulation
  5. 05Kinetic typography
  6. 06Audio-reactive visuals

Use cases

  1. 01Create generative art with p5.js
  2. 02Build flow-field and particle-system visuals
  3. 03Add GLSL shaders to visual work
  4. 04Create visuals that respond to audio

Install

Copy the command and run it in a terminal.

$npx skills add https://github.com/podo/design-agent-skills --skill p5js-hermes

After installing, type/p5js-hermesin Claude Code to confirm it loaded.

Bundled filesstub.yaml

Details

From the project README

p5js-hermes

Catalogue stub — full skill: nousresearch/hermes-agent

Decision tree

  1. Is the full skill already installed? Check whether the skill at this location still has a das: block:

    • Global: grep -q "^das:" ~/.agents/skills/p5js-hermes/SKILL.md 2>/dev/null && echo "pointer" || echo "installed"
    • Project: grep -q "^das:" .agents/skills/p5js-hermes/SKILL.md 2>/dev/null && echo "pointer" || echo "installed"
    • No das: block → full skill installed, invoke it and proceed
    • das: block present → go to step 2

  2. Detect scope, then install:

    To detect scope:

    [ -e ~/.agents/skills/p5js-hermes ] && echo "global" || echo "project"

    Global (installed with -g):

    npx skills add nousresearch/hermes-agent --skill p5js-hermes -g -y

    Project (installed without -g):

    npx skills add nousresearch/hermes-agent --skill p5js-hermes -y

    Claude Code: send either command as a chat message starting with ! to run it without leaving the conversation.

Invoke after install

  • Skill name: p5js-hermes
  • Trigger phrases: "p5.js", "p5js", "generative art p5", "flow field", "audio reactive"

What it does

Full production pipeline for interactive and generative visual art in p5.js. Covers 2D/3D rendering with noise functions, particle systems, flow fields, GLSL shader integration, pixel array manipulation, kinetic typography, WebGL, and audio-reactive visuals. Backed by 10 reference files from NousResearch's Hermes agent — substantially deeper than the official algorithmic-art skill.

Comments

Markdown supported