mirror of
https://github.com/NousResearch/hermes-agent.git
synced 2026-04-28 06:51:16 +08:00
9f1b1977bc
For 14 of 74 compressed skills, the original description contained trigger keywords, technique counts, attribution, or use-case phrases not covered by the existing body content. Prepends a 'When to use' / 'What's inside' block near the top so the agent still has the full context when the skill is loaded. Skills salvaged: - codex, ascii-video, creative-ideation, excalidraw, manim-video, p5js - gif-search, heartmula, youtube-content - lm-evaluation-harness, obliteratus, vllm, axolotl - powerpoint Remaining 60 skills were verified to already cover the dropped content in their existing body sections (When to Use, overview, intro prose) or had short descriptions fully captured by the new compressed form.
p5.js Skill
Production pipeline for interactive and generative visual art using p5.js.
What it does
Creates browser-based visual art from text prompts. The agent handles the full pipeline: creative concept, code generation, preview, export, and iterative refinement. Output is a single self-contained HTML file that runs in any browser — no build step, no server, no dependencies beyond a CDN script tag.
The output is real interactive art. Not tutorial exercises. Generative systems, particle physics, noise fields, shader effects, kinetic typography — composed with intentional color palettes, layered composition, and visual hierarchy.
Modes
| Mode | Input | Output |
|---|---|---|
| Generative art | Seed / parameters | Procedural visual composition |
| Data visualization | Dataset / API | Interactive charts, custom data displays |
| Interactive experience | None (user drives) | Mouse/keyboard/touch-driven sketch |
| Animation / motion graphics | Timeline / storyboard | Timed sequences, kinetic typography |
| 3D scene | Concept description | WebGL geometry, lighting, shaders |
| Image processing | Image file(s) | Pixel manipulation, filters, pointillism |
| Audio-reactive | Audio file / mic | Sound-driven generative visuals |
Export Formats
| Format | Method |
|---|---|
| HTML | Self-contained file, opens in any browser |
| PNG | saveCanvas() — press 's' to capture |
| GIF | saveGif() — press 'g' to capture |
| MP4 | Frame sequence + ffmpeg via scripts/render.sh |
| SVG | p5.js-svg renderer for vector output |
Prerequisites
A modern browser. That's it for basic use.
For headless export: Node.js, Puppeteer, ffmpeg.
bash skills/creative/p5js/scripts/setup.sh
File Structure
├── SKILL.md # Modes, workflow, creative direction, critical notes
├── README.md # This file
├── references/
│ ├── core-api.md # Canvas, draw loop, transforms, offscreen buffers, math
│ ├── shapes-and-geometry.md # Primitives, vertices, curves, vectors, SDFs, clipping
│ ├── visual-effects.md # Noise, flow fields, particles, pixels, textures, feedback
│ ├── animation.md # Easing, springs, state machines, timelines, transitions
│ ├── typography.md # Fonts, textToPoints, kinetic text, text masks
│ ├── color-systems.md # HSB/RGB, palettes, gradients, blend modes, curated colors
│ ├── webgl-and-3d.md # 3D primitives, camera, lighting, shaders, framebuffers
│ ├── interaction.md # Mouse, keyboard, touch, DOM, audio, scroll
│ ├── export-pipeline.md # PNG, GIF, MP4, SVG, headless, tiling, batch export
│ └── troubleshooting.md # Performance, common mistakes, browser issues, debugging
└── scripts/
├── setup.sh # Dependency verification
├── serve.sh # Local dev server (for loading local assets)
├── render.sh # Headless render pipeline (HTML → frames → MP4)
└── export-frames.js # Puppeteer frame capture (Node.js)