[{"_1":2,"_3":-5,"_4":-5},"loaderData",{"_5":6,"_7":8,"_9":10},"actionData","errors","root",{"_1671":1672,"_1673":1674},"routes/_app.x.$handle.$name",{"_11":12,"_13":14,"_15":-7,"_18":19,"_17":-7,"_1220":-5,"_20":1221,"_22":1222,"_1223":1224,"_1225":1226,"_26":1227,"_24":1228,"_1229":-5,"_1230":-5,"_1231":54,"_1232":1233,"_1234":46,"_1235":-5,"_1236":-5,"_1237":1238},"routes/_app.x.$handle.$name.code.$",{"_11":12,"_13":14,"_15":16,"_17":-7,"_18":19,"_20":21,"_22":23,"_24":25,"_26":27,"_28":-5,"_29":-5,"_30":-5,"_31":-5,"_32":-5},"handle","dcm31","name","skillbook","branchName","main","version","path","skills/anthropic/algorithmic-art","project",{"_34":1165,"_13":14,"_47":1166,"_1167":-5,"_1168":54,"_1169":1170,"_1171":1170,"_1172":1173,"_1174":-5,"_1175":1176,"_1177":76,"_1178":46,"_1179":-5,"_1180":-5,"_1181":1138,"_1182":1183,"_1184":-5,"_1185":-5,"_1186":-5,"_1187":-5,"_1188":1189,"_1190":1189,"_1191":1192,"_1193":1192,"_1194":1192,"_1195":1189,"_1196":1189,"_1197":1198,"_1199":1200,"_1201":1202,"_1203":54},"tree",[67,68,69,70,71,72,73],"file",{"_34":60,"_41":42,"_37":40,"_13":59,"_51":-5,"_50":61,"_17":62,"_39":63,"_47":64,"_43":65,"_55":-5,"_18":66},"contents",[33],"upstream","pull","ahead","behind","envVars",{"_34":35,"_13":36,"_37":38,"_39":40,"_41":42,"_43":44,"_45":46,"_47":48,"_17":49,"_50":24,"_51":52,"_53":54,"_55":-5,"_18":56},"id","c6c862c0-5974-11f1-b3e1-ee650bb23af1","SKILL.md","fileId","c6c86388-5974-11f1-b3e1-ee650bb23af1","parentId","c662890a-5974-11f1-9c4b-ee650bb23af1","branchId","a265a3e8-5924-11f1-b614-ee650bb23af1","branchVersion",92,"latest",true,"createdAt",["D",1779849351122],0,"fileType","content","---\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\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/generative 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\" / \"Quantum Harmonics\" / \"Emergent Stillness\"\n\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/viewer.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/fonts, 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/Lora fonts, light colors, gradient backdrop)\n- ✅ Maintain the sidebar layout (Seed → Parameters → Colors? → Actions)\n- ✅ Replace only the p5.js algorithm and parameter controls\n\nThe template is the foundation. Build on it, don't rebuild it.\n\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// ALWAYS use a seed for reproducibility\nlet seed = 12345; // 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, // Always include seed for reproducibility\n // colors\n // Add parameters that control YOUR algorithm:\n // - Quantities (how many?)\n // - Scales (how big? how fast?)\n // - Probabilities (how likely?)\n // - Ratios (what proportions?)\n // - Angles (what direction?)\n // - Thresholds (when does behavior change?)\n};\n```\n\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 // Initialize your system\n}\n\nfunction draw() {\n // Your generative algorithm\n // 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/viewer.html` (see STEP 0 and next section)\n\nThe HTML artifact contains everything: p5.js (from CDN), the algorithm, parameter controls, and UI - all in one file that works immediately in claude.ai artifacts or any browser. Start from the template file, not from scratch.\n\n---\n\n## INTERACTIVE ARTIFACT CREATION\n\n**REMINDER: `templates/viewer.html` should have already been read (see STEP 0). Use that file as the starting point.**\n\nTo allow exploration of the generative art, create a single, self-contained HTML artifact. Ensure this artifact works immediately in claude.ai or any browser - no setup required. Embed everything inline.\n\n### CRITICAL: WHAT'S FIXED VS VARIABLE\n\nThe `templates/viewer.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/Next 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/draw/classes)\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/max/step 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\n\n\n \n \n \n\n\n

\n \n

\n \n\n\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/Next/Random/Jump buttons\n\n**2. Parameters (VARIABLE)** - Create controls for the art:\n```html\n

\n Parameter Name\n \n ...\n

\n```\nAdd as many control-group divs as there are parameters.\n\n**3. Colors (OPTIONAL/VARIABLE)** - 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/next/random/jump/display)\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/next/random 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/inputs 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/viewer.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/fonts, 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/generator_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","deleted",false,"label",[57,58,59,36],"skills","anthropic","algorithmic-art","043c08ea-2631-4f1e-b7ff-131a95ef7924","directory",2,"a9be6256-6676-11f1-8293-1607ee4eb77e",["D",1781279544411],207,[57,58,59],{"_34":1150,"_13":1151,"_37":1152,"_39":-5,"_41":42,"_43":62,"_45":46,"_47":1153,"_17":49,"_50":61,"_51":-5,"_53":54,"_55":-5,"_82":1154,"_18":1155},{"_34":1125,"_13":414,"_37":1126,"_39":-5,"_41":42,"_43":1127,"_45":46,"_47":1128,"_17":49,"_50":61,"_51":-5,"_53":54,"_55":-5,"_82":1129,"_18":1130},{"_34":158,"_13":57,"_37":159,"_39":-5,"_41":42,"_43":160,"_45":46,"_47":161,"_17":49,"_50":61,"_51":-5,"_53":54,"_55":-5,"_82":162,"_18":163},{"_34":131,"_13":132,"_37":133,"_39":-5,"_41":42,"_43":134,"_45":46,"_47":135,"_17":49,"_50":61,"_51":-5,"_53":54,"_55":-5,"_82":136,"_18":137},{"_34":94,"_13":95,"_37":96,"_39":-5,"_41":42,"_43":97,"_45":46,"_47":98,"_17":49,"_50":61,"_51":-5,"_53":54,"_55":-5,"_82":99,"_18":100},{"_34":85,"_13":86,"_37":87,"_39":-5,"_41":42,"_43":88,"_45":46,"_47":89,"_17":90,"_50":24,"_51":91,"_53":54,"_55":-5,"_82":92,"_18":93},{"_34":74,"_13":75,"_37":76,"_39":-5,"_41":42,"_43":77,"_45":46,"_47":78,"_17":79,"_50":80,"_51":81,"_53":54,"_55":14,"_82":83,"_18":84},"7b8f1dd0-d457-4dcb-a21d-6027d270775a","main.tsx","a2693198-5924-11f1-b614-ee650bb23af1",273,["D",1781280444493],24,"http","// skillbook — interactive trading-card view of an agent skill repo.\n//\n// Tariq's frame: \"HTML is the new markdown.\" Agents are happy with terse\n// markdown. Humans want richer, more spatial, more alive formats. So the\n// data layer stays markdown (the agent reads it verbatim) and the human\n// view layers HTML on top. Same source, two faces.\n//\n// File layout mirrors a traditional skill repo — see data/loader.ts.\n\nimport { Hono } from \"npm:hono@4\";\nimport {\n parseVal,\n readFile,\n serveFile,\n} from \"https://esm.town/v/std/utils/index.ts\";\nimport { blob } from \"https://esm.town/v/std/blob\";\nimport { loadSkills } from \"./data/loader.ts\";\n\nconst SLUG_RE = /^[a-z0-9_-]+$/;\nconst FILE_RE = /^[a-z0-9_.-]+$/;\n\nconst app = new Hono();\napp.onError((err) => Promise.reject(err));\n\nasync function pageHtml() {\n const projectUrl = parseVal().links.self.val;\n return (await readFile(\"/static/index.html\", import.meta.url))\n .replaceAll(\"__VAL_PROJECT_URL__\", projectUrl)\n .replaceAll(\"__VAL_CODE_URL__\", `${projectUrl}/code`);\n}\n\napp.get(\"/\", async (c) => c.html(await pageHtml()));\n\napp.get(\"/static/:file\", (c) => serveFile(`/static/${c.req.param(\"file\")}`, import.meta.url));\n\napp.get(\"/api/skills\", async (c) => c.json(await loadSkills()));\n\napp.get(\"/api/skills/:slug\", async (c) => {\n const slug = c.req.param(\"slug\");\n const skills = await loadSkills();\n const skill = skills.find((s) => s.slug === slug);\n if (!skill) return c.json({ error: \"not found\" }, 404);\n return c.json(skill);\n});\n\napp.get(\"/api/skills/:group/:slug\", async (c) => {\n const slug = `${c.req.param(\"group\")}/${c.req.param(\"slug\")}`;\n const skills = await loadSkills();\n const skill = skills.find((s) => s.slug === slug);\n if (!skill) return c.json({ error: \"not found\" }, 404);\n return c.json(skill);\n});\n\n// Raw-file routes — what an agent would actually read off disk.\napp.get(\"/raw/:slug/SKILL.md\", (c) => {\n const slug = c.req.param(\"slug\");\n if (!SLUG_RE.test(slug)) return c.text(\"bad slug\", 400);\n return serveFile(`/skills/${slug}/SKILL.md`, import.meta.url);\n});\n\napp.get(\"/raw/:slug/memories/:file\", (c) => {\n const slug = c.req.param(\"slug\");\n const file = c.req.param(\"file\");\n if (!SLUG_RE.test(slug) || !FILE_RE.test(file) || !file.endsWith(\".md\")) {\n return c.text(\"bad path\", 400);\n }\n return serveFile(`/skills/${slug}/memories/${file}`, import.meta.url);\n});\n\napp.get(\"/raw/:slug/templates/:file\", (c) => {\n const slug = c.req.param(\"slug\");\n const file = c.req.param(\"file\");\n if (!SLUG_RE.test(slug) || !FILE_RE.test(file)) {\n return c.text(\"bad path\", 400);\n }\n return serveFile(`/skills/${slug}/templates/${file}`, import.meta.url);\n});\n\napp.get(\"/raw/:slug/scripts/:file\", (c) => {\n const slug = c.req.param(\"slug\");\n const file = c.req.param(\"file\");\n if (!SLUG_RE.test(slug) || !FILE_RE.test(file)) {\n return c.text(\"bad path\", 400);\n }\n return serveFile(`/skills/${slug}/scripts/${file}`, import.meta.url);\n});\n\n// Grouped skills live one folder deeper (skills///…) and their\n// slugs contain the slash, e.g. \"valtown/http-endpoints\".\napp.get(\"/raw/:group/:slug/SKILL.md\", (c) => {\n const group = c.req.param(\"group\");\n const slug = c.req.param(\"slug\");\n if (!SLUG_RE.test(group) || !SLUG_RE.test(slug)) return c.text(\"bad slug\", 400);\n return serveFile(`/skills/${group}/${slug}/SKILL.md`, import.meta.url);\n});\n\napp.get(\"/raw/:group/:slug/memories/:file\", (c) => {\n const group = c.req.param(\"group\");\n const slug = c.req.param(\"slug\");\n const file = c.req.param(\"file\");\n if (!SLUG_RE.test(group) || !SLUG_RE.test(slug) || !FILE_RE.test(file) || !file.endsWith(\".md\")) {\n return c.text(\"bad path\", 400);\n }\n return serveFile(`/skills/${group}/${slug}/memories/${file}`, import.meta.url);\n});\n\napp.get(\"/raw/:group/:slug/templates/:file\", (c) => {\n const group = c.req.param(\"group\");\n const slug = c.req.param(\"slug\");\n const file = c.req.param(\"file\");\n if (!SLUG_RE.test(group) || !SLUG_RE.test(slug) || !FILE_RE.test(file)) {\n return c.text(\"bad path\", 400);\n }\n return serveFile(`/skills/${group}/${slug}/templates/${file}`, import.meta.url);\n});\n\napp.get(\"/raw/:group/:slug/scripts/:file\", (c) => {\n const group = c.req.param(\"group\");\n const slug = c.req.param(\"slug\");\n const file = c.req.param(\"file\");\n if (!SLUG_RE.test(group) || !SLUG_RE.test(slug) || !FILE_RE.test(file)) {\n return c.text(\"bad path\", 400);\n }\n return serveFile(`/skills/${group}/${slug}/scripts/${file}`, import.meta.url);\n});\n\n// Card art. Public requests only read cached blob art or receive a fast SVG fallback.\n// New OpenAI generations require ART_ADMIN_TOKEN.\nconst LEGACY_BLOB_PREFIX = \"skill-binder/art/openai-v2\";\nconst GENERATED_BLOB_PREFIX = \"skillbook/art/openai-webp-v1\";\n\nfunction svgEscape(value: string) { return value.replaceAll(\"&\", \"&\").replaceAll(\"<\", \"<\").replaceAll(\">\", \">\").replaceAll('\"', \""\"); }\nfunction hashString(value: string) { let hash = 2166136261; for (let i = 0; i < value.length; i++) { hash ^= value.charCodeAt(i); hash = Math.imul(hash, 16777619); } return hash >>> 0; }\nfunction imagePrompt(skill: Awaited>[number]) { return [skill.artPrompt, skill.deck === \"Anthropic Skills\" ? \"Shared theme: warm parchment, charcoal ink, muted orange accent, blue and green details, handcrafted codex, atelier light.\" : skill.deck === \"Val Town Skills\" ? \"Shared theme: a lamplit riverside township of small workshops, whitewashed plaster, deep cobalt blue rooftops and accents, warm lantern glow, handcrafted miniature world.\" : \"\", \"Painted collectible fantasy card illustration with traditional brushwork, tactile paper-era art direction.\", \"Avoid modern UI, computer screens, app windows, keyboards, terminal text, logos, typography, letters, numbers, watermarks, borders, and captions.\", \"Square artwork crop, centered subject, strong silhouette.\"].filter(Boolean).join(\" \"); }\nfunction base64ToBytes(value: string) { const binary = atob(value); const bytes = new Uint8Array(binary.length); for (let i = 0; i < binary.length; i++) bytes[i] = binary.charCodeAt(i); return bytes; }\nfunction fallbackArt(skill: Awaited>[number]) { const h = hashString(skill.slug); const a = skill.deck === \"Anthropic Skills\"; const ps = a ? [[\"#faf9f5\",\"#e8e6dc\",\"#d97757\",\"#141413\"],[\"#f5eee1\",\"#b0aea5\",\"#6a9bcc\",\"#141413\"],[\"#f8f1df\",\"#d8c7a3\",\"#788c5d\",\"#2b261f\"]] : skill.deck === \"Val Town Skills\" ? [[\"#f6fbff\",\"#bcd4e6\",\"#2f6fb2\",\"#122a44\"],[\"#eef6fc\",\"#9fc1d8\",\"#1d4e89\",\"#0d1f33\"],[\"#f2f8fd\",\"#c9dcea\",\"#3f7fbf\",\"#16304f\"]] : [[\"#efe2bd\",\"#b9965c\",\"#5f7b4a\",\"#241a12\"],[\"#e8d9b8\",\"#7f9ca9\",\"#d9b76a\",\"#20150d\"],[\"#f0d789\",\"#a3543f\",\"#263f2d\",\"#1b130d\"]]; const p = ps[h % ps.length]; const name = svgEscape(skill.name); const sub = svgEscape(skill.type.replace(/^Skill - /, \"\").replace(/^Skill — /, \"\")); const sig = [\"◆\",\"✦\",\"◇\",\"✧\",\"✶\"][h % 5]; return ''; }\nasync function cachedArt(slug: string) { try { const webp = await blob.get(GENERATED_BLOB_PREFIX + \"/\" + slug + \".webp\"); if (webp?.ok) { const buf = await webp.arrayBuffer(); if (buf.byteLength > 0) return new Response(buf, { headers: { \"content-type\": \"image/webp\", \"cache-control\": \"public, max-age=604800, immutable\" } }); } } catch {} try { const png = await blob.get(LEGACY_BLOB_PREFIX + \"/\" + slug + \".png\"); if (png?.ok) { const buf = await png.arrayBuffer(); if (buf.byteLength > 0) return new Response(buf, { headers: { \"content-type\": \"image/png\", \"cache-control\": \"public, max-age=604800, immutable\" } }); } } catch {} return null; }\nasync function artResponse(c: any, slug: string) { const skills = await loadSkills(); const skill = skills.find((s) => s.slug === slug); if (!skill) return c.text(\"not found\", 404); try { const cached = await cachedArt(slug); if (cached) return cached; } catch {} return c.body(fallbackArt(skill), 200, { \"content-type\": \"image/svg+xml; charset=utf-8\", \"cache-control\": \"public, max-age=300\" }); } // fallback is short-cached so freshly generated art replaces it within minutes, not a week\napp.get(\"/art/:slug\", (c) => { const slug = c.req.param(\"slug\"); if (!SLUG_RE.test(slug)) return c.text(\"bad slug\", 400); return artResponse(c, slug); });\napp.get(\"/art/:group/:slug\", (c) => { const group = c.req.param(\"group\"); const slug = c.req.param(\"slug\"); if (!SLUG_RE.test(group) || !SLUG_RE.test(slug)) return c.text(\"bad slug\", 400); return artResponse(c, `${group}/${slug}`); });\napp.get(\"/admin/generate-art/:slug\", async (c) => { const slug = c.req.param(\"slug\"); if (!SLUG_RE.test(slug)) return c.text(\"bad slug\", 400); const admin = Deno.env.get(\"ART_ADMIN_TOKEN\"); if (!admin || c.req.header(\"x-skillbook-art-admin\") !== admin) return c.text(\"not found\", 404); const skills = await loadSkills(); const skill = skills.find((s) => s.slug === slug); if (!skill) return c.text(\"not found\", 404); const cached = await cachedArt(slug); if (cached && c.req.query(\"force\") !== \"1\") return cached; const OPENAI_API_KEY = Deno.env.get(\"SKILLBOOK_OPENAI_API_KEY\") ?? Deno.env.get(\"OPENAI_API_KEY\"); if (!OPENAI_API_KEY) return c.text(\"art key missing\", 503); const result = await fetch(\"https://api.openai.com/v1/images/generations\", { method: \"POST\", headers: { \"authorization\": \"Bearer \" + OPENAI_API_KEY, \"content-type\": \"application/json\" }, body: JSON.stringify({ model: \"gpt-image-1-mini\", prompt: imagePrompt(skill), size: \"1024x1024\", quality: \"low\", n: 1, output_format: \"webp\" }) }); const json = await result.json(); if (!result.ok) { console.error(\"openai image generation failed\", json); return c.text(\"image generation error\", 502); } const b64 = json?.data?.[0]?.b64_json; if (!b64) return c.text(\"no image in OpenAI response\", 502); const bytes = base64ToBytes(b64); await blob.set(GENERATED_BLOB_PREFIX + \"/\" + slug + \".webp\", bytes); return new Response(bytes, { headers: { \"content-type\": \"image/webp\", \"cache-control\": \"public, max-age=604800, immutable\" } }); });\n\napp.get(\"/source\", (c) => c.redirect(parseVal().links.self.val));\n\n// Deck pages — every deck is browsable at its own path (/valtown, /anthropic,\n// /skillbook). Registered last; Hono's static-over-dynamic precedence keeps\n// /source, /api, /raw, /art, /static out of its way.\napp.get(\"/:deckSlug\", async (c) => {\n const deckSlug = c.req.param(\"deckSlug\");\n if (!SLUG_RE.test(deckSlug)) return c.text(\"not found\", 404);\n const skills = await loadSkills();\n if (!skills.some((s) => s.deckSlug === deckSlug)) return c.text(\"not found\", 404);\n return c.html(await pageHtml());\n});\n\nexport default app.fetch;\n","children",[],[75],"ea96cc1a-b3ac-4119-97ea-98fc6f7e8fb2","README.md","6208b168-5925-11f1-9516-ee650bb23af1",279,["D",1781280508714],10,"# skillbook\n\nA trading-card view of an agent skill repo.\n\n**Live:** [/](/) · **Raw JSON the agent reads:** [/api/skills](/api/skills) · **Raw SKILL.md:** [/raw/daily-standup/SKILL.md](/raw/daily-standup/SKILL.md)\n\n## Why\n\nInspired by [Thariq's \"HTML is the new markdown\"](https://x.com/trq212/status/2052811606032269638). Agent skills today are just folders of markdown files — fine for the agent, bleak for the human looking at their own library. The data layer should stay markdown (so the agent picks up edits next session); the human view can be anything HTML lets you build.\n\nSo this val *is* a skill repo, with a card-binder UI on top:\n\n- **Agent face:** read `skills//SKILL.md`, `skills//memories/*.md`, etc. directly. Routes at `/raw/...` expose them with the right content-type.\n- **Human face:** painted fantasy trading cards — front shows what the skill does + how to invoke it + flavor text. Flip to read the full SKILL.md, drag to reorder, search by trigger phrase. Memories sit on the back as stickers; card gems mark setup cost; Lv 7+ cards get the gold foil treatment. Click `open` on the back to open a full-width view at proper reading width. Every deck also gets its own page at `/` (`/valtown`, `/anthropic`, `/skillbook`) — deck headings link there.\n- **Color** is per-card vibe, not a strict color system. Have fun with each card individually.\n- **Card art:** OpenAI image generation from a per-skill prompt, cached in blob storage so each card costs one generation. Set `OPENAI_API_KEY` to enable; without it cards show a framed paper placeholder.\n\n## Layout\n\nThe `skills/` directory mirrors the standard skill-repo shape so an agent could read this val unchanged:\n\n```\nskills/\n _index.json <- binder-only card metadata (color, art prompt, level, deck — cards group into one section per deck)\n daily-standup/\n SKILL.md ← YAML frontmatter (name, description, triggers) + markdown body\n memories/\n feedback_group_by_thread.md ← per-memory file, frontmatter typed\n project_q2_focus.md\n feedback_plain_prose.md\n templates/\n standup_message.md\n blocker_nudge.md\n scripts/ ← optional helper scripts\n inbox-zero/\n pr-review/\n anthropic/ ← imported decks get their own folder;\n xlsx/ the slug is the full path (\"anthropic/xlsx\")\n pdf/\n ...\n valtown/\n http-endpoints/\n sqlite-storage/\n ...\n```\n\nThe only non-standard piece is `skills/_index.json`, which carries the *presentational* metadata the agent doesn't need (mana cost, art prompt, card color, mock level/invocation stats). An agent that doesn't know about it just ignores it.\n\n## Files\n\n- `main.tsx` — Hono server. Page shell, JSON API, raw-file routes per skill, OpenAI art route.\n- `data/loader.ts` — walks `skills/`, parses frontmatter, assembles `Skill[]`.\n- `static/index.html` — page shell + card template + modal markup.\n- `static/client.js` — vanilla JS: fetches, renders, flip / drag / search / shuffle / expand modal.\n\n## Remix it for your own skills\n\n1. Replace the demo `skills//` folders with your own. Use `name`, `description`, `triggers` in `SKILL.md` frontmatter.\n2. Update `skills/_index.json` with one entry per skill (color, art prompt, mana cost, etc.).\n3. Set `OPENAI_API_KEY` if you want art generation.\n4. The agent stays happy — it reads the markdown verbatim. The binder updates on its own.\n\nThe live page includes a Val Town remix banner that points back to this val's project page, where visitors can use Val Town's Remix button.\n\n## Not included on purpose\n\n- No persistence for UI state. Drag-reorder and shuffle are session-only. Adding sqlite or a save-back-to-disk pattern is the v2 move.\n- No editing — stickers are read-only here. The \"edit a memory in place and round-trip to `feedback_*.md`\" interaction would feel great but pulls in conflict resolution.\n- No auth — public template. Fork it and add `oauthMiddleware` if your skill content is private.\n",[],[86],"26409fec-5925-11f1-aa26-ee650bb23af1","static","50efcf7d-70b5-49fc-a445-557da8021c74",4,["D",1779815151548],[101,102,103],[95],{"_34":121,"_13":122,"_37":123,"_39":96,"_41":42,"_43":124,"_45":46,"_47":125,"_17":126,"_50":127,"_51":128,"_53":54,"_55":-5,"_82":129,"_18":130},{"_34":113,"_13":114,"_37":115,"_39":96,"_41":42,"_43":116,"_45":46,"_47":117,"_17":49,"_50":24,"_51":118,"_53":54,"_55":-5,"_82":119,"_18":120},{"_34":104,"_13":105,"_37":106,"_39":96,"_41":42,"_43":107,"_45":46,"_47":108,"_17":109,"_50":24,"_51":110,"_53":54,"_55":-5,"_82":111,"_18":112},"3c61b33b-86fc-4c81-a7b9-52a60ece61b0","index.html","2640535c-5925-11f1-aa26-ee650bb23af1",339,["D",1781296694700],32,"\n\n\n \n \n Skillbook\n \n \n \n \n\n\n \n

