algorithmic-art workflow skill. Use this skill when the user needs Algorithmic philosophies are computational aesthetic movements that are then expressed through code. Output .md files (philosophy), .html files (interactive viewer), and .js files (generative algorithms) and the operator should preserve the upstream workflow, copied support files, and provenance before merging or handing off.
Instalar com Codex ou Claude Copie este prompt, cole no Codex, Claude ou outro assistente e deixe que ele revise a página da skill e instale para você.
Um comando direto ignora o prompt de revisão. Verifique a origem antes de executá-lo.
Instruções da origem · Visualização somente leitura
name
algorithmic-art-v4
description
algorithmic-art workflow skill. Use this skill when the user needs Algorithmic philosophies are computational aesthetic movements that are then expressed through code. Output .md files (philosophy), .html files (interactive viewer), and .js files (generative algorithms) and the operator should preserve the upstream workflow, copied support files, and provenance before merging or handing off.
This public intake copy packages plugins/antigravity-bundle-indie-game-dev/skills/algorithmic-art from https://github.com/sickn33/antigravity-awesome-skills into the native Omni Skills editorial shape without hiding its origin.
Use it when the operator needs the upstream workflow, support files, and repository context to stay intact while the public validator and private enhancer continue their normal downstream flow.
This intake keeps the copied upstream files intact and uses the external_source block in metadata.json plus ORIGIN.md as the provenance anchor for review.
Algorithmic philosophies are computational aesthetic movements that are then expressed through code. Output .md files (philosophy), .html files (interactive viewer), and .js files (generative algorithms). This happens in two steps: 1. Algorithmic Philosophy Creation (.md file) 2. Express by creating p5.js generative art (.html + .js files) First, undertake this task:
Imported source sections that did not map cleanly to the public headings are still preserved below or in the support files. Notable imported sections: ALGORITHMIC PHILOSOPHY CREATION, DEDUCING THE CONCEPTUAL SEED, P5.JS IMPLEMENTATION, INTERACTIVE ARTIFACT CREATION, VARIATIONS & EXPLORATION, Limitations.
When to Use This Skill
Use this section as the trigger filter. It should make the activation boundary explicit before the operator loads files, runs commands, or opens a pull request.
This skill is applicable to execute the workflow or actions described in the overview.
Use when the request clearly matches the imported source intent: Algorithmic philosophies are computational aesthetic movements that are then expressed through code. Output .md files (philosophy), .html files (interactive viewer), and .js files (generative algorithms).
Use when the operator should preserve upstream workflow detail instead of rewriting the process from scratch.
Use when provenance needs to stay visible in the answer, PR, or review packet.
Use when copied upstream references, examples, or scripts materially improve the answer.
Use when the workflow should remain reviewable in the public intake repo before the private enhancer takes over.
Operating Table
Situation
Start here
Why it matters
First-time use
metadata.json
Confirms repository, branch, commit, and imported path through the external_source block before touching the copied workflow
Provenance review
ORIGIN.md
Gives reviewers a plain-language audit trail for the imported source
Workflow execution
LICENSE.txt
Starts with the smallest copied file that materially changes execution
Supporting context
templates/generator_template.js
Adds the next most relevant copied source file without loading the entire package
Handoff decision
## Related Skills
Helps the operator switch to a stronger native skill when the task drifts
Workflow
This workflow is intentionally editorial and operational at the same time. It keeps the imported source useful to the operator while still satisfying the public intake standards that feed the downstream enhancer flow.
Interpret the user's intent - What aesthetic is being sought?
Create an algorithmic philosophy (4-6 paragraphs) describing the computational approach
Implement it in code - Build the algorithm that expresses this philosophy
Design appropriate parameters - What should be tunable?
Build matching UI controls - Sliders/inputs for those parameters
Anthropic branding (colors, fonts, layout)
Seed navigation (always present)
Imported Workflow Notes
Imported: THE CREATIVE PROCESS
User request → Algorithmic philosophy → Implementation
Each request is unique. The process involves:
Interpret the user's intent - What aesthetic is being sought?
Create an algorithmic philosophy (4-6 paragraphs) describing the computational approach
Implement it in code - Build the algorithm that expresses this philosophy
Design appropriate parameters - What should be tunable?
Build matching UI controls - Sliders/inputs for those parameters
The constants:
Anthropic branding (colors, fonts, layout)
Seed navigation (always present)
Self-contained HTML artifact
Everything else is variable:
The algorithm itself
The parameters
The UI controls
The visual outcome
To achieve the best results, trust creativity and let the philosophy guide the implementation.
Imported: ALGORITHMIC PHILOSOPHY CREATION
To begin, create an ALGORITHMIC PHILOSOPHY (not static images or templates) that will be interpreted through:
What is received: Some subtle input or instructions by the user to take into account, but use as a foundation; it should not constrain creative freedom.
What is created: An algorithmic philosophy/generative aesthetic movement.
What happens next: The same version receives the philosophy and EXPRESSES IT IN CODE - creating p5.js sketches that are 90% algorithmic generation, 10% essential parameters.
Consider this approach:
Write a manifesto for a generative art movement
The next phase involves writing the algorithm that brings it to life
The philosophy must emphasize: Algorithmic expression. Emergent behavior. Computational beauty. Seeded variation.
HOW TO GENERATE AN ALGORITHMIC PHILOSOPHY
Name the movement (1-2 words): "Organic Turbulence" / "Quantum Harmonics" / "Emergent Stillness"
Articulate the philosophy (4-6 paragraphs - concise but complete):
To capture the ALGORITHMIC essence, express how this philosophy manifests through:
Computational processes and mathematical relationships?
Noise functions and randomness patterns?
Particle behaviors and field dynamics?
Temporal evolution and system states?
Parametric variation and emergent complexity?
CRITICAL GUIDELINES:
Avoid redundancy: Each algorithmic aspect should be mentioned once. Avoid repeating concepts about noise theory, particle dynamics, or mathematical principles unless adding new depth.
Emphasize craftsmanship REPEATEDLY: The philosophy MUST stress multiple times that the final algorithm should appear as though it took countless hours to develop, was refined with care, and comes from someone at the absolute top of their field. This framing is essential - repeat phrases like "meticulously crafted algorithm," "the product of deep computational expertise," "painstaking optimization," "master-level implementation."
Leave creative space: Be specific about the algorithmic direction, but concise enough that the next Claude has room to make interpretive implementation choices at an extremely high level of craftsmanship.
The philosophy must guide the next version to express ideas ALGORITHMICALLY, not through static images. Beauty lives in the process, not the final frame.
PHILOSOPHY EXAMPLES
"Organic Turbulence"
Philosophy: Chaos constrained by natural law, order emerging from disorder.
Algorithmic expression: Flow fields driven by layered Perlin noise. Thousands of particles following vector forces, their trails accumulating into organic density maps. Multiple noise octaves create turbulent regions and calm zones. Color emerges from velocity and density - fast particles burn bright, slow ones fade to shadow. The algorithm runs until equilibrium - a meticulously tuned balance where every parameter was refined through countless iterations by a master of computational aesthetics.
"Quantum Harmonics"
Philosophy: Discrete entities exhibiting wave-like interference patterns.
Algorithmic expression: Particles initialized on a grid, each carrying a phase value that evolves through sine waves. When particles are near, their phases interfere - constructive interference creates bright nodes, destructive creates voids. Simple harmonic motion generates complex emergent mandalas. The result of painstaking frequency calibration where every ratio was carefully chosen to produce resonant beauty.
"Recursive Whispers"
Philosophy: Self-similarity across scales, infinite depth in finite space.
Algorithmic expression: Branching structures that subdivide recursively. Each branch slightly randomized but constrained by golden ratios. L-systems or recursive subdivision generate tree-like forms that feel both mathematical and organic. Subtle noise perturbations break perfect symmetry. Line weights diminish with each recursion level. Every branching angle the product of deep mathematical exploration.
"Field Dynamics"
Philosophy: Invisible forces made visible through their effects on matter.
Algorithmic expression: Vector fields constructed from mathematical functions or noise. Particles born at edges, flowing along field lines, dying when they reach equilibrium or boundaries. Multiple fields can attract, repel, or rotate particles. The visualization shows only the traces - ghost-like evidence of invisible forces. A computational dance meticulously choreographed through force balance.
"Stochastic Crystallization"
Philosophy: Random processes crystallizing into ordered structures.
Algorithmic expression: Randomized circle packing or Voronoi tessellation. Start with random points, let them evolve through relaxation algorithms. Cells push apart until equilibrium. Color based on cell size, neighbor count, or distance from center. The organic tiling that emerges feels both random and inevitable. Every seed produces unique crystalline beauty - the mark of a master-level generative algorithm.
These are condensed examples. The actual algorithmic philosophy should be 4-6 substantial paragraphs.
ESSENTIAL PRINCIPLES
ALGORITHMIC PHILOSOPHY: Creating a computational worldview to be expressed through code
PROCESS OVER PRODUCT: Always emphasize that beauty emerges from the algorithm's execution - each run is unique
PARAMETRIC EXPRESSION: Ideas communicate through mathematical relationships, forces, behaviors - not static composition
ARTISTIC FREEDOM: The next Claude interprets the philosophy algorithmically - provide creative implementation room
PURE GENERATIVE ART: This is about making LIVING ALGORITHMS, not static images with randomness
EXPERT CRAFTSMANSHIP: Repeatedly emphasize the final algorithm must feel meticulously crafted, refined through countless iterations, the product of deep expertise by someone at the absolute top of their field in computational aesthetics
The algorithmic philosophy should be 4-6 paragraphs long. Fill it with poetic computational philosophy that brings together the intended vision. Avoid repeating the same points. Output this algorithmic philosophy as a .md file.
Examples
Example 1: Ask for the upstream workflow directly
Use @algorithmic-art-v4 to handle <task>. Start from the copied upstream workflow, load only the files that change the outcome, and keep provenance visible in the answer.
Explanation: This is the safest starting point when the operator needs the imported workflow, but not the entire repository.
Example 2: Ask for a provenance-grounded review
Review @algorithmic-art-v4 against metadata.json and ORIGIN.md, then explain which copied upstream files you would load first and why.
Explanation: Use this before review or troubleshooting when you need a precise, auditable explanation of origin and file selection.
Example 3: Narrow the copied support files before execution
Use @algorithmic-art-v4 for <task>. Load only the copied references, examples, or scripts that change the outcome, and name the files explicitly before proceeding.
Explanation: This keeps the skill aligned with progressive disclosure instead of loading the whole copied package by default.
Example 4: Build a reviewer packet
Review @algorithmic-art-v4 using the copied upstream files plus provenance, then summarize any gaps before merge.
Explanation: This is useful when the PR is waiting for human review and you want a repeatable audit packet.
Best Practices
Treat the generated public skill as a reviewable packaging layer around the upstream repository. The goal is to keep provenance explicit and load only the copied source material that materially improves execution.
Keep the imported skill grounded in the upstream repository; do not invent steps that the source material cannot support.
Prefer the smallest useful set of support files so the workflow stays auditable and fast to review.
Keep provenance, source commit, and imported file paths visible in notes and PR descriptions.
Point directly at the copied upstream files that justify the workflow instead of relying on generic review boilerplate.
Treat generated examples as scaffolding; adapt them to the concrete task before execution.
Route to a stronger native skill when architecture, debugging, design, or security concerns become dominant.
Troubleshooting
Problem: The operator skipped the imported context and answered too generically
Symptoms: The result ignores the upstream workflow in plugins/antigravity-bundle-indie-game-dev/skills/algorithmic-art, fails to mention provenance, or does not use any copied source files at all.
Solution: Re-open metadata.json, ORIGIN.md, and the most relevant copied upstream files. Check the external_source block first, then restate the provenance before continuing.
Problem: The imported workflow feels incomplete during review
Symptoms: Reviewers can see the generated SKILL.md, but they cannot quickly tell which references, examples, or scripts matter for the current task.
Solution: Point at the exact copied references, examples, scripts, or assets that justify the path you took. If the gap is still real, record it in the PR instead of hiding it.
Problem: The task drifted into a different specialization
Symptoms: The imported skill starts in the right place, but the work turns into debugging, architecture, design, security, or release orchestration that a native skill handles better.
Solution: Use the related skills section to hand off deliberately. Keep the imported provenance visible so the next skill inherits the right context instead of starting blind.
Related Skills
@2d-games-v3 - Use when the work is better handled by that native specialization after this imported skill establishes context.
@3d-games-v3 - Use when the work is better handled by that native specialization after this imported skill establishes context.
@algolia-search-v4 - Use when the work is better handled by that native specialization after this imported skill establishes context.
@api-patterns-v3 - Use when the work is better handled by that native specialization after this imported skill establishes context.
Additional Resources
Use this support matrix and the linked files below as the operator packet for this imported skill. They should reflect real copied source material, not generic scaffolding.
Resource family
What it gives the reviewer
Example path
references
copied reference notes, guides, or background material from upstream
references/n/a
examples
worked examples or reusable prompts copied from upstream
examples/n/a
scripts
upstream helper scripts that change execution or validation
scripts/n/a
agents
routing or delegation notes that are genuinely part of the imported package
agents/n/a
assets
supporting assets or schemas copied from the source package
Replace: The p5.js algorithm, parameter definitions, and UI controls in Parameters section
The extensive comments in the file mark exactly what to keep vs replace
templates/generator_template.js: Reference for p5.js best practices and code structure principles.
Shows how to organize parameters, use seeded randomness, structure classes
NOT a pattern menu - use these principles to build unique algorithms
Embed algorithms inline in the HTML artifact (don't create separate .js files)
Critical reminder:
The template is the STARTING POINT, not inspiration
The algorithm is where to create something unique
Don't copy the flow field example - build what the philosophy demands
But DO keep the exact UI structure and Anthropic branding from the template
Imported: DEDUCING THE CONCEPTUAL SEED
CRITICAL STEP: Before implementing the algorithm, identify the subtle conceptual thread from the original request.
THE ESSENTIAL PRINCIPLE:
The concept is a subtle, niche reference embedded within the algorithm itself - not always literal, always sophisticated. Someone familiar with the subject should feel it intuitively, while others simply experience a masterful generative composition. The algorithmic philosophy provides the computational language. The deduced concept provides the soul - the quiet conceptual DNA woven invisibly into parameters, behaviors, and emergence patterns.
This is VERY IMPORTANT: The reference must be so refined that it enhances the work's depth without announcing itself. Think like a jazz musician quoting another song through algorithmic harmony - only those who know will catch it, but everyone appreciates the generative beauty.
Imported: P5.JS IMPLEMENTATION
With the philosophy AND conceptual framework established, express it through code. Pause to gather thoughts before proceeding. Use only the algorithmic philosophy created and the instructions below.
⚠️ STEP 0: READ THE TEMPLATE FIRST ⚠️
CRITICAL: BEFORE writing any HTML:
Readtemplates/viewer.html using the Read tool
Study the exact structure, styling, and Anthropic branding
Use that file as the LITERAL STARTING POINT - not just inspiration
Keep all FIXED sections exactly as shown (header, sidebar structure, Anthropic colors/fonts, seed controls, action buttons)
Replace only the VARIABLE sections marked in the file's comments (algorithm, parameters, UI controls for parameters)
✅ Replace only the p5.js algorithm and parameter controls
The template is the foundation. Build on it, don't rebuild it.
To create gallery-quality computational art that lives and breathes, use the algorithmic philosophy as the foundation.
TECHNICAL REQUIREMENTS
Seeded Randomness (Art Blocks Pattern):
// ALWAYS use a seed for reproducibilitylet seed = 12345; // or hash from user inputrandomSeed(seed);
noiseSeed(seed);
Parameter Structure - FOLLOW THE PHILOSOPHY:
To establish parameters that emerge naturally from the algorithmic philosophy, consider: "What qualities of this system can be adjusted?"
let params = {
seed: 12345, // Always include seed for reproducibility// colors// Add parameters that control YOUR algorithm:// - Quantities (how many?)// - Scales (how big? how fast?)// - Probabilities (how likely?)// - Ratios (what proportions?)// - Angles (what direction?)// - Thresholds (when does behavior change?)
};
To design effective parameters, focus on the properties the system needs to be tunable rather than thinking in terms of "pattern types".
Core Algorithm - EXPRESS THE PHILOSOPHY:
CRITICAL: The algorithmic philosophy should dictate what to build.
To express the philosophy through code, avoid thinking "which pattern should I use?" and instead think "how to express this philosophy through code?"
If the philosophy is about organic emergence, consider using:
Elements that accumulate or grow over time
Random processes constrained by natural rules
Feedback loops and interactions
If the philosophy is about mathematical beauty, consider using:
Geometric relationships and ratios
Trigonometric functions and harmonics
Precise calculations creating unexpected patterns
If the philosophy is about controlled chaos, consider using:
Random variation within strict boundaries
Bifurcation and phase transitions
Order emerging from disorder
The algorithm flows from the philosophy, not from a menu of options.
To guide the implementation, let the conceptual essence inform creative and original choices. Build something that expresses the vision for this particular request.
Canvas Setup: Standard p5.js structure:
functionsetup() {
createCanvas(1200, 1200);
// Initialize your system
}
functiondraw() {
// Your generative algorithm// Can be static (noLoop) or animated
}
CRAFTSMANSHIP REQUIREMENTS
CRITICAL: To achieve mastery, create algorithms that feel like they emerged through countless iterations by a master generative artist. Tune every parameter carefully. Ensure every pattern emerges with purpose. This is NOT random noise - this is CONTROLLED CHAOS refined through deep expertise.
Balance: Complexity without visual noise, order without rigidity
Color Harmony: Thoughtful palettes, not random RGB values
Composition: Even in randomness, maintain visual hierarchy and flow
Performance: Smooth execution, optimized for real-time if animated
Reproducibility: Same seed ALWAYS produces identical output
OUTPUT FORMAT
Output:
Algorithmic Philosophy - As markdown or text explaining the generative aesthetic
Single HTML Artifact - Self-contained interactive generative art built from templates/viewer.html (see STEP 0 and next section)
The HTML artifact contains everything: p5.js (from CDN), the algorithm, parameter controls, and UI - all in one file that works immediately in claude.ai artifacts or any browser. Start from the template file, not from scratch.
Imported: INTERACTIVE ARTIFACT CREATION
REMINDER: templates/viewer.html should have already been read (see STEP 0). Use that file as the starting point.
To allow exploration of the generative art, create a single, self-contained HTML artifact. Ensure this artifact works immediately in claude.ai or any browser - no setup required. Embed everything inline.
CRITICAL: WHAT'S FIXED VS VARIABLE
The templates/viewer.html file is the foundation. It contains the exact structure and styling needed.
FIXED (always include exactly as shown):
Layout structure (header, sidebar, main canvas area)
Anthropic branding (UI colors, fonts, gradients)
Seed section in sidebar:
Seed display
Previous/Next buttons
Random button
Jump to seed input + Go button
Actions section in sidebar:
Regenerate button
Reset button
VARIABLE (customize for each artwork):
The entire p5.js algorithm (setup/draw/classes)
The parameters object (define what the art needs)
The Parameters section in sidebar:
Number of parameter controls
Parameter names
Min/max/step values for sliders
Control types (sliders, inputs, etc.)
Colors section (optional):
Some art needs color pickers
Some art might use fixed colors
Some art might be monochrome (no color controls needed)
Decide based on the art's needs
Every artwork should have unique parameters and algorithm! The fixed parts provide consistent UX - everything else expresses the unique vision.
REQUIRED FEATURES
1. Parameter Controls
Sliders for numeric parameters (particle count, noise scale, speed, etc.)
Color pickers for palette colors
Real-time updates when parameters change
Reset button to restore defaults
2. Seed Navigation
Display current seed number
"Previous" and "Next" buttons to cycle through seeds
"Random" button for random seed
Input field to jump to specific seed
Generate 100 variations when requested (seeds 1-100)
3. Single Artifact Structure
<!DOCTYPE html><html><head><!-- p5.js from CDN - always available --><scriptsrc="https://cdnjs.cloudflare.com/ajax/libs/p5.js/1.7.0/p5.min.js"></script><style>/* All styling inline - clean, minimal *//* Canvas on top, controls below */</style></head><body><divid="canvas-container"></div><divid="controls"><!-- All parameter controls --></div><script>// ALL p5.js code inline here// Parameter objects, classes, functions// setup() and draw()// UI handlers// Everything self-contained</script></body></html>
CRITICAL: This is a single artifact. No external files, no imports (except p5.js CDN). Everything inline.
4. Implementation Details - BUILD THE SIDEBAR
The sidebar structure:
1. Seed (FIXED) - Always include exactly as shown:
Seed display
Prev/Next/Random/Jump buttons
2. Parameters (VARIABLE) - Create controls for the art:
Add as many control-group divs as there are parameters.
3. Colors (OPTIONAL/VARIABLE) - Include if the art needs adjustable colors:
Add color pickers if users should control palette
Skip this section if the art uses fixed colors
Skip if the art is monochrome
4. Actions (FIXED) - Always include exactly as shown:
Regenerate button
Reset button
Download PNG button
Requirements:
Seed controls must work (prev/next/random/jump/display)
All parameters must have UI controls
Regenerate, Reset, Download buttons must work
Keep Anthropic branding (UI styling, not art colors)
USING THE ARTIFACT
The HTML artifact works immediately:
In claude.ai: Displayed as an interactive artifact - runs instantly
As a file: Save and open in any browser - no server needed
Sharing: Send the HTML file - it's completely self-contained
Imported: VARIATIONS & EXPLORATION
The artifact includes seed navigation by default (prev/next/random buttons), allowing users to explore variations without creating multiple files. If the user wants specific variations highlighted:
Include seed presets (buttons for "Variation 1: Seed 42", "Variation 2: Seed 127", etc.)
Add a "Gallery Mode" that shows thumbnails of multiple seeds side-by-side
All within the same single artifact
This is like creating a series of prints from the same plate - the algorithm is consistent, but each seed reveals different facets of its potential. The interactive nature means users discover their own favorites by exploring the seed space.
Imported: Limitations
Use this skill only when the task clearly matches the scope described above.
Do not treat the output as a substitute for environment-specific validation, testing, or expert review.
Stop and ask for clarification if required inputs, permissions, safety boundaries, or success criteria are missing.
