[{"data":1,"prerenderedAt":-1},["ShallowReactive",2],{"skill-jetbrains-algorithmic-art":3,"mdc--6lzegu-key":36,"related-repo-jetbrains-algorithmic-art":2851,"related-org-jetbrains-algorithmic-art":2965},{"slug":4,"name":4,"fn":5,"description":6,"org":7,"tags":11,"stars":25,"repoUrl":26,"updatedAt":27,"license":28,"forks":29,"topics":30,"repo":31,"sourceUrl":34,"mdContent":35},"algorithmic-art","create generative art with p5.js","Creating algorithmic art using p5.js with seeded randomness and interactive parameter exploration. Use this when users request creating art using code, generative art, algorithmic art, flow fields, or particle systems. Create original algorithmic art rather than copying existing artists' work to avoid copyright violations.",{"slug":8,"name":9,"logoUrl":10,"githubOrg":9},"jetbrains","JetBrains","https:\u002F\u002Fpexgzepcugksgbtrxkhf.supabase.co\u002Fstorage\u002Fv1\u002Fobject\u002Fpublic\u002Forg-logos\u002Fjetbrains.png",[12,16,19,22],{"name":13,"slug":14,"type":15},"Graphics","graphics","tag",{"name":17,"slug":18,"type":15},"Creative","creative",{"name":20,"slug":21,"type":15},"Generative Art","generative-art",{"name":23,"slug":24,"type":15},"JavaScript","javascript",252,"https:\u002F\u002Fgithub.com\u002FJetBrains\u002Fskills","2026-07-13T06:41:35.540127","Complete terms in LICENSE.txt",17,[],{"repoUrl":26,"stars":25,"forks":29,"topics":32,"description":33},[],"Curated agent skills collection verified by JetBrains","https:\u002F\u002Fgithub.com\u002FJetBrains\u002Fskills\u002Ftree\u002FHEAD\u002Falgorithmic-art","---\nname: algorithmic-art\ndescription: Creating algorithmic art using p5.js with seeded randomness and interactive parameter exploration. Use this when users request creating art using code, generative art, algorithmic art, flow fields, or particle systems. Create original algorithmic art rather than copying existing artists' work to avoid copyright violations.\nlicense: Complete terms in LICENSE.txt\nmetadata:\n  short-description: \"Create generative art with p5.js\"\n  author: Anthropic\n  source: https:\u002F\u002Fgithub.com\u002Fanthropics\u002Fskills\u002Ftree\u002Fmain\u002Fskills\u002Falgorithmic-art\n---\n\nAlgorithmic 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:\n1. Algorithmic Philosophy Creation (.md file)\n2. Express by creating p5.js generative art (.html + .js files)\n\nFirst, undertake this task:\n\n## ALGORITHMIC PHILOSOPHY CREATION\n\nTo begin, create an ALGORITHMIC PHILOSOPHY (not static images or templates) that will be interpreted through:\n- Computational processes, emergent behavior, mathematical beauty\n- Seeded randomness, noise fields, organic systems\n- Particles, flows, fields, forces\n- Parametric variation and controlled chaos\n\n### THE CRITICAL UNDERSTANDING\n- 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.\n- What is created: An algorithmic philosophy\u002Fgenerative aesthetic movement.\n- 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.\n\nConsider this approach:\n- Write a manifesto for a generative art movement\n- The 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\n### HOW TO GENERATE AN ALGORITHMIC PHILOSOPHY\n\n**Name the movement** (1-2 words): \"Organic Turbulence\" \u002F \"Quantum Harmonics\" \u002F \"Emergent Stillness\"\n6877532\n**Articulate the philosophy** (4-6 paragraphs - concise but complete):\n\nTo capture the ALGORITHMIC essence, express how this philosophy manifests through:\n- Computational processes and mathematical relationships?\n- Noise functions and randomness patterns?\n- Particle behaviors and field dynamics?\n- Temporal evolution and system states?\n- Parametric variation and emergent complexity?\n\n**CRITICAL GUIDELINES:**\n- **Avoid redundancy**: Each algorithmic aspect should be mentioned once. Avoid repeating concepts about noise theory, particle dynamics, or mathematical principles unless adding new depth.\n- **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.\"\n- **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.\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\n### PHILOSOPHY EXAMPLES\n\n**\"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\n*These are condensed examples. The actual algorithmic philosophy should be 4-6 substantial paragraphs.*\n\n### ESSENTIAL PRINCIPLES\n- **ALGORITHMIC PHILOSOPHY**: Creating a computational worldview to be expressed through code\n- **PROCESS OVER PRODUCT**: Always emphasize that beauty emerges from the algorithm's execution - each run is unique\n- **PARAMETRIC EXPRESSION**: Ideas communicate through mathematical relationships, forces, behaviors - not static composition\n- **ARTISTIC FREEDOM**: The next Claude interprets the philosophy algorithmically - provide creative implementation room\n- **PURE GENERATIVE ART**: This is about making LIVING ALGORITHMS, not static images with randomness\n- **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\n\n**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.\n\n---\n\n## DEDUCING THE CONCEPTUAL SEED\n\n**CRITICAL STEP**: Before implementing the algorithm, identify the subtle conceptual thread from the original request.\n\n**THE 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.\n\n---\n\n## P5.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\n**CRITICAL: BEFORE writing any HTML:**\n\n1. **Read** `templates\u002Fviewer.html` using the Read tool\n2. **Study** the exact structure, styling, and Anthropic branding\n3. **Use that file as the LITERAL STARTING POINT** - not just inspiration\n4. **Keep all FIXED sections exactly as shown** (header, sidebar structure, Anthropic colors\u002Ffonts, seed controls, action buttons)\n5. **Replace only the VARIABLE sections** marked in the file's comments (algorithm, parameters, UI controls for parameters)\n\n**Avoid:**\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\n**Follow these practices:**\n- ✅ Copy the template's exact HTML structure\n- ✅ Keep Anthropic branding (Poppins\u002FLora 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\n---\n\nTo create gallery-quality computational art that lives and breathes, use the algorithmic philosophy as the foundation.\n\n### TECHNICAL REQUIREMENTS\n\n**Seeded Randomness (Art Blocks Pattern)**:\n```javascript\n\u002F\u002F ALWAYS use a seed for reproducibility\nlet seed = 12345; \u002F\u002F or hash from user input\nrandomSeed(seed);\nnoiseSeed(seed);\n```\n\n**Parameter 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\n```javascript\nlet params = {\n  seed: 12345,  \u002F\u002F Always include seed for reproducibility\n  \u002F\u002F colors\n  \u002F\u002F Add parameters that control YOUR algorithm:\n  \u002F\u002F - Quantities (how many?)\n  \u002F\u002F - Scales (how big? how fast?)\n  \u002F\u002F - Probabilities (how likely?)\n  \u002F\u002F - Ratios (what proportions?)\n  \u002F\u002F - Angles (what direction?)\n  \u002F\u002F - Thresholds (when does behavior change?)\n};\n```\n\n**To design effective parameters, focus on the properties the system needs to be tunable rather than thinking in terms of \"pattern types\".**\n\n**Core Algorithm - EXPRESS THE PHILOSOPHY**:\n\n**CRITICAL**: 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- Elements that accumulate or grow over time\n- Random processes constrained by natural rules\n- Feedback loops and interactions\n\nIf the philosophy is about **mathematical beauty**, consider using:\n- Geometric relationships and ratios\n- Trigonometric functions and harmonics\n- Precise calculations creating unexpected patterns\n\nIf the philosophy is about **controlled chaos**, consider using:\n- Random variation within strict boundaries\n- Bifurcation and phase transitions\n- Order emerging from disorder\n\n**The 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\n**Canvas Setup**: Standard p5.js structure:\n```javascript\nfunction setup() {\n  createCanvas(1200, 1200);\n  \u002F\u002F Initialize your system\n}\n\nfunction draw() {\n  \u002F\u002F Your generative algorithm\n  \u002F\u002F Can be static (noLoop) or animated\n}\n```\n\n### CRAFTSMANSHIP REQUIREMENTS\n\n**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\n- **Balance**: Complexity without visual noise, order without rigidity\n- **Color Harmony**: Thoughtful palettes, not random RGB values\n- **Composition**: Even in randomness, maintain visual hierarchy and flow\n- **Performance**: Smooth execution, optimized for real-time if animated\n- **Reproducibility**: Same seed ALWAYS produces identical output\n\n### OUTPUT FORMAT\n\nOutput:\n1. **Algorithmic Philosophy** - As markdown or text explaining the generative aesthetic\n2. **Single HTML Artifact** - Self-contained interactive generative art built from `templates\u002Fviewer.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\n---\n\n## INTERACTIVE ARTIFACT CREATION\n\n**REMINDER: `templates\u002Fviewer.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\n### CRITICAL: WHAT'S FIXED VS VARIABLE\n\nThe `templates\u002Fviewer.html` file is the foundation. It contains the exact structure and styling needed.\n\n**FIXED (always include exactly as shown):**\n- Layout structure (header, sidebar, main canvas area)\n- Anthropic branding (UI colors, fonts, gradients)\n- Seed section in sidebar:\n  - Seed display\n  - Previous\u002FNext buttons\n  - Random button\n  - Jump to seed input + Go button\n- Actions section in sidebar:\n  - Regenerate button\n  - Reset button\n\n**VARIABLE (customize for each artwork):**\n- The entire p5.js algorithm (setup\u002Fdraw\u002Fclasses)\n- The parameters object (define what the art needs)\n- The Parameters section in sidebar:\n  - Number of parameter controls\n  - Parameter names\n  - Min\u002Fmax\u002Fstep values for sliders\n  - Control types (sliders, inputs, etc.)\n- Colors section (optional):\n  - Some art needs color pickers\n  - Some art might use fixed colors\n  - Some art might be monochrome (no color controls needed)\n  - Decide based on the art's needs\n\n**Every artwork should have unique parameters and algorithm!** The fixed parts provide consistent UX - everything else expresses the unique vision.\n\n### REQUIRED FEATURES\n\n**1. Parameter Controls**\n- Sliders for numeric parameters (particle count, noise scale, speed, etc.)\n- Color pickers for palette colors\n- Real-time updates when parameters change\n- Reset button to restore defaults\n\n**2. Seed Navigation**\n- Display current seed number\n- \"Previous\" and \"Next\" buttons to cycle through seeds\n- \"Random\" button for random seed\n- Input field to jump to specific seed\n- Generate 100 variations when requested (seeds 1-100)\n\n**3. Single Artifact Structure**\n```html\n\u003C!DOCTYPE html>\n\u003Chtml>\n\u003Chead>\n  \u003C!-- p5.js from CDN - always available -->\n  \u003Cscript src=\"https:\u002F\u002Fcdnjs.cloudflare.com\u002Fajax\u002Flibs\u002Fp5.js\u002F1.7.0\u002Fp5.min.js\">\u003C\u002Fscript>\n  \u003Cstyle>\n    \u002F* All styling inline - clean, minimal *\u002F\n    \u002F* Canvas on top, controls below *\u002F\n  \u003C\u002Fstyle>\n\u003C\u002Fhead>\n\u003Cbody>\n  \u003Cdiv id=\"canvas-container\">\u003C\u002Fdiv>\n  \u003Cdiv id=\"controls\">\n    \u003C!-- All parameter controls -->\n  \u003C\u002Fdiv>\n  \u003Cscript>\n    \u002F\u002F ALL p5.js code inline here\n    \u002F\u002F Parameter objects, classes, functions\n    \u002F\u002F setup() and draw()\n    \u002F\u002F UI handlers\n    \u002F\u002F Everything self-contained\n  \u003C\u002Fscript>\n\u003C\u002Fbody>\n\u003C\u002Fhtml>\n```\n\n**CRITICAL**: This is a single artifact. No external files, no imports (except p5.js CDN). Everything inline.\n\n**4. Implementation Details - BUILD THE SIDEBAR**\n\nThe sidebar structure:\n\n**1. Seed (FIXED)** - Always include exactly as shown:\n- Seed display\n- Prev\u002FNext\u002FRandom\u002FJump buttons\n\n**2. Parameters (VARIABLE)** - Create controls for the art:\n```html\n\u003Cdiv class=\"control-group\">\n    \u003Clabel>Parameter Name\u003C\u002Flabel>\n    \u003Cinput type=\"range\" id=\"param\" min=\"...\" max=\"...\" step=\"...\" value=\"...\" oninput=\"updateParam('param', this.value)\">\n    \u003Cspan class=\"value-display\" id=\"param-value\">...\u003C\u002Fspan>\n\u003C\u002Fdiv>\n```\nAdd as many control-group divs as there are parameters.\n\n**3. Colors (OPTIONAL\u002FVARIABLE)** - Include if the art needs adjustable colors:\n- Add color pickers if users should control palette\n- Skip this section if the art uses fixed colors\n- Skip if the art is monochrome\n\n**4. Actions (FIXED)** - Always include exactly as shown:\n- Regenerate button\n- Reset button\n- Download PNG button\n\n**Requirements**:\n- Seed controls must work (prev\u002Fnext\u002Frandom\u002Fjump\u002Fdisplay)\n- All parameters must have UI controls\n- Regenerate, Reset, Download buttons must work\n- Keep Anthropic branding (UI styling, not art colors)\n\n### USING THE ARTIFACT\n\nThe HTML artifact works immediately:\n1. **In claude.ai**: Displayed as an interactive artifact - runs instantly\n2. **As a file**: Save and open in any browser - no server needed\n3. **Sharing**: Send the HTML file - it's completely self-contained\n\n---\n\n## VARIATIONS & EXPLORATION\n\nThe artifact includes seed navigation by default (prev\u002Fnext\u002Frandom buttons), allowing users to explore variations without creating multiple files. If the user wants specific variations highlighted:\n\n- Include seed presets (buttons for \"Variation 1: Seed 42\", \"Variation 2: Seed 127\", etc.)\n- Add a \"Gallery Mode\" that shows thumbnails of multiple seeds side-by-side\n- All 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\n---\n\n## THE CREATIVE PROCESS\n\n**User request** → **Algorithmic philosophy** → **Implementation**\n\nEach request is unique. The process involves:\n\n1. **Interpret the user's intent** - What aesthetic is being sought?\n2. **Create an algorithmic philosophy** (4-6 paragraphs) describing the computational approach\n3. **Implement it in code** - Build the algorithm that expresses this philosophy\n4. **Design appropriate parameters** - What should be tunable?\n5. **Build matching UI controls** - Sliders\u002Finputs for those parameters\n\n**The constants**:\n- Anthropic branding (colors, fonts, layout)\n- Seed navigation (always present)\n- Self-contained HTML artifact\n\n**Everything else is variable**:\n- The algorithm itself\n- The parameters\n- The UI controls\n- The visual outcome\n\nTo achieve the best results, trust creativity and let the philosophy guide the implementation.\n\n---\n\n## RESOURCES\n\nThis skill includes helpful templates and documentation:\n\n- **templates\u002Fviewer.html**: REQUIRED STARTING POINT for all HTML artifacts.\n  - This is the foundation - contains the exact structure and Anthropic branding\n  - **Keep unchanged**: Layout structure, sidebar organization, Anthropic colors\u002Ffonts, seed controls, action buttons\n  - **Replace**: The p5.js algorithm, parameter definitions, and UI controls in Parameters section\n  - The extensive comments in the file mark exactly what to keep vs replace\n\n- **templates\u002Fgenerator_template.js**: Reference for p5.js best practices and code structure principles.\n  - Shows how to organize parameters, use seeded randomness, structure classes\n  - NOT a pattern menu - use these principles to build unique algorithms\n  - Embed algorithms inline in the HTML artifact (don't create separate .js files)\n\n**Critical reminder**:\n- The **template is the STARTING POINT**, not inspiration\n- The **algorithm is where to create** something unique\n- Don't copy the flow field example - build what the philosophy demands\n- But DO keep the exact UI structure and Anthropic branding from the template\n",{"data":37,"body":42},{"name":4,"description":6,"license":28,"metadata":38},{"short-description":39,"author":40,"source":41},"Create generative art with p5.js","Anthropic","https:\u002F\u002Fgithub.com\u002Fanthropics\u002Fskills\u002Ftree\u002Fmain\u002Fskills\u002Falgorithmic-art",{"type":43,"children":44},"root",[45,53,58,73,78,85,90,114,121,139,144,157,162,168,186,191,219,227,260,265,271,281,291,301,311,321,330,336,399,409,413,419,429,446,458,461,467,472,478,486,548,556,579,587,610,615,618,623,629,639,736,745,750,884,892,901,911,916,928,946,956,974,984,1002,1010,1015,1025,1158,1164,1173,1226,1232,1237,1267,1272,1275,1281,1296,1301,1307,1319,1327,1386,1394,1463,1473,1479,1487,1510,1518,1546,1554,1973,1982,1990,1995,2005,2017,2027,2392,2397,2407,2425,2434,2450,2459,2482,2488,2493,2526,2529,2535,2540,2558,2563,2566,2572,2593,2598,2651,2660,2678,2687,2710,2715,2718,2724,2729,2802,2811,2846],{"type":46,"tag":47,"props":48,"children":49},"element","p",{},[50],{"type":51,"value":52},"text","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).",{"type":46,"tag":47,"props":54,"children":55},{},[56],{"type":51,"value":57},"This happens in two steps:",{"type":46,"tag":59,"props":60,"children":61},"ol",{},[62,68],{"type":46,"tag":63,"props":64,"children":65},"li",{},[66],{"type":51,"value":67},"Algorithmic Philosophy Creation (.md file)",{"type":46,"tag":63,"props":69,"children":70},{},[71],{"type":51,"value":72},"Express by creating p5.js generative art (.html + .js files)",{"type":46,"tag":47,"props":74,"children":75},{},[76],{"type":51,"value":77},"First, undertake this task:",{"type":46,"tag":79,"props":80,"children":82},"h2",{"id":81},"algorithmic-philosophy-creation",[83],{"type":51,"value":84},"ALGORITHMIC PHILOSOPHY CREATION",{"type":46,"tag":47,"props":86,"children":87},{},[88],{"type":51,"value":89},"To begin, create an ALGORITHMIC PHILOSOPHY (not static images or templates) that will be interpreted through:",{"type":46,"tag":91,"props":92,"children":93},"ul",{},[94,99,104,109],{"type":46,"tag":63,"props":95,"children":96},{},[97],{"type":51,"value":98},"Computational processes, emergent behavior, mathematical beauty",{"type":46,"tag":63,"props":100,"children":101},{},[102],{"type":51,"value":103},"Seeded randomness, noise fields, organic systems",{"type":46,"tag":63,"props":105,"children":106},{},[107],{"type":51,"value":108},"Particles, flows, fields, forces",{"type":46,"tag":63,"props":110,"children":111},{},[112],{"type":51,"value":113},"Parametric variation and controlled chaos",{"type":46,"tag":115,"props":116,"children":118},"h3",{"id":117},"the-critical-understanding",[119],{"type":51,"value":120},"THE CRITICAL UNDERSTANDING",{"type":46,"tag":91,"props":122,"children":123},{},[124,129,134],{"type":46,"tag":63,"props":125,"children":126},{},[127],{"type":51,"value":128},"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.",{"type":46,"tag":63,"props":130,"children":131},{},[132],{"type":51,"value":133},"What is created: An algorithmic philosophy\u002Fgenerative aesthetic movement.",{"type":46,"tag":63,"props":135,"children":136},{},[137],{"type":51,"value":138},"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.",{"type":46,"tag":47,"props":140,"children":141},{},[142],{"type":51,"value":143},"Consider this approach:",{"type":46,"tag":91,"props":145,"children":146},{},[147,152],{"type":46,"tag":63,"props":148,"children":149},{},[150],{"type":51,"value":151},"Write a manifesto for a generative art movement",{"type":46,"tag":63,"props":153,"children":154},{},[155],{"type":51,"value":156},"The next phase involves writing the algorithm that brings it to life",{"type":46,"tag":47,"props":158,"children":159},{},[160],{"type":51,"value":161},"The philosophy must emphasize: Algorithmic expression. Emergent behavior. Computational beauty. Seeded variation.",{"type":46,"tag":115,"props":163,"children":165},{"id":164},"how-to-generate-an-algorithmic-philosophy",[166],{"type":51,"value":167},"HOW TO GENERATE AN ALGORITHMIC PHILOSOPHY",{"type":46,"tag":47,"props":169,"children":170},{},[171,177,179,184],{"type":46,"tag":172,"props":173,"children":174},"strong",{},[175],{"type":51,"value":176},"Name the movement",{"type":51,"value":178}," (1-2 words): \"Organic Turbulence\" \u002F \"Quantum Harmonics\" \u002F \"Emergent Stillness\"\n6877532\n",{"type":46,"tag":172,"props":180,"children":181},{},[182],{"type":51,"value":183},"Articulate the philosophy",{"type":51,"value":185}," (4-6 paragraphs - concise but complete):",{"type":46,"tag":47,"props":187,"children":188},{},[189],{"type":51,"value":190},"To capture the ALGORITHMIC essence, express how this philosophy manifests through:",{"type":46,"tag":91,"props":192,"children":193},{},[194,199,204,209,214],{"type":46,"tag":63,"props":195,"children":196},{},[197],{"type":51,"value":198},"Computational processes and mathematical relationships?",{"type":46,"tag":63,"props":200,"children":201},{},[202],{"type":51,"value":203},"Noise functions and randomness patterns?",{"type":46,"tag":63,"props":205,"children":206},{},[207],{"type":51,"value":208},"Particle behaviors and field dynamics?",{"type":46,"tag":63,"props":210,"children":211},{},[212],{"type":51,"value":213},"Temporal evolution and system states?",{"type":46,"tag":63,"props":215,"children":216},{},[217],{"type":51,"value":218},"Parametric variation and emergent complexity?",{"type":46,"tag":47,"props":220,"children":221},{},[222],{"type":46,"tag":172,"props":223,"children":224},{},[225],{"type":51,"value":226},"CRITICAL GUIDELINES:",{"type":46,"tag":91,"props":228,"children":229},{},[230,240,250],{"type":46,"tag":63,"props":231,"children":232},{},[233,238],{"type":46,"tag":172,"props":234,"children":235},{},[236],{"type":51,"value":237},"Avoid redundancy",{"type":51,"value":239},": Each algorithmic aspect should be mentioned once. Avoid repeating concepts about noise theory, particle dynamics, or mathematical principles unless adding new depth.",{"type":46,"tag":63,"props":241,"children":242},{},[243,248],{"type":46,"tag":172,"props":244,"children":245},{},[246],{"type":51,"value":247},"Emphasize craftsmanship REPEATEDLY",{"type":51,"value":249},": 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.\"",{"type":46,"tag":63,"props":251,"children":252},{},[253,258],{"type":46,"tag":172,"props":254,"children":255},{},[256],{"type":51,"value":257},"Leave creative space",{"type":51,"value":259},": 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.",{"type":46,"tag":47,"props":261,"children":262},{},[263],{"type":51,"value":264},"The philosophy must guide the next version to express ideas ALGORITHMICALLY, not through static images. Beauty lives in the process, not the final frame.",{"type":46,"tag":115,"props":266,"children":268},{"id":267},"philosophy-examples",[269],{"type":51,"value":270},"PHILOSOPHY EXAMPLES",{"type":46,"tag":47,"props":272,"children":273},{},[274,279],{"type":46,"tag":172,"props":275,"children":276},{},[277],{"type":51,"value":278},"\"Organic Turbulence\"",{"type":51,"value":280},"\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.",{"type":46,"tag":47,"props":282,"children":283},{},[284,289],{"type":46,"tag":172,"props":285,"children":286},{},[287],{"type":51,"value":288},"\"Quantum Harmonics\"",{"type":51,"value":290},"\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.",{"type":46,"tag":47,"props":292,"children":293},{},[294,299],{"type":46,"tag":172,"props":295,"children":296},{},[297],{"type":51,"value":298},"\"Recursive Whispers\"",{"type":51,"value":300},"\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.",{"type":46,"tag":47,"props":302,"children":303},{},[304,309],{"type":46,"tag":172,"props":305,"children":306},{},[307],{"type":51,"value":308},"\"Field Dynamics\"",{"type":51,"value":310},"\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.",{"type":46,"tag":47,"props":312,"children":313},{},[314,319],{"type":46,"tag":172,"props":315,"children":316},{},[317],{"type":51,"value":318},"\"Stochastic Crystallization\"",{"type":51,"value":320},"\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.",{"type":46,"tag":47,"props":322,"children":323},{},[324],{"type":46,"tag":325,"props":326,"children":327},"em",{},[328],{"type":51,"value":329},"These are condensed examples. The actual algorithmic philosophy should be 4-6 substantial paragraphs.",{"type":46,"tag":115,"props":331,"children":333},{"id":332},"essential-principles",[334],{"type":51,"value":335},"ESSENTIAL PRINCIPLES",{"type":46,"tag":91,"props":337,"children":338},{},[339,349,359,369,379,389],{"type":46,"tag":63,"props":340,"children":341},{},[342,347],{"type":46,"tag":172,"props":343,"children":344},{},[345],{"type":51,"value":346},"ALGORITHMIC PHILOSOPHY",{"type":51,"value":348},": Creating a computational worldview to be expressed through code",{"type":46,"tag":63,"props":350,"children":351},{},[352,357],{"type":46,"tag":172,"props":353,"children":354},{},[355],{"type":51,"value":356},"PROCESS OVER PRODUCT",{"type":51,"value":358},": Always emphasize that beauty emerges from the algorithm's execution - each run is unique",{"type":46,"tag":63,"props":360,"children":361},{},[362,367],{"type":46,"tag":172,"props":363,"children":364},{},[365],{"type":51,"value":366},"PARAMETRIC EXPRESSION",{"type":51,"value":368},": Ideas communicate through mathematical relationships, forces, behaviors - not static composition",{"type":46,"tag":63,"props":370,"children":371},{},[372,377],{"type":46,"tag":172,"props":373,"children":374},{},[375],{"type":51,"value":376},"ARTISTIC FREEDOM",{"type":51,"value":378},": The next Claude interprets the philosophy algorithmically - provide creative implementation room",{"type":46,"tag":63,"props":380,"children":381},{},[382,387],{"type":46,"tag":172,"props":383,"children":384},{},[385],{"type":51,"value":386},"PURE GENERATIVE ART",{"type":51,"value":388},": This is about making LIVING ALGORITHMS, not static images with randomness",{"type":46,"tag":63,"props":390,"children":391},{},[392,397],{"type":46,"tag":172,"props":393,"children":394},{},[395],{"type":51,"value":396},"EXPERT CRAFTSMANSHIP",{"type":51,"value":398},": 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",{"type":46,"tag":47,"props":400,"children":401},{},[402,407],{"type":46,"tag":172,"props":403,"children":404},{},[405],{"type":51,"value":406},"The algorithmic philosophy should be 4-6 paragraphs long.",{"type":51,"value":408}," 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.",{"type":46,"tag":410,"props":411,"children":412},"hr",{},[],{"type":46,"tag":79,"props":414,"children":416},{"id":415},"deducing-the-conceptual-seed",[417],{"type":51,"value":418},"DEDUCING THE CONCEPTUAL SEED",{"type":46,"tag":47,"props":420,"children":421},{},[422,427],{"type":46,"tag":172,"props":423,"children":424},{},[425],{"type":51,"value":426},"CRITICAL STEP",{"type":51,"value":428},": Before implementing the algorithm, identify the subtle conceptual thread from the original request.",{"type":46,"tag":47,"props":430,"children":431},{},[432,437,439,444],{"type":46,"tag":172,"props":433,"children":434},{},[435],{"type":51,"value":436},"THE ESSENTIAL PRINCIPLE",{"type":51,"value":438},":\nThe concept is a ",{"type":46,"tag":172,"props":440,"children":441},{},[442],{"type":51,"value":443},"subtle, niche reference embedded within the algorithm itself",{"type":51,"value":445}," - 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.",{"type":46,"tag":47,"props":447,"children":448},{},[449,451,456],{"type":51,"value":450},"This is ",{"type":46,"tag":172,"props":452,"children":453},{},[454],{"type":51,"value":455},"VERY IMPORTANT",{"type":51,"value":457},": 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.",{"type":46,"tag":410,"props":459,"children":460},{},[],{"type":46,"tag":79,"props":462,"children":464},{"id":463},"p5js-implementation",[465],{"type":51,"value":466},"P5.JS IMPLEMENTATION",{"type":46,"tag":47,"props":468,"children":469},{},[470],{"type":51,"value":471},"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.",{"type":46,"tag":115,"props":473,"children":475},{"id":474},"️-step-0-read-the-template-first-️",[476],{"type":51,"value":477},"⚠️ STEP 0: READ THE TEMPLATE FIRST ⚠️",{"type":46,"tag":47,"props":479,"children":480},{},[481],{"type":46,"tag":172,"props":482,"children":483},{},[484],{"type":51,"value":485},"CRITICAL: BEFORE writing any HTML:",{"type":46,"tag":59,"props":487,"children":488},{},[489,508,518,528,538],{"type":46,"tag":63,"props":490,"children":491},{},[492,497,499,506],{"type":46,"tag":172,"props":493,"children":494},{},[495],{"type":51,"value":496},"Read",{"type":51,"value":498}," ",{"type":46,"tag":500,"props":501,"children":503},"code",{"className":502},[],[504],{"type":51,"value":505},"templates\u002Fviewer.html",{"type":51,"value":507}," using the Read tool",{"type":46,"tag":63,"props":509,"children":510},{},[511,516],{"type":46,"tag":172,"props":512,"children":513},{},[514],{"type":51,"value":515},"Study",{"type":51,"value":517}," the exact structure, styling, and Anthropic branding",{"type":46,"tag":63,"props":519,"children":520},{},[521,526],{"type":46,"tag":172,"props":522,"children":523},{},[524],{"type":51,"value":525},"Use that file as the LITERAL STARTING POINT",{"type":51,"value":527}," - not just inspiration",{"type":46,"tag":63,"props":529,"children":530},{},[531,536],{"type":46,"tag":172,"props":532,"children":533},{},[534],{"type":51,"value":535},"Keep all FIXED sections exactly as shown",{"type":51,"value":537}," (header, sidebar structure, Anthropic colors\u002Ffonts, seed controls, action buttons)",{"type":46,"tag":63,"props":539,"children":540},{},[541,546],{"type":46,"tag":172,"props":542,"children":543},{},[544],{"type":51,"value":545},"Replace only the VARIABLE sections",{"type":51,"value":547}," marked in the file's comments (algorithm, parameters, UI controls for parameters)",{"type":46,"tag":47,"props":549,"children":550},{},[551],{"type":46,"tag":172,"props":552,"children":553},{},[554],{"type":51,"value":555},"Avoid:",{"type":46,"tag":91,"props":557,"children":558},{},[559,564,569,574],{"type":46,"tag":63,"props":560,"children":561},{},[562],{"type":51,"value":563},"❌ Creating HTML from scratch",{"type":46,"tag":63,"props":565,"children":566},{},[567],{"type":51,"value":568},"❌ Inventing custom styling or color schemes",{"type":46,"tag":63,"props":570,"children":571},{},[572],{"type":51,"value":573},"❌ Using system fonts or dark themes",{"type":46,"tag":63,"props":575,"children":576},{},[577],{"type":51,"value":578},"❌ Changing the sidebar structure",{"type":46,"tag":47,"props":580,"children":581},{},[582],{"type":46,"tag":172,"props":583,"children":584},{},[585],{"type":51,"value":586},"Follow these practices:",{"type":46,"tag":91,"props":588,"children":589},{},[590,595,600,605],{"type":46,"tag":63,"props":591,"children":592},{},[593],{"type":51,"value":594},"✅ Copy the template's exact HTML structure",{"type":46,"tag":63,"props":596,"children":597},{},[598],{"type":51,"value":599},"✅ Keep Anthropic branding (Poppins\u002FLora fonts, light colors, gradient backdrop)",{"type":46,"tag":63,"props":601,"children":602},{},[603],{"type":51,"value":604},"✅ Maintain the sidebar layout (Seed → Parameters → Colors? → Actions)",{"type":46,"tag":63,"props":606,"children":607},{},[608],{"type":51,"value":609},"✅ Replace only the p5.js algorithm and parameter controls",{"type":46,"tag":47,"props":611,"children":612},{},[613],{"type":51,"value":614},"The template is the foundation. Build on it, don't rebuild it.",{"type":46,"tag":410,"props":616,"children":617},{},[],{"type":46,"tag":47,"props":619,"children":620},{},[621],{"type":51,"value":622},"To create gallery-quality computational art that lives and breathes, use the algorithmic philosophy as the foundation.",{"type":46,"tag":115,"props":624,"children":626},{"id":625},"technical-requirements",[627],{"type":51,"value":628},"TECHNICAL REQUIREMENTS",{"type":46,"tag":47,"props":630,"children":631},{},[632,637],{"type":46,"tag":172,"props":633,"children":634},{},[635],{"type":51,"value":636},"Seeded Randomness (Art Blocks Pattern)",{"type":51,"value":638},":",{"type":46,"tag":640,"props":641,"children":645},"pre",{"className":642,"code":643,"language":24,"meta":644,"style":644},"language-javascript shiki shiki-themes material-theme-lighter material-theme material-theme-palenight","\u002F\u002F ALWAYS use a seed for reproducibility\nlet seed = 12345; \u002F\u002F or hash from user input\nrandomSeed(seed);\nnoiseSeed(seed);\n","",[646],{"type":46,"tag":500,"props":647,"children":648},{"__ignoreMap":644},[649,661,699,719],{"type":46,"tag":650,"props":651,"children":654},"span",{"class":652,"line":653},"line",1,[655],{"type":46,"tag":650,"props":656,"children":658},{"style":657},"--shiki-light:#90A4AE;--shiki-light-font-style:italic;--shiki-default:#546E7A;--shiki-default-font-style:italic;--shiki-dark:#676E95;--shiki-dark-font-style:italic",[659],{"type":51,"value":660},"\u002F\u002F ALWAYS use a seed for reproducibility\n",{"type":46,"tag":650,"props":662,"children":664},{"class":652,"line":663},2,[665,671,677,683,689,694],{"type":46,"tag":650,"props":666,"children":668},{"style":667},"--shiki-light:#9C3EDA;--shiki-default:#C792EA;--shiki-dark:#C792EA",[669],{"type":51,"value":670},"let",{"type":46,"tag":650,"props":672,"children":674},{"style":673},"--shiki-light:#90A4AE;--shiki-default:#EEFFFF;--shiki-dark:#BABED8",[675],{"type":51,"value":676}," seed ",{"type":46,"tag":650,"props":678,"children":680},{"style":679},"--shiki-light:#39ADB5;--shiki-default:#89DDFF;--shiki-dark:#89DDFF",[681],{"type":51,"value":682},"=",{"type":46,"tag":650,"props":684,"children":686},{"style":685},"--shiki-light:#F76D47;--shiki-default:#F78C6C;--shiki-dark:#F78C6C",[687],{"type":51,"value":688}," 12345",{"type":46,"tag":650,"props":690,"children":691},{"style":679},[692],{"type":51,"value":693},";",{"type":46,"tag":650,"props":695,"children":696},{"style":657},[697],{"type":51,"value":698}," \u002F\u002F or hash from user input\n",{"type":46,"tag":650,"props":700,"children":702},{"class":652,"line":701},3,[703,709,714],{"type":46,"tag":650,"props":704,"children":706},{"style":705},"--shiki-light:#6182B8;--shiki-default:#82AAFF;--shiki-dark:#82AAFF",[707],{"type":51,"value":708},"randomSeed",{"type":46,"tag":650,"props":710,"children":711},{"style":673},[712],{"type":51,"value":713},"(seed)",{"type":46,"tag":650,"props":715,"children":716},{"style":679},[717],{"type":51,"value":718},";\n",{"type":46,"tag":650,"props":720,"children":722},{"class":652,"line":721},4,[723,728,732],{"type":46,"tag":650,"props":724,"children":725},{"style":705},[726],{"type":51,"value":727},"noiseSeed",{"type":46,"tag":650,"props":729,"children":730},{"style":673},[731],{"type":51,"value":713},{"type":46,"tag":650,"props":733,"children":734},{"style":679},[735],{"type":51,"value":718},{"type":46,"tag":47,"props":737,"children":738},{},[739,744],{"type":46,"tag":172,"props":740,"children":741},{},[742],{"type":51,"value":743},"Parameter Structure - FOLLOW THE PHILOSOPHY",{"type":51,"value":638},{"type":46,"tag":47,"props":746,"children":747},{},[748],{"type":51,"value":749},"To establish parameters that emerge naturally from the algorithmic philosophy, consider: \"What qualities of this system can be adjusted?\"",{"type":46,"tag":640,"props":751,"children":753},{"className":642,"code":752,"language":24,"meta":644,"style":644},"let params = {\n  seed: 12345,  \u002F\u002F Always include seed for reproducibility\n  \u002F\u002F colors\n  \u002F\u002F Add parameters that control YOUR algorithm:\n  \u002F\u002F - Quantities (how many?)\n  \u002F\u002F - Scales (how big? how fast?)\n  \u002F\u002F - Probabilities (how likely?)\n  \u002F\u002F - Ratios (what proportions?)\n  \u002F\u002F - Angles (what direction?)\n  \u002F\u002F - Thresholds (when does behavior change?)\n};\n",[754],{"type":46,"tag":500,"props":755,"children":756},{"__ignoreMap":644},[757,778,805,813,821,830,839,848,857,866,875],{"type":46,"tag":650,"props":758,"children":759},{"class":652,"line":653},[760,764,769,773],{"type":46,"tag":650,"props":761,"children":762},{"style":667},[763],{"type":51,"value":670},{"type":46,"tag":650,"props":765,"children":766},{"style":673},[767],{"type":51,"value":768}," params ",{"type":46,"tag":650,"props":770,"children":771},{"style":679},[772],{"type":51,"value":682},{"type":46,"tag":650,"props":774,"children":775},{"style":679},[776],{"type":51,"value":777}," {\n",{"type":46,"tag":650,"props":779,"children":780},{"class":652,"line":663},[781,787,791,795,800],{"type":46,"tag":650,"props":782,"children":784},{"style":783},"--shiki-light:#E53935;--shiki-default:#F07178;--shiki-dark:#F07178",[785],{"type":51,"value":786},"  seed",{"type":46,"tag":650,"props":788,"children":789},{"style":679},[790],{"type":51,"value":638},{"type":46,"tag":650,"props":792,"children":793},{"style":685},[794],{"type":51,"value":688},{"type":46,"tag":650,"props":796,"children":797},{"style":679},[798],{"type":51,"value":799},",",{"type":46,"tag":650,"props":801,"children":802},{"style":657},[803],{"type":51,"value":804},"  \u002F\u002F Always include seed for reproducibility\n",{"type":46,"tag":650,"props":806,"children":807},{"class":652,"line":701},[808],{"type":46,"tag":650,"props":809,"children":810},{"style":657},[811],{"type":51,"value":812},"  \u002F\u002F colors\n",{"type":46,"tag":650,"props":814,"children":815},{"class":652,"line":721},[816],{"type":46,"tag":650,"props":817,"children":818},{"style":657},[819],{"type":51,"value":820},"  \u002F\u002F Add parameters that control YOUR algorithm:\n",{"type":46,"tag":650,"props":822,"children":824},{"class":652,"line":823},5,[825],{"type":46,"tag":650,"props":826,"children":827},{"style":657},[828],{"type":51,"value":829},"  \u002F\u002F - Quantities (how many?)\n",{"type":46,"tag":650,"props":831,"children":833},{"class":652,"line":832},6,[834],{"type":46,"tag":650,"props":835,"children":836},{"style":657},[837],{"type":51,"value":838},"  \u002F\u002F - Scales (how big? how fast?)\n",{"type":46,"tag":650,"props":840,"children":842},{"class":652,"line":841},7,[843],{"type":46,"tag":650,"props":844,"children":845},{"style":657},[846],{"type":51,"value":847},"  \u002F\u002F - Probabilities (how likely?)\n",{"type":46,"tag":650,"props":849,"children":851},{"class":652,"line":850},8,[852],{"type":46,"tag":650,"props":853,"children":854},{"style":657},[855],{"type":51,"value":856},"  \u002F\u002F - Ratios (what proportions?)\n",{"type":46,"tag":650,"props":858,"children":860},{"class":652,"line":859},9,[861],{"type":46,"tag":650,"props":862,"children":863},{"style":657},[864],{"type":51,"value":865},"  \u002F\u002F - Angles (what direction?)\n",{"type":46,"tag":650,"props":867,"children":869},{"class":652,"line":868},10,[870],{"type":46,"tag":650,"props":871,"children":872},{"style":657},[873],{"type":51,"value":874},"  \u002F\u002F - Thresholds (when does behavior change?)\n",{"type":46,"tag":650,"props":876,"children":878},{"class":652,"line":877},11,[879],{"type":46,"tag":650,"props":880,"children":881},{"style":679},[882],{"type":51,"value":883},"};\n",{"type":46,"tag":47,"props":885,"children":886},{},[887],{"type":46,"tag":172,"props":888,"children":889},{},[890],{"type":51,"value":891},"To design effective parameters, focus on the properties the system needs to be tunable rather than thinking in terms of \"pattern types\".",{"type":46,"tag":47,"props":893,"children":894},{},[895,900],{"type":46,"tag":172,"props":896,"children":897},{},[898],{"type":51,"value":899},"Core Algorithm - EXPRESS THE PHILOSOPHY",{"type":51,"value":638},{"type":46,"tag":47,"props":902,"children":903},{},[904,909],{"type":46,"tag":172,"props":905,"children":906},{},[907],{"type":51,"value":908},"CRITICAL",{"type":51,"value":910},": The algorithmic philosophy should dictate what to build.",{"type":46,"tag":47,"props":912,"children":913},{},[914],{"type":51,"value":915},"To express the philosophy through code, avoid thinking \"which pattern should I use?\" and instead think \"how to express this philosophy through code?\"",{"type":46,"tag":47,"props":917,"children":918},{},[919,921,926],{"type":51,"value":920},"If the philosophy is about ",{"type":46,"tag":172,"props":922,"children":923},{},[924],{"type":51,"value":925},"organic emergence",{"type":51,"value":927},", consider using:",{"type":46,"tag":91,"props":929,"children":930},{},[931,936,941],{"type":46,"tag":63,"props":932,"children":933},{},[934],{"type":51,"value":935},"Elements that accumulate or grow over time",{"type":46,"tag":63,"props":937,"children":938},{},[939],{"type":51,"value":940},"Random processes constrained by natural rules",{"type":46,"tag":63,"props":942,"children":943},{},[944],{"type":51,"value":945},"Feedback loops and interactions",{"type":46,"tag":47,"props":947,"children":948},{},[949,950,955],{"type":51,"value":920},{"type":46,"tag":172,"props":951,"children":952},{},[953],{"type":51,"value":954},"mathematical beauty",{"type":51,"value":927},{"type":46,"tag":91,"props":957,"children":958},{},[959,964,969],{"type":46,"tag":63,"props":960,"children":961},{},[962],{"type":51,"value":963},"Geometric relationships and ratios",{"type":46,"tag":63,"props":965,"children":966},{},[967],{"type":51,"value":968},"Trigonometric functions and harmonics",{"type":46,"tag":63,"props":970,"children":971},{},[972],{"type":51,"value":973},"Precise calculations creating unexpected patterns",{"type":46,"tag":47,"props":975,"children":976},{},[977,978,983],{"type":51,"value":920},{"type":46,"tag":172,"props":979,"children":980},{},[981],{"type":51,"value":982},"controlled chaos",{"type":51,"value":927},{"type":46,"tag":91,"props":985,"children":986},{},[987,992,997],{"type":46,"tag":63,"props":988,"children":989},{},[990],{"type":51,"value":991},"Random variation within strict boundaries",{"type":46,"tag":63,"props":993,"children":994},{},[995],{"type":51,"value":996},"Bifurcation and phase transitions",{"type":46,"tag":63,"props":998,"children":999},{},[1000],{"type":51,"value":1001},"Order emerging from disorder",{"type":46,"tag":47,"props":1003,"children":1004},{},[1005],{"type":46,"tag":172,"props":1006,"children":1007},{},[1008],{"type":51,"value":1009},"The algorithm flows from the philosophy, not from a menu of options.",{"type":46,"tag":47,"props":1011,"children":1012},{},[1013],{"type":51,"value":1014},"To guide the implementation, let the conceptual essence inform creative and original choices. Build something that expresses the vision for this particular request.",{"type":46,"tag":47,"props":1016,"children":1017},{},[1018,1023],{"type":46,"tag":172,"props":1019,"children":1020},{},[1021],{"type":51,"value":1022},"Canvas Setup",{"type":51,"value":1024},": Standard p5.js structure:",{"type":46,"tag":640,"props":1026,"children":1028},{"className":642,"code":1027,"language":24,"meta":644,"style":644},"function setup() {\n  createCanvas(1200, 1200);\n  \u002F\u002F Initialize your system\n}\n\nfunction draw() {\n  \u002F\u002F Your generative algorithm\n  \u002F\u002F Can be static (noLoop) or animated\n}\n",[1029],{"type":46,"tag":500,"props":1030,"children":1031},{"__ignoreMap":644},[1032,1054,1090,1098,1106,1115,1135,1143,1151],{"type":46,"tag":650,"props":1033,"children":1034},{"class":652,"line":653},[1035,1040,1045,1050],{"type":46,"tag":650,"props":1036,"children":1037},{"style":667},[1038],{"type":51,"value":1039},"function",{"type":46,"tag":650,"props":1041,"children":1042},{"style":705},[1043],{"type":51,"value":1044}," setup",{"type":46,"tag":650,"props":1046,"children":1047},{"style":679},[1048],{"type":51,"value":1049},"()",{"type":46,"tag":650,"props":1051,"children":1052},{"style":679},[1053],{"type":51,"value":777},{"type":46,"tag":650,"props":1055,"children":1056},{"class":652,"line":663},[1057,1062,1067,1072,1076,1081,1086],{"type":46,"tag":650,"props":1058,"children":1059},{"style":705},[1060],{"type":51,"value":1061},"  createCanvas",{"type":46,"tag":650,"props":1063,"children":1064},{"style":783},[1065],{"type":51,"value":1066},"(",{"type":46,"tag":650,"props":1068,"children":1069},{"style":685},[1070],{"type":51,"value":1071},"1200",{"type":46,"tag":650,"props":1073,"children":1074},{"style":679},[1075],{"type":51,"value":799},{"type":46,"tag":650,"props":1077,"children":1078},{"style":685},[1079],{"type":51,"value":1080}," 1200",{"type":46,"tag":650,"props":1082,"children":1083},{"style":783},[1084],{"type":51,"value":1085},")",{"type":46,"tag":650,"props":1087,"children":1088},{"style":679},[1089],{"type":51,"value":718},{"type":46,"tag":650,"props":1091,"children":1092},{"class":652,"line":701},[1093],{"type":46,"tag":650,"props":1094,"children":1095},{"style":657},[1096],{"type":51,"value":1097},"  \u002F\u002F Initialize your system\n",{"type":46,"tag":650,"props":1099,"children":1100},{"class":652,"line":721},[1101],{"type":46,"tag":650,"props":1102,"children":1103},{"style":679},[1104],{"type":51,"value":1105},"}\n",{"type":46,"tag":650,"props":1107,"children":1108},{"class":652,"line":823},[1109],{"type":46,"tag":650,"props":1110,"children":1112},{"emptyLinePlaceholder":1111},true,[1113],{"type":51,"value":1114},"\n",{"type":46,"tag":650,"props":1116,"children":1117},{"class":652,"line":832},[1118,1122,1127,1131],{"type":46,"tag":650,"props":1119,"children":1120},{"style":667},[1121],{"type":51,"value":1039},{"type":46,"tag":650,"props":1123,"children":1124},{"style":705},[1125],{"type":51,"value":1126}," draw",{"type":46,"tag":650,"props":1128,"children":1129},{"style":679},[1130],{"type":51,"value":1049},{"type":46,"tag":650,"props":1132,"children":1133},{"style":679},[1134],{"type":51,"value":777},{"type":46,"tag":650,"props":1136,"children":1137},{"class":652,"line":841},[1138],{"type":46,"tag":650,"props":1139,"children":1140},{"style":657},[1141],{"type":51,"value":1142},"  \u002F\u002F Your generative algorithm\n",{"type":46,"tag":650,"props":1144,"children":1145},{"class":652,"line":850},[1146],{"type":46,"tag":650,"props":1147,"children":1148},{"style":657},[1149],{"type":51,"value":1150},"  \u002F\u002F Can be static (noLoop) or animated\n",{"type":46,"tag":650,"props":1152,"children":1153},{"class":652,"line":859},[1154],{"type":46,"tag":650,"props":1155,"children":1156},{"style":679},[1157],{"type":51,"value":1105},{"type":46,"tag":115,"props":1159,"children":1161},{"id":1160},"craftsmanship-requirements",[1162],{"type":51,"value":1163},"CRAFTSMANSHIP REQUIREMENTS",{"type":46,"tag":47,"props":1165,"children":1166},{},[1167,1171],{"type":46,"tag":172,"props":1168,"children":1169},{},[1170],{"type":51,"value":908},{"type":51,"value":1172},": 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.",{"type":46,"tag":91,"props":1174,"children":1175},{},[1176,1186,1196,1206,1216],{"type":46,"tag":63,"props":1177,"children":1178},{},[1179,1184],{"type":46,"tag":172,"props":1180,"children":1181},{},[1182],{"type":51,"value":1183},"Balance",{"type":51,"value":1185},": Complexity without visual noise, order without rigidity",{"type":46,"tag":63,"props":1187,"children":1188},{},[1189,1194],{"type":46,"tag":172,"props":1190,"children":1191},{},[1192],{"type":51,"value":1193},"Color Harmony",{"type":51,"value":1195},": Thoughtful palettes, not random RGB values",{"type":46,"tag":63,"props":1197,"children":1198},{},[1199,1204],{"type":46,"tag":172,"props":1200,"children":1201},{},[1202],{"type":51,"value":1203},"Composition",{"type":51,"value":1205},": Even in randomness, maintain visual hierarchy and flow",{"type":46,"tag":63,"props":1207,"children":1208},{},[1209,1214],{"type":46,"tag":172,"props":1210,"children":1211},{},[1212],{"type":51,"value":1213},"Performance",{"type":51,"value":1215},": Smooth execution, optimized for real-time if animated",{"type":46,"tag":63,"props":1217,"children":1218},{},[1219,1224],{"type":46,"tag":172,"props":1220,"children":1221},{},[1222],{"type":51,"value":1223},"Reproducibility",{"type":51,"value":1225},": Same seed ALWAYS produces identical output",{"type":46,"tag":115,"props":1227,"children":1229},{"id":1228},"output-format",[1230],{"type":51,"value":1231},"OUTPUT FORMAT",{"type":46,"tag":47,"props":1233,"children":1234},{},[1235],{"type":51,"value":1236},"Output:",{"type":46,"tag":59,"props":1238,"children":1239},{},[1240,1250],{"type":46,"tag":63,"props":1241,"children":1242},{},[1243,1248],{"type":46,"tag":172,"props":1244,"children":1245},{},[1246],{"type":51,"value":1247},"Algorithmic Philosophy",{"type":51,"value":1249}," - As markdown or text explaining the generative aesthetic",{"type":46,"tag":63,"props":1251,"children":1252},{},[1253,1258,1260,1265],{"type":46,"tag":172,"props":1254,"children":1255},{},[1256],{"type":51,"value":1257},"Single HTML Artifact",{"type":51,"value":1259}," - Self-contained interactive generative art built from ",{"type":46,"tag":500,"props":1261,"children":1263},{"className":1262},[],[1264],{"type":51,"value":505},{"type":51,"value":1266}," (see STEP 0 and next section)",{"type":46,"tag":47,"props":1268,"children":1269},{},[1270],{"type":51,"value":1271},"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.",{"type":46,"tag":410,"props":1273,"children":1274},{},[],{"type":46,"tag":79,"props":1276,"children":1278},{"id":1277},"interactive-artifact-creation",[1279],{"type":51,"value":1280},"INTERACTIVE ARTIFACT CREATION",{"type":46,"tag":47,"props":1282,"children":1283},{},[1284],{"type":46,"tag":172,"props":1285,"children":1286},{},[1287,1289,1294],{"type":51,"value":1288},"REMINDER: ",{"type":46,"tag":500,"props":1290,"children":1292},{"className":1291},[],[1293],{"type":51,"value":505},{"type":51,"value":1295}," should have already been read (see STEP 0). Use that file as the starting point.",{"type":46,"tag":47,"props":1297,"children":1298},{},[1299],{"type":51,"value":1300},"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.",{"type":46,"tag":115,"props":1302,"children":1304},{"id":1303},"critical-whats-fixed-vs-variable",[1305],{"type":51,"value":1306},"CRITICAL: WHAT'S FIXED VS VARIABLE",{"type":46,"tag":47,"props":1308,"children":1309},{},[1310,1312,1317],{"type":51,"value":1311},"The ",{"type":46,"tag":500,"props":1313,"children":1315},{"className":1314},[],[1316],{"type":51,"value":505},{"type":51,"value":1318}," file is the foundation. It contains the exact structure and styling needed.",{"type":46,"tag":47,"props":1320,"children":1321},{},[1322],{"type":46,"tag":172,"props":1323,"children":1324},{},[1325],{"type":51,"value":1326},"FIXED (always include exactly as shown):",{"type":46,"tag":91,"props":1328,"children":1329},{},[1330,1335,1340,1368],{"type":46,"tag":63,"props":1331,"children":1332},{},[1333],{"type":51,"value":1334},"Layout structure (header, sidebar, main canvas area)",{"type":46,"tag":63,"props":1336,"children":1337},{},[1338],{"type":51,"value":1339},"Anthropic branding (UI colors, fonts, gradients)",{"type":46,"tag":63,"props":1341,"children":1342},{},[1343,1345],{"type":51,"value":1344},"Seed section in sidebar:\n",{"type":46,"tag":91,"props":1346,"children":1347},{},[1348,1353,1358,1363],{"type":46,"tag":63,"props":1349,"children":1350},{},[1351],{"type":51,"value":1352},"Seed display",{"type":46,"tag":63,"props":1354,"children":1355},{},[1356],{"type":51,"value":1357},"Previous\u002FNext buttons",{"type":46,"tag":63,"props":1359,"children":1360},{},[1361],{"type":51,"value":1362},"Random button",{"type":46,"tag":63,"props":1364,"children":1365},{},[1366],{"type":51,"value":1367},"Jump to seed input + Go button",{"type":46,"tag":63,"props":1369,"children":1370},{},[1371,1373],{"type":51,"value":1372},"Actions section in sidebar:\n",{"type":46,"tag":91,"props":1374,"children":1375},{},[1376,1381],{"type":46,"tag":63,"props":1377,"children":1378},{},[1379],{"type":51,"value":1380},"Regenerate button",{"type":46,"tag":63,"props":1382,"children":1383},{},[1384],{"type":51,"value":1385},"Reset button",{"type":46,"tag":47,"props":1387,"children":1388},{},[1389],{"type":46,"tag":172,"props":1390,"children":1391},{},[1392],{"type":51,"value":1393},"VARIABLE (customize for each artwork):",{"type":46,"tag":91,"props":1395,"children":1396},{},[1397,1402,1407,1435],{"type":46,"tag":63,"props":1398,"children":1399},{},[1400],{"type":51,"value":1401},"The entire p5.js algorithm (setup\u002Fdraw\u002Fclasses)",{"type":46,"tag":63,"props":1403,"children":1404},{},[1405],{"type":51,"value":1406},"The parameters object (define what the art needs)",{"type":46,"tag":63,"props":1408,"children":1409},{},[1410,1412],{"type":51,"value":1411},"The Parameters section in sidebar:\n",{"type":46,"tag":91,"props":1413,"children":1414},{},[1415,1420,1425,1430],{"type":46,"tag":63,"props":1416,"children":1417},{},[1418],{"type":51,"value":1419},"Number of parameter controls",{"type":46,"tag":63,"props":1421,"children":1422},{},[1423],{"type":51,"value":1424},"Parameter names",{"type":46,"tag":63,"props":1426,"children":1427},{},[1428],{"type":51,"value":1429},"Min\u002Fmax\u002Fstep values for sliders",{"type":46,"tag":63,"props":1431,"children":1432},{},[1433],{"type":51,"value":1434},"Control types (sliders, inputs, etc.)",{"type":46,"tag":63,"props":1436,"children":1437},{},[1438,1440],{"type":51,"value":1439},"Colors section (optional):\n",{"type":46,"tag":91,"props":1441,"children":1442},{},[1443,1448,1453,1458],{"type":46,"tag":63,"props":1444,"children":1445},{},[1446],{"type":51,"value":1447},"Some art needs color pickers",{"type":46,"tag":63,"props":1449,"children":1450},{},[1451],{"type":51,"value":1452},"Some art might use fixed colors",{"type":46,"tag":63,"props":1454,"children":1455},{},[1456],{"type":51,"value":1457},"Some art might be monochrome (no color controls needed)",{"type":46,"tag":63,"props":1459,"children":1460},{},[1461],{"type":51,"value":1462},"Decide based on the art's needs",{"type":46,"tag":47,"props":1464,"children":1465},{},[1466,1471],{"type":46,"tag":172,"props":1467,"children":1468},{},[1469],{"type":51,"value":1470},"Every artwork should have unique parameters and algorithm!",{"type":51,"value":1472}," The fixed parts provide consistent UX - everything else expresses the unique vision.",{"type":46,"tag":115,"props":1474,"children":1476},{"id":1475},"required-features",[1477],{"type":51,"value":1478},"REQUIRED FEATURES",{"type":46,"tag":47,"props":1480,"children":1481},{},[1482],{"type":46,"tag":172,"props":1483,"children":1484},{},[1485],{"type":51,"value":1486},"1. Parameter Controls",{"type":46,"tag":91,"props":1488,"children":1489},{},[1490,1495,1500,1505],{"type":46,"tag":63,"props":1491,"children":1492},{},[1493],{"type":51,"value":1494},"Sliders for numeric parameters (particle count, noise scale, speed, etc.)",{"type":46,"tag":63,"props":1496,"children":1497},{},[1498],{"type":51,"value":1499},"Color pickers for palette colors",{"type":46,"tag":63,"props":1501,"children":1502},{},[1503],{"type":51,"value":1504},"Real-time updates when parameters change",{"type":46,"tag":63,"props":1506,"children":1507},{},[1508],{"type":51,"value":1509},"Reset button to restore defaults",{"type":46,"tag":47,"props":1511,"children":1512},{},[1513],{"type":46,"tag":172,"props":1514,"children":1515},{},[1516],{"type":51,"value":1517},"2. Seed Navigation",{"type":46,"tag":91,"props":1519,"children":1520},{},[1521,1526,1531,1536,1541],{"type":46,"tag":63,"props":1522,"children":1523},{},[1524],{"type":51,"value":1525},"Display current seed number",{"type":46,"tag":63,"props":1527,"children":1528},{},[1529],{"type":51,"value":1530},"\"Previous\" and \"Next\" buttons to cycle through seeds",{"type":46,"tag":63,"props":1532,"children":1533},{},[1534],{"type":51,"value":1535},"\"Random\" button for random seed",{"type":46,"tag":63,"props":1537,"children":1538},{},[1539],{"type":51,"value":1540},"Input field to jump to specific seed",{"type":46,"tag":63,"props":1542,"children":1543},{},[1544],{"type":51,"value":1545},"Generate 100 variations when requested (seeds 1-100)",{"type":46,"tag":47,"props":1547,"children":1548},{},[1549],{"type":46,"tag":172,"props":1550,"children":1551},{},[1552],{"type":51,"value":1553},"3. Single Artifact Structure",{"type":46,"tag":640,"props":1555,"children":1559},{"className":1556,"code":1557,"language":1558,"meta":644,"style":644},"language-html shiki shiki-themes material-theme-lighter material-theme material-theme-palenight","\u003C!DOCTYPE html>\n\u003Chtml>\n\u003Chead>\n  \u003C!-- p5.js from CDN - always available -->\n  \u003Cscript src=\"https:\u002F\u002Fcdnjs.cloudflare.com\u002Fajax\u002Flibs\u002Fp5.js\u002F1.7.0\u002Fp5.min.js\">\u003C\u002Fscript>\n  \u003Cstyle>\n    \u002F* All styling inline - clean, minimal *\u002F\n    \u002F* Canvas on top, controls below *\u002F\n  \u003C\u002Fstyle>\n\u003C\u002Fhead>\n\u003Cbody>\n  \u003Cdiv id=\"canvas-container\">\u003C\u002Fdiv>\n  \u003Cdiv id=\"controls\">\n    \u003C!-- All parameter controls -->\n  \u003C\u002Fdiv>\n  \u003Cscript>\n    \u002F\u002F ALL p5.js code inline here\n    \u002F\u002F Parameter objects, classes, functions\n    \u002F\u002F setup() and draw()\n    \u002F\u002F UI handlers\n    \u002F\u002F Everything self-contained\n  \u003C\u002Fscript>\n\u003C\u002Fbody>\n\u003C\u002Fhtml>\n","html",[1560],{"type":46,"tag":500,"props":1561,"children":1562},{"__ignoreMap":644},[1563,1586,1602,1618,1626,1676,1692,1700,1708,1724,1740,1756,1803,1840,1849,1865,1881,1889,1898,1907,1916,1925,1941,1957],{"type":46,"tag":650,"props":1564,"children":1565},{"class":652,"line":653},[1566,1571,1576,1581],{"type":46,"tag":650,"props":1567,"children":1568},{"style":679},[1569],{"type":51,"value":1570},"\u003C!",{"type":46,"tag":650,"props":1572,"children":1573},{"style":783},[1574],{"type":51,"value":1575},"DOCTYPE",{"type":46,"tag":650,"props":1577,"children":1578},{"style":667},[1579],{"type":51,"value":1580}," html",{"type":46,"tag":650,"props":1582,"children":1583},{"style":679},[1584],{"type":51,"value":1585},">\n",{"type":46,"tag":650,"props":1587,"children":1588},{"class":652,"line":663},[1589,1594,1598],{"type":46,"tag":650,"props":1590,"children":1591},{"style":679},[1592],{"type":51,"value":1593},"\u003C",{"type":46,"tag":650,"props":1595,"children":1596},{"style":783},[1597],{"type":51,"value":1558},{"type":46,"tag":650,"props":1599,"children":1600},{"style":679},[1601],{"type":51,"value":1585},{"type":46,"tag":650,"props":1603,"children":1604},{"class":652,"line":701},[1605,1609,1614],{"type":46,"tag":650,"props":1606,"children":1607},{"style":679},[1608],{"type":51,"value":1593},{"type":46,"tag":650,"props":1610,"children":1611},{"style":783},[1612],{"type":51,"value":1613},"head",{"type":46,"tag":650,"props":1615,"children":1616},{"style":679},[1617],{"type":51,"value":1585},{"type":46,"tag":650,"props":1619,"children":1620},{"class":652,"line":721},[1621],{"type":46,"tag":650,"props":1622,"children":1623},{"style":657},[1624],{"type":51,"value":1625},"  \u003C!-- p5.js from CDN - always available -->\n",{"type":46,"tag":650,"props":1627,"children":1628},{"class":652,"line":823},[1629,1634,1639,1644,1648,1653,1659,1663,1668,1672],{"type":46,"tag":650,"props":1630,"children":1631},{"style":679},[1632],{"type":51,"value":1633},"  \u003C",{"type":46,"tag":650,"props":1635,"children":1636},{"style":783},[1637],{"type":51,"value":1638},"script",{"type":46,"tag":650,"props":1640,"children":1641},{"style":667},[1642],{"type":51,"value":1643}," src",{"type":46,"tag":650,"props":1645,"children":1646},{"style":679},[1647],{"type":51,"value":682},{"type":46,"tag":650,"props":1649,"children":1650},{"style":679},[1651],{"type":51,"value":1652},"\"",{"type":46,"tag":650,"props":1654,"children":1656},{"style":1655},"--shiki-light:#91B859;--shiki-default:#C3E88D;--shiki-dark:#C3E88D",[1657],{"type":51,"value":1658},"https:\u002F\u002Fcdnjs.cloudflare.com\u002Fajax\u002Flibs\u002Fp5.js\u002F1.7.0\u002Fp5.min.js",{"type":46,"tag":650,"props":1660,"children":1661},{"style":679},[1662],{"type":51,"value":1652},{"type":46,"tag":650,"props":1664,"children":1665},{"style":679},[1666],{"type":51,"value":1667},">\u003C\u002F",{"type":46,"tag":650,"props":1669,"children":1670},{"style":783},[1671],{"type":51,"value":1638},{"type":46,"tag":650,"props":1673,"children":1674},{"style":679},[1675],{"type":51,"value":1585},{"type":46,"tag":650,"props":1677,"children":1678},{"class":652,"line":832},[1679,1683,1688],{"type":46,"tag":650,"props":1680,"children":1681},{"style":679},[1682],{"type":51,"value":1633},{"type":46,"tag":650,"props":1684,"children":1685},{"style":783},[1686],{"type":51,"value":1687},"style",{"type":46,"tag":650,"props":1689,"children":1690},{"style":679},[1691],{"type":51,"value":1585},{"type":46,"tag":650,"props":1693,"children":1694},{"class":652,"line":841},[1695],{"type":46,"tag":650,"props":1696,"children":1697},{"style":657},[1698],{"type":51,"value":1699},"    \u002F* All styling inline - clean, minimal *\u002F\n",{"type":46,"tag":650,"props":1701,"children":1702},{"class":652,"line":850},[1703],{"type":46,"tag":650,"props":1704,"children":1705},{"style":657},[1706],{"type":51,"value":1707},"    \u002F* Canvas on top, controls below *\u002F\n",{"type":46,"tag":650,"props":1709,"children":1710},{"class":652,"line":859},[1711,1716,1720],{"type":46,"tag":650,"props":1712,"children":1713},{"style":679},[1714],{"type":51,"value":1715},"  \u003C\u002F",{"type":46,"tag":650,"props":1717,"children":1718},{"style":783},[1719],{"type":51,"value":1687},{"type":46,"tag":650,"props":1721,"children":1722},{"style":679},[1723],{"type":51,"value":1585},{"type":46,"tag":650,"props":1725,"children":1726},{"class":652,"line":868},[1727,1732,1736],{"type":46,"tag":650,"props":1728,"children":1729},{"style":679},[1730],{"type":51,"value":1731},"\u003C\u002F",{"type":46,"tag":650,"props":1733,"children":1734},{"style":783},[1735],{"type":51,"value":1613},{"type":46,"tag":650,"props":1737,"children":1738},{"style":679},[1739],{"type":51,"value":1585},{"type":46,"tag":650,"props":1741,"children":1742},{"class":652,"line":877},[1743,1747,1752],{"type":46,"tag":650,"props":1744,"children":1745},{"style":679},[1746],{"type":51,"value":1593},{"type":46,"tag":650,"props":1748,"children":1749},{"style":783},[1750],{"type":51,"value":1751},"body",{"type":46,"tag":650,"props":1753,"children":1754},{"style":679},[1755],{"type":51,"value":1585},{"type":46,"tag":650,"props":1757,"children":1759},{"class":652,"line":1758},12,[1760,1764,1769,1774,1778,1782,1787,1791,1795,1799],{"type":46,"tag":650,"props":1761,"children":1762},{"style":679},[1763],{"type":51,"value":1633},{"type":46,"tag":650,"props":1765,"children":1766},{"style":783},[1767],{"type":51,"value":1768},"div",{"type":46,"tag":650,"props":1770,"children":1771},{"style":667},[1772],{"type":51,"value":1773}," id",{"type":46,"tag":650,"props":1775,"children":1776},{"style":679},[1777],{"type":51,"value":682},{"type":46,"tag":650,"props":1779,"children":1780},{"style":679},[1781],{"type":51,"value":1652},{"type":46,"tag":650,"props":1783,"children":1784},{"style":1655},[1785],{"type":51,"value":1786},"canvas-container",{"type":46,"tag":650,"props":1788,"children":1789},{"style":679},[1790],{"type":51,"value":1652},{"type":46,"tag":650,"props":1792,"children":1793},{"style":679},[1794],{"type":51,"value":1667},{"type":46,"tag":650,"props":1796,"children":1797},{"style":783},[1798],{"type":51,"value":1768},{"type":46,"tag":650,"props":1800,"children":1801},{"style":679},[1802],{"type":51,"value":1585},{"type":46,"tag":650,"props":1804,"children":1806},{"class":652,"line":1805},13,[1807,1811,1815,1819,1823,1827,1832,1836],{"type":46,"tag":650,"props":1808,"children":1809},{"style":679},[1810],{"type":51,"value":1633},{"type":46,"tag":650,"props":1812,"children":1813},{"style":783},[1814],{"type":51,"value":1768},{"type":46,"tag":650,"props":1816,"children":1817},{"style":667},[1818],{"type":51,"value":1773},{"type":46,"tag":650,"props":1820,"children":1821},{"style":679},[1822],{"type":51,"value":682},{"type":46,"tag":650,"props":1824,"children":1825},{"style":679},[1826],{"type":51,"value":1652},{"type":46,"tag":650,"props":1828,"children":1829},{"style":1655},[1830],{"type":51,"value":1831},"controls",{"type":46,"tag":650,"props":1833,"children":1834},{"style":679},[1835],{"type":51,"value":1652},{"type":46,"tag":650,"props":1837,"children":1838},{"style":679},[1839],{"type":51,"value":1585},{"type":46,"tag":650,"props":1841,"children":1843},{"class":652,"line":1842},14,[1844],{"type":46,"tag":650,"props":1845,"children":1846},{"style":657},[1847],{"type":51,"value":1848},"    \u003C!-- All parameter controls -->\n",{"type":46,"tag":650,"props":1850,"children":1852},{"class":652,"line":1851},15,[1853,1857,1861],{"type":46,"tag":650,"props":1854,"children":1855},{"style":679},[1856],{"type":51,"value":1715},{"type":46,"tag":650,"props":1858,"children":1859},{"style":783},[1860],{"type":51,"value":1768},{"type":46,"tag":650,"props":1862,"children":1863},{"style":679},[1864],{"type":51,"value":1585},{"type":46,"tag":650,"props":1866,"children":1868},{"class":652,"line":1867},16,[1869,1873,1877],{"type":46,"tag":650,"props":1870,"children":1871},{"style":679},[1872],{"type":51,"value":1633},{"type":46,"tag":650,"props":1874,"children":1875},{"style":783},[1876],{"type":51,"value":1638},{"type":46,"tag":650,"props":1878,"children":1879},{"style":679},[1880],{"type":51,"value":1585},{"type":46,"tag":650,"props":1882,"children":1883},{"class":652,"line":29},[1884],{"type":46,"tag":650,"props":1885,"children":1886},{"style":657},[1887],{"type":51,"value":1888},"    \u002F\u002F ALL p5.js code inline here\n",{"type":46,"tag":650,"props":1890,"children":1892},{"class":652,"line":1891},18,[1893],{"type":46,"tag":650,"props":1894,"children":1895},{"style":657},[1896],{"type":51,"value":1897},"    \u002F\u002F Parameter objects, classes, functions\n",{"type":46,"tag":650,"props":1899,"children":1901},{"class":652,"line":1900},19,[1902],{"type":46,"tag":650,"props":1903,"children":1904},{"style":657},[1905],{"type":51,"value":1906},"    \u002F\u002F setup() and draw()\n",{"type":46,"tag":650,"props":1908,"children":1910},{"class":652,"line":1909},20,[1911],{"type":46,"tag":650,"props":1912,"children":1913},{"style":657},[1914],{"type":51,"value":1915},"    \u002F\u002F UI handlers\n",{"type":46,"tag":650,"props":1917,"children":1919},{"class":652,"line":1918},21,[1920],{"type":46,"tag":650,"props":1921,"children":1922},{"style":657},[1923],{"type":51,"value":1924},"    \u002F\u002F Everything self-contained\n",{"type":46,"tag":650,"props":1926,"children":1928},{"class":652,"line":1927},22,[1929,1933,1937],{"type":46,"tag":650,"props":1930,"children":1931},{"style":679},[1932],{"type":51,"value":1715},{"type":46,"tag":650,"props":1934,"children":1935},{"style":783},[1936],{"type":51,"value":1638},{"type":46,"tag":650,"props":1938,"children":1939},{"style":679},[1940],{"type":51,"value":1585},{"type":46,"tag":650,"props":1942,"children":1944},{"class":652,"line":1943},23,[1945,1949,1953],{"type":46,"tag":650,"props":1946,"children":1947},{"style":679},[1948],{"type":51,"value":1731},{"type":46,"tag":650,"props":1950,"children":1951},{"style":783},[1952],{"type":51,"value":1751},{"type":46,"tag":650,"props":1954,"children":1955},{"style":679},[1956],{"type":51,"value":1585},{"type":46,"tag":650,"props":1958,"children":1960},{"class":652,"line":1959},24,[1961,1965,1969],{"type":46,"tag":650,"props":1962,"children":1963},{"style":679},[1964],{"type":51,"value":1731},{"type":46,"tag":650,"props":1966,"children":1967},{"style":783},[1968],{"type":51,"value":1558},{"type":46,"tag":650,"props":1970,"children":1971},{"style":679},[1972],{"type":51,"value":1585},{"type":46,"tag":47,"props":1974,"children":1975},{},[1976,1980],{"type":46,"tag":172,"props":1977,"children":1978},{},[1979],{"type":51,"value":908},{"type":51,"value":1981},": This is a single artifact. No external files, no imports (except p5.js CDN). Everything inline.",{"type":46,"tag":47,"props":1983,"children":1984},{},[1985],{"type":46,"tag":172,"props":1986,"children":1987},{},[1988],{"type":51,"value":1989},"4. Implementation Details - BUILD THE SIDEBAR",{"type":46,"tag":47,"props":1991,"children":1992},{},[1993],{"type":51,"value":1994},"The sidebar structure:",{"type":46,"tag":47,"props":1996,"children":1997},{},[1998,2003],{"type":46,"tag":172,"props":1999,"children":2000},{},[2001],{"type":51,"value":2002},"1. Seed (FIXED)",{"type":51,"value":2004}," - Always include exactly as shown:",{"type":46,"tag":91,"props":2006,"children":2007},{},[2008,2012],{"type":46,"tag":63,"props":2009,"children":2010},{},[2011],{"type":51,"value":1352},{"type":46,"tag":63,"props":2013,"children":2014},{},[2015],{"type":51,"value":2016},"Prev\u002FNext\u002FRandom\u002FJump buttons",{"type":46,"tag":47,"props":2018,"children":2019},{},[2020,2025],{"type":46,"tag":172,"props":2021,"children":2022},{},[2023],{"type":51,"value":2024},"2. Parameters (VARIABLE)",{"type":51,"value":2026}," - Create controls for the art:",{"type":46,"tag":640,"props":2028,"children":2030},{"className":1556,"code":2029,"language":1558,"meta":644,"style":644},"\u003Cdiv class=\"control-group\">\n    \u003Clabel>Parameter Name\u003C\u002Flabel>\n    \u003Cinput type=\"range\" id=\"param\" min=\"...\" max=\"...\" step=\"...\" value=\"...\" oninput=\"updateParam('param', this.value)\">\n    \u003Cspan class=\"value-display\" id=\"param-value\">...\u003C\u002Fspan>\n\u003C\u002Fdiv>\n",[2031],{"type":46,"tag":500,"props":2032,"children":2033},{"__ignoreMap":644},[2034,2071,2106,2304,2377],{"type":46,"tag":650,"props":2035,"children":2036},{"class":652,"line":653},[2037,2041,2045,2050,2054,2058,2063,2067],{"type":46,"tag":650,"props":2038,"children":2039},{"style":679},[2040],{"type":51,"value":1593},{"type":46,"tag":650,"props":2042,"children":2043},{"style":783},[2044],{"type":51,"value":1768},{"type":46,"tag":650,"props":2046,"children":2047},{"style":667},[2048],{"type":51,"value":2049}," class",{"type":46,"tag":650,"props":2051,"children":2052},{"style":679},[2053],{"type":51,"value":682},{"type":46,"tag":650,"props":2055,"children":2056},{"style":679},[2057],{"type":51,"value":1652},{"type":46,"tag":650,"props":2059,"children":2060},{"style":1655},[2061],{"type":51,"value":2062},"control-group",{"type":46,"tag":650,"props":2064,"children":2065},{"style":679},[2066],{"type":51,"value":1652},{"type":46,"tag":650,"props":2068,"children":2069},{"style":679},[2070],{"type":51,"value":1585},{"type":46,"tag":650,"props":2072,"children":2073},{"class":652,"line":663},[2074,2079,2084,2089,2094,2098,2102],{"type":46,"tag":650,"props":2075,"children":2076},{"style":679},[2077],{"type":51,"value":2078},"    \u003C",{"type":46,"tag":650,"props":2080,"children":2081},{"style":783},[2082],{"type":51,"value":2083},"label",{"type":46,"tag":650,"props":2085,"children":2086},{"style":679},[2087],{"type":51,"value":2088},">",{"type":46,"tag":650,"props":2090,"children":2091},{"style":673},[2092],{"type":51,"value":2093},"Parameter Name",{"type":46,"tag":650,"props":2095,"children":2096},{"style":679},[2097],{"type":51,"value":1731},{"type":46,"tag":650,"props":2099,"children":2100},{"style":783},[2101],{"type":51,"value":2083},{"type":46,"tag":650,"props":2103,"children":2104},{"style":679},[2105],{"type":51,"value":1585},{"type":46,"tag":650,"props":2107,"children":2108},{"class":652,"line":701},[2109,2113,2118,2123,2127,2131,2136,2140,2144,2148,2152,2157,2161,2166,2170,2174,2179,2183,2188,2192,2196,2200,2204,2209,2213,2217,2221,2225,2230,2234,2238,2242,2246,2251,2255,2259,2264,2268,2273,2277,2282,2287,2292,2296,2300],{"type":46,"tag":650,"props":2110,"children":2111},{"style":679},[2112],{"type":51,"value":2078},{"type":46,"tag":650,"props":2114,"children":2115},{"style":783},[2116],{"type":51,"value":2117},"input",{"type":46,"tag":650,"props":2119,"children":2120},{"style":667},[2121],{"type":51,"value":2122}," type",{"type":46,"tag":650,"props":2124,"children":2125},{"style":679},[2126],{"type":51,"value":682},{"type":46,"tag":650,"props":2128,"children":2129},{"style":679},[2130],{"type":51,"value":1652},{"type":46,"tag":650,"props":2132,"children":2133},{"style":1655},[2134],{"type":51,"value":2135},"range",{"type":46,"tag":650,"props":2137,"children":2138},{"style":679},[2139],{"type":51,"value":1652},{"type":46,"tag":650,"props":2141,"children":2142},{"style":667},[2143],{"type":51,"value":1773},{"type":46,"tag":650,"props":2145,"children":2146},{"style":679},[2147],{"type":51,"value":682},{"type":46,"tag":650,"props":2149,"children":2150},{"style":679},[2151],{"type":51,"value":1652},{"type":46,"tag":650,"props":2153,"children":2154},{"style":1655},[2155],{"type":51,"value":2156},"param",{"type":46,"tag":650,"props":2158,"children":2159},{"style":679},[2160],{"type":51,"value":1652},{"type":46,"tag":650,"props":2162,"children":2163},{"style":667},[2164],{"type":51,"value":2165}," min",{"type":46,"tag":650,"props":2167,"children":2168},{"style":679},[2169],{"type":51,"value":682},{"type":46,"tag":650,"props":2171,"children":2172},{"style":679},[2173],{"type":51,"value":1652},{"type":46,"tag":650,"props":2175,"children":2176},{"style":1655},[2177],{"type":51,"value":2178},"...",{"type":46,"tag":650,"props":2180,"children":2181},{"style":679},[2182],{"type":51,"value":1652},{"type":46,"tag":650,"props":2184,"children":2185},{"style":667},[2186],{"type":51,"value":2187}," max",{"type":46,"tag":650,"props":2189,"children":2190},{"style":679},[2191],{"type":51,"value":682},{"type":46,"tag":650,"props":2193,"children":2194},{"style":679},[2195],{"type":51,"value":1652},{"type":46,"tag":650,"props":2197,"children":2198},{"style":1655},[2199],{"type":51,"value":2178},{"type":46,"tag":650,"props":2201,"children":2202},{"style":679},[2203],{"type":51,"value":1652},{"type":46,"tag":650,"props":2205,"children":2206},{"style":667},[2207],{"type":51,"value":2208}," step",{"type":46,"tag":650,"props":2210,"children":2211},{"style":679},[2212],{"type":51,"value":682},{"type":46,"tag":650,"props":2214,"children":2215},{"style":679},[2216],{"type":51,"value":1652},{"type":46,"tag":650,"props":2218,"children":2219},{"style":1655},[2220],{"type":51,"value":2178},{"type":46,"tag":650,"props":2222,"children":2223},{"style":679},[2224],{"type":51,"value":1652},{"type":46,"tag":650,"props":2226,"children":2227},{"style":667},[2228],{"type":51,"value":2229}," value",{"type":46,"tag":650,"props":2231,"children":2232},{"style":679},[2233],{"type":51,"value":682},{"type":46,"tag":650,"props":2235,"children":2236},{"style":679},[2237],{"type":51,"value":1652},{"type":46,"tag":650,"props":2239,"children":2240},{"style":1655},[2241],{"type":51,"value":2178},{"type":46,"tag":650,"props":2243,"children":2244},{"style":679},[2245],{"type":51,"value":1652},{"type":46,"tag":650,"props":2247,"children":2248},{"style":667},[2249],{"type":51,"value":2250}," oninput",{"type":46,"tag":650,"props":2252,"children":2253},{"style":679},[2254],{"type":51,"value":682},{"type":46,"tag":650,"props":2256,"children":2257},{"style":679},[2258],{"type":51,"value":1652},{"type":46,"tag":650,"props":2260,"children":2261},{"style":705},[2262],{"type":51,"value":2263},"updateParam",{"type":46,"tag":650,"props":2265,"children":2266},{"style":1655},[2267],{"type":51,"value":1066},{"type":46,"tag":650,"props":2269,"children":2270},{"style":679},[2271],{"type":51,"value":2272},"'",{"type":46,"tag":650,"props":2274,"children":2275},{"style":1655},[2276],{"type":51,"value":2156},{"type":46,"tag":650,"props":2278,"children":2279},{"style":679},[2280],{"type":51,"value":2281},"',",{"type":46,"tag":650,"props":2283,"children":2284},{"style":679},[2285],{"type":51,"value":2286}," this.",{"type":46,"tag":650,"props":2288,"children":2289},{"style":673},[2290],{"type":51,"value":2291},"value",{"type":46,"tag":650,"props":2293,"children":2294},{"style":1655},[2295],{"type":51,"value":1085},{"type":46,"tag":650,"props":2297,"children":2298},{"style":679},[2299],{"type":51,"value":1652},{"type":46,"tag":650,"props":2301,"children":2302},{"style":679},[2303],{"type":51,"value":1585},{"type":46,"tag":650,"props":2305,"children":2306},{"class":652,"line":721},[2307,2311,2315,2319,2323,2327,2332,2336,2340,2344,2348,2353,2357,2361,2365,2369,2373],{"type":46,"tag":650,"props":2308,"children":2309},{"style":679},[2310],{"type":51,"value":2078},{"type":46,"tag":650,"props":2312,"children":2313},{"style":783},[2314],{"type":51,"value":650},{"type":46,"tag":650,"props":2316,"children":2317},{"style":667},[2318],{"type":51,"value":2049},{"type":46,"tag":650,"props":2320,"children":2321},{"style":679},[2322],{"type":51,"value":682},{"type":46,"tag":650,"props":2324,"children":2325},{"style":679},[2326],{"type":51,"value":1652},{"type":46,"tag":650,"props":2328,"children":2329},{"style":1655},[2330],{"type":51,"value":2331},"value-display",{"type":46,"tag":650,"props":2333,"children":2334},{"style":679},[2335],{"type":51,"value":1652},{"type":46,"tag":650,"props":2337,"children":2338},{"style":667},[2339],{"type":51,"value":1773},{"type":46,"tag":650,"props":2341,"children":2342},{"style":679},[2343],{"type":51,"value":682},{"type":46,"tag":650,"props":2345,"children":2346},{"style":679},[2347],{"type":51,"value":1652},{"type":46,"tag":650,"props":2349,"children":2350},{"style":1655},[2351],{"type":51,"value":2352},"param-value",{"type":46,"tag":650,"props":2354,"children":2355},{"style":679},[2356],{"type":51,"value":1652},{"type":46,"tag":650,"props":2358,"children":2359},{"style":679},[2360],{"type":51,"value":2088},{"type":46,"tag":650,"props":2362,"children":2363},{"style":673},[2364],{"type":51,"value":2178},{"type":46,"tag":650,"props":2366,"children":2367},{"style":679},[2368],{"type":51,"value":1731},{"type":46,"tag":650,"props":2370,"children":2371},{"style":783},[2372],{"type":51,"value":650},{"type":46,"tag":650,"props":2374,"children":2375},{"style":679},[2376],{"type":51,"value":1585},{"type":46,"tag":650,"props":2378,"children":2379},{"class":652,"line":823},[2380,2384,2388],{"type":46,"tag":650,"props":2381,"children":2382},{"style":679},[2383],{"type":51,"value":1731},{"type":46,"tag":650,"props":2385,"children":2386},{"style":783},[2387],{"type":51,"value":1768},{"type":46,"tag":650,"props":2389,"children":2390},{"style":679},[2391],{"type":51,"value":1585},{"type":46,"tag":47,"props":2393,"children":2394},{},[2395],{"type":51,"value":2396},"Add as many control-group divs as there are parameters.",{"type":46,"tag":47,"props":2398,"children":2399},{},[2400,2405],{"type":46,"tag":172,"props":2401,"children":2402},{},[2403],{"type":51,"value":2404},"3. Colors (OPTIONAL\u002FVARIABLE)",{"type":51,"value":2406}," - Include if the art needs adjustable colors:",{"type":46,"tag":91,"props":2408,"children":2409},{},[2410,2415,2420],{"type":46,"tag":63,"props":2411,"children":2412},{},[2413],{"type":51,"value":2414},"Add color pickers if users should control palette",{"type":46,"tag":63,"props":2416,"children":2417},{},[2418],{"type":51,"value":2419},"Skip this section if the art uses fixed colors",{"type":46,"tag":63,"props":2421,"children":2422},{},[2423],{"type":51,"value":2424},"Skip if the art is monochrome",{"type":46,"tag":47,"props":2426,"children":2427},{},[2428,2433],{"type":46,"tag":172,"props":2429,"children":2430},{},[2431],{"type":51,"value":2432},"4. Actions (FIXED)",{"type":51,"value":2004},{"type":46,"tag":91,"props":2435,"children":2436},{},[2437,2441,2445],{"type":46,"tag":63,"props":2438,"children":2439},{},[2440],{"type":51,"value":1380},{"type":46,"tag":63,"props":2442,"children":2443},{},[2444],{"type":51,"value":1385},{"type":46,"tag":63,"props":2446,"children":2447},{},[2448],{"type":51,"value":2449},"Download PNG button",{"type":46,"tag":47,"props":2451,"children":2452},{},[2453,2458],{"type":46,"tag":172,"props":2454,"children":2455},{},[2456],{"type":51,"value":2457},"Requirements",{"type":51,"value":638},{"type":46,"tag":91,"props":2460,"children":2461},{},[2462,2467,2472,2477],{"type":46,"tag":63,"props":2463,"children":2464},{},[2465],{"type":51,"value":2466},"Seed controls must work (prev\u002Fnext\u002Frandom\u002Fjump\u002Fdisplay)",{"type":46,"tag":63,"props":2468,"children":2469},{},[2470],{"type":51,"value":2471},"All parameters must have UI controls",{"type":46,"tag":63,"props":2473,"children":2474},{},[2475],{"type":51,"value":2476},"Regenerate, Reset, Download buttons must work",{"type":46,"tag":63,"props":2478,"children":2479},{},[2480],{"type":51,"value":2481},"Keep Anthropic branding (UI styling, not art colors)",{"type":46,"tag":115,"props":2483,"children":2485},{"id":2484},"using-the-artifact",[2486],{"type":51,"value":2487},"USING THE ARTIFACT",{"type":46,"tag":47,"props":2489,"children":2490},{},[2491],{"type":51,"value":2492},"The HTML artifact works immediately:",{"type":46,"tag":59,"props":2494,"children":2495},{},[2496,2506,2516],{"type":46,"tag":63,"props":2497,"children":2498},{},[2499,2504],{"type":46,"tag":172,"props":2500,"children":2501},{},[2502],{"type":51,"value":2503},"In claude.ai",{"type":51,"value":2505},": Displayed as an interactive artifact - runs instantly",{"type":46,"tag":63,"props":2507,"children":2508},{},[2509,2514],{"type":46,"tag":172,"props":2510,"children":2511},{},[2512],{"type":51,"value":2513},"As a file",{"type":51,"value":2515},": Save and open in any browser - no server needed",{"type":46,"tag":63,"props":2517,"children":2518},{},[2519,2524],{"type":46,"tag":172,"props":2520,"children":2521},{},[2522],{"type":51,"value":2523},"Sharing",{"type":51,"value":2525},": Send the HTML file - it's completely self-contained",{"type":46,"tag":410,"props":2527,"children":2528},{},[],{"type":46,"tag":79,"props":2530,"children":2532},{"id":2531},"variations-exploration",[2533],{"type":51,"value":2534},"VARIATIONS & EXPLORATION",{"type":46,"tag":47,"props":2536,"children":2537},{},[2538],{"type":51,"value":2539},"The artifact includes seed navigation by default (prev\u002Fnext\u002Frandom buttons), allowing users to explore variations without creating multiple files. If the user wants specific variations highlighted:",{"type":46,"tag":91,"props":2541,"children":2542},{},[2543,2548,2553],{"type":46,"tag":63,"props":2544,"children":2545},{},[2546],{"type":51,"value":2547},"Include seed presets (buttons for \"Variation 1: Seed 42\", \"Variation 2: Seed 127\", etc.)",{"type":46,"tag":63,"props":2549,"children":2550},{},[2551],{"type":51,"value":2552},"Add a \"Gallery Mode\" that shows thumbnails of multiple seeds side-by-side",{"type":46,"tag":63,"props":2554,"children":2555},{},[2556],{"type":51,"value":2557},"All within the same single artifact",{"type":46,"tag":47,"props":2559,"children":2560},{},[2561],{"type":51,"value":2562},"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.",{"type":46,"tag":410,"props":2564,"children":2565},{},[],{"type":46,"tag":79,"props":2567,"children":2569},{"id":2568},"the-creative-process",[2570],{"type":51,"value":2571},"THE CREATIVE PROCESS",{"type":46,"tag":47,"props":2573,"children":2574},{},[2575,2580,2582,2587,2588],{"type":46,"tag":172,"props":2576,"children":2577},{},[2578],{"type":51,"value":2579},"User request",{"type":51,"value":2581}," → ",{"type":46,"tag":172,"props":2583,"children":2584},{},[2585],{"type":51,"value":2586},"Algorithmic philosophy",{"type":51,"value":2581},{"type":46,"tag":172,"props":2589,"children":2590},{},[2591],{"type":51,"value":2592},"Implementation",{"type":46,"tag":47,"props":2594,"children":2595},{},[2596],{"type":51,"value":2597},"Each request is unique. The process involves:",{"type":46,"tag":59,"props":2599,"children":2600},{},[2601,2611,2621,2631,2641],{"type":46,"tag":63,"props":2602,"children":2603},{},[2604,2609],{"type":46,"tag":172,"props":2605,"children":2606},{},[2607],{"type":51,"value":2608},"Interpret the user's intent",{"type":51,"value":2610}," - What aesthetic is being sought?",{"type":46,"tag":63,"props":2612,"children":2613},{},[2614,2619],{"type":46,"tag":172,"props":2615,"children":2616},{},[2617],{"type":51,"value":2618},"Create an algorithmic philosophy",{"type":51,"value":2620}," (4-6 paragraphs) describing the computational approach",{"type":46,"tag":63,"props":2622,"children":2623},{},[2624,2629],{"type":46,"tag":172,"props":2625,"children":2626},{},[2627],{"type":51,"value":2628},"Implement it in code",{"type":51,"value":2630}," - Build the algorithm that expresses this philosophy",{"type":46,"tag":63,"props":2632,"children":2633},{},[2634,2639],{"type":46,"tag":172,"props":2635,"children":2636},{},[2637],{"type":51,"value":2638},"Design appropriate parameters",{"type":51,"value":2640}," - What should be tunable?",{"type":46,"tag":63,"props":2642,"children":2643},{},[2644,2649],{"type":46,"tag":172,"props":2645,"children":2646},{},[2647],{"type":51,"value":2648},"Build matching UI controls",{"type":51,"value":2650}," - Sliders\u002Finputs for those parameters",{"type":46,"tag":47,"props":2652,"children":2653},{},[2654,2659],{"type":46,"tag":172,"props":2655,"children":2656},{},[2657],{"type":51,"value":2658},"The constants",{"type":51,"value":638},{"type":46,"tag":91,"props":2661,"children":2662},{},[2663,2668,2673],{"type":46,"tag":63,"props":2664,"children":2665},{},[2666],{"type":51,"value":2667},"Anthropic branding (colors, fonts, layout)",{"type":46,"tag":63,"props":2669,"children":2670},{},[2671],{"type":51,"value":2672},"Seed navigation (always present)",{"type":46,"tag":63,"props":2674,"children":2675},{},[2676],{"type":51,"value":2677},"Self-contained HTML artifact",{"type":46,"tag":47,"props":2679,"children":2680},{},[2681,2686],{"type":46,"tag":172,"props":2682,"children":2683},{},[2684],{"type":51,"value":2685},"Everything else is variable",{"type":51,"value":638},{"type":46,"tag":91,"props":2688,"children":2689},{},[2690,2695,2700,2705],{"type":46,"tag":63,"props":2691,"children":2692},{},[2693],{"type":51,"value":2694},"The algorithm itself",{"type":46,"tag":63,"props":2696,"children":2697},{},[2698],{"type":51,"value":2699},"The parameters",{"type":46,"tag":63,"props":2701,"children":2702},{},[2703],{"type":51,"value":2704},"The UI controls",{"type":46,"tag":63,"props":2706,"children":2707},{},[2708],{"type":51,"value":2709},"The visual outcome",{"type":46,"tag":47,"props":2711,"children":2712},{},[2713],{"type":51,"value":2714},"To achieve the best results, trust creativity and let the philosophy guide the implementation.",{"type":46,"tag":410,"props":2716,"children":2717},{},[],{"type":46,"tag":79,"props":2719,"children":2721},{"id":2720},"resources",[2722],{"type":51,"value":2723},"RESOURCES",{"type":46,"tag":47,"props":2725,"children":2726},{},[2727],{"type":51,"value":2728},"This skill includes helpful templates and documentation:",{"type":46,"tag":91,"props":2730,"children":2731},{},[2732,2774],{"type":46,"tag":63,"props":2733,"children":2734},{},[2735,2739,2741],{"type":46,"tag":172,"props":2736,"children":2737},{},[2738],{"type":51,"value":505},{"type":51,"value":2740},": REQUIRED STARTING POINT for all HTML artifacts.",{"type":46,"tag":91,"props":2742,"children":2743},{},[2744,2749,2759,2769],{"type":46,"tag":63,"props":2745,"children":2746},{},[2747],{"type":51,"value":2748},"This is the foundation - contains the exact structure and Anthropic branding",{"type":46,"tag":63,"props":2750,"children":2751},{},[2752,2757],{"type":46,"tag":172,"props":2753,"children":2754},{},[2755],{"type":51,"value":2756},"Keep unchanged",{"type":51,"value":2758},": Layout structure, sidebar organization, Anthropic colors\u002Ffonts, seed controls, action buttons",{"type":46,"tag":63,"props":2760,"children":2761},{},[2762,2767],{"type":46,"tag":172,"props":2763,"children":2764},{},[2765],{"type":51,"value":2766},"Replace",{"type":51,"value":2768},": The p5.js algorithm, parameter definitions, and UI controls in Parameters section",{"type":46,"tag":63,"props":2770,"children":2771},{},[2772],{"type":51,"value":2773},"The extensive comments in the file mark exactly what to keep vs replace",{"type":46,"tag":63,"props":2775,"children":2776},{},[2777,2782,2784],{"type":46,"tag":172,"props":2778,"children":2779},{},[2780],{"type":51,"value":2781},"templates\u002Fgenerator_template.js",{"type":51,"value":2783},": Reference for p5.js best practices and code structure principles.",{"type":46,"tag":91,"props":2785,"children":2786},{},[2787,2792,2797],{"type":46,"tag":63,"props":2788,"children":2789},{},[2790],{"type":51,"value":2791},"Shows how to organize parameters, use seeded randomness, structure classes",{"type":46,"tag":63,"props":2793,"children":2794},{},[2795],{"type":51,"value":2796},"NOT a pattern menu - use these principles to build unique algorithms",{"type":46,"tag":63,"props":2798,"children":2799},{},[2800],{"type":51,"value":2801},"Embed algorithms inline in the HTML artifact (don't create separate .js files)",{"type":46,"tag":47,"props":2803,"children":2804},{},[2805,2810],{"type":46,"tag":172,"props":2806,"children":2807},{},[2808],{"type":51,"value":2809},"Critical reminder",{"type":51,"value":638},{"type":46,"tag":91,"props":2812,"children":2813},{},[2814,2825,2836,2841],{"type":46,"tag":63,"props":2815,"children":2816},{},[2817,2818,2823],{"type":51,"value":1311},{"type":46,"tag":172,"props":2819,"children":2820},{},[2821],{"type":51,"value":2822},"template is the STARTING POINT",{"type":51,"value":2824},", not inspiration",{"type":46,"tag":63,"props":2826,"children":2827},{},[2828,2829,2834],{"type":51,"value":1311},{"type":46,"tag":172,"props":2830,"children":2831},{},[2832],{"type":51,"value":2833},"algorithm is where to create",{"type":51,"value":2835}," something unique",{"type":46,"tag":63,"props":2837,"children":2838},{},[2839],{"type":51,"value":2840},"Don't copy the flow field example - build what the philosophy demands",{"type":46,"tag":63,"props":2842,"children":2843},{},[2844],{"type":51,"value":2845},"But DO keep the exact UI structure and Anthropic branding from the template",{"type":46,"tag":1687,"props":2847,"children":2848},{},[2849],{"type":51,"value":2850},"html .light .shiki span {color: var(--shiki-light);background: var(--shiki-light-bg);font-style: var(--shiki-light-font-style);font-weight: var(--shiki-light-font-weight);text-decoration: var(--shiki-light-text-decoration);}html.light .shiki span {color: var(--shiki-light);background: var(--shiki-light-bg);font-style: var(--shiki-light-font-style);font-weight: var(--shiki-light-font-weight);text-decoration: var(--shiki-light-text-decoration);}html .default .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html.dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}",{"items":2852,"total":2964},[2853,2860,2877,2893,2908,2931,2948],{"slug":4,"name":4,"fn":5,"description":6,"org":2854,"tags":2855,"stars":25,"repoUrl":26,"updatedAt":27},{"slug":8,"name":9,"logoUrl":10,"githubOrg":9},[2856,2857,2858,2859],{"name":17,"slug":18,"type":15},{"name":20,"slug":21,"type":15},{"name":13,"slug":14,"type":15},{"name":23,"slug":24,"type":15},{"slug":2861,"name":2861,"fn":2862,"description":2863,"org":2864,"tags":2865,"stars":25,"repoUrl":26,"updatedAt":2876},"antfu","configure JavaScript projects with Anthony Fu's tools","Anthony Fu's opinionated tooling and conventions for JavaScript\u002FTypeScript projects. Use when setting up new projects, configuring ESLint\u002FPrettier alternatives, monorepos, library publishing, or when the user mentions Anthony Fu's preferences.",{"slug":8,"name":9,"logoUrl":10,"githubOrg":9},[2866,2869,2872,2873],{"name":2867,"slug":2868,"type":15},"Best Practices","best-practices",{"name":2870,"slug":2871,"type":15},"Engineering","engineering",{"name":23,"slug":24,"type":15},{"name":2874,"slug":2875,"type":15},"TypeScript","typescript","2026-07-13T06:43:13.153309",{"slug":2878,"name":2878,"fn":2879,"description":2880,"org":2881,"tags":2882,"stars":25,"repoUrl":26,"updatedAt":2892},"brand-guidelines","apply Anthropic brand guidelines","Applies Anthropic's official brand colors and typography to any sort of artifact that may benefit from having Anthropic's look-and-feel. Use it when brand colors or style guidelines, visual formatting, or company design standards apply.",{"slug":8,"name":9,"logoUrl":10,"githubOrg":9},[2883,2886,2889],{"name":2884,"slug":2885,"type":15},"Branding","branding",{"name":2887,"slug":2888,"type":15},"Design","design",{"name":2890,"slug":2891,"type":15},"Typography","typography","2026-07-13T06:43:06.077629",{"slug":2894,"name":2894,"fn":2895,"description":2896,"org":2897,"tags":2898,"stars":25,"repoUrl":26,"updatedAt":2907},"canvas-design","create visual art and design assets","Create beautiful visual art in .png and .pdf documents using design philosophy. You should use this skill when the user asks to create a poster, piece of art, design, or other static piece. Create original visual designs, never copying existing artists' work to avoid copyright violations.",{"slug":8,"name":9,"logoUrl":10,"githubOrg":9},[2899,2900,2901,2904],{"name":17,"slug":18,"type":15},{"name":2887,"slug":2888,"type":15},{"name":2902,"slug":2903,"type":15},"Images","images",{"name":2905,"slug":2906,"type":15},"PDF","pdf","2026-07-13T06:39:58.803113",{"slug":2909,"name":2909,"fn":2910,"description":2911,"org":2912,"tags":2913,"stars":25,"repoUrl":26,"updatedAt":2930},"ci-cd-containerization-advisor","design CI\u002FCD pipelines for Kotlin applications","Design reproducible build, image, and deployment pipelines for Kotlin plus Spring applications, including CI verification, layered containers, rollout safety, and deployment-time migration coordination. Use when creating or improving Dockerfiles, CI workflows, image hardening, Kubernetes manifests, release gates, or deployment strategies for Spring Boot services, especially where build reproducibility and operational safety matter.",{"slug":8,"name":9,"logoUrl":10,"githubOrg":9},[2914,2917,2920,2923,2924,2927],{"name":2915,"slug":2916,"type":15},"CI\u002FCD","ci-cd",{"name":2918,"slug":2919,"type":15},"Containers","containers",{"name":2921,"slug":2922,"type":15},"Deployment","deployment",{"name":2870,"slug":2871,"type":15},{"name":2925,"slug":2926,"type":15},"Kotlin","kotlin",{"name":2928,"slug":2929,"type":15},"Spring","spring","2026-07-13T06:41:47.83899",{"slug":2932,"name":2932,"fn":2933,"description":2934,"org":2935,"tags":2936,"stars":25,"repoUrl":26,"updatedAt":2947},"cloudflare-deploy","deploy applications to Cloudflare","Deploy applications and infrastructure to Cloudflare using Workers, Pages, and related platform services. Use when the user asks to deploy, host, publish, or set up a project on Cloudflare.",{"slug":8,"name":9,"logoUrl":10,"githubOrg":9},[2937,2940,2943,2946],{"name":2938,"slug":2939,"type":15},"Cloudflare","cloudflare",{"name":2941,"slug":2942,"type":15},"Cloudflare Pages","cloudflare-pages",{"name":2944,"slug":2945,"type":15},"Cloudflare Workers","cloudflare-workers",{"name":2921,"slug":2922,"type":15},"2026-07-17T06:04:42.853896",{"slug":2949,"name":2949,"fn":2950,"description":2951,"org":2952,"tags":2953,"stars":25,"repoUrl":26,"updatedAt":2963},"compose-ui-control","interact with Compose Desktop applications","Control a running Compose Desktop application via HTTP. Use when you need to interact with UI elements, click buttons, enter text, wait for elements to appear, or capture screenshots in a Compose Desktop app that has compose-ui-test-server enabled.",{"slug":8,"name":9,"logoUrl":10,"githubOrg":9},[2954,2957,2960],{"name":2955,"slug":2956,"type":15},"Automation","automation",{"name":2958,"slug":2959,"type":15},"Desktop","desktop",{"name":2961,"slug":2962,"type":15},"UI Components","ui-components","2026-07-13T06:40:38.798626",128,{"items":2966,"total":3091},[2967,2983,2992,3001,3012,3022,3031,3040,3049,3059,3068,3081],{"slug":2968,"name":2968,"fn":2969,"description":2970,"org":2971,"tags":2972,"stars":2980,"repoUrl":2981,"updatedAt":2982},"mps-aspect-accessories","configure JetBrains MPS module dependencies","Wire MPS module and model dependencies, used languages, used devkits, extended languages, runtime solutions, accessory models, and language\u002Fdependency versions. Use when adding\u002Fremoving module dependencies, importing languages or devkits into a model, declaring runtime solutions, or shipping accessory content visible to consumers without explicit import.",{"slug":8,"name":9,"logoUrl":10,"githubOrg":9},[2973,2976,2979],{"name":2974,"slug":2975,"type":15},"Architecture","architecture",{"name":2977,"slug":2978,"type":15},"Configuration","configuration",{"name":2870,"slug":2871,"type":15},1650,"https:\u002F\u002Fgithub.com\u002FJetBrains\u002FMPS","2026-07-17T06:06:57.311661",{"slug":2984,"name":2984,"fn":2985,"description":2986,"org":2987,"tags":2988,"stars":2980,"repoUrl":2981,"updatedAt":2991},"mps-aspect-actions","define and edit MPS node factories","Use when defining or editing MPS node factories (the \"actions\" aspect) — `NodeFactories` roots, per-concept `NodeFactory` setup functions that initialize a freshly created node and optionally copy data from a replaced `sampleNode`, plus the actions aspect's `CopyPasteHandlers` and `PasteWrappers` roots. Reach for this skill when a substitution, side transform, completion replacement, or `add new initialized(...)` should preserve fields from the node it is replacing, or when defaults set in a constructor are not enough.",{"slug":8,"name":9,"logoUrl":10,"githubOrg":9},[2989,2990],{"name":2974,"slug":2975,"type":15},{"name":2870,"slug":2871,"type":15},"2026-07-17T06:04:48.066901",{"slug":2993,"name":2993,"fn":2994,"description":2995,"org":2996,"tags":2997,"stars":2980,"repoUrl":2981,"updatedAt":3000},"mps-aspect-behavior","define and edit MPS concept behavior","Use when defining or editing MPS `ConceptBehavior` — per-concept methods (non-virtual \u002F virtual \u002F abstract \u002F static \u002F virtual static), constructors, virtual dispatch (MRO), super and interface-default calls (`super\u003CInterface>.method`), overriding methods from `lang.core.behavior` interfaces such as `ScopeProvider.getScope` \u002F `INamedConcept.getName` \u002F `BaseConcept.getPresentation`, calling sibling methods (`LocalBehaviorMethodCall`) and behavior methods from other aspects via `node.method(...)`. Reach for this skill whenever the task involves authoring or modifying `\u003Clang>\u002FlanguageModels\u002Fbehavior.mps`.",{"slug":8,"name":9,"logoUrl":10,"githubOrg":9},[2998,2999],{"name":2974,"slug":2975,"type":15},{"name":2870,"slug":2871,"type":15},"2026-07-13T06:45:21.757084",{"slug":3002,"name":3002,"fn":3003,"description":3004,"org":3005,"tags":3006,"stars":2980,"repoUrl":2981,"updatedAt":3011},"mps-aspect-constraints","define JetBrains MPS language constraints","Use when defining or editing MPS language constraints — property validators \u002F setters \u002F getters, referent search scopes (imperative or inherited via `ScopeProvider.getScope`), `referentSetHandler` side effects, default-scope blocks, `canBeChild` \u002F `canBeParent` \u002F `canBeAncestor` \u002F `canBeRoot` placement rules, `defaultConcreteConcept` for abstract concepts, `set \u003Cread-only>` and `{name}` aliasing, and scope helpers (`SimpleRoleScope`, `ListScope`, `CompositeScope`, `HidingByNameScope`). Reach for this skill whenever the task involves authoring or modifying `\u003Clang>\u002FlanguageModels\u002Fconstraints.mps`.",{"slug":8,"name":9,"logoUrl":10,"githubOrg":9},[3007,3008],{"name":2974,"slug":2975,"type":15},{"name":3009,"slug":3010,"type":15},"Code Analysis","code-analysis","2026-07-23T05:41:33.639365",{"slug":3013,"name":3013,"fn":3014,"description":3015,"org":3016,"tags":3017,"stars":2980,"repoUrl":2981,"updatedAt":3021},"mps-aspect-dataflow","define and debug MPS dataflow builders","Use when defining or debugging MPS dataflow builders for a concept — control\u002Fdata flow declarations that drive reachability analysis and variable-use checking. Covers DataFlowBuilderDeclaration, BuilderBlock, emit instructions (code for, jump, ifjump, label, read, write, ret, mayBeUnreachable), positions (AfterPosition, BeforePosition, LabelPosition), the jetbrains.mps.lang.dataFlow language, the NodeParameter implicit, BL+smodel usage inside builder bodies, and IBuilderMode for advanced analyses such as nullable\u002Fnon-null tracking.",{"slug":8,"name":9,"logoUrl":10,"githubOrg":9},[3018],{"name":3019,"slug":3020,"type":15},"Data Analysis","data-analysis","2026-07-13T06:45:19.114674",{"slug":3023,"name":3023,"fn":3024,"description":3025,"org":3026,"tags":3027,"stars":2980,"repoUrl":2981,"updatedAt":3030},"mps-aspect-editor","define MPS editor layouts","Use when creating or changing MPS editor definitions — the overall workflow from scaffolding a `ConceptEditorDeclaration` through componentizing reusable `EditorComponentDeclaration`s, refining cell models and cell layouts, applying style sheets and indent-layout style items, wiring smart references, leveraging inheritance via super-concepts and interfaces, inspecting (`print_node_json`, `show_node_representation`) and validating (`check_root_node_problems`). Covers `jetbrains.mps.lang.editor` cell models (`CellModel_RefNode`\u002F`CellModel_RefNodeList`\u002F`CellModel_RefCell`\u002F`CellModel_Property`\u002F`CellModel_Constant`), layout choices, and JSON blueprints for common editor shapes. For the non-layout side (action maps, keymaps, transformation\u002Fsubstitute menus) use `mps-aspect-editor-menus-and-keymaps`.",{"slug":8,"name":9,"logoUrl":10,"githubOrg":9},[3028,3029],{"name":2887,"slug":2888,"type":15},{"name":2961,"slug":2962,"type":15},"2026-07-23T05:41:56.638151",{"slug":3032,"name":3032,"fn":3033,"description":3034,"org":3035,"tags":3036,"stars":2980,"repoUrl":2981,"updatedAt":3039},"mps-aspect-editor-menus-and-keymaps","author MPS editor menus and keymaps","Use when authoring the **non-layout** parts of the MPS editor aspect — what happens when the user types, presses a key, triggers completion, pastes, or invokes a context action. Covers action maps (`CellActionMapDeclaration`), cell keymaps (`CellKeyMapDeclaration`), transformation menus (`TransformationMenu_Default` \u002F `_Named` \u002F `_Contribution`), substitute menus (`SubstituteMenu_Default` \u002F `SubstituteMenu` \u002F contributions), side transforms (LEFT\u002FRIGHT), legacy cell menus, paste wrappers and copy-paste handlers (in the actions language), completion styling, reference presentation, two-step deletion, and the editor selection API. Trigger terms: `actionMap`, `keyMap`, `delete_action_id`, `transformationMenu`, `substituteMenu`, `Ctrl+Space`, `Ctrl+Alt+B`, side transform, paste wrapper, completion styling, `PasteWrappers`, `CopyPasteHandlers`. For the **layout** side (cells, layouts, style sheets) use `mps-aspect-editor` instead.",{"slug":8,"name":9,"logoUrl":10,"githubOrg":9},[3037,3038],{"name":2870,"slug":2871,"type":15},{"name":2961,"slug":2962,"type":15},"2026-07-23T05:41:49.666535",{"slug":3041,"name":3041,"fn":3042,"description":3043,"org":3044,"tags":3045,"stars":2980,"repoUrl":2981,"updatedAt":3048},"mps-aspect-generation-plan","modify MPS generation plans","Use when defining or modifying an MPS generation plan — explicit ordering of generators, checkpoints for cross-model reference resolution, forks for parallel branches, IncludePlan composition, conditional PlanContribution activation, ParameterEquals\u002FConceptListSelector fork selectors, and InitModelAttributes for targetFacet routing. Apply when working with @genplan models, the jetbrains.mps.lang.generator.plan language, attaching plans via DevKits or the Custom generation facet, or debugging cross-model mapping label resolution.",{"slug":8,"name":9,"logoUrl":10,"githubOrg":9},[3046,3047],{"name":2974,"slug":2975,"type":15},{"name":2870,"slug":2871,"type":15},"2026-07-13T06:44:59.507855",{"slug":3050,"name":3050,"fn":3051,"description":3052,"org":3053,"tags":3054,"stars":2980,"repoUrl":2981,"updatedAt":3058},"mps-aspect-generator","define JetBrains MPS generator rules","Use when defining or modifying MPS generators — author a generator module, add or edit root\u002Freduction\u002Fweaving\u002Fpattern mapping rules, attach template macros ($COPY_SRC, $LOOP, $IF, $PROPERTY, $REF, $SWITCH, $MAP_SRC, $WEAVE, $INSERT, $LABEL, $TRACE, $VAR), wire mapping labels, build template switches, write pre\u002Fpost mapping scripts, navigate `genContext`, or debug \"rule didn't fire\", missing references, empty output, infinite reduction loops, and generated-Java compile failures.",{"slug":8,"name":9,"logoUrl":10,"githubOrg":9},[3055,3056,3057],{"name":2974,"slug":2975,"type":15},{"name":3009,"slug":3010,"type":15},{"name":2870,"slug":2871,"type":15},"2026-07-17T06:06:58.042999",{"slug":3060,"name":3060,"fn":3061,"description":3062,"org":3063,"tags":3064,"stars":2980,"repoUrl":2981,"updatedAt":3067},"mps-aspect-intentions","define and edit MPS intentions","Use when defining or editing MPS intentions (the Alt+Enter context-action aspect) — adding `IntentionDeclaration` roots, parameterized or surround-with variants, description\u002FisApplicable\u002Fexecute blocks, child-filter functions, factory-initialized AST splicing, or debugging why an intention is not offered. Lives in the language's `intentions` model and uses `jetbrains.mps.lang.intentions`.",{"slug":8,"name":9,"logoUrl":10,"githubOrg":9},[3065,3066],{"name":2974,"slug":2975,"type":15},{"name":2870,"slug":2871,"type":15},"2026-07-23T05:41:48.692899",{"slug":3069,"name":3069,"fn":3070,"description":3071,"org":3072,"tags":3073,"stars":2980,"repoUrl":2981,"updatedAt":3080},"mps-aspect-migrations","author and debug MPS migration scripts","Use when authoring or debugging MPS migration scripts that upgrade user models after a language definition changes — covers jetbrains.mps.lang.migration (MigrationScript class-based, PureMigrationScript declarative, MoveConcept\u002FMoveContainmentLink\u002FMoveReferenceLink\u002FMoveProperty, ordering via OrderDependency, data exchange via putData\u002FgetData, RefactoringLog, ConceptMigrationReference) and jetbrains.mps.lang.script Enhancement Scripts (MigrationScript with MigrationScriptPart_Instance, ExtractInterfaceMigration, FactoryMigrationScriptPart, CommentMigrationScriptPart) — when a model needs version-gated upgrade, concept rename or removal, link or property rename, instance-level transformation, or composition of migration steps.",{"slug":8,"name":9,"logoUrl":10,"githubOrg":9},[3074,3077],{"name":3075,"slug":3076,"type":15},"Debugging","debugging",{"name":3078,"slug":3079,"type":15},"Migration","migration","2026-07-13T06:45:20.372122",{"slug":3082,"name":3082,"fn":3083,"description":3084,"org":3085,"tags":3086,"stars":2980,"repoUrl":2981,"updatedAt":3090},"mps-aspect-structure-concepts","define concepts in MPS structure aspect","Define concepts, interface concepts, enumerations, and constrained data types in an MPS language's `structure` aspect. Covers smart-reference detection, alias rules, cardinality, INamedConcept usage, bulk creation, and the full `mps_mcp_alter_structure` \u002F `mps_mcp_query_structure` reference. Use when authoring or modifying a language's structure model.",{"slug":8,"name":9,"logoUrl":10,"githubOrg":9},[3087],{"name":3088,"slug":3089,"type":15},"Data Modeling","data-modeling","2026-07-23T05:41:30.705975",188]