Skillbook

SKILLS.md meets MTG

\n \n \n

\n\n

\n\n \n\n \n\n \n \n\n\n",[],[95,105],"83fb0fcf-9d71-4ba8-a496-94828d6d3c35","favicon.svg","b0487d96-669e-11f1-89a3-1607ee4eb77e",340,["D",1781296717349],"\n",[],[95,114],"e65ce350-a92a-45f7-a1c3-b1a9d9c641b2","client.js","37b85f62-5925-11f1-8789-ee650bb23af1",336,["D",1781296505709],29,"script","import { marked } from \"https://esm.sh/marked@12\";\n\nconst COLOR_BG = {\n blue: \"card-bg-blue\",\n white: \"card-bg-white\",\n red: \"card-bg-red\",\n black: \"card-bg-black\",\n green: \"card-bg-green\",\n gold: \"card-bg-gold\",\n anthropic: \"card-bg-anthropic\",\n valtown: \"card-bg-valtown\",\n};\n\nconst STICKER_CLASS = {\n feedback: \"bg-yellow-100 border-yellow-500 text-yellow-900\",\n project: \"bg-sky-100 border-sky-500 text-sky-900\",\n reference: \"bg-emerald-100 border-emerald-500 text-emerald-900\",\n user: \"bg-pink-100 border-pink-500 text-pink-900\",\n};\n\nconst binder = document.getElementById(\"binder\");\nconst tmpl = document.getElementById(\"card-template\");\nconst search = document.getElementById(\"search\");\nconst shuffleBtn = document.getElementById(\"shuffle\");\nconst modal = document.getElementById(\"modal\");\nconst modalPanel = document.getElementById(\"modal-panel\");\nconst modalClose = document.getElementById(\"modal-close\");\nconst modalTitle = document.getElementById(\"modal-title\");\nconst modalMeta = document.getElementById(\"modal-meta\");\nconst modalTriggers = document.getElementById(\"modal-triggers\");\nconst modalMd = document.getElementById(\"modal-md\");\nconst modalMemories = document.getElementById(\"modal-memories\");\nconst modalTemplates = document.getElementById(\"modal-templates\");\nconst modalScripts = document.getElementById(\"modal-scripts\");\nconst skillbookConfig = window.SKILLBOOK_CONFIG || {};\nconst codeBase = skillbookConfig.codeBase || \"https://www.val.town/x/dcm31/skillbook/code\";\n// On a deck page (/valtown, /anthropic, /skillbook) the path is the deck slug;\n// on the main binder it's empty and every deck renders.\nconst deckFilter = decodeURIComponent(location.pathname.replace(/^\\/+|\\/+$/g, \"\")) || null;\n// Per-deck promo banner rendered between the deck heading and its grid.\n// The universal command installs for Claude Code, Codex, and Cursor alike —\n// see https://blog.val.town/plugin\nconst DECK_PROMOS = {\n valtown: {\n label: \"Plugin Command:\",\n command: \"npx plugins add val-town/plugins\",\n note: \"(equips the Val Town MCP & skillpack)\",\n link: { href: \"https://blog.val.town/plugin\", text: \"read the blog\" },\n },\n};\n\nlet skills = [];\n\nfunction loadArt(img) {\n if (img.dataset.loaded) return;\n img.dataset.loaded = \"true\";\n img.src = img.dataset.src;\n}\n\nconst artObserver = \"IntersectionObserver\" in window\n ? new IntersectionObserver((entries) => {\n for (const entry of entries) {\n if (!entry.isIntersecting) continue;\n const img = entry.target;\n artObserver.unobserve(img);\n loadArt(img);\n }\n }, { rootMargin: \"720px 0px\" })\n : null;\n\nconst esc = (s) =>\n String(s).replaceAll(\"&\", \"&\").replaceAll(\"<\", \"<\").replaceAll(\">\", \">\").replaceAll('\"', \""\");\n\nasync function load() {\n const res = await fetch(\"/api/skills\");\n skills = await res.json();\n if (deckFilter) {\n const sample = skills.find((s) => s.deckSlug === deckFilter);\n if (sample) document.title = `${sample.deck} · Skillbook`;\n }\n render();\n}\n\nfunction openModal(slug) {\n const s = skills.find((x) => x.slug === slug);\n if (!s) return;\n modalTitle.textContent = s.name;\n modalMeta.textContent = `${s.deck || \"Skillbook\"} · ${s.type} · Lv ${s.level} · ${s.invocations} uses`;\n modalTriggers.innerHTML = s.triggers\n .map((t) => `“${esc(t)}”`)\n .join(\"\");\n modalMd.innerHTML = marked.parse(s.body);\n modalMemories.innerHTML = s.memories.length\n ? s.memories\n .map(\n (m) => `\n

