[{"_1":2,"_3":-5,"_4":-5},"loaderData",{"_5":6,"_7":8,"_9":10},"actionData","errors","root",{"_727":728,"_729":730},"routes/_app.x.$handle.$name",{"_95":94,"_31":43,"_104":85,"_26":105,"_13":14,"_106":-5,"_11":107,"_108":109,"_110":111,"_112":113,"_114":115,"_20":-5,"_116":-5,"_117":-5,"_118":24,"_119":120,"_121":57,"_122":-5,"_123":-5,"_124":125},"routes/_app.x.$handle.$name.branch.$branch.version.$version.diff",{"_11":12,"_13":14,"_15":16,"_17":-5,"_18":-5},"project",{"_41":42,"_31":43,"_36":44,"_45":-5,"_46":24,"_47":48,"_49":48,"_50":51,"_52":-5,"_18":53,"_54":55,"_56":57,"_58":-5,"_59":-5,"_60":61,"_62":63,"_64":-5,"_65":-5,"_66":-5,"_67":-5,"_68":69,"_70":69,"_71":72,"_73":72,"_74":72,"_75":69,"_76":69,"_77":78,"_79":80,"_81":82,"_83":24},"version",96,"changes",[19],"aiChatInfo","userId",{"_20":21,"_22":-7,"_23":24,"_25":24,"_26":27,"_28":27},"file",{"_29":30,"_31":32,"_33":20,"_34":35,"_36":37,"_38":14,"_39":40,"_23":24},"previous","deleted",false,"deletedHere","path","skills/anthropic-canvas-design/SKILL.md","latestPath","fileId","c7bc7b62-5974-11f1-80fb-ee650bb23af1","name","SKILL.md","fileType","content","---\nname: canvas-design\ndescription: 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.\nlicense: Complete terms in LICENSE.txt\n---\n\nThese are instructions for creating design philosophies - aesthetic movements that are then EXPRESSED VISUALLY. Output only .md files, .pdf files, and .png files.\n\nComplete this in two steps:\n1. Design Philosophy Creation (.md file)\n2. Express by creating it on a canvas (.pdf file or .png file)\n\nFirst, undertake this task:\n\n## DESIGN PHILOSOPHY CREATION\n\nTo begin, create a VISUAL PHILOSOPHY (not layouts or templates) that will be interpreted through:\n- Form, space, color, composition\n- Images, graphics, shapes, patterns\n- Minimal text as visual accent\n\n### THE CRITICAL UNDERSTANDING\n- What is received: Some subtle input or instructions by the user that should be taken into account, but used as a foundation; it should not constrain creative freedom.\n- What is created: A design philosophy/aesthetic movement.\n- What happens next: Then, the same version receives the philosophy and EXPRESSES IT VISUALLY - creating artifacts that are 90% visual design, 10% essential text.\n\nConsider this approach:\n- Write a manifesto for an art movement\n- The next phase involves making the artwork\n\nThe philosophy must emphasize: Visual expression. Spatial communication. Artistic interpretation. Minimal words.\n\n### HOW TO GENERATE A VISUAL PHILOSOPHY\n\n**Name the movement** (1-2 words): \"Brutalist Joy\" / \"Chromatic Silence\" / \"Metabolist Dreams\"\n\n**Articulate the philosophy** (4-6 paragraphs - concise but complete):\n\nTo capture the VISUAL essence, express how the philosophy manifests through:\n- Space and form\n- Color and material\n- Scale and rhythm\n- Composition and balance\n- Visual hierarchy\n\n**CRITICAL GUIDELINES:**\n- **Avoid redundancy**: Each design aspect should be mentioned once. Avoid repeating points about color theory, spatial relationships, or typographic principles unless adding new depth.\n- **Emphasize craftsmanship REPEATEDLY**: The philosophy MUST stress multiple times that the final work should appear as though it took countless hours to create, was labored over with care, and comes from someone at the absolute top of their field. This framing is essential - repeat phrases like \"meticulously crafted,\" \"the product of deep expertise,\" \"painstaking attention,\" \"master-level execution.\"\n- **Leave creative space**: Remain specific about the aesthetic direction, but concise enough that the next Claude has room to make interpretive choices also at a extremely high level of craftmanship.\n\nThe philosophy must guide the next version to express ideas VISUALLY, not through text. Information lives in design, not paragraphs.\n\n### PHILOSOPHY EXAMPLES\n\n**\"Concrete Poetry\"**\nPhilosophy: Communication through monumental form and bold geometry.\nVisual expression: Massive color blocks, sculptural typography (huge single words, tiny labels), Brutalist spatial divisions, Polish poster energy meets Le Corbusier. Ideas expressed through visual weight and spatial tension, not explanation. Text as rare, powerful gesture - never paragraphs, only essential words integrated into the visual architecture. Every element placed with the precision of a master craftsman.\n\n**\"Chromatic Language\"**\nPhilosophy: Color as the primary information system.\nVisual expression: Geometric precision where color zones create meaning. Typography minimal - small sans-serif labels letting chromatic fields communicate. Think Josef Albers' interaction meets data visualization. Information encoded spatially and chromatically. Words only to anchor what color already shows. The result of painstaking chromatic calibration.\n\n**\"Analog Meditation\"**\nPhilosophy: Quiet visual contemplation through texture and breathing room.\nVisual expression: Paper grain, ink bleeds, vast negative space. Photography and illustration dominate. Typography whispered (small, restrained, serving the visual). Japanese photobook aesthetic. Images breathe across pages. Text appears sparingly - short phrases, never explanatory blocks. Each composition balanced with the care of a meditation practice.\n\n**\"Organic Systems\"**\nPhilosophy: Natural clustering and modular growth patterns.\nVisual expression: Rounded forms, organic arrangements, color from nature through architecture. Information shown through visual diagrams, spatial relationships, iconography. Text only for key labels floating in space. The composition tells the story through expert spatial orchestration.\n\n**\"Geometric Silence\"**\nPhilosophy: Pure order and restraint.\nVisual expression: Grid-based precision, bold photography or stark graphics, dramatic negative space. Typography precise but minimal - small essential text, large quiet zones. Swiss formalism meets Brutalist material honesty. Structure communicates, not words. Every alignment the work of countless refinements.\n\n*These are condensed examples. The actual design philosophy should be 4-6 substantial paragraphs.*\n\n### ESSENTIAL PRINCIPLES\n- **VISUAL PHILOSOPHY**: Create an aesthetic worldview to be expressed through design\n- **MINIMAL TEXT**: Always emphasize that text is sparse, essential-only, integrated as visual element - never lengthy\n- **SPATIAL EXPRESSION**: Ideas communicate through space, form, color, composition - not paragraphs\n- **ARTISTIC FREEDOM**: The next Claude interprets the philosophy visually - provide creative room\n- **PURE DESIGN**: This is about making ART OBJECTS, not documents with decoration\n- **EXPERT CRAFTSMANSHIP**: Repeatedly emphasize the final work must look meticulously crafted, labored over with care, the product of countless hours by someone at the top of their field\n\n**The design philosophy should be 4-6 paragraphs long.** Fill it with poetic design philosophy that brings together the core vision. Avoid repeating the same points. Keep the design philosophy generic without mentioning the intention of the art, as if it can be used wherever. Output the design philosophy as a .md file.\n\n---\n\n## DEDUCING THE SUBTLE REFERENCE\n\n**CRITICAL STEP**: Before creating the canvas, identify the subtle conceptual thread from the original request.\n\n**THE ESSENTIAL PRINCIPLE**:\nThe topic is a **subtle, niche reference embedded within the art itself** - not always literal, always sophisticated. Someone familiar with the subject should feel it intuitively, while others simply experience a masterful abstract composition. The design philosophy provides the aesthetic language. The deduced topic provides the soul - the quiet conceptual DNA woven invisibly into form, color, and composition.\n\nThis is **VERY IMPORTANT**: The reference must be refined so it enhances the work's depth without announcing itself. Think like a jazz musician quoting another song - only those who know will catch it, but everyone appreciates the music.\n\n---\n\n## CANVAS CREATION\n\nWith both the philosophy and the conceptual framework established, express it on a canvas. Take a moment to gather thoughts and clear the mind. Use the design philosophy created and the instructions below to craft a masterpiece, embodying all aspects of the philosophy with expert craftsmanship.\n\n**IMPORTANT**: For any type of content, even if the user requests something for a movie/game/book, the approach should still be sophisticated. Never lose sight of the idea that this should be art, not something that's cartoony or amateur.\n\nTo create museum or magazine quality work, use the design philosophy as the foundation. Create one single page, highly visual, design-forward PDF or PNG output (unless asked for more pages). Generally use repeating patterns and perfect shapes. Treat the abstract philosophical design as if it were a scientific bible, borrowing the visual language of systematic observation—dense accumulation of marks, repeated elements, or layered patterns that build meaning through patient repetition and reward sustained viewing. Add sparse, clinical typography and systematic reference markers that suggest this could be a diagram from an imaginary discipline, treating the invisible subject with the same reverence typically reserved for documenting observable phenomena. Anchor the piece with simple phrase(s) or details positioned subtly, using a limited color palette that feels intentional and cohesive. Embrace the paradox of using analytical visual language to express ideas about human experience: the result should feel like an artifact that proves something ephemeral can be studied, mapped, and understood through careful attention. This is true art. \n\n**Text as a contextual element**: Text is always minimal and visual-first, but let context guide whether that means whisper-quiet labels or bold typographic gestures. A punk venue poster might have larger, more aggressive type than a minimalist ceramics studio identity. Most of the time, font should be thin. All use of fonts must be design-forward and prioritize visual communication. Regardless of text scale, nothing falls off the page and nothing overlaps. Every element must be contained within the canvas boundaries with proper margins. Check carefully that all text, graphics, and visual elements have breathing room and clear separation. This is non-negotiable for professional execution. **IMPORTANT: Use different fonts if writing text. Search the `./canvas-fonts` directory. Regardless of approach, sophistication is non-negotiable.**\n\nDownload and use whatever fonts are needed to make this a reality. Get creative by making the typography actually part of the art itself -- if the art is abstract, bring the font onto the canvas, not typeset digitally.\n\nTo push boundaries, follow design instinct/intuition while using the philosophy as a guiding principle. Embrace ultimate design freedom and choice. Push aesthetics and design to the frontier. \n\n**CRITICAL**: To achieve human-crafted quality (not AI-generated), create work that looks like it took countless hours. Make it appear as though someone at the absolute top of their field labored over every detail with painstaking care. Ensure the composition, spacing, color choices, typography - everything screams expert-level craftsmanship. Double-check that nothing overlaps, formatting is flawless, every detail perfect. Create something that could be shown to people to prove expertise and rank as undeniably impressive.\n\nOutput the final result as a single, downloadable .pdf or .png file, alongside the design philosophy used as a .md file.\n\n---\n\n## FINAL STEP\n\n**IMPORTANT**: The user ALREADY said \"It isn't perfect enough. It must be pristine, a masterpiece if craftsmanship, as if it were about to be displayed in a museum.\"\n\n**CRITICAL**: To refine the work, avoid adding more graphics; instead refine what has been created and make it extremely crisp, respecting the design philosophy and the principles of minimalism entirely. Rather than adding a fun filter or refactoring a font, consider how to make the existing composition more cohesive with the art. If the instinct is to call a new function or draw a new shape, STOP and instead ask: \"How can I make what's already here more of a piece of art?\"\n\nTake a second pass. Go back to the code and refine/polish further to make this a philosophically designed masterpiece.\n\n## MULTI-PAGE OPTION\n\nTo create additional pages when requested, create more creative pages along the same lines as the design philosophy but distinctly different as well. Bundle those pages in the same .pdf or many .pngs. Treat the first page as just a single page in a whole coffee table book waiting to be filled. Make the next pages unique twists and memories of the original. Have them almost tell a story in a very tasteful way. Exercise full creative freedom.","createdAt",["D",1779849352722],"branchVersion","branchId","a265a3e8-5924-11f1-b614-ee650bb23af1","id","a264eee4-5924-11f1-b614-ee650bb23af1","skillbook",["D",1779814930341],"deletedAt","legacyEnvVars","privacy","public","httpPrivacy","description","Interactive trading-card view of an agent skill repo","imageUrl","9319c175-2593-4f88-ba21-04f2ef7b1c28","pinnedFileId","a2693198-5924-11f1-b614-ee650bb23af1","pinPreview",true,"pinMigrated","screenshotVersion","likeCount",1,"orgId","d663a026-6449-42f6-9156-1d4a2d64d38c","tursoName","tursoHostname","tursoMeasuredAt","pinned","userPerm","r","valPerm","blobPerm","rw","emailPerm","sqlitePerm","projectPerm","telemetryPerm","user",{"_95":94,"_103":99},"org",{"_95":94,"_96":97,"_98":99,"_18":53,"_100":101,"_102":24},"branch",{"_13":84,"_31":85,"_41":40,"_86":42,"_87":-5,"_88":-5,"_89":-5,"_90":-5,"_91":-5,"_92":43,"_93":94},"isOwned",345,"main","projectId","forkedBranchId","forkedBranchVersion","forkedProjectPrivacy","forkedProjectId","forkedProjectOrgId","projectName","userHandle","dcm31","handle","displayName","Charlie","avatar","https://imagedelivery.net/iHX6Ovru0O7AjmyT5yZRoA/3e904faa-3764-4629-c475-f561a49b0000/square512?exp=1789567199&sig=e06d2452d15457d897c29ee2d4a45d8ac5b1a1a7b6bc3ec1d7706c1f90e23fa3","tier","pro","canRestrictVals","profileImageUrl","branchName","","adoptOrgId",{"_41":42,"_31":43,"_36":723,"_45":-5,"_46":24,"_47":48,"_49":48,"_50":51,"_52":-5,"_18":53,"_54":55,"_56":57,"_58":-5,"_59":-5,"_60":61,"_62":63,"_64":-5,"_65":-5,"_66":-5,"_67":-5,"_68":69,"_70":69,"_71":72,"_73":72,"_74":72,"_75":69,"_76":69,"_77":724,"_79":725,"_81":726,"_83":24},"tree",[181,183,247,250,251],"files",[181,182,183,184,185,186,187,188,189,190,191,192,193,194,195,196,197,198,199,200,201,202,203,204,205,206,207,208,209,210,211,212,213,214,215,216,217,218,219,220,221,222,223,224,225,226,227,228,229,230,231,232,233,234,235,236,237,238,239,240,241,242,243,244,245,246,247,248,249,250,251],"counts",{"_170":155,"_171":61,"_172":155,"_173":174,"_175":176},"contents",[126,127,128,129,130],"upstreamProject","upstreamBranch","emptyEnvVars","flags",[],"hasHttpFiles","grants","orgs","customDomains",{},{"_41":164,"_31":165,"_29":166,"_133":-5,"_39":40,"_38":167,"_135":57,"_36":168,"_13":155,"_33":156,"_34":-5,"_23":24,"_140":-5,"_26":169},{"_41":158,"_31":159,"_29":160,"_133":-5,"_39":40,"_38":161,"_135":57,"_36":162,"_13":155,"_33":156,"_34":-5,"_23":24,"_140":-5,"_26":163},{"_41":150,"_31":151,"_29":152,"_133":-5,"_39":40,"_38":153,"_135":57,"_36":154,"_13":155,"_33":156,"_34":-5,"_23":24,"_140":-5,"_26":157},{"_41":142,"_31":143,"_29":144,"_133":-5,"_39":40,"_38":145,"_135":24,"_36":146,"_13":147,"_33":20,"_34":148,"_23":24,"_140":-5,"_26":149},{"_41":131,"_31":132,"_29":55,"_133":-5,"_39":40,"_38":134,"_135":24,"_36":136,"_13":137,"_33":138,"_34":139,"_23":24,"_140":43,"_26":141},"446f9564-5974-11f1-b202-ee650bb23af1","main.tsx","parentId",90,"latest",["D",1779849132432],14,"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\napp.get(\"/\", async (c) => {\n const val = parseVal();\n const projectUrl = val.links.self.val;\n const html = (await readFile(\"/static/index.html\", import.meta.url))\n .replaceAll(\"__VAL_PROJECT_URL__\", projectUrl)\n .replaceAll(\"__VAL_CODE_URL__\", `${projectUrl}/code`);\n return c.html(html);\n});\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\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// AI-generated card art. Cached in blob storage — first request per skill\n// can take a bit, subsequent requests are instant. v2 intentionally skips\n// older generated images so the painterly card direction gets a clean pass.\nconst BLOB_PREFIX = \"skill-binder/art/openai-v2\";\n\nfunction imagePrompt(skill: Awaited>[number]) {\n return [\n skill.artPrompt,\n \"Painted collectible fantasy card illustration with traditional brushwork, rich pigments, atmospheric depth, tactile paper-era fantasy art direction, varied composition and mood.\",\n \"Avoid modern UI, computer screens, app windows, keyboards, terminal text, logos, typography, letters, numbers, watermarks, borders, and captions.\",\n \"Square artwork crop, centered subject, strong silhouette, finished illustration suitable for a physical fantasy card art window.\",\n ].join(\" \");\n}\n\nfunction base64ToBytes(value: string) {\n const binary = atob(value);\n const bytes = new Uint8Array(binary.length);\n for (let i = 0; i < binary.length; i++) bytes[i] = binary.charCodeAt(i);\n return bytes;\n}\n\napp.get(\"/art/:slug\", async (c) => {\n const slug = c.req.param(\"slug\");\n if (!SLUG_RE.test(slug)) return c.text(\"bad slug\", 400);\n const skills = await loadSkills();\n const skill = skills.find((s) => s.slug === slug);\n if (!skill) return c.text(\"not found\", 404);\n\n const blobKey = `${BLOB_PREFIX}/${slug}.png`;\n const headers = {\n \"content-type\": \"image/png\",\n \"cache-control\": \"public, max-age=604800, immutable\",\n };\n\n try {\n const cached = await blob.get(blobKey);\n if (cached?.ok) {\n const buf = await cached.arrayBuffer();\n if (buf.byteLength > 0) return new Response(buf, { headers });\n }\n } catch {\n // not cached — fall through to generation\n }\n\n // Gate uncached generation behind ART_ADMIN_TOKEN so a stranger hitting a\n // new slug can't burn the OpenAI key. Once seeded, cached reads above\n // serve everyone without the token.\n const ART_ADMIN_TOKEN = Deno.env.get(\"ART_ADMIN_TOKEN\");\n if (ART_ADMIN_TOKEN) {\n const provided = c.req.query(\"token\") ?? c.req.header(\"x-admin-token\");\n if (provided !== ART_ADMIN_TOKEN) {\n return c.text(\n \"Art not yet generated. Generation is gated — pass ?token= or x-admin-token header to seed.\",\n 404,\n );\n }\n }\n\n const OPENAI_API_KEY =\n Deno.env.get(\"SKILLBOOK_OPENAI_API_KEY\") || Deno.env.get(\"OPENAI_API_KEY\");\n if (!OPENAI_API_KEY) {\n return c.text(\n \"SKILLBOOK_OPENAI_API_KEY not set. Add one at /environment-variables?key=SKILLBOOK_OPENAI_API_KEY to enable generated art.\",\n 503,\n );\n }\n\n try {\n const result = await fetch(\"https://api.openai.com/v1/images/generations\", {\n method: \"POST\",\n headers: {\n \"authorization\": `Bearer ${OPENAI_API_KEY}`,\n \"content-type\": \"application/json\",\n },\n body: JSON.stringify({\n model: \"gpt-image-1-mini\",\n prompt: imagePrompt(skill),\n size: \"1024x1024\",\n quality: \"low\",\n n: 1,\n output_format: \"png\",\n }),\n });\n const json = await result.json();\n if (!result.ok) {\n console.error(\"openai image generation failed\", json);\n return c.text(`image generation error: ${json?.error?.message ?? result.status}`, 502);\n }\n const b64 = json?.data?.[0]?.b64_json;\n if (!b64) {\n console.error(\"openai returned no image\", json);\n return c.text(\"no image in OpenAI response\", 502);\n }\n const bytes = base64ToBytes(b64);\n await blob.set(blobKey, bytes);\n return new Response(bytes, { headers });\n } catch (err: any) {\n console.error(\"image generation failed\", err);\n return c.text(`image generation error: ${err?.message ?? \"unknown\"}`, 502);\n }\n});\n\napp.get(\"/source\", (c) => c.redirect(parseVal().links.self.val));\n\nexport default app.fetch;\n","label",[132],"49ae755c-594e-11f1-801a-ee650bb23af1","README.md","6208b168-5925-11f1-9516-ee650bb23af1",89,["D",1779832820354],7,"# 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.\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)\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 ...\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",[143],"26409fec-5925-11f1-aa26-ee650bb23af1","static","50efcf7d-70b5-49fc-a445-557da8021c74",4,["D",1779815151548],0,"directory",[151],"4368f9fa-5927-11f1-8ea0-ee650bb23af1","skills","e64cb2f1-5878-4608-9048-785617ed5e8f",12,["D",1779816059463],[159],"c975aa14-5924-11f1-8d6c-ee650bb23af1","data","b37bf479-eb20-4e42-81f0-b9d97bc255d3",2,["D",1779814995869],[165],"pulls","branches","forks","envVars",{"_177":179,"_180":61},"connections",{"_177":155,"_178":155},"count","unfilledCount",3,"emptyCount",{"_41":164,"_31":165,"_29":166,"_133":-5,"_39":40,"_38":167,"_135":57,"_36":720,"_13":155,"_33":156,"_34":-5,"_23":24,"_140":-5,"_253":721,"_26":722},{"_41":712,"_31":713,"_29":714,"_133":166,"_39":40,"_38":715,"_135":24,"_36":716,"_13":61,"_33":273,"_34":717,"_23":24,"_140":-5,"_253":718,"_26":719},{"_41":158,"_31":159,"_29":160,"_133":-5,"_39":40,"_38":161,"_135":57,"_36":709,"_13":155,"_33":156,"_34":-5,"_23":24,"_140":-5,"_253":710,"_26":711},{"_41":704,"_31":703,"_29":697,"_133":160,"_39":40,"_38":705,"_135":24,"_36":706,"_13":155,"_33":156,"_34":-5,"_23":24,"_140":-5,"_253":707,"_26":708},{"_41":695,"_31":32,"_29":696,"_133":697,"_39":40,"_38":698,"_135":57,"_36":699,"_13":155,"_33":20,"_34":700,"_23":24,"_140":-5,"_253":701,"_26":702},{"_41":690,"_31":689,"_29":683,"_133":160,"_39":40,"_38":691,"_135":24,"_36":692,"_13":155,"_33":156,"_34":-5,"_23":24,"_140":-5,"_253":693,"_26":694},{"_41":681,"_31":32,"_29":682,"_133":683,"_39":40,"_38":684,"_135":57,"_36":685,"_13":155,"_33":20,"_34":686,"_23":24,"_140":-5,"_253":687,"_26":688},{"_41":676,"_31":675,"_29":671,"_133":160,"_39":40,"_38":677,"_135":24,"_36":678,"_13":155,"_33":156,"_34":-5,"_23":24,"_140":-5,"_253":679,"_26":680},{"_41":670,"_31":32,"_29":30,"_133":671,"_39":40,"_38":14,"_135":57,"_36":672,"_13":155,"_33":20,"_34":35,"_23":24,"_140":-5,"_253":673,"_26":674},{"_41":666,"_31":618,"_29":612,"_133":160,"_39":40,"_38":613,"_135":57,"_36":667,"_13":155,"_33":156,"_34":-5,"_23":24,"_140":-5,"_253":668,"_26":669},{"_41":662,"_31":333,"_29":648,"_133":612,"_39":40,"_38":649,"_135":57,"_36":663,"_13":155,"_33":156,"_34":-5,"_23":24,"_140":-5,"_253":664,"_26":665},{"_41":654,"_31":655,"_29":656,"_133":648,"_39":40,"_38":657,"_135":57,"_36":658,"_13":155,"_33":20,"_34":659,"_23":24,"_140":-5,"_253":660,"_26":661},{"_41":645,"_31":646,"_29":647,"_133":648,"_39":40,"_38":649,"_135":57,"_36":650,"_13":155,"_33":20,"_34":651,"_23":24,"_140":-5,"_253":652,"_26":653},{"_41":641,"_31":319,"_29":635,"_133":612,"_39":40,"_38":636,"_135":57,"_36":642,"_13":155,"_33":156,"_34":-5,"_23":24,"_140":-5,"_253":643,"_26":644},{"_41":632,"_31":633,"_29":634,"_133":635,"_39":40,"_38":636,"_135":57,"_36":637,"_13":155,"_33":273,"_34":638,"_23":24,"_140":-5,"_253":639,"_26":640},{"_41":628,"_31":305,"_29":622,"_133":612,"_39":40,"_38":623,"_135":57,"_36":629,"_13":155,"_33":156,"_34":-5,"_23":24,"_140":-5,"_253":630,"_26":631},{"_41":619,"_31":620,"_29":621,"_133":622,"_39":40,"_38":623,"_135":57,"_36":624,"_13":155,"_33":20,"_34":625,"_23":24,"_140":-5,"_253":626,"_26":627},{"_41":610,"_31":32,"_29":611,"_133":612,"_39":40,"_38":613,"_135":57,"_36":614,"_13":155,"_33":20,"_34":615,"_23":24,"_140":-5,"_253":616,"_26":617},{"_41":606,"_31":563,"_29":557,"_133":160,"_39":40,"_38":558,"_135":57,"_36":607,"_13":155,"_33":156,"_34":-5,"_23":24,"_140":-5,"_253":608,"_26":609},{"_41":602,"_31":333,"_29":580,"_133":557,"_39":40,"_38":589,"_135":57,"_36":603,"_13":155,"_33":156,"_34":-5,"_23":24,"_140":-5,"_253":604,"_26":605},{"_41":594,"_31":595,"_29":596,"_133":580,"_39":40,"_38":597,"_135":57,"_36":598,"_13":155,"_33":20,"_34":599,"_23":24,"_140":-5,"_253":600,"_26":601},{"_41":586,"_31":587,"_29":588,"_133":580,"_39":40,"_38":589,"_135":57,"_36":590,"_13":155,"_33":20,"_34":591,"_23":24,"_140":-5,"_253":592,"_26":593},{"_41":577,"_31":578,"_29":579,"_133":580,"_39":40,"_38":581,"_135":57,"_36":582,"_13":155,"_33":20,"_34":583,"_23":24,"_140":-5,"_253":584,"_26":585},{"_41":573,"_31":319,"_29":567,"_133":557,"_39":40,"_38":568,"_135":57,"_36":574,"_13":155,"_33":156,"_34":-5,"_23":24,"_140":-5,"_253":575,"_26":576},{"_41":564,"_31":565,"_29":566,"_133":567,"_39":40,"_38":568,"_135":57,"_36":569,"_13":155,"_33":273,"_34":570,"_23":24,"_140":-5,"_253":571,"_26":572},{"_41":555,"_31":32,"_29":556,"_133":557,"_39":40,"_38":558,"_135":57,"_36":559,"_13":155,"_33":20,"_34":560,"_23":24,"_140":-5,"_253":561,"_26":562},{"_41":551,"_31":500,"_29":495,"_133":160,"_39":40,"_38":264,"_135":57,"_36":552,"_13":155,"_33":156,"_34":-5,"_23":24,"_140":-5,"_253":553,"_26":554},{"_41":547,"_31":333,"_29":525,"_133":495,"_39":40,"_38":542,"_135":57,"_36":548,"_13":155,"_33":156,"_34":-5,"_23":24,"_140":-5,"_253":549,"_26":550},{"_41":539,"_31":540,"_29":541,"_133":525,"_39":40,"_38":542,"_135":57,"_36":543,"_13":155,"_33":20,"_34":544,"_23":24,"_140":-5,"_253":545,"_26":546},{"_41":531,"_31":532,"_29":533,"_133":525,"_39":40,"_38":534,"_135":57,"_36":535,"_13":155,"_33":20,"_34":536,"_23":24,"_140":-5,"_253":537,"_26":538},{"_41":522,"_31":523,"_29":524,"_133":525,"_39":40,"_38":526,"_135":57,"_36":527,"_13":155,"_33":20,"_34":528,"_23":24,"_140":-5,"_253":529,"_26":530},{"_41":518,"_31":305,"_29":504,"_133":495,"_39":40,"_38":505,"_135":57,"_36":519,"_13":155,"_33":156,"_34":-5,"_23":24,"_140":-5,"_253":520,"_26":521},{"_41":510,"_31":511,"_29":512,"_133":504,"_39":40,"_38":513,"_135":57,"_36":514,"_13":155,"_33":20,"_34":515,"_23":24,"_140":-5,"_253":516,"_26":517},{"_41":501,"_31":502,"_29":503,"_133":504,"_39":40,"_38":505,"_135":57,"_36":506,"_13":155,"_33":20,"_34":507,"_23":24,"_140":-5,"_253":508,"_26":509},{"_41":493,"_31":32,"_29":494,"_133":495,"_39":40,"_38":264,"_135":57,"_36":496,"_13":155,"_33":20,"_34":497,"_23":24,"_140":-5,"_253":498,"_26":499},{"_41":489,"_31":441,"_29":436,"_133":160,"_39":40,"_38":137,"_135":57,"_36":490,"_13":155,"_33":156,"_34":-5,"_23":24,"_140":-5,"_253":491,"_26":492},{"_41":485,"_31":333,"_29":471,"_133":436,"_39":40,"_38":480,"_135":57,"_36":486,"_13":155,"_33":156,"_34":-5,"_23":24,"_140":-5,"_253":487,"_26":488},{"_41":477,"_31":478,"_29":479,"_133":471,"_39":40,"_38":480,"_135":57,"_36":481,"_13":155,"_33":20,"_34":482,"_23":24,"_140":-5,"_253":483,"_26":484},{"_41":468,"_31":469,"_29":470,"_133":471,"_39":40,"_38":472,"_135":57,"_36":473,"_13":155,"_33":20,"_34":474,"_23":24,"_140":-5,"_253":475,"_26":476},{"_41":464,"_31":319,"_29":458,"_133":436,"_39":40,"_38":459,"_135":57,"_36":465,"_13":155,"_33":156,"_34":-5,"_23":24,"_140":-5,"_253":466,"_26":467},{"_41":455,"_31":456,"_29":457,"_133":458,"_39":40,"_38":459,"_135":57,"_36":460,"_13":155,"_33":273,"_34":461,"_23":24,"_140":-5,"_253":462,"_26":463},{"_41":451,"_31":305,"_29":445,"_133":436,"_39":40,"_38":446,"_135":57,"_36":452,"_13":155,"_33":156,"_34":-5,"_23":24,"_140":-5,"_253":453,"_26":454},{"_41":442,"_31":443,"_29":444,"_133":445,"_39":40,"_38":446,"_135":57,"_36":447,"_13":155,"_33":20,"_34":448,"_23":24,"_140":-5,"_253":449,"_26":450},{"_41":434,"_31":32,"_29":435,"_133":436,"_39":40,"_38":137,"_135":57,"_36":437,"_13":155,"_33":20,"_34":438,"_23":24,"_140":-5,"_253":439,"_26":440},{"_41":430,"_31":358,"_29":352,"_133":160,"_39":40,"_38":353,"_135":57,"_36":431,"_13":155,"_33":156,"_34":-5,"_23":24,"_140":-5,"_253":432,"_26":433},{"_41":426,"_31":333,"_29":396,"_133":352,"_39":40,"_38":421,"_135":57,"_36":427,"_13":155,"_33":156,"_34":-5,"_23":24,"_140":-5,"_253":428,"_26":429},{"_41":418,"_31":419,"_29":420,"_133":396,"_39":40,"_38":421,"_135":57,"_36":422,"_13":155,"_33":20,"_34":423,"_23":24,"_140":-5,"_253":424,"_26":425},{"_41":410,"_31":411,"_29":412,"_133":396,"_39":40,"_38":413,"_135":57,"_36":414,"_13":155,"_33":20,"_34":415,"_23":24,"_140":-5,"_253":416,"_26":417},{"_41":402,"_31":403,"_29":404,"_133":396,"_39":40,"_38":405,"_135":57,"_36":406,"_13":155,"_33":20,"_34":407,"_23":24,"_140":-5,"_253":408,"_26":409},{"_41":393,"_31":394,"_29":395,"_133":396,"_39":40,"_38":397,"_135":57,"_36":398,"_13":155,"_33":20,"_34":399,"_23":24,"_140":-5,"_253":400,"_26":401},{"_41":389,"_31":319,"_29":375,"_133":352,"_39":40,"_38":376,"_135":57,"_36":390,"_13":155,"_33":156,"_34":-5,"_23":24,"_140":-5,"_253":391,"_26":392},{"_41":381,"_31":382,"_29":383,"_133":375,"_39":40,"_38":384,"_135":57,"_36":385,"_13":155,"_33":273,"_34":386,"_23":24,"_140":-5,"_253":387,"_26":388},{"_41":372,"_31":373,"_29":374,"_133":375,"_39":40,"_38":376,"_135":57,"_36":377,"_13":155,"_33":273,"_34":378,"_23":24,"_140":-5,"_253":379,"_26":380},{"_41":368,"_31":305,"_29":362,"_133":352,"_39":40,"_38":363,"_135":57,"_36":369,"_13":155,"_33":156,"_34":-5,"_23":24,"_140":-5,"_253":370,"_26":371},{"_41":359,"_31":360,"_29":361,"_133":362,"_39":40,"_38":363,"_135":57,"_36":364,"_13":155,"_33":20,"_34":365,"_23":24,"_140":-5,"_253":366,"_26":367},{"_41":350,"_31":32,"_29":351,"_133":352,"_39":40,"_38":353,"_135":57,"_36":354,"_13":155,"_33":20,"_34":355,"_23":24,"_140":-5,"_253":356,"_26":357},{"_41":346,"_31":295,"_29":289,"_133":160,"_39":40,"_38":290,"_135":57,"_36":347,"_13":155,"_33":156,"_34":-5,"_23":24,"_140":-5,"_253":348,"_26":349},{"_41":342,"_31":333,"_29":327,"_133":289,"_39":40,"_38":337,"_135":57,"_36":343,"_13":155,"_33":156,"_34":-5,"_23":24,"_140":-5,"_253":344,"_26":345},{"_41":334,"_31":335,"_29":336,"_133":327,"_39":40,"_38":337,"_135":57,"_36":338,"_13":155,"_33":20,"_34":339,"_23":24,"_140":-5,"_253":340,"_26":341},{"_41":324,"_31":325,"_29":326,"_133":327,"_39":40,"_38":328,"_135":57,"_36":329,"_13":155,"_33":20,"_34":330,"_23":24,"_140":-5,"_253":331,"_26":332},{"_41":320,"_31":319,"_29":313,"_133":289,"_39":40,"_38":314,"_135":57,"_36":321,"_13":155,"_33":156,"_34":-5,"_23":24,"_140":-5,"_253":322,"_26":323},{"_41":310,"_31":311,"_29":312,"_133":313,"_39":40,"_38":314,"_135":57,"_36":315,"_13":155,"_33":273,"_34":316,"_23":24,"_140":-5,"_253":317,"_26":318},{"_41":306,"_31":305,"_29":299,"_133":289,"_39":40,"_38":300,"_135":57,"_36":307,"_13":155,"_33":156,"_34":-5,"_23":24,"_140":-5,"_253":308,"_26":309},{"_41":296,"_31":297,"_29":298,"_133":299,"_39":40,"_38":300,"_135":57,"_36":301,"_13":155,"_33":20,"_34":302,"_23":24,"_140":-5,"_253":303,"_26":304},{"_41":287,"_31":32,"_29":288,"_133":289,"_39":40,"_38":290,"_135":57,"_36":291,"_13":155,"_33":20,"_34":292,"_23":24,"_140":-5,"_253":293,"_26":294},{"_41":280,"_31":281,"_29":282,"_133":160,"_39":40,"_38":161,"_135":24,"_36":283,"_13":155,"_33":20,"_34":284,"_23":24,"_140":-5,"_253":285,"_26":286},{"_41":150,"_31":151,"_29":152,"_133":-5,"_39":40,"_38":153,"_135":57,"_36":277,"_13":155,"_33":156,"_34":-5,"_23":24,"_140":-5,"_253":278,"_26":279},{"_41":268,"_31":269,"_29":270,"_133":152,"_39":40,"_38":271,"_135":24,"_36":272,"_13":161,"_33":273,"_34":274,"_23":24,"_140":-5,"_253":275,"_26":276},{"_41":259,"_31":260,"_29":261,"_133":152,"_39":40,"_38":262,"_135":24,"_36":263,"_13":264,"_33":20,"_34":265,"_23":24,"_140":-5,"_253":266,"_26":267},{"_41":142,"_31":143,"_29":144,"_133":-5,"_39":40,"_38":145,"_135":24,"_36":256,"_13":147,"_33":20,"_34":148,"_23":24,"_140":-5,"_253":257,"_26":258},{"_41":131,"_31":132,"_29":55,"_133":-5,"_39":40,"_38":134,"_135":24,"_36":252,"_13":137,"_33":138,"_34":139,"_23":24,"_140":43,"_253":254,"_26":255},["D",1779849132432],"children",[],[132],["D",1779832820354],[],[143],"b5689c08-594b-11f1-b791-ee650bb23af1","index.html","2640535c-5925-11f1-aa26-ee650bb23af1",86,["D",1779831712600],13,"\n\n\n \n \n Skillbook\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",[],[151,260],"49833112-594e-11f1-aeb3-ee650bb23af1","client.js","37b85f62-5925-11f1-8789-ee650bb23af1",88,["D",1779832820060],"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};\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\nlet skills = [];\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 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.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 modal.classList.remove(\"hidden\");\n document.body.classList.add(\"modal-open\");\n modalPanel.scrollTop = 0;\n}\n\nfunction closeModal() {\n modal.classList.add(\"hidden\");\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.classList.contains(\"hidden\")) closeModal();\n});\n\nfunction render() {\n binder.innerHTML = \"\";\n const q = (search.value || \"\").toLowerCase().trim();\n const filtered = q\n ? skills.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 : skills;\n\n for (const s of filtered) {\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.src = `/art/${s.slug}`;\n img.addEventListener(\"load\", () => img.classList.add(\"loaded\"));\n img.addEventListener(\"error\", () => img.remove());\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/${encodeURIComponent(s.slug)}/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\n const flip = () => node.classList.toggle(\"flipped\");\n node.addEventListener(\"click\", (e) => {\n if (e.target.closest(\"a\")) return;\n if (e.target.closest(\".flip-back\")) {\n e.stopPropagation();\n node.classList.remove(\"flipped\");\n return;\n }\n if (node.classList.contains(\"flipped\") && e.target.closest(\".card-back\")) return;\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 binder.appendChild(node);\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",[],[151,269],["D",1779815151548],[248,249],[151],"4368c052-5927-11f1-8ea0-ee650bb23af1","_index.json","4368c0f2-5927-11f1-8ea0-ee650bb23af1",["D",1779816059463],"{\n \"_comment\": \"Binder-only card metadata. The agent doesn't need this — it just reads each skill's SKILL.md. Order here is the default binder order. Each entry is a presentation layer over the canonical SKILL.md at skills//.\",\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 },\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 },\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 },\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 },\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 },\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 }\n}\n",[],[159,281],"522e2d20-5927-11f1-9996-ee650bb23af1","522e2dfc-5927-11f1-9996-ee650bb23af1","4e2a9291-2907-4c55-b49c-832837935ff8",18,["D",1779816084246],"---\nname: release-notes\ndescription: Draft user-facing release notes from a week of commits\ntriggers:\n - draft release notes\n - what shipped\n - weekly notes\n - changelog\n---\n\n# Release Notes\n\nGiven a date range:\n\n1. **Pull merged PRs** in that range.\n2. **Cluster by user-visible theme.** \"Auth\", \"Search\", \"Performance\" — not by component name.\n3. **Translate.** A PR titled `fix(api): handle nil pointer in /v2/users` becomes a one-liner like *\"Fixed a rare crash when loading the user list.\"*\n4. **Lead with the wins.** Bug fixes after features.\n\n## Anti-goals\n\n- Don't include internal refactors.\n- Don't list every PR — group ruthlessly.\n- Don't use the words \"improved\" or \"enhanced.\" They're noise.\n",[],[159,295,32],"release-notes","8aaa165a-5927-11f1-983d-ee650bb23af1","release_notes.md","8aaa1718-5927-11f1-983d-ee650bb23af1","040c81aa-8653-4f87-bb1b-464e2d011ac0",40,["D",1779816178993],"# [HEADLINE — to fill in]\n\n## What's new\n\n- [user-visible win, one sentence]\n- [user-visible win, one sentence]\n\n## What we fixed\n\n- [user-visible fix, one sentence]\n- [user-visible fix, one sentence]\n\n---\n\n*Range: [start] → [end]. Internal refactors omitted.*\n",[],[159,295,305,297],"templates","8aaa3ae0-5927-11f1-983d-ee650bb23af1",["D",1779816178993],[244],[159,295,305],"985aeef0-5927-11f1-8b1a-ee650bb23af1","merged_prs.ts","985af1f2-5927-11f1-8b1a-ee650bb23af1","e9f00e27-63ed-463f-bdff-6f6771dd781e",46,["D",1779816201922],"// List merged PRs in a date range for release-notes drafting.\n// Usage:\n// deno run --allow-run merged_prs.ts

\n\nconst [start, end] = Deno.args;\nif (!start || !end) throw new Error(\"Usage: merged_prs.ts

\");\n\nconst cmd = new Deno.Command(\"gh\", {\n args: [\n \"pr\",\n \"list\",\n \"--state\",\n \"merged\",\n \"--search\",\n `merged:${start}..${end}`,\n \"--json\",\n \"number,title,author,labels,mergedAt\",\n \"--limit\",\n \"200\",\n ],\n});\nconst { stdout } = await cmd.output();\nconsole.log(new TextDecoder().decode(stdout));\n",[],[159,295,319,311],"scripts","985afdbe-5927-11f1-8b1a-ee650bb23af1",["D",1779816201922],[242],[159,295,319],"7ac5b758-5927-11f1-a17b-ee650bb23af1","user_i_write_headline.md","7ac5b7f8-5927-11f1-a17b-ee650bb23af1","be506f4b-5755-4680-a0bf-5ced0759d7bf",34,["D",1779816152349],"---\nname: i-write-headline\ndescription: I write the headline; agent drafts the body\nmetadata:\n type: user\n---\n\nDraft the body but leave the headline to me — that's where I want to taste-test the framing.\n\n**Why:** The headline sets the editorial tone and I have strong opinions about which beat to lead with. I'd rather see it as a placeholder I overwrite than something I have to talk you out of.\n\n**How to apply:** Output `## [HEADLINE — to fill in]` at the top, then the body. Don't draft a headline.\n",[],[159,295,333,325],"memories","78c4810a-5927-11f1-a117-ee650bb23af1","feedback_user_voice.md","78c481d2-5927-11f1-a117-ee650bb23af1",33,["D",1779816148916],"---\nname: user-voice-not-engineer-voice\ndescription: Translate from changelog-speak to plain English\nmetadata:\n type: feedback\n---\n\nTranslate from changelog-speak to plain English. If a user wouldn't care, cut it.\n\n**Why:** Release notes that look like git logs are useless to the people who actually read them. Translation is the whole job.\n\n**How to apply:** For each PR, ask \"what changed for the user?\" not \"what changed in the code?\" If the answer is nothing user-visible, drop it.\n",[],[159,295,333,335],"78c4aacc-5927-11f1-a117-ee650bb23af1",["D",1779816148916],[239,240],[159,295,333],"522e5548-5927-11f1-9996-ee650bb23af1",["D",1779816084246],[238,241,243,245],[159,295],"4a92aa82-5927-11f1-8ada-ee650bb23af1","4a92ab4a-5927-11f1-8ada-ee650bb23af1","2a094cab-dd14-41a6-a915-964deb3bb88d",15,["D",1779816071451],"---\nname: pr-review\ndescription: Pre-merge review focused on correctness, not style nits\ntriggers:\n - review my pr\n - ship check\n - is this ready\n - pre-merge\n---\n\n# Ship Check\n\nRun before merging anything to main. Three passes:\n\n1. **Correctness.** Does the diff do what the PR title says? Any unhandled errors, off-by-ones, race conditions?\n2. **Blast radius.** What else might this break? Grep for callers of changed functions.\n3. **Tests.** Does the test plan actually cover the new code path, or is it theater?\n\nOutput: a punch list of high-confidence findings only. Skip nits.\n\n## Anti-goals\n\n- Don't comment on style — the linter handles that.\n- Don't ask for tests where the code is obviously a one-off.\n- Don't approve speculatively. If something smells, say so.\n",[],[159,358,32],"pr-review","875bca2a-5927-11f1-ac92-ee650bb23af1","punch_list.md","875bcb42-5927-11f1-ac92-ee650bb23af1","3f2397d4-8b0f-4ce9-bef8-031bbaa27a50",38,["D",1779816173463],"# Ship Check findings\n\n- **[high]** [file:line] — [terse description, action implied]\n- **[med]** [file:line] — [terse description]\n- **[low]** [file:line] — [terse description]\n\n(No findings means ship it.)\n",[],[159,358,305,360],"875bec8a-5927-11f1-ac92-ee650bb23af1",["D",1779816173463],[235],[159,358,305],"8e732aec-5927-11f1-aa02-ee650bb23af1","pr_diff.ts","8e732bbe-5927-11f1-aa02-ee650bb23af1","505319ee-6aa5-41cb-a106-3f8606bf893f",42,["D",1779816185359],"// Print the diff of a PR for review.\n// Usage:\n// deno run --allow-run pr_diff.ts \n\nconst prNum = Deno.args[0];\nif (!prNum) throw new Error(\"Usage: pr_diff.ts \");\n\nconst cmd = new Deno.Command(\"gh\", { args: [\"pr\", \"diff\", prNum] });\nconst { stdout } = await cmd.output();\nconsole.log(new TextDecoder().decode(stdout));\n",[],[159,358,319,373],"9090e1c0-5927-11f1-ba97-ee650bb23af1","caller_grep.ts","9090e27e-5927-11f1-ba97-ee650bb23af1",43,["D",1779816188902],"// Grep for callers of a given function name across the repo.\n// Usage:\n// deno run --allow-run --allow-read caller_grep.ts [path]\n\nconst [fn, root = \".\"] = Deno.args;\nif (!fn) throw new Error(\"Usage: caller_grep.ts [path]\");\n\nconst cmd = new Deno.Command(\"rg\", {\n args: [\"-n\", \"--no-heading\", `\\\\b${fn}\\\\s*\\\\(`, root],\n});\nconst { stdout } = await cmd.output();\nconsole.log(new TextDecoder().decode(stdout));\n",[],[159,358,319,382],"8e734e28-5927-11f1-aa02-ee650bb23af1",["D",1779816185359],[232,233],[159,358,319],"69a221f0-5927-11f1-9c22-ee650bb23af1","reference_test_conventions.md","69a222ae-5927-11f1-9c22-ee650bb23af1","dd1334f9-6c8b-46b6-97ac-6a33262beda0",26,["D",1779816123580],"---\nname: test-conventions\ndescription: See docs/testing-philosophy.md for what \"real test\" means\nmetadata:\n type: reference\n---\n\n`docs/testing-philosophy.md` defines what a \"real test\" looks like in this codebase — integration over unit, no DB mocks, real fixtures.\n\n**How to apply:** When evaluating the test plan section of a PR, check that new tests follow these conventions. Snapshot tests of mocked output don't count as coverage here.\n",[],[159,358,333,394],"6789c440-5927-11f1-8833-ee650bb23af1","project_merge_freeze.md","6789c51c-5927-11f1-8833-ee650bb23af1",25,["D",1779816120076],"---\nname: merge-freeze\ndescription: Non-critical merges paused through 2026-03-05 mobile release cut\nmetadata:\n type: project\n---\n\nNon-critical merges paused 2026-03-05 through mobile release cut.\n\n**Why:** Mobile team cuts a release branch on 2026-03-05; main needs to be stable. Non-critical PRs should wait.\n\n**How to apply:** When reviewing, flag whether a PR is critical (security, broken-prod-fix) or non-critical (feature, refactor, polish). For non-critical, recommend holding until after the cut.\n",[],[159,358,333,403],"6bc7e7a8-5927-11f1-bdbc-ee650bb23af1","feedback_punch_lists.md","6bc7e848-5927-11f1-bdbc-ee650bb23af1",27,["D",1779816127198],"---\nname: punch-lists-not-prose\ndescription: Output is a bulleted list — no overall framing\nmetadata:\n type: feedback\n---\n\nBulleted list. No \"overall this looks great\" framing.\n\n**Why:** I'm going to act on a list, not read a review essay. Praise paragraphs are noise.\n\n**How to apply:** Format the output as a flat bulleted list of findings, ordered by severity. No intro, no summary, no rating.\n",[],[159,358,333,411],"65714462-5927-11f1-b692-ee650bb23af1","feedback_high_confidence_only.md","65714520-5927-11f1-b692-ee650bb23af1",24,["D",1779816116560],"---\nname: high-confidence-only\ndescription: Skip uncertain findings; only flag what you're sure about\nmetadata:\n type: feedback\n---\n\nUncertain findings waste my time. Either you're sure or you don't mention it.\n\n**Why:** I get one chance to focus on a PR review. \"Might be a race condition, not sure\" forces me to redo the work to confirm. If you can't confirm, don't mention it.\n\n**How to apply:** Before listing a finding, mentally check: \"Would I bet $20 this is a real issue?\" If no, drop it.\n",[],[159,358,333,419],"657166a4-5927-11f1-b692-ee650bb23af1",["D",1779816116560],[227,228,229,230],[159,358,333],"4a92d70a-5927-11f1-8ada-ee650bb23af1",["D",1779816071451],[226,231,234,236],[159,358],"47eabd4c-5927-11f1-8ee0-ee650bb23af1","47eabf5e-5927-11f1-8ee0-ee650bb23af1","4d45bd9b-e9e4-476e-b30f-9b0f5adb3f20",["D",1779816067016],"---\nname: inbox-zero\ndescription: Triage email into reply / wait / archive piles and draft the easy replies\ntriggers:\n - tidy the inbox\n - process email\n - inbox zero\n - clean up email\n---\n\n# Inbox Zero\n\nMove every unread email into one of three buckets:\n\n- **Reply** — needs a response from me in the next 24h.\n- **Wait** — I'm waiting on someone else; archive with a follow-up reminder.\n- **Done** — read-and-archive; no action needed.\n\nFor everything in **Reply**, draft a short response in my voice (terse, no greeting) as a Gmail compose URL.\n\n## Anti-goals\n\n- Don't auto-send anything.\n- Don't archive without showing me the subject lines first.\n",[],[159,441,32],"inbox-zero","85b646a0-5927-11f1-a990-ee650bb23af1","compose_url.md","85b64754-5927-11f1-a990-ee650bb23af1","873a5f92-f92e-4b9c-8e2d-8d29787dd1f6",37,["D",1779816170699],"# Gmail compose URL\n\nURL form (newlines preserved, unlike the draft API):\n\n```\nhttps://mail.google.com/mail/?view=cm&to=RECIPIENT&su=SUBJECT&body=BODY_URLENCODED\n```\n\nEncode the body with `encodeURIComponent(body)`. Don't pre-encode newlines as `%0A` manually — the encoder handles it.\n",[],[159,441,305,443],"85b66ab8-5927-11f1-a990-ee650bb23af1",["D",1779816170699],[223],[159,441,305],"8cb07fe8-5927-11f1-ba97-ee650bb23af1","fetch_unread.ts","8cb080c4-5927-11f1-ba97-ee650bb23af1","01c250be-e49a-4eda-8827-79bb4fb18305",41,["D",1779816182408],"// Fetch unread Gmail threads via the Gmail API.\n// Stub — wire to your own Gmail credentials.\n//\n// Usage:\n// deno run --allow-net --allow-env fetch_unread.ts\n\nconst TOKEN = Deno.env.get(\"GMAIL_ACCESS_TOKEN\");\nif (!TOKEN) throw new Error(\"Set GMAIL_ACCESS_TOKEN\");\n\nconst res = await fetch(\n \"https://gmail.googleapis.com/gmail/v1/users/me/threads?q=is:unread&maxResults=50\",\n { headers: { Authorization: `Bearer ${TOKEN}` } },\n);\nconst data = await res.json();\nconsole.log(JSON.stringify(data.threads ?? [], null, 2));\n",[],[159,441,319,456],"8cb08eca-5927-11f1-ba97-ee650bb23af1",["D",1779816182408],[221],[159,441,319],"62c75b84-5927-11f1-ae70-ee650bb23af1","feedback_terse_voice.md","62c75c2e-5927-11f1-ae70-ee650bb23af1","dd26b882-2c1d-47f7-9d6b-bcc9eb210a3f",23,["D",1779816112046],"---\nname: terse-voice\ndescription: No greeting, no sign-off — just the body\nmetadata:\n type: feedback\n---\n\nNo \"Hi Person,\" and no sign-off. Just the body.\n\n**Why:** I draft email like Slack DMs — quick, casual, no ceremony. Greetings feel formal and stilted in my voice.\n\n**How to apply:** Skip the salutation and the sign-off lines entirely. Open with the first substantive sentence.\n",[],[159,441,333,469],"6092394c-5927-11f1-aec0-ee650bb23af1","feedback_compose_url.md","609239f6-5927-11f1-aec0-ee650bb23af1",22,["D",1779816108382],"---\nname: compose-url-not-draft\ndescription: Use Gmail compose URLs, not the draft API\nmetadata:\n type: feedback\n---\n\nUse Gmail compose URLs; the draft API mangles newlines.\n\n**Why:** Gmail's `create_draft` MCP tool collapses paragraph breaks into single newlines, which makes drafts unreadable when I open them.\n\n**How to apply:** Always produce a `https://mail.google.com/mail/?view=cm&...` URL with the body URL-encoded. See `templates/compose_url.md`.\n",[],[159,441,333,478],"6092599a-5927-11f1-aec0-ee650bb23af1",["D",1779816108382],[218,219],[159,441,333],"47eae3c6-5927-11f1-8ee0-ee650bb23af1",["D",1779816067016],[217,220,222,224],[159,441],"45863dba-5927-11f1-8f41-ee650bb23af1","45863eaa-5927-11f1-8f41-ee650bb23af1","365b9f99-bd09-4722-a069-ade3f9220c79",["D",1779816062997],"---\nname: daily-standup\ndescription: Walk through yesterday's progress, today's plan, and blockers\ntriggers:\n - start my day\n - morning standup\n - what's on my plate\n---\n\n# Daily Standup\n\nWhen invoked, do three things in order:\n\n1. **Yesterday.** Pull commits, PRs, and Slack threads from the last 24h. Summarize what shipped vs. what stalled.\n2. **Today.** Read open issues assigned to me, ordered by priority. Surface the top 3.\n3. **Blockers.** Anything waiting on someone else? Draft a one-line nudge for each.\n\n## Trigger phrases\n\n- \"start my day\"\n- \"morning standup\"\n- \"what's on my plate\"\n\n## Anti-goals\n\n- Don't write the standup *for* me. Surface, don't dictate.\n- Don't include items older than 5 days unless I ask.\n",[],[159,500,32],"daily-standup","821666ec-5927-11f1-92d4-ee650bb23af1","standup_message.md","821668cc-5927-11f1-92d4-ee650bb23af1","2aca8361-d4d3-4c6d-aed8-d75773346bb0",35,["D",1779816164612],"# Standup message\n\n*Yesterday*\n- [thread / outcome]\n\n*Today*\n- [top priority]\n- [second priority]\n- [third priority]\n\n*Blockers*\n- [waiting on X for Y] — or `none`\n",[],[159,500,305,502],"83c7c7ec-5927-11f1-bfab-ee650bb23af1","blocker_nudge.md","83c7c8aa-5927-11f1-bfab-ee650bb23af1",36,["D",1779816167462],"# Blocker nudge\n\nHey [name] — gentle bump on [thing]. I'm blocked on [downstream item] until I hear back. No rush if [reason], just flagging.\n",[],[159,500,305,511],"82168884-5927-11f1-92d4-ee650bb23af1",["D",1779816164612],[213,214],[159,500,305],"5c07b2a8-5927-11f1-a97e-ee650bb23af1","project_q2_focus.md","5c07b352-5927-11f1-a97e-ee650bb23af1","32673484-2cb6-4232-8cca-5c296b283278",20,["D",1779816100772],"---\nname: q2-focus\ndescription: Migration takes priority over polish through end of June\nmetadata:\n type: project\n---\n\nMigration takes priority over polish through end of June.\n\n**Why:** Q2 quarterly goal is to finish the platform migration; polish work that doesn't unblock it should slide.\n\n**How to apply:** When ranking \"today\" items, push polish/nice-to-have work below migration tasks even if it would normally rank higher by recency.\n",[],[159,500,333,523],"5e85d3ac-5927-11f1-ae5e-ee650bb23af1","feedback_plain_prose.md","5e85d456-5927-11f1-ae5e-ee650bb23af1",21,["D",1779816104956],"---\nname: plain-prose\ndescription: No emoji prefixes in the summary\nmetadata:\n type: feedback\n---\n\nNo emoji prefixes in the summary. Reads gimmicky.\n\n**Why:** I want to skim the standup like a sentence, not parse little icons. Emojis at line starts slow my eye down.\n\n**How to apply:** Plain bullets and prose. No 🚀 / ✅ / ⚠️ prefixes.\n",[],[159,500,333,532],"59dfa670-5927-11f1-872e-ee650bb23af1","feedback_group_by_thread.md","59dfa760-5927-11f1-872e-ee650bb23af1",19,["D",1779816097151],"---\nname: group-by-thread\ndescription: Group items by thread, not by date\nmetadata:\n type: feedback\n---\n\nGroup items by thread, not by date.\n\n**Why:** I think in conversations, not in calendar slots.\n\n**How to apply:** When summarizing yesterday's progress, cluster commits/PRs/Slack messages by the underlying conversation or work-stream, even if they happened hours apart.\n",[],[159,500,333,540],"59dfd870-5927-11f1-872e-ee650bb23af1",["D",1779816097151],[209,210,211],[159,500,333],"458668e4-5927-11f1-8f41-ee650bb23af1",["D",1779816062997],[208,212,215],[159,500],"4ff4a1ec-5927-11f1-8896-ee650bb23af1","4ff4a296-5927-11f1-8896-ee650bb23af1","8065ce08-d570-41af-9c8f-26b9e70daa6d",17,["D",1779816080513],"---\nname: code-cartographer\ndescription: Locate code by intent, not just by name\ntriggers:\n - where is the X\n - show me the code for\n - find me the\n - map the\n---\n\n# Code Cartographer\n\nWhen asked where something lives:\n\n1. **Try the obvious name first** with grep / find.\n2. **If miss, try synonyms.** A \"user-auth\" feature might live under `session`, `identity`, `accounts`. Try three variants.\n3. **Surface the entry point + the call graph two levels deep.** Not just the file — show what calls in and what gets called.\n4. **Note dead branches.** If a code path is unreachable, flag it.\n\n## Anti-goals\n\n- Don't read the whole file. Excerpt the relevant chunk with `file_path:line`.\n- Don't editorialize about code quality — that's a separate skill.\n",[],[159,563,32],"code-cartographer","963abb78-5927-11f1-92d4-ee650bb23af1","call_graph.ts","963abc36-5927-11f1-92d4-ee650bb23af1","9afdd701-218d-401a-8de4-eee46b40452d",45,["D",1779816198413],"// Print a two-level call graph rooted at a function.\n// Stub: depth-1 caller search + depth-1 callee parse via tree-sitter or ripgrep.\n// Usage:\n// deno run --allow-run --allow-read call_graph.ts \n\nconst [fn] = Deno.args;\nif (!fn) throw new Error(\"Usage: call_graph.ts \");\n\nconst callers = new Deno.Command(\"rg\", {\n args: [\"-n\", \"--no-heading\", `\\\\b${fn}\\\\s*\\\\(`, \".\"],\n});\nconst { stdout } = await callers.output();\nconst lines = new TextDecoder().decode(stdout).trim().split(\"\\n\");\n\nconsole.log(`Callers of ${fn}:`);\nfor (const line of lines) console.log(\" \" + line);\n\n// TODO: parse the body of `fn` itself and list outgoing calls (depth 1).\n",[],[159,563,319,565],"963ac866-5927-11f1-92d4-ee650bb23af1",["D",1779816198413],[205],[159,563,319],"769fe9f0-5927-11f1-8ee0-ee650bb23af1","project_old_auth_gone.md","769feaa4-5927-11f1-8ee0-ee650bb23af1","b3b19400-9ef6-4888-8c74-55952d336c95",32,["D",1779816145388],"---\nname: old-auth-gone\ndescription: Legacy auth middleware removed in 2026-04 — don't reference it\nmetadata:\n type: project\n---\n\nThe legacy auth middleware was removed 2026-04. Don't reference it.\n\n**Why:** Code search results from before 2026-04 may still surface it; reading those would mislead my mental model.\n\n**How to apply:** If a search hits files in `legacy/auth/`, exclude them and note \"this directory was removed in 2026-04.\" Current auth lives in `services/identity/`.\n",[],[159,563,333,578],"7268a872-5927-11f1-8b7b-ee650bb23af1","feedback_three_synonyms.md","7268a930-5927-11f1-8b7b-ee650bb23af1",30,["D",1779816138311],"---\nname: three-synonyms-then-ask\ndescription: Try three name variants then ask rather than guessing further\nmetadata:\n type: feedback\n---\n\nIf three name variants miss, ask me what I'm actually looking for rather than guessing further.\n\n**Why:** When searches keep missing, I usually meant something specific that I can clarify in one sentence. Guessing wastes time and burns context.\n\n**How to apply:** After three reasonable synonyms come up empty, stop and ask: \"I tried X, Y, Z — what are you actually trying to find?\"\n",[],[159,563,333,587],"7458243c-5927-11f1-ba97-ee650bb23af1","feedback_file_path_line.md","745824fa-5927-11f1-ba97-ee650bb23af1",31,["D",1779816141561],"---\nname: file-path-line-links\ndescription: Reference code with clickable file_path:line links\nmetadata:\n type: feedback\n---\n\nEvery reference as a clickable link, not prose.\n\n**Why:** I navigate by clicking. `src/auth/login.ts:42` as a markdown link is one click; \"the login function in src/auth/login.ts around line 42\" is friction.\n\n**How to apply:** Format every code reference as `[file_path:line](file_path:line)` markdown. Never describe a location in prose.\n",[],[159,563,333,595],"7268b466-5927-11f1-8b7b-ee650bb23af1",["D",1779816138311],[201,202,203],[159,563,333],"4ff4c82a-5927-11f1-8896-ee650bb23af1",["D",1779816080513],[200,204,206],[159,563],"4d5412ec-5927-11f1-ae5e-ee650bb23af1","4d5413aa-5927-11f1-ae5e-ee650bb23af1","5c2015a7-b596-43c1-95fc-2c6150518e13",16,["D",1779816076095],"---\nname: bug-triage\ndescription: First-response triage for production incidents\ntriggers:\n - what's broken\n - incident triage\n - page just fired\n---\n\n# Incident Triage\n\nWhen a page fires:\n\n1. **Confirm impact.** Real user-facing? What % of traffic? Check the dashboards in the reference block.\n2. **Bisect.** What deployed in the last 6 hours? Any feature flags flipped?\n3. **Mitigate before fix.** Roll back the suspect deploy or flip the flag back. Fix the root cause after the bleeding stops.\n4. **Write the incident note** in the channel — symptom, blast radius, mitigation, owner. One paragraph.\n\n## Anti-goals\n\n- Don't paste raw stack traces into Slack. Summarize.\n- Don't speculate about cause in the incident note until you've verified.\n",[],[159,618,32],"bug-triage","88f268e4-5927-11f1-8833-ee650bb23af1","incident_note.md","88f269ac-5927-11f1-8833-ee650bb23af1","b1f685a6-1d9f-41e3-bf7e-b84dd5cec9d8",39,["D",1779816176129],"# Incident note\n\n**Symptom:** [what users see]\n**Blast radius:** [% traffic, regions, features affected]\n**Mitigation:** [what we did to stop the bleeding]\n**Owner:** [name] — investigating root cause\n**Started:** [timestamp]\n",[],[159,618,305,620],"88f27654-5927-11f1-8833-ee650bb23af1",["D",1779816176129],[197],[159,618,305],"939b4c34-5927-11f1-8b1a-ee650bb23af1","recent_deploys.ts","939b4cfc-5927-11f1-8b1a-ee650bb23af1","299be80f-3b64-4648-bfdb-94a971af0bcb",44,["D",1779816194005],"// List deploys in the last N hours, newest first.\n// Wire to your own deploy log source.\n//\n// Usage:\n// deno run --allow-net recent_deploys.ts [hours=6]\n\nconst hours = Number(Deno.args[0] ?? 6);\nconst since = new Date(Date.now() - hours * 3600_000).toISOString();\n\n// Replace with your real deploy log URL + token.\nconst url = `${Deno.env.get(\"DEPLOY_LOG_URL\")}?since=${encodeURIComponent(since)}`;\nconst res = await fetch(url, {\n headers: { Authorization: `Bearer ${Deno.env.get(\"DEPLOY_LOG_TOKEN\")}` },\n});\nconst data = await res.json();\nfor (const d of data.deploys ?? []) {\n console.log(`${d.time}\\t${d.service}\\t${d.sha.slice(0, 8)}\\t${d.author}`);\n}\n",[],[159,618,319,633],"939b75ec-5927-11f1-8b1a-ee650bb23af1",["D",1779816194005],[195],[159,618,319],"6d8aa6f2-5927-11f1-bfab-ee650bb23af1","reference_latency_dashboard.md","6d8aa7e2-5927-11f1-bfab-ee650bb23af1","17178805-ed8d-46fd-ba2f-0c641ab35d7a",28,["D",1779816130149],"---\nname: latency-dashboard\ndescription: grafana.internal/d/api-latency is the oncall watch dashboard\nmetadata:\n type: reference\n---\n\n`grafana.internal/d/api-latency` is the dashboard oncall watches — the thing that pages someone when latency spikes.\n\n**How to apply:** Step 1 of any incident is checking this dashboard to confirm impact and bound the time window of the issue. Quote the affected percentile and time range in the incident note.\n",[],[159,618,333,646],"6ff8b776-5927-11f1-8b7b-ee650bb23af1","feedback_mitigate_first.md","6ff8b866-5927-11f1-8b7b-ee650bb23af1",29,["D",1779816134222],"---\nname: mitigate-first\ndescription: Roll back before debugging — stop the bleeding, then investigate\nmetadata:\n type: feedback\n---\n\nDon't try to fix in production. Roll back, breathe, then fix on a branch.\n\n**Why:** Past incident where a \"small fix\" deployed under pressure broke a second thing. Mitigation must come before debugging.\n\n**How to apply:** Step 3 of incident triage is *always* mitigation — never propose a forward-fix in production as the first move.\n",[],[159,618,333,655],"6d8ad2c6-5927-11f1-bfab-ee650bb23af1",["D",1779816130149],[192,193],[159,618,333],"4d543eac-5927-11f1-ae5e-ee650bb23af1",["D",1779816076095],[191,194,196,198],[159,618],"c7bc7ab8-5974-11f1-80fb-ee650bb23af1","c7831584-5974-11f1-b3e1-ee650bb23af1",["D",1779849352722],[],[159,675,32],"anthropic-canvas-design","c78314da-5974-11f1-b3e1-ee650bb23af1",95,["D",1779849352346],[189],[159,675],"c75535c4-5974-11f1-b3e1-ee650bb23af1","c75536a0-5974-11f1-b3e1-ee650bb23af1","c6f94de0-5974-11f1-b3e1-ee650bb23af1",94,["D",1779849352044],"---\nname: brand-guidelines\ndescription: 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.\nlicense: Complete terms in LICENSE.txt\n---\n\n# Anthropic Brand Styling\n\n## Overview\n\nTo access Anthropic's official brand identity and style resources, use this skill.\n\n**Keywords**: branding, corporate identity, visual identity, post-processing, styling, brand colors, typography, Anthropic brand, visual formatting, visual design\n\n## Brand Guidelines\n\n### Colors\n\n**Main Colors:**\n\n- Dark: `#141413` - Primary text and dark backgrounds\n- Light: `#faf9f5` - Light backgrounds and text on dark\n- Mid Gray: `#b0aea5` - Secondary elements\n- Light Gray: `#e8e6dc` - Subtle backgrounds\n\n**Accent Colors:**\n\n- Orange: `#d97757` - Primary accent\n- Blue: `#6a9bcc` - Secondary accent\n- Green: `#788c5d` - Tertiary accent\n\n### Typography\n\n- **Headings**: Poppins (with Arial fallback)\n- **Body Text**: Lora (with Georgia fallback)\n- **Note**: Fonts should be pre-installed in your environment for best results\n\n## Features\n\n### Smart Font Application\n\n- Applies Poppins font to headings (24pt and larger)\n- Applies Lora font to body text\n- Automatically falls back to Arial/Georgia if custom fonts unavailable\n- Preserves readability across all systems\n\n### Text Styling\n\n- Headings (24pt+): Poppins font\n- Body text: Lora font\n- Smart color selection based on background\n- Preserves text hierarchy and formatting\n\n### Shape and Accent Colors\n\n- Non-text shapes use accent colors\n- Cycles through orange, blue, and green accents\n- Maintains visual interest while staying on-brand\n\n## Technical Details\n\n### Font Management\n\n- Uses system-installed Poppins and Lora fonts when available\n- Provides automatic fallback to Arial (headings) and Georgia (body)\n- No font installation required - works with existing system fonts\n- For best results, pre-install Poppins and Lora fonts in your environment\n\n### Color Application\n\n- Uses RGB color values for precise brand matching\n- Applied via python-pptx's RGBColor class\n- Maintains color fidelity across different systems\n",[],[159,689,32],"anthropic-brand-guidelines","c6f94d04-5974-11f1-b3e1-ee650bb23af1",93,["D",1779849351443],[187],[159,689],"c6c862c0-5974-11f1-b3e1-ee650bb23af1","c6c86388-5974-11f1-b3e1-ee650bb23af1","c662890a-5974-11f1-9c4b-ee650bb23af1",92,["D",1779849351122],"---\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",[],[159,703,32],"anthropic-algorithmic-art","c6628842-5974-11f1-9c4b-ee650bb23af1",91,["D",1779849350455],[185],[159,703],["D",1779816059463],[184,186,188,190,199,207,216,225,237,246],[159],"fdc59542-5927-11f1-81dd-ee650bb23af1","loader.ts","ae9857de-5927-11f1-8d94-ee650bb23af1",50,["D",1779816372118],"// Loads skills off disk by walking the `skills/` directory.\n//\n// Layout (a standard \"skill repo\" shape, agent-readable as-is):\n//\n// skills/\n// _index.json ← binder-only card metadata\n// /\n// SKILL.md ← YAML frontmatter + markdown body\n// memories/_.md ← per-memory files (frontmatter typed)\n// templates/.md\n// scripts/.ts\n\nimport { listFilesByPath, readFile } from \"https://esm.town/v/std/utils/index.ts\";\nimport { parse as parseYaml } from \"https://esm.sh/yaml@2.5.0\";\n\nexport type SkillColor = \"blue\" | \"white\" | \"black\" | \"red\" | \"green\" | \"gold\";\n\nexport interface Memory {\n kind: \"feedback\" | \"project\" | \"reference\" | \"user\";\n slug: string;\n title: string;\n description?: string;\n body: string;\n}\n\nexport interface Skill {\n slug: string;\n name: string;\n description: string;\n triggers: string[];\n body: string;\n\n type: string;\n color: SkillColor;\n art: string;\n artPrompt: string;\n manaCost: number;\n level: number;\n invocations: number;\n lastUsed: string;\n flavor: string;\n\n memories: Memory[];\n templates: string[];\n scripts: string[];\n}\n\ninterface CardMeta {\n type: string;\n color: SkillColor;\n art: string;\n artPrompt: string;\n manaCost: number;\n level: number;\n invocations: number;\n lastUsed: string;\n flavor: string;\n}\n\ninterface FileEntry {\n path: string;\n name?: string;\n type?: string;\n}\n\nlet cached: Skill[] | null = null;\n\nexport async function loadSkills(): Promise {\n if (cached) return cached;\n const indexText = await readFile(\"/skills/_index.json\", import.meta.url);\n const index = JSON.parse(indexText) as Record;\n\n // One recursive listing under skills/ — everything in one round-trip.\n const allFiles = (await listFilesByPath(\"skills\", import.meta.url)) as FileEntry[];\n\n const order = Object.keys(index).filter((k) => !k.startsWith(\"_\"));\n const skills = await Promise.all(\n order.map((slug) => loadOne(slug, index[slug] as CardMeta, allFiles)),\n );\n cached = skills;\n return skills;\n}\n\nasync function loadOne(slug: string, meta: CardMeta, allFiles: FileEntry[]): Promise {\n const prefix = `skills/${slug}/`;\n const filesForSkill = allFiles.filter((f) => f.path?.startsWith(prefix));\n\n const body = await readFile(`/skills/${slug}/SKILL.md`, import.meta.url);\n const { frontmatter } = splitFrontmatter(body);\n\n const memoryFiles = filesForSkill.filter(\n (f) => f.path.startsWith(`${prefix}memories/`) && f.path.endsWith(\".md\"),\n );\n const memories = await Promise.all(memoryFiles.map(loadMemory));\n\n const templates = filesForSkill\n .filter((f) => f.path.startsWith(`${prefix}templates/`) && f.type !== \"directory\")\n .map((f) => basename(f.path))\n .sort();\n const scripts = filesForSkill\n .filter((f) => f.path.startsWith(`${prefix}scripts/`) && f.type !== \"directory\")\n .map((f) => basename(f.path))\n .sort();\n\n return {\n slug,\n name: String(frontmatter.name ?? slug),\n description: String(frontmatter.description ?? \"\"),\n triggers: Array.isArray(frontmatter.triggers) ? frontmatter.triggers.map(String) : [],\n body,\n type: meta.type,\n color: meta.color,\n art: meta.art,\n artPrompt: meta.artPrompt,\n manaCost: meta.manaCost,\n level: meta.level,\n invocations: meta.invocations,\n lastUsed: meta.lastUsed,\n flavor: meta.flavor,\n memories,\n templates,\n scripts,\n };\n}\n\nasync function loadMemory(f: FileEntry): Promise {\n const text = await readFile(`/${f.path}`, import.meta.url);\n const { frontmatter, body } = splitFrontmatter(text);\n const name = basename(f.path);\n const kind = resolveKind(name, frontmatter);\n const memorySlug = String(frontmatter.name ?? name.replace(/\\.md$/, \"\"));\n return {\n kind,\n slug: memorySlug,\n title: humanize(memorySlug),\n description: frontmatter.description ? String(frontmatter.description) : undefined,\n body: body.trim(),\n };\n}\n\nfunction basename(path: string): string {\n return path.split(\"/\").pop() ?? path;\n}\n\nfunction splitFrontmatter(md: string): { frontmatter: Record; body: string } {\n const m = md.match(/^---\\r?\\n([\\s\\S]*?)\\r?\\n---\\r?\\n?([\\s\\S]*)$/);\n if (!m) return { frontmatter: {}, body: md };\n try {\n const fm = parseYaml(m[1]) ?? {};\n return { frontmatter: fm, body: m[2] };\n } catch {\n return { frontmatter: {}, body: m[2] };\n }\n}\n\nfunction resolveKind(filename: string, fm: Record): Memory[\"kind\"] {\n const declared = fm?.metadata?.type ?? fm?.type;\n if (declared && [\"feedback\", \"project\", \"reference\", \"user\"].includes(declared)) {\n return declared as Memory[\"kind\"];\n }\n const base = filename.toLowerCase();\n if (base.startsWith(\"feedback\")) return \"feedback\";\n if (base.startsWith(\"project\")) return \"project\";\n if (base.startsWith(\"reference\")) return \"reference\";\n if (base.startsWith(\"user\")) return \"user\";\n return \"feedback\";\n}\n\nfunction humanize(slug: string): string {\n return slug.replace(/[-_]/g, \" \").replace(/\\b\\w/g, (c) => c.toUpperCase());\n}\n",[],[165,713],["D",1779814995869],[182],[165],["D",1779814930341],{"_95":94,"_103":99},{"_95":94,"_96":97,"_98":99,"_18":53,"_100":101,"_102":24},{"_13":84,"_31":85,"_41":40,"_86":42,"_87":-5,"_88":-5,"_89":-5,"_90":-5,"_91":-5,"_92":43,"_93":94},"ctx",{"_77":-5,"_123":760,"_761":762,"_763":764,"_765":24,"_766":24,"_767":24,"_768":57,"_769":-5,"_770":-7,"_771":-7,"_772":155,"_773":24,"_774":24,"_775":-5,"_776":24,"_777":24,"_778":24,"_779":-5},"ENV",{"_731":732,"_733":734,"_735":85,"_736":737,"_738":739,"_740":741,"_742":743,"_744":745,"_746":747,"_748":749,"_750":751,"_752":753,"_754":755,"_756":757,"_758":759},"REACT_APP_SENTRY_DSN","https://586020d86f05489db63a554690acf1e9@o1398359.ingest.sentry.io/6724499","RENDER_GIT_COMMIT","e87eb04e707cf64e7e532c8e8ec395f209e17f15","RENDER_GIT_BRANCH","POSTHOG_API_TOKEN","phc_nmoyuAkStEZuUp69rYlg1DZgrIt19Gx0Y4Hwf8tGgJP","POSTHOG_API_HOST","https://wart.val.town","WEB_API_TEMPLATE","https://{val}.web.val.run","APP_URL","https://www.val.town","MODULE_URL","https://esm.town","VANITY_WEB_API_TEMPLATE","https://{label}.val.run/","DENOLS_URL","https://lsp.val.town","NODE_ENV","production","CLOUDFLARE_TURNSTILE_SITE_KEY","0x4AAAAAACtaIZJH7s9rBMZ6","GOOGLE_CLIENT_ID","875989696899-jtsqkhlbdv5jrlsk8631p7ipjg3c6o62.apps.googleusercontent.com","STRIPE_PUBLISHABLE_KEY","pk_live_51N2zvWEpZTTLipIkVEwXrUG9AT0yeOOEYxszarZT1jpsZV58Ly6wlg3SltZpHN26CUalOBmUSY7adQRQiSkCZz2500qSXNkf8Y","API_URL","https://api.val.town",[],"preferencesKeybindings","default","preferencesTheme","light","preferencesFixers","preferencesCopilot","preferencesSelectionAi","preferencesCloseBrackets","preferencesChatPanelState","preferencesDprint","preferencesDenofmt","notificationCount","flagDenols","isBusinessOrgMember","businessOrgHandle","isBusinessOrgAdmin","isHigherTownieTier","navCollapsed","currentOrgId"]

Memories (stickers)

Templates

Scripts

Memories

Files

Diff · v96