{
"schemaVersion": "1.0",
"item": {
"slug": "mo-test-1",
"name": "mo-test-1",
"source": "tencent",
"type": "skill",
"category": "AI 智能",
"sourceUrl": "https://clawhub.ai/moyu0032/mo-test-1",
"canonicalUrl": "https://clawhub.ai/moyu0032/mo-test-1",
"targetPlatform": "OpenClaw"
},
"install": {
"downloadMode": "redirect",
"downloadUrl": "/downloads/mo-test-1",
"sourceDownloadUrl": "https://wry-manatee-359.convex.site/api/v1/download?slug=mo-test-1",
"sourcePlatform": "tencent",
"targetPlatform": "OpenClaw",
"installMethod": "Manual import",
"extraction": "Extract archive",
"prerequisites": [
"OpenClaw"
],
"packageFormat": "ZIP package",
"includedAssets": [
"SKILL.md",
"LICENSE.txt",
"templates/generator_template.js",
"templates/viewer.html"
],
"primaryDoc": "SKILL.md",
"quickSetup": [
"Download the package from Yavira.",
"Extract the archive and review SKILL.md first.",
"Import or place the package into your OpenClaw setup."
],
"agentAssist": {
"summary": "Hand the extracted package to your coding agent with a concrete install brief instead of figuring it out manually.",
"steps": [
"Download the package from Yavira.",
"Extract it into a folder your agent can access.",
"Paste one of the prompts below and point your agent at the extracted folder."
],
"prompts": [
{
"label": "New install",
"body": "I downloaded a skill package from Yavira. Read SKILL.md from the extracted folder and install it by following the included instructions. Tell me what you changed and call out any manual steps you could not complete."
},
{
"label": "Upgrade existing",
"body": "I downloaded an updated skill package from Yavira. Read SKILL.md from the extracted folder, compare it with my current installation, and upgrade it while preserving any custom configuration unless the package docs explicitly say otherwise. Summarize what changed and any follow-up checks I should run."
}
]
},
"sourceHealth": {
"source": "tencent",
"status": "healthy",
"reason": "direct_download_ok",
"recommendedAction": "download",
"checkedAt": "2026-04-30T16:55:25.780Z",
"expiresAt": "2026-05-07T16:55:25.780Z",
"httpStatus": 200,
"finalUrl": "https://wry-manatee-359.convex.site/api/v1/download?slug=network",
"contentType": "application/zip",
"probeMethod": "head",
"details": {
"probeUrl": "https://wry-manatee-359.convex.site/api/v1/download?slug=network",
"contentDisposition": "attachment; filename=\"network-1.0.0.zip\"",
"redirectLocation": null,
"bodySnippet": null
},
"scope": "source",
"summary": "Source download looks usable.",
"detail": "Yavira can redirect you to the upstream package for this source.",
"primaryActionLabel": "Download for OpenClaw",
"primaryActionHref": "/downloads/mo-test-1"
},
"validation": {
"installChecklist": [
"Use the Yavira download entry.",
"Review SKILL.md after the package is downloaded.",
"Confirm the extracted package contains the expected setup assets."
],
"postInstallChecks": [
"Confirm the extracted package includes the expected docs or setup files.",
"Validate the skill or prompts are available in your target agent workspace.",
"Capture any manual follow-up steps the agent could not complete."
]
},
"downloadPageUrl": "https://openagent3.xyz/downloads/mo-test-1",
"agentPageUrl": "https://openagent3.xyz/skills/mo-test-1/agent",
"manifestUrl": "https://openagent3.xyz/skills/mo-test-1/agent.json",
"briefUrl": "https://openagent3.xyz/skills/mo-test-1/agent.md"
},
"agentAssist": {
"summary": "Hand the extracted package to your coding agent with a concrete install brief instead of figuring it out manually.",
"steps": [
"Download the package from Yavira.",
"Extract it into a folder your agent can access.",
"Paste one of the prompts below and point your agent at the extracted folder."
],
"prompts": [
{
"label": "New install",
"body": "I downloaded a skill package from Yavira. Read SKILL.md from the extracted folder and install it by following the included instructions. Tell me what you changed and call out any manual steps you could not complete."
},
{
"label": "Upgrade existing",
"body": "I downloaded an updated skill package from Yavira. Read SKILL.md from the extracted folder, compare it with my current installation, and upgrade it while preserving any custom configuration unless the package docs explicitly say otherwise. Summarize what changed and any follow-up checks I should run."
}
]
},
"documentation": {
"source": "clawhub",
"primaryDoc": "SKILL.md",
"sections": [
{
"title": "ALGORITHMIC PHILOSOPHY CREATION",
"body": "To begin, create an ALGORITHMIC PHILOSOPHY (not static images or templates) that will be interpreted through:\n\nComputational processes, emergent behavior, mathematical beauty\nSeeded randomness, noise fields, organic systems\nParticles, flows, fields, forces\nParametric variation and controlled chaos"
},
{
"title": "THE CRITICAL UNDERSTANDING",
"body": "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.\nWhat is created: An algorithmic philosophy/generative aesthetic movement.\nWhat 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.\n\nConsider this approach:\n\nWrite a manifesto for a generative art movement\nThe next phase involves writing the algorithm that brings it to life\n\nThe philosophy must emphasize: Algorithmic expression. Emergent behavior. Computational beauty. Seeded variation."
},
{
"title": "HOW TO GENERATE AN ALGORITHMIC PHILOSOPHY",
"body": "Name the movement (1-2 words): \"Organic Turbulence\" / \"Quantum Harmonics\" / \"Emergent Stillness\"\n\nArticulate the philosophy (4-6 paragraphs - concise but complete):\n\nTo capture the ALGORITHMIC essence, express how this philosophy manifests through:\n\nComputational processes and mathematical relationships?\nNoise functions and randomness patterns?\nParticle behaviors and field dynamics?\nTemporal evolution and system states?\nParametric variation and emergent complexity?\n\nCRITICAL GUIDELINES:\n\nAvoid redundancy: Each algorithmic aspect should be mentioned once. Avoid repeating concepts about noise theory, particle dynamics, or mathematical principles unless adding new depth.\nEmphasize 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.\"\nLeave 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.\n\nThe philosophy must guide the next version to express ideas ALGORITHMICALLY, not through static images. Beauty lives in the process, not the final frame."
},
{
"title": "PHILOSOPHY EXAMPLES",
"body": "\"Organic Turbulence\"\nPhilosophy: Chaos constrained by natural law, order emerging from disorder.\nAlgorithmic 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.\n\n\"Quantum Harmonics\"\nPhilosophy: Discrete entities exhibiting wave-like interference patterns.\nAlgorithmic 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.\n\n\"Recursive Whispers\"\nPhilosophy: Self-similarity across scales, infinite depth in finite space.\nAlgorithmic 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.\n\n\"Field Dynamics\"\nPhilosophy: Invisible forces made visible through their effects on matter.\nAlgorithmic 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.\n\n\"Stochastic Crystallization\"\nPhilosophy: Random processes crystallizing into ordered structures.\nAlgorithmic 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.\n\nThese are condensed examples. The actual algorithmic philosophy should be 4-6 substantial paragraphs."
},
{
"title": "ESSENTIAL PRINCIPLES",
"body": "ALGORITHMIC PHILOSOPHY: Creating a computational worldview to be expressed through code\nPROCESS OVER PRODUCT: Always emphasize that beauty emerges from the algorithm's execution - each run is unique\nPARAMETRIC EXPRESSION: Ideas communicate through mathematical relationships, forces, behaviors - not static composition\nARTISTIC FREEDOM: The next Claude interprets the philosophy algorithmically - provide creative implementation room\nPURE GENERATIVE ART: This is about making LIVING ALGORITHMS, not static images with randomness\nEXPERT 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\n\nThe 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."
},
{
"title": "DEDUCING THE CONCEPTUAL SEED",
"body": "CRITICAL STEP: Before implementing the algorithm, identify the subtle conceptual thread from the original request.\n\nTHE ESSENTIAL PRINCIPLE:\nThe 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.\n\nThis 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."
},
{
"title": "P5.JS IMPLEMENTATION",
"body": "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."
},
{
"title": "⚠️ STEP 0: READ THE TEMPLATE FIRST ⚠️",
"body": "CRITICAL: BEFORE writing any HTML:\n\nRead templates/viewer.html using the Read tool\nStudy the exact structure, styling, and Anthropic branding\nUse that file as the LITERAL STARTING POINT - not just inspiration\nKeep all FIXED sections exactly as shown (header, sidebar structure, Anthropic colors/fonts, seed controls, action buttons)\nReplace only the VARIABLE sections marked in the file's comments (algorithm, parameters, UI controls for parameters)\n\nAvoid:\n\n❌ Creating HTML from scratch\n❌ Inventing custom styling or color schemes\n❌ Using system fonts or dark themes\n❌ Changing the sidebar structure\n\nFollow these practices:\n\n✅ Copy the template's exact HTML structure\n✅ Keep Anthropic branding (Poppins/Lora fonts, light colors, gradient backdrop)\n✅ Maintain the sidebar layout (Seed → Parameters → Colors? → Actions)\n✅ Replace only the p5.js algorithm and parameter controls\n\nThe template is the foundation. Build on it, don't rebuild it.\n\nTo create gallery-quality computational art that lives and breathes, use the algorithmic philosophy as the foundation."
},
{
"title": "TECHNICAL REQUIREMENTS",
"body": "Seeded Randomness (Art Blocks Pattern):\n\n// ALWAYS use a seed for reproducibility\nlet seed = 12345; // or hash from user input\nrandomSeed(seed);\nnoiseSeed(seed);\n\nParameter Structure - FOLLOW THE PHILOSOPHY:\n\nTo establish parameters that emerge naturally from the algorithmic philosophy, consider: \"What qualities of this system can be adjusted?\"\n\nlet params = {\n seed: 12345, // Always include seed for reproducibility\n // colors\n // Add parameters that control YOUR algorithm:\n // - Quantities (how many?)\n // - Scales (how big? how fast?)\n // - Probabilities (how likely?)\n // - Ratios (what proportions?)\n // - Angles (what direction?)\n // - Thresholds (when does behavior change?)\n};\n\nTo design effective parameters, focus on the properties the system needs to be tunable rather than thinking in terms of \"pattern types\".\n\nCore Algorithm - EXPRESS THE PHILOSOPHY:\n\nCRITICAL: The algorithmic philosophy should dictate what to build.\n\nTo express the philosophy through code, avoid thinking \"which pattern should I use?\" and instead think \"how to express this philosophy through code?\"\n\nIf the philosophy is about organic emergence, consider using:\n\nElements that accumulate or grow over time\nRandom processes constrained by natural rules\nFeedback loops and interactions\n\nIf the philosophy is about mathematical beauty, consider using:\n\nGeometric relationships and ratios\nTrigonometric functions and harmonics\nPrecise calculations creating unexpected patterns\n\nIf the philosophy is about controlled chaos, consider using:\n\nRandom variation within strict boundaries\nBifurcation and phase transitions\nOrder emerging from disorder\n\nThe algorithm flows from the philosophy, not from a menu of options.\n\nTo guide the implementation, let the conceptual essence inform creative and original choices. Build something that expresses the vision for this particular request.\n\nCanvas Setup: Standard p5.js structure:\n\nfunction setup() {\n createCanvas(1200, 1200);\n // Initialize your system\n}\n\nfunction draw() {\n // Your generative algorithm\n // Can be static (noLoop) or animated\n}"
},
{
"title": "CRAFTSMANSHIP REQUIREMENTS",
"body": "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.\n\nBalance: Complexity without visual noise, order without rigidity\nColor Harmony: Thoughtful palettes, not random RGB values\nComposition: Even in randomness, maintain visual hierarchy and flow\nPerformance: Smooth execution, optimized for real-time if animated\nReproducibility: Same seed ALWAYS produces identical output"
},
{
"title": "OUTPUT FORMAT",
"body": "Output:\n\nAlgorithmic Philosophy - As markdown or text explaining the generative aesthetic\nSingle HTML Artifact - Self-contained interactive generative art built from templates/viewer.html (see STEP 0 and next section)\n\nThe 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."
},
{
"title": "INTERACTIVE ARTIFACT CREATION",
"body": "REMINDER: templates/viewer.html should have already been read (see STEP 0). Use that file as the starting point.\n\nTo 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."
},
{
"title": "CRITICAL: WHAT'S FIXED VS VARIABLE",
"body": "The templates/viewer.html file is the foundation. It contains the exact structure and styling needed.\n\nFIXED (always include exactly as shown):\n\nLayout structure (header, sidebar, main canvas area)\nAnthropic branding (UI colors, fonts, gradients)\nSeed section in sidebar:\n\nSeed display\nPrevious/Next buttons\nRandom button\nJump to seed input + Go button\n\n\nActions section in sidebar:\n\nRegenerate button\nReset button\n\nVARIABLE (customize for each artwork):\n\nThe entire p5.js algorithm (setup/draw/classes)\nThe parameters object (define what the art needs)\nThe Parameters section in sidebar:\n\nNumber of parameter controls\nParameter names\nMin/max/step values for sliders\nControl types (sliders, inputs, etc.)\n\n\nColors section (optional):\n\nSome art needs color pickers\nSome art might use fixed colors\nSome art might be monochrome (no color controls needed)\nDecide based on the art's needs\n\nEvery artwork should have unique parameters and algorithm! The fixed parts provide consistent UX - everything else expresses the unique vision."
},
{
"title": "REQUIRED FEATURES",
"body": "1. Parameter Controls\n\nSliders for numeric parameters (particle count, noise scale, speed, etc.)\nColor pickers for palette colors\nReal-time updates when parameters change\nReset button to restore defaults\n\n2. Seed Navigation\n\nDisplay current seed number\n\"Previous\" and \"Next\" buttons to cycle through seeds\n\"Random\" button for random seed\nInput field to jump to specific seed\nGenerate 100 variations when requested (seeds 1-100)\n\n3. Single Artifact Structure\n\n\n\n\n \n \n \n\n\n \n
\n \n
\n \n\n\n\nCRITICAL: This is a single artifact. No external files, no imports (except p5.js CDN). Everything inline.\n\n4. Implementation Details - BUILD THE SIDEBAR\n\nThe sidebar structure:\n\n1. Seed (FIXED) - Always include exactly as shown:\n\nSeed display\nPrev/Next/Random/Jump buttons\n\n2. Parameters (VARIABLE) - Create controls for the art:\n\n
\n \n \n ...\n
\n\nAdd as many control-group divs as there are parameters.\n\n3. Colors (OPTIONAL/VARIABLE) - Include if the art needs adjustable colors:\n\nAdd color pickers if users should control palette\nSkip this section if the art uses fixed colors\nSkip if the art is monochrome\n\n4. Actions (FIXED) - Always include exactly as shown:\n\nRegenerate button\nReset button\nDownload PNG button\n\nRequirements:\n\nSeed controls must work (prev/next/random/jump/display)\nAll parameters must have UI controls\nRegenerate, Reset, Download buttons must work\nKeep Anthropic branding (UI styling, not art colors)"
},
{
"title": "USING THE ARTIFACT",
"body": "The HTML artifact works immediately:\n\nIn claude.ai: Displayed as an interactive artifact - runs instantly\nAs a file: Save and open in any browser - no server needed\nSharing: Send the HTML file - it's completely self-contained"
},
{
"title": "VARIATIONS & EXPLORATION",
"body": "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:\n\nInclude seed presets (buttons for \"Variation 1: Seed 42\", \"Variation 2: Seed 127\", etc.)\nAdd a \"Gallery Mode\" that shows thumbnails of multiple seeds side-by-side\nAll within the same single artifact\n\nThis 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."
},
{
"title": "THE CREATIVE PROCESS",
"body": "User request → Algorithmic philosophy → Implementation\n\nEach request is unique. The process involves:\n\nInterpret the user's intent - What aesthetic is being sought?\nCreate an algorithmic philosophy (4-6 paragraphs) describing the computational approach\nImplement it in code - Build the algorithm that expresses this philosophy\nDesign appropriate parameters - What should be tunable?\nBuild matching UI controls - Sliders/inputs for those parameters\n\nThe constants:\n\nAnthropic branding (colors, fonts, layout)\nSeed navigation (always present)\nSelf-contained HTML artifact\n\nEverything else is variable:\n\nThe algorithm itself\nThe parameters\nThe UI controls\nThe visual outcome\n\nTo achieve the best results, trust creativity and let the philosophy guide the implementation."
},
{
"title": "RESOURCES",
"body": "This skill includes helpful templates and documentation:\n\ntemplates/viewer.html: REQUIRED STARTING POINT for all HTML artifacts.\n\nThis is the foundation - contains the exact structure and Anthropic branding\nKeep unchanged: Layout structure, sidebar organization, Anthropic colors/fonts, seed controls, action buttons\nReplace: The p5.js algorithm, parameter definitions, and UI controls in Parameters section\nThe extensive comments in the file mark exactly what to keep vs replace\n\n\n\ntemplates/generator_template.js: Reference for p5.js best practices and code structure principles.\n\nShows how to organize parameters, use seeded randomness, structure classes\nNOT a pattern menu - use these principles to build unique algorithms\nEmbed algorithms inline in the HTML artifact (don't create separate .js files)\n\nCritical reminder:\n\nThe template is the STARTING POINT, not inspiration\nThe algorithm is where to create something unique\nDon't copy the flow field example - build what the philosophy demands\nBut DO keep the exact UI structure and Anthropic branding from the template"
}
],
"body": "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).\n\nThis happens in two steps:\n\nAlgorithmic Philosophy Creation (.md file)\nExpress by creating p5.js generative art (.html + .js files)\n\nFirst, undertake this task:\n\nALGORITHMIC PHILOSOPHY CREATION\n\nTo begin, create an ALGORITHMIC PHILOSOPHY (not static images or templates) that will be interpreted through:\n\nComputational processes, emergent behavior, mathematical beauty\nSeeded randomness, noise fields, organic systems\nParticles, flows, fields, forces\nParametric variation and controlled chaos\nTHE CRITICAL UNDERSTANDING\nWhat 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.\nWhat is created: An algorithmic philosophy/generative aesthetic movement.\nWhat 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.\n\nConsider this approach:\n\nWrite a manifesto for a generative art movement\nThe next phase involves writing the algorithm that brings it to life\n\nThe philosophy must emphasize: Algorithmic expression. Emergent behavior. Computational beauty. Seeded variation.\n\nHOW TO GENERATE AN ALGORITHMIC PHILOSOPHY\n\nName the movement (1-2 words): \"Organic Turbulence\" / \"Quantum Harmonics\" / \"Emergent Stillness\"\n\nArticulate the philosophy (4-6 paragraphs - concise but complete):\n\nTo capture the ALGORITHMIC essence, express how this philosophy manifests through:\n\nComputational processes and mathematical relationships?\nNoise functions and randomness patterns?\nParticle behaviors and field dynamics?\nTemporal evolution and system states?\nParametric variation and emergent complexity?\n\nCRITICAL GUIDELINES:\n\nAvoid redundancy: Each algorithmic aspect should be mentioned once. Avoid repeating concepts about noise theory, particle dynamics, or mathematical principles unless adding new depth.\nEmphasize 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.\"\nLeave 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.\n\nThe philosophy must guide the next version to express ideas ALGORITHMICALLY, not through static images. Beauty lives in the process, not the final frame.\n\nPHILOSOPHY EXAMPLES\n\n\"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.\n\n\"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.\n\n\"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.\n\n\"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.\n\n\"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.\n\nThese are condensed examples. The actual algorithmic philosophy should be 4-6 substantial paragraphs.\n\nESSENTIAL PRINCIPLES\nALGORITHMIC PHILOSOPHY: Creating a computational worldview to be expressed through code\nPROCESS OVER PRODUCT: Always emphasize that beauty emerges from the algorithm's execution - each run is unique\nPARAMETRIC EXPRESSION: Ideas communicate through mathematical relationships, forces, behaviors - not static composition\nARTISTIC FREEDOM: The next Claude interprets the philosophy algorithmically - provide creative implementation room\nPURE GENERATIVE ART: This is about making LIVING ALGORITHMS, not static images with randomness\nEXPERT 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\n\nThe 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.\n\nDEDUCING THE CONCEPTUAL SEED\n\nCRITICAL STEP: Before implementing the algorithm, identify the subtle conceptual thread from the original request.\n\nTHE 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.\n\nThis 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.\n\nP5.JS IMPLEMENTATION\n\nWith 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.\n\n⚠️ STEP 0: READ THE TEMPLATE FIRST ⚠️\n\nCRITICAL: BEFORE writing any HTML:\n\nRead templates/viewer.html using the Read tool\nStudy the exact structure, styling, and Anthropic branding\nUse that file as the LITERAL STARTING POINT - not just inspiration\nKeep all FIXED sections exactly as shown (header, sidebar structure, Anthropic colors/fonts, seed controls, action buttons)\nReplace only the VARIABLE sections marked in the file's comments (algorithm, parameters, UI controls for parameters)\n\nAvoid:\n\n❌ Creating HTML from scratch\n❌ Inventing custom styling or color schemes\n❌ Using system fonts or dark themes\n❌ Changing the sidebar structure\n\nFollow these practices:\n\n✅ Copy the template's exact HTML structure\n✅ Keep Anthropic branding (Poppins/Lora fonts, light colors, gradient backdrop)\n✅ Maintain the sidebar layout (Seed → Parameters → Colors? → Actions)\n✅ Replace only the p5.js algorithm and parameter controls\n\nThe template is the foundation. Build on it, don't rebuild it.\n\nTo create gallery-quality computational art that lives and breathes, use the algorithmic philosophy as the foundation.\n\nTECHNICAL REQUIREMENTS\n\nSeeded Randomness (Art Blocks Pattern):\n\n// ALWAYS use a seed for reproducibility\nlet seed = 12345; // or hash from user input\nrandomSeed(seed);\nnoiseSeed(seed);\n\n\nParameter Structure - FOLLOW THE PHILOSOPHY:\n\nTo establish parameters that emerge naturally from the algorithmic philosophy, consider: \"What qualities of this system can be adjusted?\"\n\nlet params = {\n seed: 12345, // Always include seed for reproducibility\n // colors\n // Add parameters that control YOUR algorithm:\n // - Quantities (how many?)\n // - Scales (how big? how fast?)\n // - Probabilities (how likely?)\n // - Ratios (what proportions?)\n // - Angles (what direction?)\n // - Thresholds (when does behavior change?)\n};\n\n\nTo design effective parameters, focus on the properties the system needs to be tunable rather than thinking in terms of \"pattern types\".\n\nCore Algorithm - EXPRESS THE PHILOSOPHY:\n\nCRITICAL: The algorithmic philosophy should dictate what to build.\n\nTo express the philosophy through code, avoid thinking \"which pattern should I use?\" and instead think \"how to express this philosophy through code?\"\n\nIf the philosophy is about organic emergence, consider using:\n\nElements that accumulate or grow over time\nRandom processes constrained by natural rules\nFeedback loops and interactions\n\nIf the philosophy is about mathematical beauty, consider using:\n\nGeometric relationships and ratios\nTrigonometric functions and harmonics\nPrecise calculations creating unexpected patterns\n\nIf the philosophy is about controlled chaos, consider using:\n\nRandom variation within strict boundaries\nBifurcation and phase transitions\nOrder emerging from disorder\n\nThe algorithm flows from the philosophy, not from a menu of options.\n\nTo guide the implementation, let the conceptual essence inform creative and original choices. Build something that expresses the vision for this particular request.\n\nCanvas Setup: Standard p5.js structure:\n\nfunction setup() {\n createCanvas(1200, 1200);\n // Initialize your system\n}\n\nfunction draw() {\n // Your generative algorithm\n // Can be static (noLoop) or animated\n}\n\nCRAFTSMANSHIP REQUIREMENTS\n\nCRITICAL: 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.\n\nBalance: Complexity without visual noise, order without rigidity\nColor Harmony: Thoughtful palettes, not random RGB values\nComposition: Even in randomness, maintain visual hierarchy and flow\nPerformance: Smooth execution, optimized for real-time if animated\nReproducibility: Same seed ALWAYS produces identical output\nOUTPUT FORMAT\n\nOutput:\n\nAlgorithmic Philosophy - As markdown or text explaining the generative aesthetic\nSingle HTML Artifact - Self-contained interactive generative art built from templates/viewer.html (see STEP 0 and next section)\n\nThe 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.\n\nINTERACTIVE ARTIFACT CREATION\n\nREMINDER: templates/viewer.html should have already been read (see STEP 0). Use that file as the starting point.\n\nTo 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.\n\nCRITICAL: WHAT'S FIXED VS VARIABLE\n\nThe templates/viewer.html file is the foundation. It contains the exact structure and styling needed.\n\nFIXED (always include exactly as shown):\n\nLayout structure (header, sidebar, main canvas area)\nAnthropic branding (UI colors, fonts, gradients)\nSeed section in sidebar:\nSeed display\nPrevious/Next buttons\nRandom button\nJump to seed input + Go button\nActions section in sidebar:\nRegenerate button\nReset button\n\nVARIABLE (customize for each artwork):\n\nThe entire p5.js algorithm (setup/draw/classes)\nThe parameters object (define what the art needs)\nThe Parameters section in sidebar:\nNumber of parameter controls\nParameter names\nMin/max/step values for sliders\nControl types (sliders, inputs, etc.)\nColors section (optional):\nSome art needs color pickers\nSome art might use fixed colors\nSome art might be monochrome (no color controls needed)\nDecide based on the art's needs\n\nEvery artwork should have unique parameters and algorithm! The fixed parts provide consistent UX - everything else expresses the unique vision.\n\nREQUIRED FEATURES\n\n1. Parameter Controls\n\nSliders for numeric parameters (particle count, noise scale, speed, etc.)\nColor pickers for palette colors\nReal-time updates when parameters change\nReset button to restore defaults\n\n2. Seed Navigation\n\nDisplay current seed number\n\"Previous\" and \"Next\" buttons to cycle through seeds\n\"Random\" button for random seed\nInput field to jump to specific seed\nGenerate 100 variations when requested (seeds 1-100)\n\n3. Single Artifact Structure\n\n\n\n\n \n \n \n\n\n \n
\n \n
\n \n\n\n\n\nCRITICAL: This is a single artifact. No external files, no imports (except p5.js CDN). Everything inline.\n\n4. Implementation Details - BUILD THE SIDEBAR\n\nThe sidebar structure:\n\n1. Seed (FIXED) - Always include exactly as shown:\n\nSeed display\nPrev/Next/Random/Jump buttons\n\n2. Parameters (VARIABLE) - Create controls for the art:\n\n
\n \n \n ...\n
\n\n\nAdd as many control-group divs as there are parameters.\n\n3. Colors (OPTIONAL/VARIABLE) - Include if the art needs adjustable colors:\n\nAdd color pickers if users should control palette\nSkip this section if the art uses fixed colors\nSkip if the art is monochrome\n\n4. Actions (FIXED) - Always include exactly as shown:\n\nRegenerate button\nReset button\nDownload PNG button\n\nRequirements:\n\nSeed controls must work (prev/next/random/jump/display)\nAll parameters must have UI controls\nRegenerate, Reset, Download buttons must work\nKeep Anthropic branding (UI styling, not art colors)\nUSING THE ARTIFACT\n\nThe HTML artifact works immediately:\n\nIn claude.ai: Displayed as an interactive artifact - runs instantly\nAs a file: Save and open in any browser - no server needed\nSharing: Send the HTML file - it's completely self-contained\nVARIATIONS & EXPLORATION\n\nThe 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:\n\nInclude seed presets (buttons for \"Variation 1: Seed 42\", \"Variation 2: Seed 127\", etc.)\nAdd a \"Gallery Mode\" that shows thumbnails of multiple seeds side-by-side\nAll within the same single artifact\n\nThis 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.\n\nTHE CREATIVE PROCESS\n\nUser request → Algorithmic philosophy → Implementation\n\nEach request is unique. The process involves:\n\nInterpret the user's intent - What aesthetic is being sought?\nCreate an algorithmic philosophy (4-6 paragraphs) describing the computational approach\nImplement it in code - Build the algorithm that expresses this philosophy\nDesign appropriate parameters - What should be tunable?\nBuild matching UI controls - Sliders/inputs for those parameters\n\nThe constants:\n\nAnthropic branding (colors, fonts, layout)\nSeed navigation (always present)\nSelf-contained HTML artifact\n\nEverything else is variable:\n\nThe algorithm itself\nThe parameters\nThe UI controls\nThe visual outcome\n\nTo achieve the best results, trust creativity and let the philosophy guide the implementation.\n\nRESOURCES\n\nThis skill includes helpful templates and documentation:\n\ntemplates/viewer.html: REQUIRED STARTING POINT for all HTML artifacts.\n\nThis is the foundation - contains the exact structure and Anthropic branding\nKeep unchanged: Layout structure, sidebar organization, Anthropic colors/fonts, seed controls, action buttons\nReplace: The p5.js algorithm, parameter definitions, and UI controls in Parameters section\nThe extensive comments in the file mark exactly what to keep vs replace\n\ntemplates/generator_template.js: Reference for p5.js best practices and code structure principles.\n\nShows how to organize parameters, use seeded randomness, structure classes\nNOT a pattern menu - use these principles to build unique algorithms\nEmbed algorithms inline in the HTML artifact (don't create separate .js files)\n\nCritical reminder:\n\nThe template is the STARTING POINT, not inspiration\nThe algorithm is where to create something unique\nDon't copy the flow field example - build what the philosophy demands\nBut DO keep the exact UI structure and Anthropic branding from the template"
},
"trust": {
"sourceLabel": "tencent",
"provenanceUrl": "https://clawhub.ai/moyu0032/mo-test-1",
"publisherUrl": "https://clawhub.ai/moyu0032/mo-test-1",
"owner": "moyu0032",
"version": "1.0.0",
"license": null,
"verificationStatus": "Indexed source record"
},
"links": {
"detailUrl": "https://openagent3.xyz/skills/mo-test-1",
"downloadUrl": "https://openagent3.xyz/downloads/mo-test-1",
"agentUrl": "https://openagent3.xyz/skills/mo-test-1/agent",
"manifestUrl": "https://openagent3.xyz/skills/mo-test-1/agent.json",
"briefUrl": "https://openagent3.xyz/skills/mo-test-1/agent.md"
}
}