\n ${esc(m.title)}\n ${esc(m.kind)}\n

\n ${m.description ? `

${esc(m.description)}

` : \"\"}\n

${marked.parse(m.body)}

\n `,\n )\n .join(\"\")\n : `

No memories yet — this skill hasn't been corrected or refined.

`;\n modalTemplates.innerHTML = s.templates.length\n ? s.templates.map((t) => `

${esc(t)}

`).join(\"\")\n : `

none

`;\n modalScripts.innerHTML = s.scripts.length\n ? s.scripts.map((t) => `

${esc(t)}

`).join(\"\")\n : `

none

`;\n\n // Inline style, not the `hidden` utility: the twind CDN shim collapses the\n // class attribute into a hashed class, so classList toggles on utilities no-op.\n modal.style.display = \"flex\";\n document.body.classList.add(\"modal-open\");\n modalPanel.scrollTop = 0;\n}\n\nfunction closeModal() {\n modal.style.display = \"none\";\n document.body.classList.remove(\"modal-open\");\n}\n\nmodalClose.addEventListener(\"click\", closeModal);\nmodal.addEventListener(\"click\", (e) => {\n if (e.target === modal) closeModal();\n});\ndocument.addEventListener(\"keydown\", (e) => {\n if (e.key === \"Escape\" && modal.style.display === \"flex\") closeModal();\n});\n\nfunction render() {\n binder.innerHTML = \"\";\n const q = (search.value || \"\").toLowerCase().trim();\n const pool = deckFilter ? skills.filter((s) => s.deckSlug === deckFilter) : skills;\n const filtered = q\n ? pool.filter((s) =>\n s.triggers.some((t) => t.toLowerCase().includes(q)) ||\n s.name.toLowerCase().includes(q) ||\n s.slug.toLowerCase().includes(q) ||\n s.type.toLowerCase().includes(q) ||\n (s.deck || \"\").toLowerCase().includes(q))\n : pool;\n\n const groups = new Map();\n for (const s of filtered) {\n const deck = s.deck || \"Skillbook\";\n if (!groups.has(deck)) groups.set(deck, []);\n groups.get(deck).push(s);\n }\n\n for (const [deck, deckSkills] of groups) {\n const section = document.createElement(\"section\");\n section.className = \"deck-section\";\n const deckSlug = deckSkills[0].deckSlug || \"\";\n const promo = DECK_PROMOS[deckSlug];\n section.innerHTML = `\n

${deckFilter || !deckSlug ? esc(deck) : `${esc(deck)}`}

\n ${deckSkills.length} cards${deckFilter ? ` · ← all decks` : \"\"}\n

\n ${promo ? `\n ` : \"\"}\n

\n `;\n const copyBtn = section.querySelector(\".copy-cmd\");\n if (copyBtn) {\n copyBtn.addEventListener(\"click\", async () => {\n try {\n await navigator.clipboard.writeText(promo.command);\n copyBtn.textContent = \"copied!\";\n setTimeout(() => { copyBtn.textContent = \"copy\"; }, 1600);\n } catch {\n copyBtn.textContent = \"copy failed\";\n }\n });\n }\n const grid = section.querySelector(\".deck-grid\");\n for (const s of deckSkills) {\n const node = tmpl.content.firstElementChild.cloneNode(true);\n node.dataset.slug = s.slug;\n\n const front = node.querySelector(\".card-front\");\n front.classList.add(COLOR_BG[s.color] || \"card-bg-blue\");\n const inner = node.querySelector(\".card-inner\");\n if (s.level >= 7) inner.classList.add(\"card-foil\");\n\n node.querySelector(\".name\").textContent = s.name;\n node.querySelector(\".mana\").textContent = \"◆\".repeat(s.manaCost);\n // Lazy-load generated art; on error keep the framed paper placeholder.\n const img = node.querySelector(\".art-img\");\n img.alt = `${s.name} card art`;\n img.dataset.src = `/art/${s.slug}?v=2`; // version-bust: pre-fix placeholder responses were immutable-cached for a week\n img.addEventListener(\"load\", () => img.classList.add(\"loaded\"));\n img.addEventListener(\"error\", () => img.remove());\n if (artObserver) artObserver.observe(img);\n else loadArt(img);\n\n node.querySelector(\".type-line\").textContent = s.type;\n node.querySelector(\".description\").textContent = s.description;\n node.querySelector(\".triggers\").innerHTML = `\n Say\n “${esc(s.triggers[0] || s.name)}”\n `;\n node.querySelector(\".flavor\").textContent = `\"${s.flavor}\"`;\n node.querySelector(\".level\").textContent = `Lv ${s.level}`;\n node.querySelector(\".last-used\").textContent = `${s.invocations}× · ${s.lastUsed}`;\n\n // Back face\n node.querySelector(\".open-file\").href = `${codeBase}/skills/${s.slug.split(\"/\").map(encodeURIComponent).join(\"/\")}/SKILL.md`;\n node.querySelector(\".md\").innerHTML = marked.parse(s.body);\n node.querySelector(\".stickers\").innerHTML = s.memories\n .map((m, i) => {\n const blurb = m.description || m.body.split(\"\\n\")[0].slice(0, 140);\n return `\n

\n ${esc(m.title)}\n ${esc(m.kind)}\n

${esc(blurb)}

`;\n })\n .join(\"\");\n const tplList = node.querySelector(\".templates\");\n tplList.innerHTML = s.templates.length\n ? s.templates.map((t) => `

${esc(t)}

`).join(\"\")\n : `

none

`;\n const scrList = node.querySelector(\".scripts\");\n scrList.innerHTML = s.scripts.length\n ? s.scripts.map((t) => `

${esc(t)}

`).join(\"\")\n : `

none

`;\n\n // Flip controls — click anywhere on the card toggles it (links and the\n // expand button excepted; the expanded lightbox never flips the card).\n const flip = () => node.classList.toggle(\"flipped\");\n node.addEventListener(\"click\", (e) => {\n if (e.target.closest(\"a\")) return;\n if (e.target.closest(\".expand-card\")) {\n e.stopPropagation();\n openModal(s.slug);\n return;\n }\n if (e.target.closest(\".flip-back\")) {\n e.stopPropagation();\n node.classList.remove(\"flipped\");\n return;\n }\n flip();\n });\n node.addEventListener(\"keydown\", (e) => {\n if (e.key === \"Enter\" || e.key === \" \") {\n if (e.target !== node) return;\n e.preventDefault();\n flip();\n } else if (e.key === \"Escape\") {\n node.classList.remove(\"flipped\");\n }\n });\n\n // Drag-and-drop reorder\n node.addEventListener(\"dragstart\", (e) => {\n node.classList.add(\"drag-ghost\");\n e.dataTransfer.setData(\"text/plain\", s.slug);\n e.dataTransfer.effectAllowed = \"move\";\n });\n node.addEventListener(\"dragend\", () => node.classList.remove(\"drag-ghost\"));\n node.addEventListener(\"dragover\", (e) => {\n e.preventDefault();\n e.dataTransfer.dropEffect = \"move\";\n node.classList.add(\"drop-target\");\n });\n node.addEventListener(\"dragleave\", () => node.classList.remove(\"drop-target\"));\n node.addEventListener(\"drop\", (e) => {\n e.preventDefault();\n node.classList.remove(\"drop-target\");\n const fromSlug = e.dataTransfer.getData(\"text/plain\");\n if (!fromSlug || fromSlug === s.slug) return;\n const fromIdx = skills.findIndex((x) => x.slug === fromSlug);\n const toIdx = skills.findIndex((x) => x.slug === s.slug);\n if (fromIdx < 0 || toIdx < 0) return;\n const [moved] = skills.splice(fromIdx, 1);\n skills.splice(toIdx, 0, moved);\n render();\n });\n\n grid.appendChild(node);\n }\n binder.appendChild(section);\n }\n}\n\nsearch.addEventListener(\"input\", render);\nshuffleBtn.addEventListener(\"click\", () => {\n for (let i = skills.length - 1; i > 0; i--) {\n const j = Math.floor(Math.random() * (i + 1));\n [skills[i], skills[j]] = [skills[j], skills[i]];\n }\n render();\n});\n\nload();\n",[],[95,122],"5530621e-5e3a-11f1-b60a-1607ee4eb77e","sprite-builder","3edda770-ead6-4de0-8e7e-5bcf1dea8129",132,["D",1780374005541],[138,139],[132],{"_34":149,"_13":150,"_37":151,"_39":133,"_41":42,"_43":152,"_45":46,"_47":153,"_17":154,"_50":80,"_51":155,"_53":54,"_55":-5,"_82":156,"_18":157},{"_34":140,"_13":141,"_37":142,"_39":133,"_41":42,"_43":143,"_45":46,"_47":144,"_17":145,"_50":24,"_51":146,"_53":54,"_55":-5,"_82":147,"_18":148},"cd7b7b2c-5e95-11f1-9652-1607ee4eb77e","ui.html","69a25d74-5e3a-11f1-ac47-1607ee4eb77e",145,["D",1780413291513],5,"\n\n\n\n\nsprite-builder · skillbook\n\n\n\n

🎨 sprite-builder

feed a reference sheet/tile → new one in the same style · token-gated · skillbook

\n\n Admin token (sent as x-skillbook-art-admin, kept only in this tab)\n \n\n

\n Kind\n \n

\n Model\n \n

\n Quality\n \n

\n Size\n \n

\n\n Reference image URL (optional — defaults to the sprite-animator walk-cycle sheet for characters, AI Town tileset for tiles)\n \n\n Prompt\n \n\n force regenerate (ignore cache)\n\n \n

\n\n

\n \n

\n download raw\n \n open stable URL\n

\n\n\n\n\n",[],[132,141],"ca63e0b4-5e95-11f1-bb0e-1607ee4eb77e","index.tsx","552ffd56-5e3a-11f1-b60a-1607ee4eb77e",144,["D",1780413286369],7,"/** sprite-builder — token-gated, reference-conditioned pixel-art generator.\n *\n * Workflow (per dcm31): feed an existing sprite SHEET → get a new sheet in the\n * same grid/style; feed a tile/tileset → get a new tile. The server returns the\n * RAW model output (no destructive downscale). Slicing a sheet into frames /\n * cropping a tile happens downstream (UI button or the village renderer).\n *\n * Protection reuses skillbook's card-art pattern so the public key can't be\n * spammed: x-skillbook-art-admin must match ART_ADMIN_TOKEN (else 404), uses\n * SKILLBOOK_OPENAI_API_KEY, plus a per-day cap + blob cache. Separate http\n * file — main.tsx is untouched.\n */\nimport { Hono } from \"npm:hono@4\";\nimport { parseVal, serveFile } from \"https://esm.town/v/std/utils/index.ts\";\nimport { blob } from \"https://esm.town/v/std/blob\";\n\nconst AITOWN = \"https://raw.githubusercontent.com/a16z-infra/ai-town/main\";\n// sprite-animator is the canonical reference val: its built-in walk-cycle sheet\n// is served live and used as the default CHARACTER reference here. Tiles still\n// use the AI Town tileset. Either is overridable per-request with refUrl.\nconst SPRITE_ANIMATOR = \"https://dcm31--a0f721e05e3711f1b6c61607ee4eb77e.web.val.run\";\nconst REFS: Record = {\n character: `${SPRITE_ANIMATOR}/api/sheets/sample/image`,\n tile: `${AITOWN}/public/assets/gentle-obj.png`,\n};\nconst DEFAULT_PROMPT: Record = {\n character:\n \"Generate a complete character sprite SHEET that matches the reference sheet EXACTLY in grid layout, cell size, number of rows and columns, palette and pixel-art style. Rows are character facings and columns are walk-cycle frames, in the SAME arrangement as the reference. One single new distinct character, one pose per cell, consistent across all cells. Transparent background. No text, labels, numbers, grid lines, or border.\",\n tile:\n \"Generate ONE new top-down map tile in the EXACT pixel-art style and palette of the reference. A single motif filling the frame edge-to-edge on a transparent background so it can be cropped to a square tile. No text, no grid lines, no border.\",\n};\nconst DEFAULT_SIZE: Record = { character: \"1024x1536\", tile: \"1024x1024\" };\nconst ALLOWED_SIZE = [\"1024x1024\", \"1024x1536\", \"1536x1024\", \"auto\"];\nconst DAILY_CAP = 40;\nconst PREFIX = \"skillbook/sprites/v1\";\n\nconst app = new Hono();\napp.onError((err) => Promise.reject(err));\n\nconst b64ToBytes = (s: string) => {\n const bin = atob(s); const a = new Uint8Array(bin.length);\n for (let i = 0; i < bin.length; i++) a[i] = bin.charCodeAt(i);\n return a;\n};\nconst bytesToB64 = (bytes: Uint8Array) => {\n let bin = \"\"; for (let i = 0; i < bytes.length; i++) bin += String.fromCharCode(bytes[i]);\n return btoa(bin);\n};\nconst dataUrl = (bytes: Uint8Array) => `data:image/png;base64,${bytesToB64(bytes)}`;\nfunction hash(s: string) {\n let h = 2166136261;\n for (let i = 0; i < s.length; i++) { h ^= s.charCodeAt(i); h = Math.imul(h, 16777619); }\n return (h >>> 0).toString(36);\n}\n\napp.get(\"/\", () => serveFile(\"/sprite-builder/ui.html\", import.meta.url));\napp.get(\"/source\", (c) => c.redirect(parseVal().links.self.val));\n\n// Public read of a generated image (stable URL).\napp.get(\"/sprite/:key\", async (c) => {\n const key = c.req.param(\"key\");\n if (!/^[a-z0-9-]+$/.test(key)) return c.text(\"bad key\", 400);\n try {\n const r = await blob.get(`${PREFIX}/${key}.png`);\n if (r?.ok) {\n const buf = await r.arrayBuffer();\n if (buf.byteLength) {\n return new Response(buf, {\n headers: { \"content-type\": \"image/png\", \"cache-control\": \"public, max-age=604800, immutable\" },\n });\n }\n }\n } catch {}\n return c.text(\"not found\", 404);\n});\n\napp.post(\"/generate\", async (c) => {\n // --- same gate as the card-art route: no/!match token => 404 ---\n const admin = Deno.env.get(\"ART_ADMIN_TOKEN\");\n if (!admin || c.req.header(\"x-skillbook-art-admin\") !== admin) return c.text(\"not found\", 404);\n\n const body = await c.req.json().catch(() => ({} as any));\n const kind = body.kind === \"tile\" ? \"tile\" : \"character\";\n const prompt = (typeof body.prompt === \"string\" && body.prompt.trim()) || DEFAULT_PROMPT[kind];\n const ALLOWED_MODELS = [\"gpt-image-2\", \"gpt-image-1.5\", \"gpt-image-1\", \"gpt-image-1-mini\"];\n const model = ALLOWED_MODELS.includes(body.model) ? body.model : \"gpt-image-1.5\";\n // gpt-image-2 is OpenAI's newest/sharpest, but it can't render transparent\n // backgrounds — sprites need alpha — so gpt-image-1.5 is the default.\n const transparent = model !== \"gpt-image-2\";\n const quality = [\"low\", \"medium\", \"high\"].includes(body.quality) ? body.quality : \"low\";\n const size = ALLOWED_SIZE.includes(body.size) ? body.size : DEFAULT_SIZE[kind];\n const refUrl = typeof body.refUrl === \"string\" && body.refUrl.startsWith(\"https://\") ? body.refUrl : REFS[kind];\n const force = body.force === true;\n\n const key = `${kind}-${hash(model + \"|\" + quality + \"|\" + size + \"|\" + refUrl + \"|\" + prompt)}`;\n\n if (!force) {\n try {\n const raw = await blob.get(`${PREFIX}/${key}.png`);\n if (raw?.ok) {\n const rb = new Uint8Array(await raw.arrayBuffer());\n if (rb.length) return c.json({ ok: true, cached: true, key, kind, model, quality, size, prompt, rawDataUrl: dataUrl(rb), spriteUrl: `./sprite/${key}` });\n }\n } catch {}\n }\n\n // per-day cap (cheap backstop if the token ever leaks)\n const day = new Date().toISOString().slice(0, 10);\n const quotaKey = `${PREFIX}/quota-${day}`;\n let used = 0;\n try { used = ((await blob.getJSON(quotaKey)) as number) || 0; } catch {}\n if (used >= DAILY_CAP) return c.json({ ok: false, error: `daily cap of ${DAILY_CAP} reached` }, 429);\n\n const refResp = await fetch(refUrl);\n if (!refResp.ok) return c.json({ ok: false, error: \"could not fetch reference image\" }, 502);\n const refBytes = new Uint8Array(await refResp.arrayBuffer());\n\n const KEY = Deno.env.get(\"SKILLBOOK_OPENAI_API_KEY\") ?? Deno.env.get(\"OPENAI_API_KEY\");\n if (!KEY) return c.json({ ok: false, error: \"art key missing\" }, 503);\n\n const form = new FormData();\n form.set(\"model\", model);\n form.set(\"prompt\", prompt);\n form.set(\"size\", size);\n form.set(\"quality\", quality);\n if (transparent) form.set(\"background\", \"transparent\");\n form.set(\"output_format\", \"png\");\n form.set(\"image\", new File([refBytes], \"reference.png\", { type: \"image/png\" }));\n\n const r = await fetch(\"https://api.openai.com/v1/images/edits\", {\n method: \"POST\",\n headers: { authorization: \"Bearer \" + KEY },\n body: form,\n });\n const json = await r.json().catch(() => ({} as any));\n if (!r.ok) {\n console.error(\"openai edits failed\", json);\n return c.json({ ok: false, error: json?.error?.message || \"image edit error\" }, 502);\n }\n const outB64 = json?.data?.[0]?.b64_json;\n if (!outB64) return c.json({ ok: false, error: \"no image in OpenAI response\" }, 502);\n const rawBytes = b64ToBytes(outB64);\n\n try {\n await blob.set(`${PREFIX}/${key}.png`, rawBytes);\n await blob.setJSON(quotaKey, used + 1);\n } catch (e) { console.error(\"cache write failed\", e); }\n\n return c.json({ ok: true, cached: false, key, kind, model, quality, size, prompt, rawDataUrl: dataUrl(rawBytes), spriteUrl: `./sprite/${key}` });\n});\n\nexport default app.fetch;\n",[],[132,150],"4368f9fa-5927-11f1-8ea0-ee650bb23af1","e64cb2f1-5878-4608-9048-785617ed5e8f",12,["D",1779816059463],[164,165,166,167,168,169,170,171,172,173,174,175,176,177,178],[57],{"_34":856,"_13":58,"_37":63,"_39":159,"_41":42,"_43":857,"_45":46,"_47":858,"_17":49,"_50":61,"_51":-5,"_53":54,"_55":-5,"_82":859,"_18":860},{"_34":789,"_13":790,"_37":791,"_39":159,"_41":42,"_43":792,"_45":46,"_47":793,"_17":49,"_50":61,"_51":-5,"_53":54,"_55":-5,"_82":794,"_18":795},{"_34":728,"_13":729,"_37":730,"_39":159,"_41":42,"_43":731,"_45":46,"_47":732,"_17":49,"_50":61,"_51":-5,"_53":54,"_55":-5,"_82":733,"_18":734},{"_34":657,"_13":658,"_37":659,"_39":159,"_41":42,"_43":660,"_45":46,"_47":661,"_17":49,"_50":61,"_51":-5,"_53":54,"_55":-5,"_82":662,"_18":663},{"_34":642,"_13":643,"_37":644,"_39":159,"_41":42,"_43":645,"_45":46,"_47":646,"_17":49,"_50":61,"_51":-5,"_53":54,"_55":-5,"_82":647,"_18":648},{"_34":574,"_13":575,"_37":576,"_39":159,"_41":42,"_43":577,"_45":46,"_47":578,"_17":49,"_50":61,"_51":-5,"_53":54,"_55":-5,"_82":579,"_18":580},{"_34":559,"_13":560,"_37":561,"_39":159,"_41":42,"_43":562,"_45":46,"_47":563,"_17":49,"_50":61,"_51":-5,"_53":54,"_55":-5,"_82":564,"_18":565},{"_34":545,"_13":546,"_37":547,"_39":159,"_41":42,"_43":548,"_45":46,"_47":549,"_17":49,"_50":61,"_51":-5,"_53":54,"_55":-5,"_82":550,"_18":551},{"_34":452,"_13":453,"_37":454,"_39":159,"_41":42,"_43":455,"_45":46,"_47":456,"_17":49,"_50":61,"_51":-5,"_53":54,"_55":-5,"_82":457,"_18":458},{"_34":382,"_13":383,"_37":384,"_39":159,"_41":42,"_43":385,"_45":46,"_47":386,"_17":49,"_50":61,"_51":-5,"_53":54,"_55":-5,"_82":387,"_18":388},{"_34":367,"_13":368,"_37":369,"_39":159,"_41":42,"_43":370,"_45":46,"_47":371,"_17":49,"_50":61,"_51":-5,"_53":54,"_55":-5,"_82":372,"_18":373},{"_34":353,"_13":354,"_37":355,"_39":159,"_41":42,"_43":356,"_45":46,"_47":357,"_17":49,"_50":61,"_51":-5,"_53":54,"_55":-5,"_82":358,"_18":359},{"_34":202,"_13":203,"_37":204,"_39":159,"_41":42,"_43":205,"_45":46,"_47":206,"_17":49,"_50":61,"_51":-5,"_53":54,"_55":-5,"_82":207,"_18":208},{"_34":188,"_13":189,"_37":190,"_39":159,"_41":42,"_43":191,"_45":46,"_47":192,"_17":49,"_50":61,"_51":-5,"_53":54,"_55":-5,"_82":193,"_18":194},{"_34":179,"_13":180,"_37":181,"_39":159,"_41":42,"_43":182,"_45":46,"_47":183,"_17":184,"_50":24,"_51":185,"_53":54,"_55":-5,"_82":186,"_18":187},"07a09534-a63c-415a-9f29-b567a5fe8c5d","_index.json","4368c0f2-5927-11f1-8ea0-ee650bb23af1",343,["D",1783968523028],43,"{\n \"_comment\": \"Card metadata and deck layout. The canonical agent-readable source remains each skills//SKILL.md.\",\n \"remote-mcp\": {\n \"description\": \"Build a remote MCP server as a Val Town HTTP val — hand-rolled streamable HTTP JSON-RPC (no SDK), three auth patterns (server-secret / BYOK / OAuth), the Claude.ai ?key= URL constraint, and a no-upstream-key test checklist.\",\n \"type\": \"Skill — Craft\",\n \"color\": \"blue\",\n \"art\": \"🔌\",\n \"artPrompt\": \"a small brass junction box on a workbench with many colored cords plugging into one glowing socket, a hand-inked protocol scroll unrolled beside it and a steel-nibbed pen, cool clean lamplight — slate blue and warm parchment palette, painterly arcane engineering, orderly and universal — fantasy trading card illustration, painterly digital art, dramatic cinematic lighting, framed centered composition, square format, no text, no letters, no words, no logos, no UI\",\n \"manaCost\": 3,\n \"level\": 1,\n \"invocations\": 1,\n \"lastUsed\": \"today\",\n \"flavor\": \"Four methods, one POST, any client.\",\n \"deck\": \"Skillbook\"\n },\n \"pixel-diorama-app\": {\n \"description\": \"Wrap any system in a stevensDemo-style pixel diorama — a little room where a character walks between stations doing the work.\",\n \"type\": \"Skill — Craft\",\n \"color\": \"green\",\n \"art\": \"🏡\",\n \"artPrompt\": \"a craftsman's hands placing a tiny owl figurine inside a handmade wooden diorama box of a miniature library room — tiny bookcases, a desk, a counter, warm lamplight spilling out of the open box onto a cluttered workbench of paints and tweezers — cozy emerald and warm honey palette, miniature worldbuilding, intimate craft — fantasy trading card illustration, painterly digital art, dramatic cinematic lighting, framed centered composition, square format, no text, no letters, no words, no logos, no UI\",\n \"manaCost\": 4,\n \"level\": 7,\n \"invocations\": 1,\n \"lastUsed\": \"today\",\n \"flavor\": \"Any system becomes a little room where a creature does the work.\",\n \"deck\": \"Skillbook\"\n },\n \"pixel-game-assets\": {\n \"description\": \"Retro game pixel art via gpt-image-1 reference-anchored edits — rooms, chibi sprites, and sheets that match a target style.\",\n \"type\": \"Skill — Craft\",\n \"color\": \"gold\",\n \"art\": \"🧩\",\n \"artPrompt\": \"a jeweler's loupe held over an enchanted parchment where a tiny mosaic owl assembles itself from chunky glowing ceramic tiles, pots of enamel paint and a fine brush nearby on a candlelit workbench — warm amber and forest green palette, meticulous arcane craft, satisfying order — fantasy trading card illustration, painterly digital art, dramatic cinematic lighting, framed centered composition, square format, no text, no letters, no words, no logos, no UI\",\n \"manaCost\": 3,\n \"level\": 7,\n \"invocations\": 2,\n \"lastUsed\": \"today\",\n \"flavor\": \"Keep the first image's soul. Borrow the second's bones.\",\n \"deck\": \"Skillbook\"\n },\n \"hyperdesigns\": {\n \"description\": \"Living-surface UI: bounded WebGL liquid, plasma, and aurora effects plus click-spray particles that can never wash out to white.\",\n \"type\": \"Skill — Creative\",\n \"color\": \"blue\",\n \"art\": \"🌊\",\n \"artPrompt\": \"a vial of living liquid light poured across an enchanted glass canvas, luminous teal waves rippling inside the frame while a fine spray of droplets is flung from a fingertip, brass dropper and quill on a candlelit workbench — luminous aqua and deep teal palette, fluid, mesmerizing, arcane craft — fantasy trading card illustration, painterly digital art, dramatic cinematic lighting, framed centered composition, square format, no text, no letters, no words, no logos, no UI\",\n \"manaCost\": 3,\n \"level\": 7,\n \"invocations\": 1,\n \"lastUsed\": \"today\",\n \"flavor\": \"Bounded shaders that never wash out — pour the liquid, then spray on click.\",\n \"deck\": \"Skillbook\"\n },\n \"valtown-mcp-app\": {\n \"description\": \"Render a val's HTTP response as a static visual card inside Claude — a fixed ~885×386 frame, no scroll, no clicks.\",\n \"type\": \"Skill — Lore\",\n \"color\": \"blue\",\n \"art\": \"🖼️\",\n \"artPrompt\": \"an ornate enchanted picture frame on a study wall, a glowing miniature world sealed behind glass that cannot spill past its border, candlelit desk — cool sapphire and pale silver palette, luminous, contained, arcane — fantasy trading card illustration, painterly digital art, dramatic cinematic lighting, framed centered composition, square format, no text, no letters, no words, no logos, no UI\",\n \"manaCost\": 2,\n \"level\": 6,\n \"invocations\": 1,\n \"lastUsed\": \"today\",\n \"flavor\": \"885 × 386, no scroll, no clicks — paint inside the frame or not at all.\",\n \"deck\": \"Skillbook\"\n },\n \"daily-standup\": {\n \"type\": \"Skill — Routine\",\n \"color\": \"blue\",\n \"art\": \"🌅\",\n \"artPrompt\": \"a peaceful sunrise over a writer's desk by a window, steaming coffee mug, open notebook, soft watercolor light — cool blue and pale silver palette, soft morning mist, serene — fantasy trading card illustration, painterly digital art, dramatic cinematic lighting, framed centered composition, square format, no text, no letters, no words, no logos, no UI\",\n \"manaCost\": 2,\n \"level\": 5,\n \"invocations\": 38,\n \"lastUsed\": \"2d ago\",\n \"flavor\": \"Yesterday's threads, today's commitments, tomorrow's traps.\",\n \"deck\": \"Skillbook\"\n },\n \"inbox-zero\": {\n \"type\": \"Skill — Maintenance\",\n \"color\": \"white\",\n \"art\": \"✉️\",\n \"artPrompt\": \"a single white origami paper plane resting on an empty wooden letter tray, soft golden window light, minimalist still life — warm cream and antique gold palette, sunlit, hopeful, clean — fantasy trading card illustration, painterly digital art, dramatic cinematic lighting, framed centered composition, square format, no text, no letters, no words, no logos, no UI\",\n \"manaCost\": 1,\n \"level\": 4,\n \"invocations\": 21,\n \"lastUsed\": \"5d ago\",\n \"flavor\": \"Three folders, no regrets: Reply, Wait, Done.\",\n \"deck\": \"Skillbook\"\n },\n \"pr-review\": {\n \"type\": \"Skill — Action\",\n \"color\": \"red\",\n \"art\": \"⚔️\",\n \"artPrompt\": \"crossed swords planted at a forked stone path on a hilltop at dusk, sparks and ember motes, heroic fantasy painting — deep ember red and amber palette, fiery energy, dynamic motion — fantasy trading card illustration, painterly digital art, dramatic cinematic lighting, framed centered composition, square format, no text, no letters, no words, no logos, no UI\",\n \"manaCost\": 3,\n \"level\": 7,\n \"invocations\": 64,\n \"lastUsed\": \"yesterday\",\n \"flavor\": \"\\\"Always create NEW commits rather than amending.\\\" — the elder agents\",\n \"deck\": \"Skillbook\"\n },\n \"bug-triage\": {\n \"type\": \"Skill — Action\",\n \"color\": \"black\",\n \"art\": \"🐛\",\n \"artPrompt\": \"a glowing bioluminescent beetle crawling across a dark server rack, dim red emergency light, moody noir illustration — deep indigo and charcoal palette, shadowy, ominous, glowing accents — fantasy trading card illustration, painterly digital art, dramatic cinematic lighting, framed centered composition, square format, no text, no letters, no words, no logos, no UI\",\n \"manaCost\": 4,\n \"level\": 3,\n \"invocations\": 11,\n \"lastUsed\": \"3w ago\",\n \"flavor\": \"The graph is red. Begin.\",\n \"deck\": \"Skillbook\"\n },\n \"code-cartographer\": {\n \"type\": \"Skill — Lookup\",\n \"color\": \"green\",\n \"art\": \"🗺️\",\n \"artPrompt\": \"an old hand-drawn parchment map of a verdant city with rivers and streets, brass compass and quill resting on it, study desk — lush emerald and moss palette, verdant, organic textures — fantasy trading card illustration, painterly digital art, dramatic cinematic lighting, framed centered composition, square format, no text, no letters, no words, no logos, no UI\",\n \"manaCost\": 2,\n \"level\": 6,\n \"invocations\": 47,\n \"lastUsed\": \"today\",\n \"flavor\": \"Every codebase is a city. Someone has to keep the map.\",\n \"deck\": \"Skillbook\"\n },\n \"release-notes\": {\n \"type\": \"Skill — Creative\",\n \"color\": \"gold\",\n \"art\": \"📜\",\n \"artPrompt\": \"an ornate unfurled parchment scroll with a feather quill and wax seal, warm candlelight, baroque still life — ornate burnished gold and burgundy palette, regal, decorative — fantasy trading card illustration, painterly digital art, dramatic cinematic lighting, framed centered composition, square format, no text, no letters, no words, no logos, no UI\",\n \"manaCost\": 3,\n \"level\": 2,\n \"invocations\": 6,\n \"lastUsed\": \"2w ago\",\n \"flavor\": \"Write for the user who reads the changelog, not the engineer who wrote the diff.\",\n \"deck\": \"Skillbook\"\n },\n \"sleek-ui\": {\n \"description\": \"Polished, modern interfaces — disciplined layout, spacing, typography, color, and motion.\",\n \"type\": \"Skill — Lore\",\n \"color\": \"white\",\n \"art\": \"◻️\",\n \"artPrompt\": \"a minimalist drafting table under clean north light, a single white set-square, a fine technical pen, and one perfectly aligned blank sheet — nothing extraneous, cool white and pale grey palette with a whisper of warm shadow, serene, disciplined, refined craft — fantasy trading card illustration, painterly digital art, dramatic cinematic lighting, framed centered composition, square format, no text, no letters, no words, no logos, no UI\",\n \"manaCost\": 2,\n \"level\": 6,\n \"invocations\": 0,\n \"lastUsed\": \"new\",\n \"flavor\": \"Less, but better. When in doubt, remove it.\",\n \"deck\": \"Skillbook\"\n },\n \"anthropic/algorithmic-art\": {\n \"description\": \"Algorithmic art with p5.js — seeded randomness and interactive parameter exploration.\",\n \"deck\": \"Anthropic Skills\",\n \"type\": \"Skill - Anthropic\",\n \"color\": \"anthropic\",\n \"art\": \"\",\n \"artPrompt\": \"a brass automaton painting constellations on handmade paper inside a candlelit atelier; shared Anthropic deck theme, warm parchment, charcoal ink, muted orange accent, blue and green secondary accents, painterly physical fantasy card art, no text, no logos\",\n \"manaCost\": 1,\n \"level\": 4,\n \"invocations\": 0,\n \"lastUsed\": \"new\",\n \"flavor\": \"Creating algorithmic art using p5.js with seeded randomness and interactive parameter exploration.\"\n },\n \"anthropic/brand-guidelines\": {\n \"description\": \"Apply Anthropic's official brand colors and typography to any artifact.\",\n \"deck\": \"Anthropic Skills\",\n \"type\": \"Skill - Anthropic\",\n \"color\": \"anthropic\",\n \"art\": \"\",\n \"artPrompt\": \"an illuminated style codex with color swatches, carved type specimens, and a careful orange wax seal; shared Anthropic deck theme, warm parchment, charcoal ink, muted orange accent, blue and green secondary accents, painterly physical fantasy card art, no text, no logos\",\n \"manaCost\": 2,\n \"level\": 5,\n \"invocations\": 0,\n \"lastUsed\": \"new\",\n \"flavor\": \"Applies Anthropic's official brand colors and typography to any sort of artifact that may benefit from having Anthropic's look-and-feel.\"\n },\n \"anthropic/canvas-design\": {\n \"deck\": \"Anthropic Skills\",\n \"type\": \"Skill - Anthropic\",\n \"color\": \"anthropic\",\n \"art\": \"\",\n \"artPrompt\": \"a floating design canvas stretched across a wooden frame, ink guides and warm amber drafting light; shared Anthropic deck theme, warm parchment, charcoal ink, muted orange accent, blue and green secondary accents, painterly physical fantasy card art, no text, no logos\",\n \"manaCost\": 3,\n \"level\": 6,\n \"invocations\": 0,\n \"lastUsed\": \"new\",\n \"flavor\": \"Create beautiful visual art in .png and .pdf documents using design philosophy.\"\n },\n \"anthropic/claude-api\": {\n \"description\": \"Build, debug, and optimize Claude API / Anthropic SDK apps — prompt caching, tool use, batching, and model migration.\",\n \"deck\": \"Anthropic Skills\",\n \"type\": \"Skill - Anthropic\",\n \"color\": \"anthropic\",\n \"art\": \"\",\n \"artPrompt\": \"a library oracle of amber glass, careful tool sigils, and clean channels of light between shelves; shared Anthropic deck theme, warm parchment, charcoal ink, muted orange accent, blue and green secondary accents, painterly physical fantasy card art, no text, no logos\",\n \"manaCost\": 4,\n \"level\": 7,\n \"invocations\": 0,\n \"lastUsed\": \"new\",\n \"flavor\": \"Build, debug, and optimize Claude API / Anthropic SDK apps.\"\n },\n \"anthropic/doc-coauthoring\": {\n \"description\": \"A structured workflow for co-authoring documentation — transfer context, iterate, and verify the doc works for readers.\",\n \"deck\": \"Anthropic Skills\",\n \"type\": \"Skill - Anthropic\",\n \"color\": \"anthropic\",\n \"art\": \"\",\n \"artPrompt\": \"two quills weaving one parchment draft across a long oak table under soft lantern light; shared Anthropic deck theme, warm parchment, charcoal ink, muted orange accent, blue and green secondary accents, painterly physical fantasy card art, no text, no logos\",\n \"manaCost\": 1,\n \"level\": 8,\n \"invocations\": 0,\n \"lastUsed\": \"new\",\n \"flavor\": \"Guide users through a structured workflow for co-authoring documentation.\"\n },\n \"anthropic/docx\": {\n \"description\": \"Create, read, edit, and manipulate Word documents — formatting, images, tracked changes, and conversions.\",\n \"deck\": \"Anthropic Skills\",\n \"type\": \"Skill - Anthropic\",\n \"color\": \"anthropic\",\n \"art\": \"\",\n \"artPrompt\": \"a bound manuscript assembling itself from folded pages, tables, seals, and marginal notes; shared Anthropic deck theme, warm parchment, charcoal ink, muted orange accent, blue and green secondary accents, painterly physical fantasy card art, no text, no logos\",\n \"manaCost\": 2,\n \"level\": 4,\n \"invocations\": 0,\n \"lastUsed\": \"new\",\n \"flavor\": \"Use this skill whenever the user wants to create, read, edit, or manipulate Word documents (.docx files).\"\n },\n \"anthropic/frontend-design\": {\n \"description\": \"Distinctive, production-grade frontend interfaces — components, pages, dashboards that avoid the generic-AI look.\",\n \"deck\": \"Anthropic Skills\",\n \"type\": \"Skill - Anthropic\",\n \"color\": \"anthropic\",\n \"art\": \"\",\n \"artPrompt\": \"a stage set of painted interface panels, measured grids, and dramatic warm gallery lighting; shared Anthropic deck theme, warm parchment, charcoal ink, muted orange accent, blue and green secondary accents, painterly physical fantasy card art, no text, no logos\",\n \"manaCost\": 3,\n \"level\": 5,\n \"invocations\": 0,\n \"lastUsed\": \"new\",\n \"flavor\": \"Create distinctive, production-grade frontend interfaces with high design quality.\"\n },\n \"anthropic/internal-comms\": {\n \"description\": \"Write internal communications in the formats the company actually uses — status reports, updates, newsletters, FAQs.\",\n \"deck\": \"Anthropic Skills\",\n \"type\": \"Skill - Anthropic\",\n \"color\": \"anthropic\",\n \"art\": \"\",\n \"artPrompt\": \"sealed notes moving through a quiet guild hall, lanterns, notice boards, and patient coordination; shared Anthropic deck theme, warm parchment, charcoal ink, muted orange accent, blue and green secondary accents, painterly physical fantasy card art, no text, no logos\",\n \"manaCost\": 4,\n \"level\": 6,\n \"invocations\": 0,\n \"lastUsed\": \"new\",\n \"flavor\": \"A set of resources to help me write all kinds of internal communications, using the formats that my company likes to use.\"\n },\n \"anthropic/mcp-builder\": {\n \"description\": \"Build high-quality MCP servers — well-designed tools that let LLMs work with external services.\",\n \"deck\": \"Anthropic Skills\",\n \"type\": \"Skill - Anthropic\",\n \"color\": \"anthropic\",\n \"art\": \"\",\n \"artPrompt\": \"a workbench of brass connectors, small protocol gates, and labeled tools glowing with amber runes; shared Anthropic deck theme, warm parchment, charcoal ink, muted orange accent, blue and green secondary accents, painterly physical fantasy card art, no text, no logos\",\n \"manaCost\": 1,\n \"level\": 7,\n \"invocations\": 0,\n \"lastUsed\": \"new\",\n \"flavor\": \"Guide for creating high-quality MCP (Model Context Protocol) servers that enable LLMs to interact with external services through well-designed tools.\"\n },\n \"anthropic/pdf\": {\n \"description\": \"Everything PDF — extract text and tables, merge, split, rotate, watermark, fill forms, encrypt, OCR.\",\n \"deck\": \"Anthropic Skills\",\n \"type\": \"Skill - Anthropic\",\n \"color\": \"anthropic\",\n \"art\": \"\",\n \"artPrompt\": \"a stack of vellum folios under a glass lens, pages splitting and rejoining with precise golden threads; shared Anthropic deck theme, warm parchment, charcoal ink, muted orange accent, blue and green secondary accents, painterly physical fantasy card art, no text, no logos\",\n \"manaCost\": 2,\n \"level\": 8,\n \"invocations\": 0,\n \"lastUsed\": \"new\",\n \"flavor\": \"Use this skill whenever the user wants to do anything with PDF files.\"\n },\n \"anthropic/pptx\": {\n \"description\": \"Anything .pptx — create decks, read and extract content, edit slides, work with templates and speaker notes.\",\n \"deck\": \"Anthropic Skills\",\n \"type\": \"Skill - Anthropic\",\n \"color\": \"anthropic\",\n \"art\": \"\",\n \"artPrompt\": \"a carousel of miniature presentation scenes on lacquered slides, spotlit in a walnut cabinet; shared Anthropic deck theme, warm parchment, charcoal ink, muted orange accent, blue and green secondary accents, painterly physical fantasy card art, no text, no logos\",\n \"manaCost\": 3,\n \"level\": 4,\n \"invocations\": 0,\n \"lastUsed\": \"new\",\n \"flavor\": \"Use this skill any time a .pptx file is involved in any way — as input, output, or both.\"\n },\n \"anthropic/skill-creator\": {\n \"deck\": \"Anthropic Skills\",\n \"type\": \"Skill - Anthropic\",\n \"color\": \"anthropic\",\n \"art\": \"\",\n \"artPrompt\": \"a master scribe binding new spell pages into a growing handbook with careful tabs and ribbons; shared Anthropic deck theme, warm parchment, charcoal ink, muted orange accent, blue and green secondary accents, painterly physical fantasy card art, no text, no logos\",\n \"manaCost\": 4,\n \"level\": 5,\n \"invocations\": 0,\n \"lastUsed\": \"new\",\n \"flavor\": \"Create new skills, modify and improve existing skills, and measure skill performance.\"\n },\n \"anthropic/slack-gif-creator\": {\n \"deck\": \"Anthropic Skills\",\n \"type\": \"Skill - Anthropic\",\n \"color\": \"anthropic\",\n \"art\": \"\",\n \"artPrompt\": \"a flipbook of tiny animated moments pinned beside a warm office hearth and message ribbons; shared Anthropic deck theme, warm parchment, charcoal ink, muted orange accent, blue and green secondary accents, painterly physical fantasy card art, no text, no logos\",\n \"manaCost\": 1,\n \"level\": 6,\n \"invocations\": 0,\n \"lastUsed\": \"new\",\n \"flavor\": \"Knowledge and utilities for creating animated GIFs optimized for Slack.\"\n },\n \"anthropic/theme-factory\": {\n \"deck\": \"Anthropic Skills\",\n \"type\": \"Skill - Anthropic\",\n \"color\": \"anthropic\",\n \"art\": \"\",\n \"artPrompt\": \"a cabinet of pigments, font specimens, and theme vials arranged like an apothecary of styles; shared Anthropic deck theme, warm parchment, charcoal ink, muted orange accent, blue and green secondary accents, painterly physical fantasy card art, no text, no logos\",\n \"manaCost\": 2,\n \"level\": 7,\n \"invocations\": 0,\n \"lastUsed\": \"new\",\n \"flavor\": \"Toolkit for styling artifacts with a theme.\"\n },\n \"anthropic/web-artifacts-builder\": {\n \"description\": \"Elaborate multi-component claude.ai artifacts with React, Tailwind, and shadcn/ui.\",\n \"deck\": \"Anthropic Skills\",\n \"type\": \"Skill - Anthropic\",\n \"color\": \"anthropic\",\n \"art\": \"\",\n \"artPrompt\": \"a small theater of web artifacts, layered screens rendered as paper craft and polished brass; shared Anthropic deck theme, warm parchment, charcoal ink, muted orange accent, blue and green secondary accents, painterly physical fantasy card art, no text, no logos\",\n \"manaCost\": 3,\n \"level\": 8,\n \"invocations\": 0,\n \"lastUsed\": \"new\",\n \"flavor\": \"Suite of tools for creating elaborate, multi-component claude.ai HTML artifacts using modern frontend web technologies (React, Tailwind CSS, shadcn/ui\"\n },\n \"anthropic/webapp-testing\": {\n \"deck\": \"Anthropic Skills\",\n \"type\": \"Skill - Anthropic\",\n \"color\": \"anthropic\",\n \"art\": \"\",\n \"artPrompt\": \"a meticulous testing observatory with tiny browser windows, checkmarks, and calibrated lenses; shared Anthropic deck theme, warm parchment, charcoal ink, muted orange accent, blue and green secondary accents, painterly physical fantasy card art, no text, no logos\",\n \"manaCost\": 4,\n \"level\": 4,\n \"invocations\": 0,\n \"lastUsed\": \"new\",\n \"flavor\": \"Toolkit for interacting with and testing local web applications using Playwright.\"\n },\n \"anthropic/xlsx\": {\n \"description\": \"Spreadsheets in and out — read, create, edit, compute formulas, chart, and clean messy tabular data.\",\n \"deck\": \"Anthropic Skills\",\n \"type\": \"Skill - Anthropic\",\n \"color\": \"anthropic\",\n \"art\": \"\",\n \"artPrompt\": \"a ledger grid transformed into a precise counting engine with green ink, rulers, and brass dials; shared Anthropic deck theme, warm parchment, charcoal ink, muted orange accent, blue and green secondary accents, painterly physical fantasy card art, no text, no logos\",\n \"manaCost\": 1,\n \"level\": 5,\n \"invocations\": 0,\n \"lastUsed\": \"new\",\n \"flavor\": \"Use this skill any time a spreadsheet file is the primary input or output.\"\n },\n \"valtown/http-endpoints\": {\n \"description\": \"Build web endpoints, API routes, and webhook receivers — handler signature, Hono, CORS, redirects, and platform limits.\",\n \"deck\": \"Val Town Skills\",\n \"type\": \"Skill — Val Town\",\n \"color\": \"valtown\",\n \"art\": \"\",\n \"artPrompt\": \"a grand stone gatehouse at the town walls where many roads converge, travelers passing scrolls through an arched service window, lanterns burning over the gate; shared Val Town deck theme, a lamplit riverside township of tiny workshops, whitewashed plaster and deep cobalt blue rooftops, warm lantern glow, painterly physical fantasy card art, no text, no logos\",\n \"manaCost\": 1,\n \"level\": 7,\n \"invocations\": 0,\n \"lastUsed\": \"new\",\n \"flavor\": \"One default export and the whole world has your URL.\"\n },\n \"valtown/react-ui\": {\n \"description\": \"React UIs in .tsx files with Twind/Tailwind styling — version pinning, view-source links, and what to avoid.\",\n \"deck\": \"Val Town Skills\",\n \"type\": \"Skill — Val Town\",\n \"color\": \"valtown\",\n \"art\": \"\",\n \"artPrompt\": \"a glazier's workshop where a luminous stained-glass window is assembled pane by pane, fitted glass squares glowing on the bench, sketches pinned above; shared Val Town deck theme, a lamplit riverside township of tiny workshops, whitewashed plaster and deep cobalt blue rooftops, warm lantern glow, painterly physical fantasy card art, no text, no logos\",\n \"manaCost\": 3,\n \"level\": 6,\n \"invocations\": 0,\n \"lastUsed\": \"new\",\n \"flavor\": \"Component by component, pane by pane — and always a view-source link.\"\n },\n \"valtown/sqlite-storage\": {\n \"description\": \"Structured, relational storage with std/sqlite — parameterized queries, transactions, val- vs org-scoped databases.\",\n \"deck\": \"Val Town Skills\",\n \"type\": \"Skill — Val Town\",\n \"color\": \"valtown\",\n \"art\": \"\",\n \"artPrompt\": \"a records hall lined with card-catalog drawers and bound ledgers, a librarian filing a single card by green-shaded lamplight; shared Val Town deck theme, a lamplit riverside township of tiny workshops, whitewashed plaster and deep cobalt blue rooftops, warm lantern glow, painterly physical fantasy card art, no text, no logos\",\n \"manaCost\": 1,\n \"level\": 7,\n \"invocations\": 0,\n \"lastUsed\": \"new\",\n \"flavor\": \"A real database, one import away. Parameterize everything.\"\n },\n \"valtown/blob-storage\": {\n \"description\": \"Key/value persistence with std/blob — JSON docs, cached responses, uploads, binary assets. Listing, scoping, and limits.\",\n \"deck\": \"Val Town Skills\",\n \"type\": \"Skill — Val Town\",\n \"color\": \"valtown\",\n \"art\": \"\",\n \"artPrompt\": \"a tidy cellar vault of labeled clay jars and small crates on wooden shelves, a keeper raising a lantern to read one paper tag; shared Val Town deck theme, a lamplit riverside township of tiny workshops, whitewashed plaster and deep cobalt blue rooftops, warm lantern glow, painterly physical fantasy card art, no text, no logos\",\n \"manaCost\": 1,\n \"level\": 5,\n \"invocations\": 0,\n \"lastUsed\": \"new\",\n \"flavor\": \"getJSON returns undefined; get throws. Know your jars.\"\n },\n \"valtown/cron-and-intervals\": {\n \"description\": \"Run vals on a schedule — cron expressions, the UTC rule, and the lastRunAt pattern for processing only what's new.\",\n \"deck\": \"Val Town Skills\",\n \"type\": \"Skill — Val Town\",\n \"color\": \"valtown\",\n \"art\": \"\",\n \"artPrompt\": \"a tall clocktower over the town square at dawn, exposed brass gears and a swinging bell, birds scattering on the hour; shared Val Town deck theme, a lamplit riverside township of tiny workshops, whitewashed plaster and deep cobalt blue rooftops, warm lantern glow, painterly physical fantasy card art, no text, no logos\",\n \"manaCost\": 2,\n \"level\": 6,\n \"invocations\": 0,\n \"lastUsed\": \"new\",\n \"flavor\": \"The bell rings in UTC, whether anyone is watching or not.\"\n },\n \"valtown/email\": {\n \"description\": \"Send mail via std/email or trigger a val from its own inbox address — handler shape, attachment limits, reply patterns.\",\n \"deck\": \"Val Town Skills\",\n \"type\": \"Skill — Val Town\",\n \"color\": \"valtown\",\n \"art\": \"\",\n \"artPrompt\": \"a rooftop dovecote post office, messenger pigeons arriving through round windows with sealed letters, rows of sorting pigeonholes; shared Val Town deck theme, a lamplit riverside township of tiny workshops, whitewashed plaster and deep cobalt blue rooftops, warm lantern glow, painterly physical fantasy card art, no text, no logos\",\n \"manaCost\": 2,\n \"level\": 5,\n \"invocations\": 0,\n \"lastUsed\": \"new\",\n \"flavor\": \"Every val has an address; mail arrives as a function call.\"\n },\n \"valtown/oauth\": {\n \"description\": \"Zero-config \\\"Log in with Val Town\\\" — oauthMiddleware, getOAuthUserData, and the auto-managed /auth/* routes.\",\n \"deck\": \"Val Town Skills\",\n \"type\": \"Skill — Val Town\",\n \"color\": \"valtown\",\n \"art\": \"\",\n \"artPrompt\": \"a gatekeeper at a small guarded door inspecting a glowing wax seal on a visitor's letter of passage, a heavy keyring at the belt; shared Val Town deck theme, a lamplit riverside township of tiny workshops, whitewashed plaster and deep cobalt blue rooftops, warm lantern glow, painterly physical fantasy card art, no text, no logos\",\n \"manaCost\": 2,\n \"level\": 5,\n \"invocations\": 0,\n \"lastUsed\": \"new\",\n \"flavor\": \"Wrap the handler once — the /auth doors hang themselves.\"\n },\n \"valtown/templates\": {\n \"description\": \"Pick the right starter to fork — the official template catalog, when to skip it, and when to remix an existing val.\",\n \"deck\": \"Val Town Skills\",\n \"type\": \"Skill — Val Town\",\n \"color\": \"valtown\",\n \"art\": \"\",\n \"artPrompt\": \"a printmaker's shop with carved woodblock stamps shaped like tiny houses, fresh blueprint prints hanging to dry on a line; shared Val Town deck theme, a lamplit riverside township of tiny workshops, whitewashed plaster and deep cobalt blue rooftops, warm lantern glow, painterly physical fantasy card art, no text, no logos\",\n \"manaCost\": 1,\n \"level\": 4,\n \"invocations\": 0,\n \"lastUsed\": \"new\",\n \"flavor\": \"Never start from a blank page — the town keeps blueprints.\"\n },\n \"valtown/third-party-integrations\": {\n \"description\": \"Connect vals to Slack, Stripe, GitHub, Postgres, browser automation, and more — fetch the guide, test, store secrets.\",\n \"deck\": \"Val Town Skills\",\n \"type\": \"Skill — Val Town\",\n \"color\": \"valtown\",\n \"art\": \"\",\n \"artPrompt\": \"a busy river-harbor trading post, foreign ships unloading crates stamped with strange sigils, a harbormaster checking a long manifest; shared Val Town deck theme, a lamplit riverside township of tiny workshops, whitewashed plaster and deep cobalt blue rooftops, warm lantern glow, painterly physical fantasy card art, no text, no logos\",\n \"manaCost\": 3,\n \"level\": 6,\n \"invocations\": 0,\n \"lastUsed\": \"new\",\n \"flavor\": \"Fetch the guide before you sail; stow the secrets when you dock.\"\n }\n}\n",[],[57,180],"5adcf2fe-5e99-11f1-a034-1607ee4eb77e","valtown-mcp-app","fd668265-bc64-4e47-a723-83718aed95d2",146,["D",1780414817247],[195],[57,189],{"_34":196,"_13":36,"_37":197,"_39":190,"_41":42,"_43":191,"_45":46,"_47":198,"_17":49,"_50":24,"_51":199,"_53":54,"_55":-5,"_82":200,"_18":201},"5adcb4ce-5e99-11f1-a034-1607ee4eb77e","5adcb56e-5e99-11f1-a034-1607ee4eb77e",["D",1780414817247],"---\nname: valtown-mcp-app\ndescription: Render a val's HTTP response as a visual card inside Claude via the Val Town MCP — a fixed ~885x386 frame, static and non-interactive, clipped to content height\ntriggers:\n - render a val in chat\n - val town mcp app\n - show this val inline\n - fetch val endpoint render\n - why is my val render blank\n - my val render is getting clipped\n---\n\n# Val Town MCP — rendering a val inline in Claude\n\nThe Val Town MCP can display a val's HTTP response as a visual widget inside a Claude conversation. Treat the output as a **static poster in a fixed, no-scroll frame** — not a live web page, and not interactive.\n\n## What triggers a render\n\n- A render only happens when you call **`fetch_val_endpoint`**. The `run: { kind: \"fetch_val_endpoint\" }` option on `update_file` / `replace_in_file` counts, because it calls the same thing.\n- `create_file`, `update_file`, `list_files`, etc. show a *file / diff* widget, **not** the rendered HTML. Don't expect them to preview a page.\n- `fetch_val_endpoint` also returns the response (status + headers + body) to you as text, so it doubles as your inspect/debug tool. The endpoint is public.\n\n## The frame (measured)\n\n- Fixed size **≈ 885 × 386 px** — wide and short, aspect ≈ 2.3:1. It can vary slightly with client width, so design with a little margin.\n- **No scroll.** The iframe is sized to the document's *content height* and then clipped inside the fixed frame. Anything past ~386px tall is **cut off at the bottom** — there is no scrollbar.\n- You don't control the frame height from inside it, so you can't vertically center to it. Top-aligned content with empty space below is fine; overflow is not.\n\n## Hard rules (break these and the render fails)\n\n- **Never use `height:100vh`, `height:100%` on html/body, or `position:fixed` for layout.** Because the iframe is content-sized, viewport-relative heights resolve to ~0 and the whole thing renders **blank**. Use **normal document flow** with `auto` / explicit `px` heights.\n- **It is not interactive.** Clicks do not toggle CSS `:checked`, fire handlers, or submit forms — a click appears to **open / navigate to the val** instead. So:\n - No tabs, accordions, modals, hover-to-reveal, or anything that needs a click or tap.\n - Don't rely on `\n```\n\nThen use Tailwind classes directly in JSX:\n\n```tsx\n

Hello

\n```\n\nAvoid inline `

Memories (stickers)

Templates

Scripts

Memories

Files

${deckFilter || !deckSlug ? esc(deck) : `${esc(deck)}`}

🎨 sprite-builder

Hello