[{"_1":2,"_3":-5,"_4":-5},"loaderData",{"_5":6,"_7":8,"_9":10},"actionData","errors","root",{"_983":984,"_985":986},"routes/_app.x.$handle.$name",{"_97":96,"_32":45,"_106":87,"_27":107,"_13":14,"_108":-5,"_11":109,"_110":111,"_112":113,"_114":115,"_116":117,"_20":-5,"_118":-5,"_119":-5,"_120":25,"_121":122,"_123":59,"_124":-5,"_125":-5,"_126":127},"routes/_app.x.$handle.$name.branch.$branch.version.$version.diff",{"_11":12,"_13":14,"_15":16,"_17":-5,"_18":-5},"project",{"_43":44,"_32":45,"_38":46,"_47":-5,"_48":25,"_49":50,"_51":50,"_52":53,"_54":-5,"_18":55,"_56":57,"_58":59,"_60":-5,"_61":-5,"_62":63,"_64":65,"_66":-5,"_67":-5,"_68":-5,"_69":-5,"_70":71,"_72":71,"_73":74,"_75":74,"_76":74,"_77":71,"_78":71,"_79":80,"_81":82,"_83":84,"_85":25},"version",136,"changes",[19],"aiChatInfo","userId",{"_20":21,"_22":23,"_24":25,"_26":25,"_27":28,"_29":28},"file",{"_30":31,"_32":33,"_34":20,"_35":37,"_38":39,"_40":14,"_41":42,"_24":25},"previous",{"_30":31,"_32":33,"_34":20,"_35":36},"deleted",false,"deletedHere","path","sprite-builder/ui.html","latestPath","fileId","69a25d74-5e3a-11f1-ac47-1607ee4eb77e","name","ui.html","fileType","content","\n\n\n\n\nsprite-builder · skillbook\n\n\n\n

🎨 sprite-builder

reference-conditioned pixel art via OpenAI · token-gated · skillbook

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

\n Kind\n \n

\n Model\n \n

\n Quality\n \n

\n\n Prompt\n \n\n

Advanced · reference crop (x, y, w, h) into the source sheet

force regenerate (ignore cache)

\n\n \n

\n\n\n\n\n","\n\n\n\n\nsprite-builder · skillbook\n\n\n\n

🎨 sprite-builder

reference-conditioned pixel art via OpenAI · token-gated · skillbook

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

\n Kind\n \n

\n Model\n \n

\n Quality\n \n

\n\n Prompt\n \n\n force regenerate (ignore cache)\n\n \n

\n\n \n

\n\n\n\n\n","createdAt",["D",1780374210430],"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",{"_97":96,"_105":101},"org",{"_97":96,"_98":99,"_100":101,"_18":55,"_102":103,"_104":25},"branch",{"_13":86,"_32":87,"_43":42,"_88":44,"_89":-5,"_90":-5,"_91":-5,"_92":-5,"_93":-5,"_94":45,"_95":96},"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=1789570799&sig=bfafc9de3f25d020766c1a418088d2aa7a118e3408c10bafe80b0604dafaeba0","tier","pro","canRestrictVals","profileImageUrl","branchName","","adoptOrgId",{"_43":44,"_32":45,"_38":979,"_47":-5,"_48":25,"_49":50,"_51":50,"_52":53,"_54":-5,"_18":55,"_56":57,"_58":59,"_60":-5,"_61":-5,"_62":63,"_64":65,"_66":-5,"_67":-5,"_68":-5,"_69":-5,"_70":71,"_72":71,"_73":74,"_75":74,"_76":74,"_77":71,"_78":71,"_79":980,"_81":981,"_83":982,"_85":25},"tree",[190,192,284,287,290,291],"files",[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,252,253,254,255,256,257,258,259,260,261,262,263,264,265,266,267,268,269,270,271,272,273,274,275,276,277,278,279,280,281,282,283,284,285,286,287,288,289,290,291],"counts",{"_179":158,"_180":63,"_181":158,"_182":183,"_184":185},"contents",[128,129,130,131,132,133],"upstreamProject","upstreamBranch","emptyEnvVars","flags",[],"hasHttpFiles","grants","orgs","customDomains",{},{"_43":173,"_32":174,"_30":175,"_136":-5,"_41":42,"_40":176,"_138":59,"_38":177,"_13":158,"_34":159,"_35":-5,"_24":25,"_143":-5,"_27":178},{"_43":167,"_32":168,"_30":169,"_136":-5,"_41":42,"_40":170,"_138":59,"_38":171,"_13":158,"_34":159,"_35":-5,"_24":25,"_143":-5,"_27":172},{"_43":161,"_32":162,"_30":163,"_136":-5,"_41":42,"_40":164,"_138":59,"_38":165,"_13":158,"_34":159,"_35":-5,"_24":25,"_143":-5,"_27":166},{"_43":153,"_32":154,"_30":155,"_136":-5,"_41":42,"_40":156,"_138":59,"_38":157,"_13":158,"_34":159,"_35":-5,"_24":25,"_143":-5,"_27":160},{"_43":145,"_32":146,"_30":147,"_136":-5,"_41":42,"_40":148,"_138":25,"_38":149,"_13":150,"_34":20,"_35":151,"_24":25,"_143":-5,"_27":152},{"_43":134,"_32":135,"_30":57,"_136":-5,"_41":42,"_40":137,"_138":25,"_38":139,"_13":140,"_34":141,"_35":142,"_24":25,"_143":45,"_27":144},"f2e3168e-5974-11f1-981c-ee650bb23af1","main.tsx","parentId",130,"latest",["D",1779849425099],16,"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// Card art. Public requests only read cached blob art or receive a fast SVG fallback.\n// New OpenAI generations require ART_ADMIN_TOKEN.\nconst LEGACY_BLOB_PREFIX = \"skill-binder/art/openai-v2\";\nconst GENERATED_BLOB_PREFIX = \"skillbook/art/openai-webp-v1\";\n\nfunction svgEscape(value: string) { return value.replaceAll(\"&\", \"&\").replaceAll(\"<\", \"<\").replaceAll(\">\", \">\").replaceAll('\"', \""\"); }\nfunction hashString(value: string) { let hash = 2166136261; for (let i = 0; i < value.length; i++) { hash ^= value.charCodeAt(i); hash = Math.imul(hash, 16777619); } return hash >>> 0; }\nfunction imagePrompt(skill: Awaited>[number]) { return [skill.artPrompt, skill.deck === \"Anthropic Skills\" ? \"Shared theme: warm parchment, charcoal ink, muted orange accent, blue and green details, handcrafted codex, atelier light.\" : \"\", \"Painted collectible fantasy card illustration with traditional brushwork, tactile paper-era art direction.\", \"Avoid modern UI, computer screens, app windows, keyboards, terminal text, logos, typography, letters, numbers, watermarks, borders, and captions.\", \"Square artwork crop, centered subject, strong silhouette.\"].filter(Boolean).join(\" \"); }\nfunction base64ToBytes(value: string) { const binary = atob(value); const bytes = new Uint8Array(binary.length); for (let i = 0; i < binary.length; i++) bytes[i] = binary.charCodeAt(i); return bytes; }\nfunction fallbackArt(skill: Awaited>[number]) { const h = hashString(skill.slug); const a = skill.deck === \"Anthropic Skills\"; const ps = a ? [[\"#faf9f5\",\"#e8e6dc\",\"#d97757\",\"#141413\"],[\"#f5eee1\",\"#b0aea5\",\"#6a9bcc\",\"#141413\"],[\"#f8f1df\",\"#d8c7a3\",\"#788c5d\",\"#2b261f\"]] : [[\"#efe2bd\",\"#b9965c\",\"#5f7b4a\",\"#241a12\"],[\"#e8d9b8\",\"#7f9ca9\",\"#d9b76a\",\"#20150d\"],[\"#f0d789\",\"#a3543f\",\"#263f2d\",\"#1b130d\"]]; const p = ps[h % ps.length]; const name = svgEscape(skill.name); const sub = svgEscape(skill.type.replace(/^Skill - /, \"\").replace(/^Skill — /, \"\")); const sig = [\"◆\",\"✦\",\"◇\",\"✧\",\"✶\"][h % 5]; return ''; }\nasync function cachedArt(slug: string) { try { const webp = await blob.get(GENERATED_BLOB_PREFIX + \"/\" + slug + \".webp\"); if (webp?.ok) { const buf = await webp.arrayBuffer(); if (buf.byteLength > 0) return new Response(buf, { headers: { \"content-type\": \"image/webp\", \"cache-control\": \"public, max-age=604800, immutable\" } }); } } catch {} try { const png = await blob.get(LEGACY_BLOB_PREFIX + \"/\" + slug + \".png\"); if (png?.ok) { const buf = await png.arrayBuffer(); if (buf.byteLength > 0) return new Response(buf, { headers: { \"content-type\": \"image/png\", \"cache-control\": \"public, max-age=604800, immutable\" } }); } } catch {} return null; }\napp.get(\"/art/:slug\", async (c) => { const slug = c.req.param(\"slug\"); if (!SLUG_RE.test(slug)) return c.text(\"bad slug\", 400); const skills = await loadSkills(); const skill = skills.find((s) => s.slug === slug); if (!skill) return c.text(\"not found\", 404); try { const cached = await cachedArt(slug); if (cached) return cached; } catch {} return c.body(fallbackArt(skill), 200, { \"content-type\": \"image/svg+xml; charset=utf-8\", \"cache-control\": \"public, max-age=604800, immutable\" }); });\napp.get(\"/admin/generate-art/:slug\", async (c) => { const slug = c.req.param(\"slug\"); if (!SLUG_RE.test(slug)) return c.text(\"bad slug\", 400); const admin = Deno.env.get(\"ART_ADMIN_TOKEN\"); if (!admin || c.req.header(\"x-skillbook-art-admin\") !== admin) return c.text(\"not found\", 404); const skills = await loadSkills(); const skill = skills.find((s) => s.slug === slug); if (!skill) return c.text(\"not found\", 404); const cached = await cachedArt(slug); if (cached && c.req.query(\"force\") !== \"1\") return cached; const OPENAI_API_KEY = Deno.env.get(\"SKILLBOOK_OPENAI_API_KEY\") ?? Deno.env.get(\"OPENAI_API_KEY\"); if (!OPENAI_API_KEY) return c.text(\"art key missing\", 503); const result = await fetch(\"https://api.openai.com/v1/images/generations\", { method: \"POST\", headers: { \"authorization\": \"Bearer \" + OPENAI_API_KEY, \"content-type\": \"application/json\" }, body: JSON.stringify({ model: \"gpt-image-1-mini\", prompt: imagePrompt(skill), size: \"1024x1024\", quality: \"low\", n: 1, output_format: \"webp\" }) }); const json = await result.json(); if (!result.ok) { console.error(\"openai image generation failed\", json); return c.text(\"image generation error\", 502); } const b64 = json?.data?.[0]?.b64_json; if (!b64) return c.text(\"no image in OpenAI response\", 502); const bytes = base64ToBytes(b64); await blob.set(GENERATED_BLOB_PREFIX + \"/\" + slug + \".webp\", bytes); return new Response(bytes, { headers: { \"content-type\": \"image/webp\", \"cache-control\": \"public, max-age=604800, immutable\" } }); });\n\napp.get(\"/source\", (c) => c.redirect(parseVal().links.self.val));\n\nexport default app.fetch;\n","label",[135],"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",[146],"26409fec-5925-11f1-aa26-ee650bb23af1","static","50efcf7d-70b5-49fc-a445-557da8021c74",4,["D",1779815151548],0,"directory",[154],"5530621e-5e3a-11f1-b60a-1607ee4eb77e","sprite-builder","3edda770-ead6-4de0-8e7e-5bcf1dea8129",132,["D",1780374005541],[162],"4368f9fa-5927-11f1-8ea0-ee650bb23af1","skills","e64cb2f1-5878-4608-9048-785617ed5e8f",12,["D",1779816059463],[168],"c975aa14-5924-11f1-8d6c-ee650bb23af1","data","b37bf479-eb20-4e42-81f0-b9d97bc255d3",2,["D",1779814995869],[174],"pulls","branches","forks","envVars",{"_186":188,"_189":63},"connections",{"_186":158,"_187":158},"count","unfilledCount",3,"emptyCount",{"_43":173,"_32":174,"_30":175,"_136":-5,"_41":42,"_40":176,"_138":59,"_38":976,"_13":158,"_34":159,"_35":-5,"_24":25,"_143":-5,"_293":977,"_27":978},{"_43":968,"_32":969,"_30":970,"_136":175,"_41":42,"_40":971,"_138":25,"_38":972,"_13":176,"_34":313,"_35":973,"_24":25,"_143":-5,"_293":974,"_27":975},{"_43":167,"_32":168,"_30":169,"_136":-5,"_41":42,"_40":170,"_138":59,"_38":965,"_13":158,"_34":159,"_35":-5,"_24":25,"_143":-5,"_293":966,"_27":967},{"_43":960,"_32":959,"_30":953,"_136":169,"_41":42,"_40":961,"_138":25,"_38":962,"_13":158,"_34":159,"_35":-5,"_24":25,"_143":-5,"_293":963,"_27":964},{"_43":951,"_32":344,"_30":952,"_136":953,"_41":42,"_40":954,"_138":59,"_38":955,"_13":158,"_34":20,"_35":956,"_24":25,"_143":-5,"_293":957,"_27":958},{"_43":946,"_32":945,"_30":939,"_136":169,"_41":42,"_40":947,"_138":25,"_38":948,"_13":158,"_34":159,"_35":-5,"_24":25,"_143":-5,"_293":949,"_27":950},{"_43":937,"_32":344,"_30":938,"_136":939,"_41":42,"_40":940,"_138":59,"_38":941,"_13":158,"_34":20,"_35":942,"_24":25,"_143":-5,"_293":943,"_27":944},{"_43":932,"_32":931,"_30":925,"_136":169,"_41":42,"_40":933,"_138":25,"_38":934,"_13":158,"_34":159,"_35":-5,"_24":25,"_143":-5,"_293":935,"_27":936},{"_43":923,"_32":344,"_30":924,"_136":925,"_41":42,"_40":926,"_138":59,"_38":927,"_13":158,"_34":20,"_35":928,"_24":25,"_143":-5,"_293":929,"_27":930},{"_43":918,"_32":917,"_30":911,"_136":169,"_41":42,"_40":919,"_138":25,"_38":920,"_13":158,"_34":159,"_35":-5,"_24":25,"_143":-5,"_293":921,"_27":922},{"_43":909,"_32":344,"_30":910,"_136":911,"_41":42,"_40":912,"_138":59,"_38":913,"_13":158,"_34":20,"_35":914,"_24":25,"_143":-5,"_293":915,"_27":916},{"_43":904,"_32":903,"_30":897,"_136":169,"_41":42,"_40":905,"_138":25,"_38":906,"_13":158,"_34":159,"_35":-5,"_24":25,"_143":-5,"_293":907,"_27":908},{"_43":895,"_32":344,"_30":896,"_136":897,"_41":42,"_40":898,"_138":59,"_38":899,"_13":158,"_34":20,"_35":900,"_24":25,"_143":-5,"_293":901,"_27":902},{"_43":890,"_32":889,"_30":883,"_136":169,"_41":42,"_40":891,"_138":25,"_38":892,"_13":158,"_34":159,"_35":-5,"_24":25,"_143":-5,"_293":893,"_27":894},{"_43":881,"_32":344,"_30":882,"_136":883,"_41":42,"_40":884,"_138":59,"_38":885,"_13":158,"_34":20,"_35":886,"_24":25,"_143":-5,"_293":887,"_27":888},{"_43":876,"_32":875,"_30":869,"_136":169,"_41":42,"_40":877,"_138":25,"_38":878,"_13":158,"_34":159,"_35":-5,"_24":25,"_143":-5,"_293":879,"_27":880},{"_43":867,"_32":344,"_30":868,"_136":869,"_41":42,"_40":870,"_138":59,"_38":871,"_13":158,"_34":20,"_35":872,"_24":25,"_143":-5,"_293":873,"_27":874},{"_43":862,"_32":861,"_30":855,"_136":169,"_41":42,"_40":863,"_138":25,"_38":864,"_13":158,"_34":159,"_35":-5,"_24":25,"_143":-5,"_293":865,"_27":866},{"_43":853,"_32":344,"_30":854,"_136":855,"_41":42,"_40":856,"_138":59,"_38":857,"_13":158,"_34":20,"_35":858,"_24":25,"_143":-5,"_293":859,"_27":860},{"_43":848,"_32":847,"_30":841,"_136":169,"_41":42,"_40":849,"_138":25,"_38":850,"_13":158,"_34":159,"_35":-5,"_24":25,"_143":-5,"_293":851,"_27":852},{"_43":839,"_32":344,"_30":840,"_136":841,"_41":42,"_40":842,"_138":59,"_38":843,"_13":158,"_34":20,"_35":844,"_24":25,"_143":-5,"_293":845,"_27":846},{"_43":834,"_32":833,"_30":827,"_136":169,"_41":42,"_40":835,"_138":25,"_38":836,"_13":158,"_34":159,"_35":-5,"_24":25,"_143":-5,"_293":837,"_27":838},{"_43":825,"_32":344,"_30":826,"_136":827,"_41":42,"_40":828,"_138":59,"_38":829,"_13":158,"_34":20,"_35":830,"_24":25,"_143":-5,"_293":831,"_27":832},{"_43":820,"_32":819,"_30":813,"_136":169,"_41":42,"_40":821,"_138":25,"_38":822,"_13":158,"_34":159,"_35":-5,"_24":25,"_143":-5,"_293":823,"_27":824},{"_43":811,"_32":344,"_30":812,"_136":813,"_41":42,"_40":814,"_138":59,"_38":815,"_13":158,"_34":20,"_35":816,"_24":25,"_143":-5,"_293":817,"_27":818},{"_43":806,"_32":805,"_30":799,"_136":169,"_41":42,"_40":807,"_138":25,"_38":808,"_13":158,"_34":159,"_35":-5,"_24":25,"_143":-5,"_293":809,"_27":810},{"_43":797,"_32":344,"_30":798,"_136":799,"_41":42,"_40":800,"_138":59,"_38":801,"_13":158,"_34":20,"_35":802,"_24":25,"_143":-5,"_293":803,"_27":804},{"_43":792,"_32":791,"_30":785,"_136":169,"_41":42,"_40":793,"_138":25,"_38":794,"_13":158,"_34":159,"_35":-5,"_24":25,"_143":-5,"_293":795,"_27":796},{"_43":783,"_32":344,"_30":784,"_136":785,"_41":42,"_40":786,"_138":59,"_38":787,"_13":158,"_34":20,"_35":788,"_24":25,"_143":-5,"_293":789,"_27":790},{"_43":778,"_32":777,"_30":771,"_136":169,"_41":42,"_40":779,"_138":25,"_38":780,"_13":158,"_34":159,"_35":-5,"_24":25,"_143":-5,"_293":781,"_27":782},{"_43":769,"_32":344,"_30":770,"_136":771,"_41":42,"_40":772,"_138":59,"_38":773,"_13":158,"_34":20,"_35":774,"_24":25,"_143":-5,"_293":775,"_27":776},{"_43":764,"_32":763,"_30":757,"_136":169,"_41":42,"_40":765,"_138":25,"_38":766,"_13":158,"_34":159,"_35":-5,"_24":25,"_143":-5,"_293":767,"_27":768},{"_43":755,"_32":344,"_30":756,"_136":757,"_41":42,"_40":758,"_138":59,"_38":759,"_13":158,"_34":20,"_35":760,"_24":25,"_143":-5,"_293":761,"_27":762},{"_43":750,"_32":749,"_30":743,"_136":169,"_41":42,"_40":751,"_138":25,"_38":752,"_13":158,"_34":159,"_35":-5,"_24":25,"_143":-5,"_293":753,"_27":754},{"_43":741,"_32":344,"_30":742,"_136":743,"_41":42,"_40":744,"_138":59,"_38":745,"_13":158,"_34":20,"_35":746,"_24":25,"_143":-5,"_293":747,"_27":748},{"_43":736,"_32":735,"_30":729,"_136":169,"_41":42,"_40":737,"_138":25,"_38":738,"_13":158,"_34":159,"_35":-5,"_24":25,"_143":-5,"_293":739,"_27":740},{"_43":727,"_32":344,"_30":728,"_136":729,"_41":42,"_40":730,"_138":59,"_38":731,"_13":158,"_34":20,"_35":732,"_24":25,"_143":-5,"_293":733,"_27":734},{"_43":723,"_32":675,"_30":670,"_136":169,"_41":42,"_40":140,"_138":59,"_38":724,"_13":158,"_34":159,"_35":-5,"_24":25,"_143":-5,"_293":725,"_27":726},{"_43":719,"_32":390,"_30":705,"_136":670,"_41":42,"_40":706,"_138":59,"_38":720,"_13":158,"_34":159,"_35":-5,"_24":25,"_143":-5,"_293":721,"_27":722},{"_43":711,"_32":712,"_30":713,"_136":705,"_41":42,"_40":714,"_138":59,"_38":715,"_13":158,"_34":20,"_35":716,"_24":25,"_143":-5,"_293":717,"_27":718},{"_43":702,"_32":703,"_30":704,"_136":705,"_41":42,"_40":706,"_138":59,"_38":707,"_13":158,"_34":20,"_35":708,"_24":25,"_143":-5,"_293":709,"_27":710},{"_43":698,"_32":376,"_30":692,"_136":670,"_41":42,"_40":693,"_138":59,"_38":699,"_13":158,"_34":159,"_35":-5,"_24":25,"_143":-5,"_293":700,"_27":701},{"_43":689,"_32":690,"_30":691,"_136":692,"_41":42,"_40":693,"_138":59,"_38":694,"_13":158,"_34":313,"_35":695,"_24":25,"_143":-5,"_293":696,"_27":697},{"_43":685,"_32":362,"_30":679,"_136":670,"_41":42,"_40":680,"_138":59,"_38":686,"_13":158,"_34":159,"_35":-5,"_24":25,"_143":-5,"_293":687,"_27":688},{"_43":676,"_32":677,"_30":678,"_136":679,"_41":42,"_40":680,"_138":59,"_38":681,"_13":158,"_34":20,"_35":682,"_24":25,"_143":-5,"_293":683,"_27":684},{"_43":668,"_32":344,"_30":669,"_136":670,"_41":42,"_40":140,"_138":59,"_38":671,"_13":158,"_34":20,"_35":672,"_24":25,"_143":-5,"_293":673,"_27":674},{"_43":664,"_32":621,"_30":615,"_136":169,"_41":42,"_40":616,"_138":59,"_38":665,"_13":158,"_34":159,"_35":-5,"_24":25,"_143":-5,"_293":666,"_27":667},{"_43":660,"_32":390,"_30":638,"_136":615,"_41":42,"_40":647,"_138":59,"_38":661,"_13":158,"_34":159,"_35":-5,"_24":25,"_143":-5,"_293":662,"_27":663},{"_43":652,"_32":653,"_30":654,"_136":638,"_41":42,"_40":655,"_138":59,"_38":656,"_13":158,"_34":20,"_35":657,"_24":25,"_143":-5,"_293":658,"_27":659},{"_43":644,"_32":645,"_30":646,"_136":638,"_41":42,"_40":647,"_138":59,"_38":648,"_13":158,"_34":20,"_35":649,"_24":25,"_143":-5,"_293":650,"_27":651},{"_43":635,"_32":636,"_30":637,"_136":638,"_41":42,"_40":639,"_138":59,"_38":640,"_13":158,"_34":20,"_35":641,"_24":25,"_143":-5,"_293":642,"_27":643},{"_43":631,"_32":376,"_30":625,"_136":615,"_41":42,"_40":626,"_138":59,"_38":632,"_13":158,"_34":159,"_35":-5,"_24":25,"_143":-5,"_293":633,"_27":634},{"_43":622,"_32":623,"_30":624,"_136":625,"_41":42,"_40":626,"_138":59,"_38":627,"_13":158,"_34":313,"_35":628,"_24":25,"_143":-5,"_293":629,"_27":630},{"_43":613,"_32":344,"_30":614,"_136":615,"_41":42,"_40":616,"_138":59,"_38":617,"_13":158,"_34":20,"_35":618,"_24":25,"_143":-5,"_293":619,"_27":620},{"_43":609,"_32":558,"_30":552,"_136":169,"_41":42,"_40":553,"_138":59,"_38":610,"_13":158,"_34":159,"_35":-5,"_24":25,"_143":-5,"_293":611,"_27":612},{"_43":605,"_32":390,"_30":583,"_136":552,"_41":42,"_40":600,"_138":59,"_38":606,"_13":158,"_34":159,"_35":-5,"_24":25,"_143":-5,"_293":607,"_27":608},{"_43":597,"_32":598,"_30":599,"_136":583,"_41":42,"_40":600,"_138":59,"_38":601,"_13":158,"_34":20,"_35":602,"_24":25,"_143":-5,"_293":603,"_27":604},{"_43":589,"_32":590,"_30":591,"_136":583,"_41":42,"_40":592,"_138":59,"_38":593,"_13":158,"_34":20,"_35":594,"_24":25,"_143":-5,"_293":595,"_27":596},{"_43":580,"_32":581,"_30":582,"_136":583,"_41":42,"_40":584,"_138":59,"_38":585,"_13":158,"_34":20,"_35":586,"_24":25,"_143":-5,"_293":587,"_27":588},{"_43":576,"_32":362,"_30":562,"_136":552,"_41":42,"_40":563,"_138":59,"_38":577,"_13":158,"_34":159,"_35":-5,"_24":25,"_143":-5,"_293":578,"_27":579},{"_43":568,"_32":569,"_30":570,"_136":562,"_41":42,"_40":571,"_138":59,"_38":572,"_13":158,"_34":20,"_35":573,"_24":25,"_143":-5,"_293":574,"_27":575},{"_43":559,"_32":560,"_30":561,"_136":562,"_41":42,"_40":563,"_138":59,"_38":564,"_13":158,"_34":20,"_35":565,"_24":25,"_143":-5,"_293":566,"_27":567},{"_43":550,"_32":344,"_30":551,"_136":552,"_41":42,"_40":553,"_138":59,"_38":554,"_13":158,"_34":20,"_35":555,"_24":25,"_143":-5,"_293":556,"_27":557},{"_43":546,"_32":498,"_30":493,"_136":169,"_41":42,"_40":304,"_138":59,"_38":547,"_13":158,"_34":159,"_35":-5,"_24":25,"_143":-5,"_293":548,"_27":549},{"_43":542,"_32":390,"_30":528,"_136":493,"_41":42,"_40":537,"_138":59,"_38":543,"_13":158,"_34":159,"_35":-5,"_24":25,"_143":-5,"_293":544,"_27":545},{"_43":534,"_32":535,"_30":536,"_136":528,"_41":42,"_40":537,"_138":59,"_38":538,"_13":158,"_34":20,"_35":539,"_24":25,"_143":-5,"_293":540,"_27":541},{"_43":525,"_32":526,"_30":527,"_136":528,"_41":42,"_40":529,"_138":59,"_38":530,"_13":158,"_34":20,"_35":531,"_24":25,"_143":-5,"_293":532,"_27":533},{"_43":521,"_32":376,"_30":515,"_136":493,"_41":42,"_40":516,"_138":59,"_38":522,"_13":158,"_34":159,"_35":-5,"_24":25,"_143":-5,"_293":523,"_27":524},{"_43":512,"_32":513,"_30":514,"_136":515,"_41":42,"_40":516,"_138":59,"_38":517,"_13":158,"_34":313,"_35":518,"_24":25,"_143":-5,"_293":519,"_27":520},{"_43":508,"_32":362,"_30":502,"_136":493,"_41":42,"_40":503,"_138":59,"_38":509,"_13":158,"_34":159,"_35":-5,"_24":25,"_143":-5,"_293":510,"_27":511},{"_43":499,"_32":500,"_30":501,"_136":502,"_41":42,"_40":503,"_138":59,"_38":504,"_13":158,"_34":20,"_35":505,"_24":25,"_143":-5,"_293":506,"_27":507},{"_43":491,"_32":344,"_30":492,"_136":493,"_41":42,"_40":304,"_138":59,"_38":494,"_13":158,"_34":20,"_35":495,"_24":25,"_143":-5,"_293":496,"_27":497},{"_43":487,"_32":415,"_30":409,"_136":169,"_41":42,"_40":410,"_138":59,"_38":488,"_13":158,"_34":159,"_35":-5,"_24":25,"_143":-5,"_293":489,"_27":490},{"_43":483,"_32":390,"_30":453,"_136":409,"_41":42,"_40":478,"_138":59,"_38":484,"_13":158,"_34":159,"_35":-5,"_24":25,"_143":-5,"_293":485,"_27":486},{"_43":475,"_32":476,"_30":477,"_136":453,"_41":42,"_40":478,"_138":59,"_38":479,"_13":158,"_34":20,"_35":480,"_24":25,"_143":-5,"_293":481,"_27":482},{"_43":467,"_32":468,"_30":469,"_136":453,"_41":42,"_40":470,"_138":59,"_38":471,"_13":158,"_34":20,"_35":472,"_24":25,"_143":-5,"_293":473,"_27":474},{"_43":459,"_32":460,"_30":461,"_136":453,"_41":42,"_40":462,"_138":59,"_38":463,"_13":158,"_34":20,"_35":464,"_24":25,"_143":-5,"_293":465,"_27":466},{"_43":450,"_32":451,"_30":452,"_136":453,"_41":42,"_40":454,"_138":59,"_38":455,"_13":158,"_34":20,"_35":456,"_24":25,"_143":-5,"_293":457,"_27":458},{"_43":446,"_32":376,"_30":432,"_136":409,"_41":42,"_40":433,"_138":59,"_38":447,"_13":158,"_34":159,"_35":-5,"_24":25,"_143":-5,"_293":448,"_27":449},{"_43":438,"_32":439,"_30":440,"_136":432,"_41":42,"_40":441,"_138":59,"_38":442,"_13":158,"_34":313,"_35":443,"_24":25,"_143":-5,"_293":444,"_27":445},{"_43":429,"_32":430,"_30":431,"_136":432,"_41":42,"_40":433,"_138":59,"_38":434,"_13":158,"_34":313,"_35":435,"_24":25,"_143":-5,"_293":436,"_27":437},{"_43":425,"_32":362,"_30":419,"_136":409,"_41":42,"_40":420,"_138":59,"_38":426,"_13":158,"_34":159,"_35":-5,"_24":25,"_143":-5,"_293":427,"_27":428},{"_43":416,"_32":417,"_30":418,"_136":419,"_41":42,"_40":420,"_138":59,"_38":421,"_13":158,"_34":20,"_35":422,"_24":25,"_143":-5,"_293":423,"_27":424},{"_43":407,"_32":344,"_30":408,"_136":409,"_41":42,"_40":410,"_138":59,"_38":411,"_13":158,"_34":20,"_35":412,"_24":25,"_143":-5,"_293":413,"_27":414},{"_43":403,"_32":352,"_30":346,"_136":169,"_41":42,"_40":347,"_138":59,"_38":404,"_13":158,"_34":159,"_35":-5,"_24":25,"_143":-5,"_293":405,"_27":406},{"_43":399,"_32":390,"_30":384,"_136":346,"_41":42,"_40":394,"_138":59,"_38":400,"_13":158,"_34":159,"_35":-5,"_24":25,"_143":-5,"_293":401,"_27":402},{"_43":391,"_32":392,"_30":393,"_136":384,"_41":42,"_40":394,"_138":59,"_38":395,"_13":158,"_34":20,"_35":396,"_24":25,"_143":-5,"_293":397,"_27":398},{"_43":381,"_32":382,"_30":383,"_136":384,"_41":42,"_40":385,"_138":59,"_38":386,"_13":158,"_34":20,"_35":387,"_24":25,"_143":-5,"_293":388,"_27":389},{"_43":377,"_32":376,"_30":370,"_136":346,"_41":42,"_40":371,"_138":59,"_38":378,"_13":158,"_34":159,"_35":-5,"_24":25,"_143":-5,"_293":379,"_27":380},{"_43":367,"_32":368,"_30":369,"_136":370,"_41":42,"_40":371,"_138":59,"_38":372,"_13":158,"_34":313,"_35":373,"_24":25,"_143":-5,"_293":374,"_27":375},{"_43":363,"_32":362,"_30":356,"_136":346,"_41":42,"_40":357,"_138":59,"_38":364,"_13":158,"_34":159,"_35":-5,"_24":25,"_143":-5,"_293":365,"_27":366},{"_43":353,"_32":354,"_30":355,"_136":356,"_41":42,"_40":357,"_138":59,"_38":358,"_13":158,"_34":20,"_35":359,"_24":25,"_143":-5,"_293":360,"_27":361},{"_43":343,"_32":344,"_30":345,"_136":346,"_41":42,"_40":347,"_138":59,"_38":348,"_13":158,"_34":20,"_35":349,"_24":25,"_143":-5,"_293":350,"_27":351},{"_43":335,"_32":336,"_30":337,"_136":169,"_41":42,"_40":338,"_138":25,"_38":339,"_13":63,"_34":20,"_35":340,"_24":25,"_143":-5,"_293":341,"_27":342},{"_43":161,"_32":162,"_30":163,"_136":-5,"_41":42,"_40":164,"_138":59,"_38":332,"_13":158,"_34":159,"_35":-5,"_24":25,"_143":-5,"_293":333,"_27":334},{"_43":324,"_32":325,"_30":326,"_136":163,"_41":42,"_40":327,"_138":25,"_38":328,"_13":176,"_34":141,"_35":329,"_24":25,"_143":-5,"_293":330,"_27":331},{"_43":320,"_32":33,"_30":31,"_136":163,"_41":42,"_40":14,"_138":25,"_38":321,"_13":63,"_34":20,"_35":37,"_24":25,"_143":-5,"_293":322,"_27":323},{"_43":153,"_32":154,"_30":155,"_136":-5,"_41":42,"_40":156,"_138":59,"_38":317,"_13":158,"_34":159,"_35":-5,"_24":25,"_143":-5,"_293":318,"_27":319},{"_43":308,"_32":309,"_30":310,"_136":155,"_41":42,"_40":311,"_138":25,"_38":312,"_13":304,"_34":313,"_35":314,"_24":25,"_143":-5,"_293":315,"_27":316},{"_43":299,"_32":300,"_30":301,"_136":155,"_41":42,"_40":302,"_138":25,"_38":303,"_13":304,"_34":20,"_35":305,"_24":25,"_143":-5,"_293":306,"_27":307},{"_43":145,"_32":146,"_30":147,"_136":-5,"_41":42,"_40":148,"_138":25,"_38":296,"_13":150,"_34":20,"_35":151,"_24":25,"_143":-5,"_293":297,"_27":298},{"_43":134,"_32":135,"_30":57,"_136":-5,"_41":42,"_40":137,"_138":25,"_38":292,"_13":140,"_34":141,"_35":142,"_24":25,"_143":45,"_293":294,"_27":295},["D",1779849425099],"children",[],[135],["D",1779832820354],[],[146],"cff2d2ea-5974-11f1-9af7-ee650bb23af1","index.html","2640535c-5925-11f1-aa26-ee650bb23af1",127,["D",1779849366494],14,"\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",[],[154,300],"0df15e36-5975-11f1-acb1-ee650bb23af1","client.js","37b85f62-5925-11f1-8789-ee650bb23af1",131,["D",1779849470506],"script","import { marked } from \"https://esm.sh/marked@12\";\n\nconst COLOR_BG = {\n blue: \"card-bg-blue\",\n white: \"card-bg-white\",\n red: \"card-bg-red\",\n black: \"card-bg-black\",\n green: \"card-bg-green\",\n gold: \"card-bg-gold\",\n anthropic: \"card-bg-anthropic\",\n};\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\nfunction loadArt(img) {\n if (img.dataset.loaded) return;\n img.dataset.loaded = \"true\";\n img.src = img.dataset.src;\n}\n\nconst artObserver = \"IntersectionObserver\" in window\n ? new IntersectionObserver((entries) => {\n for (const entry of entries) {\n if (!entry.isIntersecting) continue;\n const img = entry.target;\n artObserver.unobserve(img);\n loadArt(img);\n }\n }, { rootMargin: \"720px 0px\" })\n : null;\n\nconst esc = (s) =>\n String(s).replaceAll(\"&\", \"&\").replaceAll(\"<\", \"<\").replaceAll(\">\", \">\").replaceAll('\"', \""\");\n\nasync function load() {\n const res = await fetch(\"/api/skills\");\n skills = await res.json();\n render();\n}\n\nfunction openModal(slug) {\n const s = skills.find((x) => x.slug === slug);\n if (!s) return;\n modalTitle.textContent = s.name;\n modalMeta.textContent = `${s.deck || \"Skillbook\"} · ${s.type} · Lv ${s.level} · ${s.invocations} uses`;\n modalTriggers.innerHTML = s.triggers\n .map((t) => `“${esc(t)}”`)\n .join(\"\");\n modalMd.innerHTML = marked.parse(s.body);\n modalMemories.innerHTML = s.memories.length\n ? s.memories\n .map(\n (m) => `\n

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

\n ${m.description ? `

${esc(m.description)}

` : \"\"}\n

${marked.parse(m.body)}

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

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

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

${esc(t)}

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

none

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

${esc(t)}

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

none

`;\n\n 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 (s.deck || \"\").toLowerCase().includes(q))\n : skills;\n\n const groups = new Map();\n for (const s of filtered) {\n const deck = s.deck || \"Skillbook\";\n if (!groups.has(deck)) groups.set(deck, []);\n groups.get(deck).push(s);\n }\n\n for (const [deck, deckSkills] of groups) {\n const section = document.createElement(\"section\");\n section.className = \"deck-section\";\n section.innerHTML = `\n

${esc(deck)}

\n ${deckSkills.length} cards\n

\n `;\n const grid = section.querySelector(\".deck-grid\");\n for (const s of deckSkills) {\n const node = tmpl.content.firstElementChild.cloneNode(true);\n node.dataset.slug = s.slug;\n\n const front = node.querySelector(\".card-front\");\n front.classList.add(COLOR_BG[s.color] || \"card-bg-blue\");\n const inner = node.querySelector(\".card-inner\");\n if (s.level >= 7) inner.classList.add(\"card-foil\");\n\n node.querySelector(\".name\").textContent = s.name;\n node.querySelector(\".mana\").textContent = \"◆\".repeat(s.manaCost);\n // Lazy-load generated art; on error keep the framed paper placeholder.\n const img = node.querySelector(\".art-img\");\n img.alt = `${s.name} card art`;\n img.dataset.src = `/art/${s.slug}`;\n img.addEventListener(\"load\", () => img.classList.add(\"loaded\"));\n img.addEventListener(\"error\", () => img.remove());\n if (artObserver) artObserver.observe(img);\n else loadArt(img);\n\n node.querySelector(\".type-line\").textContent = s.type;\n node.querySelector(\".description\").textContent = s.description;\n node.querySelector(\".triggers\").innerHTML = `\n Say\n “${esc(s.triggers[0] || s.name)}”\n `;\n node.querySelector(\".flavor\").textContent = `\"${s.flavor}\"`;\n node.querySelector(\".level\").textContent = `Lv ${s.level}`;\n node.querySelector(\".last-used\").textContent = `${s.invocations}× · ${s.lastUsed}`;\n\n // Back face\n node.querySelector(\".open-file\").href = `${codeBase}/skills/${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 grid.appendChild(node);\n }\n binder.appendChild(section);\n }\n}\n\nsearch.addEventListener(\"input\", render);\nshuffleBtn.addEventListener(\"click\", () => {\n for (let i = skills.length - 1; i > 0; i--) {\n const j = Math.floor(Math.random() * (i + 1));\n [skills[i], skills[j]] = [skills[j], skills[i]];\n }\n render();\n});\n\nload();\n",[],[154,309],["D",1779815151548],[288,289],[154],"cf50604e-5e3a-11f1-a73b-1607ee4eb77e",["D",1780374210430],[],[162,33],"bc704d90-5e3a-11f1-9da4-1607ee4eb77e","index.tsx","552ffd56-5e3a-11f1-b60a-1607ee4eb77e",135,["D",1780374178764],"/** sprite-builder — token-gated, reference-conditioned pixel-art generator.\n *\n * Reuses skillbook's existing protection so the public OpenAI key can't be\n * spammed: every generation requires the `x-skillbook-art-admin` header to\n * match ART_ADMIN_TOKEN (otherwise 404, same as the card-art route), uses\n * SKILLBOOK_OPENAI_API_KEY, and is backed by a per-day cap + blob cache.\n *\n * Lives in its own http file — main.tsx is untouched. It feeds an existing\n * AI Town sheet to OpenAI's images/edits endpoint (reference-conditioned).\n * The 32px downscale happens client-side in a canvas (no server image lib).\n */\nimport { Hono } from \"npm:hono@4\";\nimport { parseVal, serveFile } from \"https://esm.town/v/std/utils/index.ts\";\nimport { blob } from \"https://esm.town/v/std/blob\";\n\nconst AITOWN = \"https://raw.githubusercontent.com/a16z-infra/ai-town/main\";\nconst REFS: Record = {\n character: `${AITOWN}/public/assets/32x32folk.png`,\n tile: `${AITOWN}/public/assets/gentle-obj.png`,\n};\nconst DEFAULT_PROMPT: Record = {\n character:\n \"Create ONE new top-down RPG character sprite in the EXACT pixel-art style, palette and proportions of the reference. Single full-body character facing the viewer, clean readable pixels, transparent background. No sprite sheet, no grid, no text, no border.\",\n tile:\n \"Create ONE new top-down terrain or decoration tile in the EXACT pixel-art style and palette of the reference tileset. Single centered motif, clean readable pixels, transparent where appropriate. No grid lines, no text, no border.\",\n};\nconst DAILY_CAP = 40;\nconst PREFIX = \"skillbook/sprites/v1\";\n\nconst app = new Hono();\napp.onError((err) => Promise.reject(err));\n\nconst b64ToBytes = (s: string) => {\n const bin = atob(s); const a = new Uint8Array(bin.length);\n for (let i = 0; i < bin.length; i++) a[i] = bin.charCodeAt(i);\n return a;\n};\nconst bytesToB64 = (bytes: Uint8Array) => {\n let bin = \"\"; for (let i = 0; i < bytes.length; i++) bin += String.fromCharCode(bytes[i]);\n return btoa(bin);\n};\nconst dataUrl = (bytes: Uint8Array) => `data:image/png;base64,${bytesToB64(bytes)}`;\nfunction hash(s: string) {\n let h = 2166136261;\n for (let i = 0; i < s.length; i++) { h ^= s.charCodeAt(i); h = Math.imul(h, 16777619); }\n return (h >>> 0).toString(36);\n}\n\napp.get(\"/\", () => serveFile(\"/sprite-builder/ui.html\", import.meta.url));\napp.get(\"/source\", (c) => c.redirect(parseVal().links.self.val));\n\n// Public read of a generated sprite (stable URL to drop into the village later).\napp.get(\"/sprite/:key\", async (c) => {\n const key = c.req.param(\"key\");\n if (!/^[a-z0-9-]+$/.test(key)) return c.text(\"bad key\", 400);\n try {\n const r = await blob.get(`${PREFIX}/${key}.png`);\n if (r?.ok) {\n const buf = await r.arrayBuffer();\n if (buf.byteLength) {\n return new Response(buf, {\n headers: { \"content-type\": \"image/png\", \"cache-control\": \"public, max-age=604800, immutable\" },\n });\n }\n }\n } catch {}\n return c.text(\"not found\", 404);\n});\n\napp.post(\"/generate\", async (c) => {\n // --- same gate as the card-art route: no/!match token => 404 ---\n const admin = Deno.env.get(\"ART_ADMIN_TOKEN\");\n if (!admin || c.req.header(\"x-skillbook-art-admin\") !== admin) return c.text(\"not found\", 404);\n\n const body = await c.req.json().catch(() => ({} as any));\n const kind = body.kind === \"tile\" ? \"tile\" : \"character\";\n const prompt = (typeof body.prompt === \"string\" && body.prompt.trim()) || DEFAULT_PROMPT[kind];\n const model = body.model === \"gpt-image-1-mini\" ? \"gpt-image-1-mini\" : \"gpt-image-1\";\n const quality = [\"low\", \"medium\", \"high\"].includes(body.quality) ? body.quality : \"low\";\n const force = body.force === true;\n\n const key = `${kind}-${hash(model + \"|\" + quality + \"|\" + prompt)}`;\n\n if (!force) {\n try {\n const raw = await blob.get(`${PREFIX}/${key}.png`);\n if (raw?.ok) {\n const rb = new Uint8Array(await raw.arrayBuffer());\n if (rb.length) return c.json({ ok: true, cached: true, key, kind, model, quality, prompt, rawDataUrl: dataUrl(rb), spriteUrl: `./sprite/${key}` });\n }\n } catch {}\n }\n\n // per-day cap (cheap backstop if the token ever leaks)\n const day = new Date().toISOString().slice(0, 10);\n const quotaKey = `${PREFIX}/quota-${day}`;\n let used = 0;\n try { used = ((await blob.getJSON(quotaKey)) as number) || 0; } catch {}\n if (used >= DAILY_CAP) return c.json({ ok: false, error: `daily cap of ${DAILY_CAP} reached` }, 429);\n\n // reference = an existing AI Town sheet (style/palette source)\n const refResp = await fetch(REFS[kind]);\n if (!refResp.ok) return c.json({ ok: false, error: \"could not fetch reference sheet\" }, 502);\n const refBytes = new Uint8Array(await refResp.arrayBuffer());\n\n const KEY = Deno.env.get(\"SKILLBOOK_OPENAI_API_KEY\") ?? Deno.env.get(\"OPENAI_API_KEY\");\n if (!KEY) return c.json({ ok: false, error: \"art key missing\" }, 503);\n\n const form = new FormData();\n form.set(\"model\", model);\n form.set(\"prompt\", prompt);\n form.set(\"size\", \"1024x1024\");\n form.set(\"quality\", quality);\n form.set(\"background\", \"transparent\");\n form.set(\"output_format\", \"png\");\n form.set(\"image\", new File([refBytes], \"reference.png\", { type: \"image/png\" }));\n\n const r = await fetch(\"https://api.openai.com/v1/images/edits\", {\n method: \"POST\",\n headers: { authorization: \"Bearer \" + KEY },\n body: form,\n });\n const json = await r.json().catch(() => ({} as any));\n if (!r.ok) {\n console.error(\"openai edits failed\", json);\n return c.json({ ok: false, error: json?.error?.message || \"image edit error\" }, 502);\n }\n const outB64 = json?.data?.[0]?.b64_json;\n if (!outB64) return c.json({ ok: false, error: \"no image in OpenAI response\" }, 502);\n const rawBytes = b64ToBytes(outB64);\n\n try {\n await blob.set(`${PREFIX}/${key}.png`, rawBytes);\n await blob.setJSON(quotaKey, used + 1);\n } catch (e) { console.error(\"cache write failed\", e); }\n\n return c.json({ ok: true, cached: false, key, kind, model, quality, prompt, rawDataUrl: dataUrl(rawBytes), spriteUrl: `./sprite/${key}` });\n});\n\nexport default app.fetch;\n",[],[162,325],["D",1780374005541],[285,286],[162],"cf1e5f7e-5974-11f1-8f1f-ee650bb23af1","_index.json","4368c0f2-5927-11f1-8ea0-ee650bb23af1",125,["D",1779849365092],"{\n \"_comment\": \"Card metadata and deck layout. The canonical agent-readable source remains each skills//SKILL.md.\",\n \"daily-standup\": {\n \"type\": \"Skill — Routine\",\n \"color\": \"blue\",\n \"art\": \"🌅\",\n \"artPrompt\": \"a peaceful sunrise over a writer's desk by a window, steaming coffee mug, open notebook, soft watercolor light — cool blue and pale silver palette, soft morning mist, serene — fantasy trading card illustration, painterly digital art, dramatic cinematic lighting, framed centered composition, square format, no text, no letters, no words, no logos, no UI\",\n \"manaCost\": 2,\n \"level\": 5,\n \"invocations\": 38,\n \"lastUsed\": \"2d ago\",\n \"flavor\": \"Yesterday's threads, today's commitments, tomorrow's traps.\",\n \"deck\": \"Skillbook\"\n },\n \"inbox-zero\": {\n \"type\": \"Skill — Maintenance\",\n \"color\": \"white\",\n \"art\": \"✉️\",\n \"artPrompt\": \"a single white origami paper plane resting on an empty wooden letter tray, soft golden window light, minimalist still life — warm cream and antique gold palette, sunlit, hopeful, clean — fantasy trading card illustration, painterly digital art, dramatic cinematic lighting, framed centered composition, square format, no text, no letters, no words, no logos, no UI\",\n \"manaCost\": 1,\n \"level\": 4,\n \"invocations\": 21,\n \"lastUsed\": \"5d ago\",\n \"flavor\": \"Three folders, no regrets: Reply, Wait, Done.\",\n \"deck\": \"Skillbook\"\n },\n \"pr-review\": {\n \"type\": \"Skill — Action\",\n \"color\": \"red\",\n \"art\": \"⚔️\",\n \"artPrompt\": \"crossed swords planted at a forked stone path on a hilltop at dusk, sparks and ember motes, heroic fantasy painting — deep ember red and amber palette, fiery energy, dynamic motion — fantasy trading card illustration, painterly digital art, dramatic cinematic lighting, framed centered composition, square format, no text, no letters, no words, no logos, no UI\",\n \"manaCost\": 3,\n \"level\": 7,\n \"invocations\": 64,\n \"lastUsed\": \"yesterday\",\n \"flavor\": \"\\\"Always create NEW commits rather than amending.\\\" — the elder agents\",\n \"deck\": \"Skillbook\"\n },\n \"bug-triage\": {\n \"type\": \"Skill — Action\",\n \"color\": \"black\",\n \"art\": \"🐛\",\n \"artPrompt\": \"a glowing bioluminescent beetle crawling across a dark server rack, dim red emergency light, moody noir illustration — deep indigo and charcoal palette, shadowy, ominous, glowing accents — fantasy trading card illustration, painterly digital art, dramatic cinematic lighting, framed centered composition, square format, no text, no letters, no words, no logos, no UI\",\n \"manaCost\": 4,\n \"level\": 3,\n \"invocations\": 11,\n \"lastUsed\": \"3w ago\",\n \"flavor\": \"The graph is red. Begin.\",\n \"deck\": \"Skillbook\"\n },\n \"code-cartographer\": {\n \"type\": \"Skill — Lookup\",\n \"color\": \"green\",\n \"art\": \"🗺️\",\n \"artPrompt\": \"an old hand-drawn parchment map of a verdant city with rivers and streets, brass compass and quill resting on it, study desk — lush emerald and moss palette, verdant, organic textures — fantasy trading card illustration, painterly digital art, dramatic cinematic lighting, framed centered composition, square format, no text, no letters, no words, no logos, no UI\",\n \"manaCost\": 2,\n \"level\": 6,\n \"invocations\": 47,\n \"lastUsed\": \"today\",\n \"flavor\": \"Every codebase is a city. Someone has to keep the map.\",\n \"deck\": \"Skillbook\"\n },\n \"release-notes\": {\n \"type\": \"Skill — Creative\",\n \"color\": \"gold\",\n \"art\": \"📜\",\n \"artPrompt\": \"an ornate unfurled parchment scroll with a feather quill and wax seal, warm candlelight, baroque still life — ornate burnished gold and burgundy palette, regal, decorative — fantasy trading card illustration, painterly digital art, dramatic cinematic lighting, framed centered composition, square format, no text, no letters, no words, no logos, no UI\",\n \"manaCost\": 3,\n \"level\": 2,\n \"invocations\": 6,\n \"lastUsed\": \"2w ago\",\n \"flavor\": \"Write for the user who reads the changelog, not the engineer who wrote the diff.\",\n \"deck\": \"Skillbook\"\n },\n \"anthropic-algorithmic-art\": {\n \"deck\": \"Anthropic Skills\",\n \"type\": \"Skill - Anthropic\",\n \"color\": \"anthropic\",\n \"art\": \"\",\n \"artPrompt\": \"a brass automaton painting constellations on handmade paper inside a candlelit atelier; shared Anthropic deck theme, warm parchment, charcoal ink, muted orange accent, blue and green secondary accents, painterly physical fantasy card art, no text, no logos\",\n \"manaCost\": 1,\n \"level\": 4,\n \"invocations\": 0,\n \"lastUsed\": \"new\",\n \"flavor\": \"Creating algorithmic art using p5.js with seeded randomness and interactive parameter exploration.\"\n },\n \"anthropic-brand-guidelines\": {\n \"deck\": \"Anthropic Skills\",\n \"type\": \"Skill - Anthropic\",\n \"color\": \"anthropic\",\n \"art\": \"\",\n \"artPrompt\": \"an illuminated style codex with color swatches, carved type specimens, and a careful orange wax seal; shared Anthropic deck theme, warm parchment, charcoal ink, muted orange accent, blue and green secondary accents, painterly physical fantasy card art, no text, no logos\",\n \"manaCost\": 2,\n \"level\": 5,\n \"invocations\": 0,\n \"lastUsed\": \"new\",\n \"flavor\": \"Applies Anthropic's official brand colors and typography to any sort of artifact that may benefit from having Anthropic's look-and-feel.\"\n },\n \"anthropic-canvas-design\": {\n \"deck\": \"Anthropic Skills\",\n \"type\": \"Skill - Anthropic\",\n \"color\": \"anthropic\",\n \"art\": \"\",\n \"artPrompt\": \"a floating design canvas stretched across a wooden frame, ink guides and warm amber drafting light; shared Anthropic deck theme, warm parchment, charcoal ink, muted orange accent, blue and green secondary accents, painterly physical fantasy card art, no text, no logos\",\n \"manaCost\": 3,\n \"level\": 6,\n \"invocations\": 0,\n \"lastUsed\": \"new\",\n \"flavor\": \"Create beautiful visual art in .png and .pdf documents using design philosophy.\"\n },\n \"anthropic-claude-api\": {\n \"deck\": \"Anthropic Skills\",\n \"type\": \"Skill - Anthropic\",\n \"color\": \"anthropic\",\n \"art\": \"\",\n \"artPrompt\": \"a library oracle of amber glass, careful tool sigils, and clean channels of light between shelves; shared Anthropic deck theme, warm parchment, charcoal ink, muted orange accent, blue and green secondary accents, painterly physical fantasy card art, no text, no logos\",\n \"manaCost\": 4,\n \"level\": 7,\n \"invocations\": 0,\n \"lastUsed\": \"new\",\n \"flavor\": \"Build, debug, and optimize Claude API / Anthropic SDK apps.\"\n },\n \"anthropic-doc-coauthoring\": {\n \"deck\": \"Anthropic Skills\",\n \"type\": \"Skill - Anthropic\",\n \"color\": \"anthropic\",\n \"art\": \"\",\n \"artPrompt\": \"two quills weaving one parchment draft across a long oak table under soft lantern light; shared Anthropic deck theme, warm parchment, charcoal ink, muted orange accent, blue and green secondary accents, painterly physical fantasy card art, no text, no logos\",\n \"manaCost\": 1,\n \"level\": 8,\n \"invocations\": 0,\n \"lastUsed\": \"new\",\n \"flavor\": \"Guide users through a structured workflow for co-authoring documentation.\"\n },\n \"anthropic-docx\": {\n \"deck\": \"Anthropic Skills\",\n \"type\": \"Skill - Anthropic\",\n \"color\": \"anthropic\",\n \"art\": \"\",\n \"artPrompt\": \"a bound manuscript assembling itself from folded pages, tables, seals, and marginal notes; shared Anthropic deck theme, warm parchment, charcoal ink, muted orange accent, blue and green secondary accents, painterly physical fantasy card art, no text, no logos\",\n \"manaCost\": 2,\n \"level\": 4,\n \"invocations\": 0,\n \"lastUsed\": \"new\",\n \"flavor\": \"Use this skill whenever the user wants to create, read, edit, or manipulate Word documents (.docx files).\"\n },\n \"anthropic-frontend-design\": {\n \"deck\": \"Anthropic Skills\",\n \"type\": \"Skill - Anthropic\",\n \"color\": \"anthropic\",\n \"art\": \"\",\n \"artPrompt\": \"a stage set of painted interface panels, measured grids, and dramatic warm gallery lighting; shared Anthropic deck theme, warm parchment, charcoal ink, muted orange accent, blue and green secondary accents, painterly physical fantasy card art, no text, no logos\",\n \"manaCost\": 3,\n \"level\": 5,\n \"invocations\": 0,\n \"lastUsed\": \"new\",\n \"flavor\": \"Create distinctive, production-grade frontend interfaces with high design quality.\"\n },\n \"anthropic-internal-comms\": {\n \"deck\": \"Anthropic Skills\",\n \"type\": \"Skill - Anthropic\",\n \"color\": \"anthropic\",\n \"art\": \"\",\n \"artPrompt\": \"sealed notes moving through a quiet guild hall, lanterns, notice boards, and patient coordination; shared Anthropic deck theme, warm parchment, charcoal ink, muted orange accent, blue and green secondary accents, painterly physical fantasy card art, no text, no logos\",\n \"manaCost\": 4,\n \"level\": 6,\n \"invocations\": 0,\n \"lastUsed\": \"new\",\n \"flavor\": \"A set of resources to help me write all kinds of internal communications, using the formats that my company likes to use.\"\n },\n \"anthropic-mcp-builder\": {\n \"deck\": \"Anthropic Skills\",\n \"type\": \"Skill - Anthropic\",\n \"color\": \"anthropic\",\n \"art\": \"\",\n \"artPrompt\": \"a workbench of brass connectors, small protocol gates, and labeled tools glowing with amber runes; shared Anthropic deck theme, warm parchment, charcoal ink, muted orange accent, blue and green secondary accents, painterly physical fantasy card art, no text, no logos\",\n \"manaCost\": 1,\n \"level\": 7,\n \"invocations\": 0,\n \"lastUsed\": \"new\",\n \"flavor\": \"Guide for creating high-quality MCP (Model Context Protocol) servers that enable LLMs to interact with external services through well-designed tools.\"\n },\n \"anthropic-pdf\": {\n \"deck\": \"Anthropic Skills\",\n \"type\": \"Skill - Anthropic\",\n \"color\": \"anthropic\",\n \"art\": \"\",\n \"artPrompt\": \"a stack of vellum folios under a glass lens, pages splitting and rejoining with precise golden threads; shared Anthropic deck theme, warm parchment, charcoal ink, muted orange accent, blue and green secondary accents, painterly physical fantasy card art, no text, no logos\",\n \"manaCost\": 2,\n \"level\": 8,\n \"invocations\": 0,\n \"lastUsed\": \"new\",\n \"flavor\": \"Use this skill whenever the user wants to do anything with PDF files.\"\n },\n \"anthropic-pptx\": {\n \"deck\": \"Anthropic Skills\",\n \"type\": \"Skill - Anthropic\",\n \"color\": \"anthropic\",\n \"art\": \"\",\n \"artPrompt\": \"a carousel of miniature presentation scenes on lacquered slides, spotlit in a walnut cabinet; shared Anthropic deck theme, warm parchment, charcoal ink, muted orange accent, blue and green secondary accents, painterly physical fantasy card art, no text, no logos\",\n \"manaCost\": 3,\n \"level\": 4,\n \"invocations\": 0,\n \"lastUsed\": \"new\",\n \"flavor\": \"Use this skill any time a .pptx file is involved in any way — as input, output, or both.\"\n },\n \"anthropic-skill-creator\": {\n \"deck\": \"Anthropic Skills\",\n \"type\": \"Skill - Anthropic\",\n \"color\": \"anthropic\",\n \"art\": \"\",\n \"artPrompt\": \"a master scribe binding new spell pages into a growing handbook with careful tabs and ribbons; shared Anthropic deck theme, warm parchment, charcoal ink, muted orange accent, blue and green secondary accents, painterly physical fantasy card art, no text, no logos\",\n \"manaCost\": 4,\n \"level\": 5,\n \"invocations\": 0,\n \"lastUsed\": \"new\",\n \"flavor\": \"Create new skills, modify and improve existing skills, and measure skill performance.\"\n },\n \"anthropic-slack-gif-creator\": {\n \"deck\": \"Anthropic Skills\",\n \"type\": \"Skill - Anthropic\",\n \"color\": \"anthropic\",\n \"art\": \"\",\n \"artPrompt\": \"a flipbook of tiny animated moments pinned beside a warm office hearth and message ribbons; shared Anthropic deck theme, warm parchment, charcoal ink, muted orange accent, blue and green secondary accents, painterly physical fantasy card art, no text, no logos\",\n \"manaCost\": 1,\n \"level\": 6,\n \"invocations\": 0,\n \"lastUsed\": \"new\",\n \"flavor\": \"Knowledge and utilities for creating animated GIFs optimized for Slack.\"\n },\n \"anthropic-theme-factory\": {\n \"deck\": \"Anthropic Skills\",\n \"type\": \"Skill - Anthropic\",\n \"color\": \"anthropic\",\n \"art\": \"\",\n \"artPrompt\": \"a cabinet of pigments, font specimens, and theme vials arranged like an apothecary of styles; shared Anthropic deck theme, warm parchment, charcoal ink, muted orange accent, blue and green secondary accents, painterly physical fantasy card art, no text, no logos\",\n \"manaCost\": 2,\n \"level\": 7,\n \"invocations\": 0,\n \"lastUsed\": \"new\",\n \"flavor\": \"Toolkit for styling artifacts with a theme.\"\n },\n \"anthropic-web-artifacts-builder\": {\n \"deck\": \"Anthropic Skills\",\n \"type\": \"Skill - Anthropic\",\n \"color\": \"anthropic\",\n \"art\": \"\",\n \"artPrompt\": \"a small theater of web artifacts, layered screens rendered as paper craft and polished brass; shared Anthropic deck theme, warm parchment, charcoal ink, muted orange accent, blue and green secondary accents, painterly physical fantasy card art, no text, no logos\",\n \"manaCost\": 3,\n \"level\": 8,\n \"invocations\": 0,\n \"lastUsed\": \"new\",\n \"flavor\": \"Suite of tools for creating elaborate, multi-component claude.ai HTML artifacts using modern frontend web technologies (React, Tailwind CSS, shadcn/ui\"\n },\n \"anthropic-webapp-testing\": {\n \"deck\": \"Anthropic Skills\",\n \"type\": \"Skill - Anthropic\",\n \"color\": \"anthropic\",\n \"art\": \"\",\n \"artPrompt\": \"a meticulous testing observatory with tiny browser windows, checkmarks, and calibrated lenses; shared Anthropic deck theme, warm parchment, charcoal ink, muted orange accent, blue and green secondary accents, painterly physical fantasy card art, no text, no logos\",\n \"manaCost\": 4,\n \"level\": 4,\n \"invocations\": 0,\n \"lastUsed\": \"new\",\n \"flavor\": \"Toolkit for interacting with and testing local web applications using Playwright.\"\n },\n \"anthropic-xlsx\": {\n \"deck\": \"Anthropic Skills\",\n \"type\": \"Skill - Anthropic\",\n \"color\": \"anthropic\",\n \"art\": \"\",\n \"artPrompt\": \"a ledger grid transformed into a precise counting engine with green ink, rulers, and brass dials; shared Anthropic deck theme, warm parchment, charcoal ink, muted orange accent, blue and green secondary accents, painterly physical fantasy card art, no text, no logos\",\n \"manaCost\": 1,\n \"level\": 5,\n \"invocations\": 0,\n \"lastUsed\": \"new\",\n \"flavor\": \"Use this skill any time a spreadsheet file is the primary input or output.\"\n }\n}\n",[],[168,336],"522e2d20-5927-11f1-9996-ee650bb23af1","SKILL.md","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",[],[168,352,344],"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",[],[168,352,362,354],"templates","8aaa3ae0-5927-11f1-983d-ee650bb23af1",["D",1779816178993],[281],[168,352,362],"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",[],[168,352,376,368],"scripts","985afdbe-5927-11f1-8b1a-ee650bb23af1",["D",1779816201922],[279],[168,352,376],"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",[],[168,352,390,382],"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",[],[168,352,390,392],"78c4aacc-5927-11f1-a117-ee650bb23af1",["D",1779816148916],[276,277],[168,352,390],"522e5548-5927-11f1-9996-ee650bb23af1",["D",1779816084246],[275,278,280,282],[168,352],"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",[],[168,415,344],"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",[],[168,415,362,417],"875bec8a-5927-11f1-ac92-ee650bb23af1",["D",1779816173463],[272],[168,415,362],"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",[],[168,415,376,430],"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",[],[168,415,376,439],"8e734e28-5927-11f1-aa02-ee650bb23af1",["D",1779816185359],[269,270],[168,415,376],"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",[],[168,415,390,451],"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",[],[168,415,390,460],"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",[],[168,415,390,468],"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",[],[168,415,390,476],"657166a4-5927-11f1-b692-ee650bb23af1",["D",1779816116560],[264,265,266,267],[168,415,390],"4a92d70a-5927-11f1-8ada-ee650bb23af1",["D",1779816071451],[263,268,271,273],[168,415],"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",[],[168,498,344],"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",[],[168,498,362,500],"85b66ab8-5927-11f1-a990-ee650bb23af1",["D",1779816170699],[260],[168,498,362],"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",[],[168,498,376,513],"8cb08eca-5927-11f1-ba97-ee650bb23af1",["D",1779816182408],[258],[168,498,376],"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",[],[168,498,390,526],"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",[],[168,498,390,535],"6092599a-5927-11f1-aec0-ee650bb23af1",["D",1779816108382],[255,256],[168,498,390],"47eae3c6-5927-11f1-8ee0-ee650bb23af1",["D",1779816067016],[254,257,259,261],[168,498],"45863dba-5927-11f1-8f41-ee650bb23af1","45863eaa-5927-11f1-8f41-ee650bb23af1","365b9f99-bd09-4722-a069-ade3f9220c79",13,["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",[],[168,558,344],"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",[],[168,558,362,560],"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",[],[168,558,362,569],"82168884-5927-11f1-92d4-ee650bb23af1",["D",1779816164612],[250,251],[168,558,362],"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",[],[168,558,390,581],"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",[],[168,558,390,590],"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",[],[168,558,390,598],"59dfd870-5927-11f1-872e-ee650bb23af1",["D",1779816097151],[246,247,248],[168,558,390],"458668e4-5927-11f1-8f41-ee650bb23af1",["D",1779816062997],[245,249,252],[168,558],"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",[],[168,621,344],"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",[],[168,621,376,623],"963ac866-5927-11f1-92d4-ee650bb23af1",["D",1779816198413],[242],[168,621,376],"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",[],[168,621,390,636],"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",[],[168,621,390,645],"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",[],[168,621,390,653],"7268b466-5927-11f1-8b7b-ee650bb23af1",["D",1779816138311],[238,239,240],[168,621,390],"4ff4c82a-5927-11f1-8896-ee650bb23af1",["D",1779816080513],[237,241,243],[168,621],"4d5412ec-5927-11f1-ae5e-ee650bb23af1","4d5413aa-5927-11f1-ae5e-ee650bb23af1","5c2015a7-b596-43c1-95fc-2c6150518e13",["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",[],[168,675,344],"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",[],[168,675,362,677],"88f27654-5927-11f1-8833-ee650bb23af1",["D",1779816176129],[234],[168,675,362],"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",[],[168,675,376,690],"939b75ec-5927-11f1-8b1a-ee650bb23af1",["D",1779816194005],[232],[168,675,376],"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",[],[168,675,390,703],"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",[],[168,675,390,712],"6d8ad2c6-5927-11f1-bfab-ee650bb23af1",["D",1779816130149],[229,230],[168,675,390],"4d543eac-5927-11f1-ae5e-ee650bb23af1",["D",1779816076095],[228,231,233,235],[168,675],"cee07560-5974-11f1-8f1f-ee650bb23af1","cee07678-5974-11f1-8f1f-ee650bb23af1","cea0f8fe-5974-11f1-a705-ee650bb23af1",124,["D",1779849364684],"---\nname: xlsx\ndescription: \"Use this skill any time a spreadsheet file is the primary input or output. This means any task where the user wants to: open, read, edit, or fix an existing .xlsx, .xlsm, .csv, or .tsv file (e.g., adding columns, computing formulas, formatting, charting, cleaning messy data); create a new spreadsheet from scratch or from other data sources; or convert between tabular file formats. Trigger especially when the user references a spreadsheet file by name or path — even casually (like \\\"the xlsx in my downloads\\\") — and wants something done to it or produced from it. Also trigger for cleaning or restructuring messy tabular data files (malformed rows, misplaced headers, junk data) into proper spreadsheets. The deliverable must be a spreadsheet file. Do NOT trigger when the primary deliverable is a Word document, HTML report, standalone Python script, database pipeline, or Google Sheets API integration, even if tabular data is involved.\"\nlicense: Proprietary. LICENSE.txt has complete terms\n---\n\n# Requirements for Outputs\n\n## All Excel files\n\n### Professional Font\n- Use a consistent, professional font (e.g., Arial, Times New Roman) for all deliverables unless otherwise instructed by the user\n\n### Zero Formula Errors\n- Every Excel model MUST be delivered with ZERO formula errors (#REF!, #DIV/0!, #VALUE!, #N/A, #NAME?)\n\n### Preserve Existing Templates (when updating templates)\n- Study and EXACTLY match existing format, style, and conventions when modifying files\n- Never impose standardized formatting on files with established patterns\n- Existing template conventions ALWAYS override these guidelines\n\n## Financial models\n\n### Color Coding Standards\nUnless otherwise stated by the user or existing template\n\n#### Industry-Standard Color Conventions\n- **Blue text (RGB: 0,0,255)**: Hardcoded inputs, and numbers users will change for scenarios\n- **Black text (RGB: 0,0,0)**: ALL formulas and calculations\n- **Green text (RGB: 0,128,0)**: Links pulling from other worksheets within same workbook\n- **Red text (RGB: 255,0,0)**: External links to other files\n- **Yellow background (RGB: 255,255,0)**: Key assumptions needing attention or cells that need to be updated\n\n### Number Formatting Standards\n\n#### Required Format Rules\n- **Years**: Format as text strings (e.g., \"2024\" not \"2,024\")\n- **Currency**: Use $#,##0 format; ALWAYS specify units in headers (\"Revenue ($mm)\")\n- **Zeros**: Use number formatting to make all zeros \"-\", including percentages (e.g., \"$#,##0;($#,##0);-\")\n- **Percentages**: Default to 0.0% format (one decimal)\n- **Multiples**: Format as 0.0x for valuation multiples (EV/EBITDA, P/E)\n- **Negative numbers**: Use parentheses (123) not minus -123\n\n### Formula Construction Rules\n\n#### Assumptions Placement\n- Place ALL assumptions (growth rates, margins, multiples, etc.) in separate assumption cells\n- Use cell references instead of hardcoded values in formulas\n- Example: Use =B5*(1+$B$6) instead of =B5*1.05\n\n#### Formula Error Prevention\n- Verify all cell references are correct\n- Check for off-by-one errors in ranges\n- Ensure consistent formulas across all projection periods\n- Test with edge cases (zero values, negative numbers)\n- Verify no unintended circular references\n\n#### Documentation Requirements for Hardcodes\n- Comment or in cells beside (if end of table). Format: \"Source: [System/Document], [Date], [Specific Reference], [URL if applicable]\"\n- Examples:\n - \"Source: Company 10-K, FY2024, Page 45, Revenue Note, [SEC EDGAR URL]\"\n - \"Source: Company 10-Q, Q2 2025, Exhibit 99.1, [SEC EDGAR URL]\"\n - \"Source: Bloomberg Terminal, 8/15/2025, AAPL US Equity\"\n - \"Source: FactSet, 8/20/2025, Consensus Estimates Screen\"\n\n# XLSX creation, editing, and analysis\n\n## Overview\n\nA user may ask you to create, edit, or analyze the contents of an .xlsx file. You have different tools and workflows available for different tasks.\n\n## Important Requirements\n\n**LibreOffice Required for Formula Recalculation**: You can assume LibreOffice is installed for recalculating formula values using the `scripts/recalc.py` script. The script automatically configures LibreOffice on first run, including in sandboxed environments where Unix sockets are restricted (handled by `scripts/office/soffice.py`)\n\n## Reading and analyzing data\n\n### Data analysis with pandas\nFor data analysis, visualization, and basic operations, use **pandas** which provides powerful data manipulation capabilities:\n\n```python\nimport pandas as pd\n\n# Read Excel\ndf = pd.read_excel('file.xlsx') # Default: first sheet\nall_sheets = pd.read_excel('file.xlsx', sheet_name=None) # All sheets as dict\n\n# Analyze\ndf.head() # Preview data\ndf.info() # Column info\ndf.describe() # Statistics\n\n# Write Excel\ndf.to_excel('output.xlsx', index=False)\n```\n\n## Excel File Workflows\n\n## CRITICAL: Use Formulas, Not Hardcoded Values\n\n**Always use Excel formulas instead of calculating values in Python and hardcoding them.** This ensures the spreadsheet remains dynamic and updateable.\n\n### ❌ WRONG - Hardcoding Calculated Values\n```python\n# Bad: Calculating in Python and hardcoding result\ntotal = df['Sales'].sum()\nsheet['B10'] = total # Hardcodes 5000\n\n# Bad: Computing growth rate in Python\ngrowth = (df.iloc[-1]['Revenue'] - df.iloc[0]['Revenue']) / df.iloc[0]['Revenue']\nsheet['C5'] = growth # Hardcodes 0.15\n\n# Bad: Python calculation for average\navg = sum(values) / len(values)\nsheet['D20'] = avg # Hardcodes 42.5\n```\n\n### ✅ CORRECT - Using Excel Formulas\n```python\n# Good: Let Excel calculate the sum\nsheet['B10'] = '=SUM(B2:B9)'\n\n# Good: Growth rate as Excel formula\nsheet['C5'] = '=(C4-C2)/C2'\n\n# Good: Average using Excel function\nsheet['D20'] = '=AVERAGE(D2:D19)'\n```\n\nThis applies to ALL calculations - totals, percentages, ratios, differences, etc. The spreadsheet should be able to recalculate when source data changes.\n\n## Common Workflow\n1. **Choose tool**: pandas for data, openpyxl for formulas/formatting\n2. **Create/Load**: Create new workbook or load existing file\n3. **Modify**: Add/edit data, formulas, and formatting\n4. **Save**: Write to file\n5. **Recalculate formulas (MANDATORY IF USING FORMULAS)**: Use the scripts/recalc.py script\n ```bash\n python scripts/recalc.py output.xlsx\n ```\n6. **Verify and fix any errors**: \n - The script returns JSON with error details\n - If `status` is `errors_found`, check `error_summary` for specific error types and locations\n - Fix the identified errors and recalculate again\n - Common errors to fix:\n - `#REF!`: Invalid cell references\n - `#DIV/0!`: Division by zero\n - `#VALUE!`: Wrong data type in formula\n - `#NAME?`: Unrecognized formula name\n\n### Creating new Excel files\n\n```python\n# Using openpyxl for formulas and formatting\nfrom openpyxl import Workbook\nfrom openpyxl.styles import Font, PatternFill, Alignment\n\nwb = Workbook()\nsheet = wb.active\n\n# Add data\nsheet['A1'] = 'Hello'\nsheet['B1'] = 'World'\nsheet.append(['Row', 'of', 'data'])\n\n# Add formula\nsheet['B2'] = '=SUM(A1:A10)'\n\n# Formatting\nsheet['A1'].font = Font(bold=True, color='FF0000')\nsheet['A1'].fill = PatternFill('solid', start_color='FFFF00')\nsheet['A1'].alignment = Alignment(horizontal='center')\n\n# Column width\nsheet.column_dimensions['A'].width = 20\n\nwb.save('output.xlsx')\n```\n\n### Editing existing Excel files\n\n```python\n# Using openpyxl to preserve formulas and formatting\nfrom openpyxl import load_workbook\n\n# Load existing file\nwb = load_workbook('existing.xlsx')\nsheet = wb.active # or wb['SheetName'] for specific sheet\n\n# Working with multiple sheets\nfor sheet_name in wb.sheetnames:\n sheet = wb[sheet_name]\n print(f\"Sheet: {sheet_name}\")\n\n# Modify cells\nsheet['A1'] = 'New Value'\nsheet.insert_rows(2) # Insert row at position 2\nsheet.delete_cols(3) # Delete column 3\n\n# Add new sheet\nnew_sheet = wb.create_sheet('NewSheet')\nnew_sheet['A1'] = 'Data'\n\nwb.save('modified.xlsx')\n```\n\n## Recalculating formulas\n\nExcel files created or modified by openpyxl contain formulas as strings but not calculated values. Use the provided `scripts/recalc.py` script to recalculate formulas:\n\n```bash\npython scripts/recalc.py [timeout_seconds]\n```\n\nExample:\n```bash\npython scripts/recalc.py output.xlsx 30\n```\n\nThe script:\n- Automatically sets up LibreOffice macro on first run\n- Recalculates all formulas in all sheets\n- Scans ALL cells for Excel errors (#REF!, #DIV/0!, etc.)\n- Returns JSON with detailed error locations and counts\n- Works on both Linux and macOS\n\n## Formula Verification Checklist\n\nQuick checks to ensure formulas work correctly:\n\n### Essential Verification\n- [ ] **Test 2-3 sample references**: Verify they pull correct values before building full model\n- [ ] **Column mapping**: Confirm Excel columns match (e.g., column 64 = BL, not BK)\n- [ ] **Row offset**: Remember Excel rows are 1-indexed (DataFrame row 5 = Excel row 6)\n\n### Common Pitfalls\n- [ ] **NaN handling**: Check for null values with `pd.notna()`\n- [ ] **Far-right columns**: FY data often in columns 50+ \n- [ ] **Multiple matches**: Search all occurrences, not just first\n- [ ] **Division by zero**: Check denominators before using `/` in formulas (#DIV/0!)\n- [ ] **Wrong references**: Verify all cell references point to intended cells (#REF!)\n- [ ] **Cross-sheet references**: Use correct format (Sheet1!A1) for linking sheets\n\n### Formula Testing Strategy\n- [ ] **Start small**: Test formulas on 2-3 cells before applying broadly\n- [ ] **Verify dependencies**: Check all cells referenced in formulas exist\n- [ ] **Test edge cases**: Include zero, negative, and very large values\n\n### Interpreting scripts/recalc.py Output\nThe script returns JSON with error details:\n```json\n{\n \"status\": \"success\", // or \"errors_found\"\n \"total_errors\": 0, // Total error count\n \"total_formulas\": 42, // Number of formulas in file\n \"error_summary\": { // Only present if errors found\n \"#REF!\": {\n \"count\": 2,\n \"locations\": [\"Sheet1!B5\", \"Sheet1!C10\"]\n }\n }\n}\n```\n\n## Best Practices\n\n### Library Selection\n- **pandas**: Best for data analysis, bulk operations, and simple data export\n- **openpyxl**: Best for complex formatting, formulas, and Excel-specific features\n\n### Working with openpyxl\n- Cell indices are 1-based (row=1, column=1 refers to cell A1)\n- Use `data_only=True` to read calculated values: `load_workbook('file.xlsx', data_only=True)`\n- **Warning**: If opened with `data_only=True` and saved, formulas are replaced with values and permanently lost\n- For large files: Use `read_only=True` for reading or `write_only=True` for writing\n- Formulas are preserved but not evaluated - use scripts/recalc.py to update values\n\n### Working with pandas\n- Specify data types to avoid inference issues: `pd.read_excel('file.xlsx', dtype={'id': str})`\n- For large files, read specific columns: `pd.read_excel('file.xlsx', usecols=['A', 'C', 'E'])`\n- Handle dates properly: `pd.read_excel('file.xlsx', parse_dates=['date_column'])`\n\n## Code Style Guidelines\n**IMPORTANT**: When generating Python code for Excel operations:\n- Write minimal, concise Python code without unnecessary comments\n- Avoid verbose variable names and redundant operations\n- Avoid unnecessary print statements\n\n**For Excel files themselves**:\n- Add comments to cells with complex formulas or important assumptions\n- Document data sources for hardcoded values\n- Include notes for key calculations and model sections",[],[168,735,344],"anthropic-xlsx","cea0f822-5974-11f1-a705-ee650bb23af1",123,["D",1779849364275],[226],[168,735],"ce6f47d2-5974-11f1-aba5-ee650bb23af1","ce6f48ae-5974-11f1-aba5-ee650bb23af1","ce2ea1b4-5974-11f1-8076-ee650bb23af1",122,["D",1779849363958],"---\nname: webapp-testing\ndescription: Toolkit for interacting with and testing local web applications using Playwright. Supports verifying frontend functionality, debugging UI behavior, capturing browser screenshots, and viewing browser logs.\nlicense: Complete terms in LICENSE.txt\n---\n\n# Web Application Testing\n\nTo test local web applications, write native Python Playwright scripts.\n\n**Helper Scripts Available**:\n- `scripts/with_server.py` - Manages server lifecycle (supports multiple servers)\n\n**Always run scripts with `--help` first** to see usage. DO NOT read the source until you try running the script first and find that a customized solution is abslutely necessary. These scripts can be very large and thus pollute your context window. They exist to be called directly as black-box scripts rather than ingested into your context window.\n\n## Decision Tree: Choosing Your Approach\n\n```\nUser task → Is it static HTML?\n ├─ Yes → Read HTML file directly to identify selectors\n │ ├─ Success → Write Playwright script using selectors\n │ └─ Fails/Incomplete → Treat as dynamic (below)\n │\n └─ No (dynamic webapp) → Is the server already running?\n ├─ No → Run: python scripts/with_server.py --help\n │ Then use the helper + write simplified Playwright script\n │\n └─ Yes → Reconnaissance-then-action:\n 1. Navigate and wait for networkidle\n 2. Take screenshot or inspect DOM\n 3. Identify selectors from rendered state\n 4. Execute actions with discovered selectors\n```\n\n## Example: Using with_server.py\n\nTo start a server, run `--help` first, then use the helper:\n\n**Single server:**\n```bash\npython scripts/with_server.py --server \"npm run dev\" --port 5173 -- python your_automation.py\n```\n\n**Multiple servers (e.g., backend + frontend):**\n```bash\npython scripts/with_server.py \\\n --server \"cd backend && python server.py\" --port 3000 \\\n --server \"cd frontend && npm run dev\" --port 5173 \\\n -- python your_automation.py\n```\n\nTo create an automation script, include only Playwright logic (servers are managed automatically):\n```python\nfrom playwright.sync_api import sync_playwright\n\nwith sync_playwright() as p:\n browser = p.chromium.launch(headless=True) # Always launch chromium in headless mode\n page = browser.new_page()\n page.goto('http://localhost:5173') # Server already running and ready\n page.wait_for_load_state('networkidle') # CRITICAL: Wait for JS to execute\n # ... your automation logic\n browser.close()\n```\n\n## Reconnaissance-Then-Action Pattern\n\n1. **Inspect rendered DOM**:\n ```python\n page.screenshot(path='/tmp/inspect.png', full_page=True)\n content = page.content()\n page.locator('button').all()\n ```\n\n2. **Identify selectors** from inspection results\n\n3. **Execute actions** using discovered selectors\n\n## Common Pitfall\n\n❌ **Don't** inspect the DOM before waiting for `networkidle` on dynamic apps\n✅ **Do** wait for `page.wait_for_load_state('networkidle')` before inspection\n\n## Best Practices\n\n- **Use bundled scripts as black boxes** - To accomplish a task, consider whether one of the scripts available in `scripts/` can help. These scripts handle common, complex workflows reliably without cluttering the context window. Use `--help` to see usage, then invoke directly. \n- Use `sync_playwright()` for synchronous scripts\n- Always close the browser when done\n- Use descriptive selectors: `text=`, `role=`, CSS selectors, or IDs\n- Add appropriate waits: `page.wait_for_selector()` or `page.wait_for_timeout()`\n\n## Reference Files\n\n- **examples/** - Examples showing common patterns:\n - `element_discovery.py` - Discovering buttons, links, and inputs on a page\n - `static_html_automation.py` - Using file:// URLs for local HTML\n - `console_logging.py` - Capturing console logs during automation",[],[168,749,344],"anthropic-webapp-testing","ce2ea0e2-5974-11f1-8076-ee650bb23af1",121,["D",1779849363492],[224],[168,749],"cdbd2c6e-5974-11f1-a28a-ee650bb23af1","cdbd2d40-5974-11f1-a28a-ee650bb23af1","cd8832a2-5974-11f1-8874-ee650bb23af1",120,["D",1779849362792],"---\nname: web-artifacts-builder\ndescription: Suite of tools for creating elaborate, multi-component claude.ai HTML artifacts using modern frontend web technologies (React, Tailwind CSS, shadcn/ui). Use for complex artifacts requiring state management, routing, or shadcn/ui components - not for simple single-file HTML/JSX artifacts.\nlicense: Complete terms in LICENSE.txt\n---\n\n# Web Artifacts Builder\n\nTo build powerful frontend claude.ai artifacts, follow these steps:\n1. Initialize the frontend repo using `scripts/init-artifact.sh`\n2. Develop your artifact by editing the generated code\n3. Bundle all code into a single HTML file using `scripts/bundle-artifact.sh`\n4. Display artifact to user\n5. (Optional) Test the artifact\n\n**Stack**: React 18 + TypeScript + Vite + Parcel (bundling) + Tailwind CSS + shadcn/ui\n\n## Design & Style Guidelines\n\nVERY IMPORTANT: To avoid what is often referred to as \"AI slop\", avoid using excessive centered layouts, purple gradients, uniform rounded corners, and Inter font.\n\n## Quick Start\n\n### Step 1: Initialize Project\n\nRun the initialization script to create a new React project:\n```bash\nbash scripts/init-artifact.sh \ncd \n```\n\nThis creates a fully configured project with:\n- ✅ React + TypeScript (via Vite)\n- ✅ Tailwind CSS 3.4.1 with shadcn/ui theming system\n- ✅ Path aliases (`@/`) configured\n- ✅ 40+ shadcn/ui components pre-installed\n- ✅ All Radix UI dependencies included\n- ✅ Parcel configured for bundling (via .parcelrc)\n- ✅ Node 18+ compatibility (auto-detects and pins Vite version)\n\n### Step 2: Develop Your Artifact\n\nTo build the artifact, edit the generated files. See **Common Development Tasks** below for guidance.\n\n### Step 3: Bundle to Single HTML File\n\nTo bundle the React app into a single HTML artifact:\n```bash\nbash scripts/bundle-artifact.sh\n```\n\nThis creates `bundle.html` - a self-contained artifact with all JavaScript, CSS, and dependencies inlined. This file can be directly shared in Claude conversations as an artifact.\n\n**Requirements**: Your project must have an `index.html` in the root directory.\n\n**What the script does**:\n- Installs bundling dependencies (parcel, @parcel/config-default, parcel-resolver-tspaths, html-inline)\n- Creates `.parcelrc` config with path alias support\n- Builds with Parcel (no source maps)\n- Inlines all assets into single HTML using html-inline\n\n### Step 4: Share Artifact with User\n\nFinally, share the bundled HTML file in conversation with the user so they can view it as an artifact.\n\n### Step 5: Testing/Visualizing the Artifact (Optional)\n\nNote: This is a completely optional step. Only perform if necessary or requested.\n\nTo test/visualize the artifact, use available tools (including other Skills or built-in tools like Playwright or Puppeteer). In general, avoid testing the artifact upfront as it adds latency between the request and when the finished artifact can be seen. Test later, after presenting the artifact, if requested or if issues arise.\n\n## Reference\n\n- **shadcn/ui components**: https://ui.shadcn.com/docs/components",[],[168,763,344],"anthropic-web-artifacts-builder","cd8831c6-5974-11f1-8874-ee650bb23af1",119,["D",1779849362446],[222],[168,763],"cd574a02-5974-11f1-a134-ee650bb23af1","cd574aca-5974-11f1-a134-ee650bb23af1","cd1dd4ac-5974-11f1-9bb6-ee650bb23af1",118,["D",1779849362120],"---\nname: theme-factory\ndescription: Toolkit for styling artifacts with a theme. These artifacts can be slides, docs, reportings, HTML landing pages, etc. There are 10 pre-set themes with colors/fonts that you can apply to any artifact that has been creating, or can generate a new theme on-the-fly.\nlicense: Complete terms in LICENSE.txt\n---\n\n\n# Theme Factory Skill\n\nThis skill provides a curated collection of professional font and color themes themes, each with carefully selected color palettes and font pairings. Once a theme is chosen, it can be applied to any artifact.\n\n## Purpose\n\nTo apply consistent, professional styling to presentation slide decks, use this skill. Each theme includes:\n- A cohesive color palette with hex codes\n- Complementary font pairings for headers and body text\n- A distinct visual identity suitable for different contexts and audiences\n\n## Usage Instructions\n\nTo apply styling to a slide deck or other artifact:\n\n1. **Show the theme showcase**: Display the `theme-showcase.pdf` file to allow users to see all available themes visually. Do not make any modifications to it; simply show the file for viewing.\n2. **Ask for their choice**: Ask which theme to apply to the deck\n3. **Wait for selection**: Get explicit confirmation about the chosen theme\n4. **Apply the theme**: Once a theme has been chosen, apply the selected theme's colors and fonts to the deck/artifact\n\n## Themes Available\n\nThe following 10 themes are available, each showcased in `theme-showcase.pdf`:\n\n1. **Ocean Depths** - Professional and calming maritime theme\n2. **Sunset Boulevard** - Warm and vibrant sunset colors\n3. **Forest Canopy** - Natural and grounded earth tones\n4. **Modern Minimalist** - Clean and contemporary grayscale\n5. **Golden Hour** - Rich and warm autumnal palette\n6. **Arctic Frost** - Cool and crisp winter-inspired theme\n7. **Desert Rose** - Soft and sophisticated dusty tones\n8. **Tech Innovation** - Bold and modern tech aesthetic\n9. **Botanical Garden** - Fresh and organic garden colors\n10. **Midnight Galaxy** - Dramatic and cosmic deep tones\n\n## Theme Details\n\nEach theme is defined in the `themes/` directory with complete specifications including:\n- Cohesive color palette with hex codes\n- Complementary font pairings for headers and body text\n- Distinct visual identity suitable for different contexts and audiences\n\n## Application Process\n\nAfter a preferred theme is selected:\n1. Read the corresponding theme file from the `themes/` directory\n2. Apply the specified colors and fonts consistently throughout the deck\n3. Ensure proper contrast and readability\n4. Maintain the theme's visual identity across all slides\n\n## Create your Own Theme\nTo handle cases where none of the existing themes work for an artifact, create a custom theme. Based on provided inputs, generate a new theme similar to the ones above. Give the theme a similar name describing what the font/color combinations represent. Use any basic description provided to choose appropriate colors/fonts. After generating the theme, show it for review and verification. Following that, apply the theme as described above.\n",[],[168,777,344],"anthropic-theme-factory","cd1dd40c-5974-11f1-9bb6-ee650bb23af1",117,["D",1779849361746],[220],[168,777],"ccee9048-5974-11f1-b30a-ee650bb23af1","ccee9138-5974-11f1-b30a-ee650bb23af1","ccbd1e78-5974-11f1-a134-ee650bb23af1",116,["D",1779849361432],"---\nname: slack-gif-creator\ndescription: Knowledge and utilities for creating animated GIFs optimized for Slack. Provides constraints, validation tools, and animation concepts. Use when users request animated GIFs for Slack like \"make me a GIF of X doing Y for Slack.\"\nlicense: Complete terms in LICENSE.txt\n---\n\n# Slack GIF Creator\n\nA toolkit providing utilities and knowledge for creating animated GIFs optimized for Slack.\n\n## Slack Requirements\n\n**Dimensions:**\n- Emoji GIFs: 128x128 (recommended)\n- Message GIFs: 480x480\n\n**Parameters:**\n- FPS: 10-30 (lower is smaller file size)\n- Colors: 48-128 (fewer = smaller file size)\n- Duration: Keep under 3 seconds for emoji GIFs\n\n## Core Workflow\n\n```python\nfrom core.gif_builder import GIFBuilder\nfrom PIL import Image, ImageDraw\n\n# 1. Create builder\nbuilder = GIFBuilder(width=128, height=128, fps=10)\n\n# 2. Generate frames\nfor i in range(12):\n frame = Image.new('RGB', (128, 128), (240, 248, 255))\n draw = ImageDraw.Draw(frame)\n\n # Draw your animation using PIL primitives\n # (circles, polygons, lines, etc.)\n\n builder.add_frame(frame)\n\n# 3. Save with optimization\nbuilder.save('output.gif', num_colors=48, optimize_for_emoji=True)\n```\n\n## Drawing Graphics\n\n### Working with User-Uploaded Images\nIf a user uploads an image, consider whether they want to:\n- **Use it directly** (e.g., \"animate this\", \"split this into frames\")\n- **Use it as inspiration** (e.g., \"make something like this\")\n\nLoad and work with images using PIL:\n```python\nfrom PIL import Image\n\nuploaded = Image.open('file.png')\n# Use directly, or just as reference for colors/style\n```\n\n### Drawing from Scratch\nWhen drawing graphics from scratch, use PIL ImageDraw primitives:\n\n```python\nfrom PIL import ImageDraw\n\ndraw = ImageDraw.Draw(frame)\n\n# Circles/ovals\ndraw.ellipse([x1, y1, x2, y2], fill=(r, g, b), outline=(r, g, b), width=3)\n\n# Stars, triangles, any polygon\npoints = [(x1, y1), (x2, y2), (x3, y3), ...]\ndraw.polygon(points, fill=(r, g, b), outline=(r, g, b), width=3)\n\n# Lines\ndraw.line([(x1, y1), (x2, y2)], fill=(r, g, b), width=5)\n\n# Rectangles\ndraw.rectangle([x1, y1, x2, y2], fill=(r, g, b), outline=(r, g, b), width=3)\n```\n\n**Don't use:** Emoji fonts (unreliable across platforms) or assume pre-packaged graphics exist in this skill.\n\n### Making Graphics Look Good\n\nGraphics should look polished and creative, not basic. Here's how:\n\n**Use thicker lines** - Always set `width=2` or higher for outlines and lines. Thin lines (width=1) look choppy and amateurish.\n\n**Add visual depth**:\n- Use gradients for backgrounds (`create_gradient_background`)\n- Layer multiple shapes for complexity (e.g., a star with a smaller star inside)\n\n**Make shapes more interesting**:\n- Don't just draw a plain circle - add highlights, rings, or patterns\n- Stars can have glows (draw larger, semi-transparent versions behind)\n- Combine multiple shapes (stars + sparkles, circles + rings)\n\n**Pay attention to colors**:\n- Use vibrant, complementary colors\n- Add contrast (dark outlines on light shapes, light outlines on dark shapes)\n- Consider the overall composition\n\n**For complex shapes** (hearts, snowflakes, etc.):\n- Use combinations of polygons and ellipses\n- Calculate points carefully for symmetry\n- Add details (a heart can have a highlight curve, snowflakes have intricate branches)\n\nBe creative and detailed! A good Slack GIF should look polished, not like placeholder graphics.\n\n## Available Utilities\n\n### GIFBuilder (`core.gif_builder`)\nAssembles frames and optimizes for Slack:\n```python\nbuilder = GIFBuilder(width=128, height=128, fps=10)\nbuilder.add_frame(frame) # Add PIL Image\nbuilder.add_frames(frames) # Add list of frames\nbuilder.save('out.gif', num_colors=48, optimize_for_emoji=True, remove_duplicates=True)\n```\n\n### Validators (`core.validators`)\nCheck if GIF meets Slack requirements:\n```python\nfrom core.validators import validate_gif, is_slack_ready\n\n# Detailed validation\npasses, info = validate_gif('my.gif', is_emoji=True, verbose=True)\n\n# Quick check\nif is_slack_ready('my.gif'):\n print(\"Ready!\")\n```\n\n### Easing Functions (`core.easing`)\nSmooth motion instead of linear:\n```python\nfrom core.easing import interpolate\n\n# Progress from 0.0 to 1.0\nt = i / (num_frames - 1)\n\n# Apply easing\ny = interpolate(start=0, end=400, t=t, easing='ease_out')\n\n# Available: linear, ease_in, ease_out, ease_in_out,\n# bounce_out, elastic_out, back_out\n```\n\n### Frame Helpers (`core.frame_composer`)\nConvenience functions for common needs:\n```python\nfrom core.frame_composer import (\n create_blank_frame, # Solid color background\n create_gradient_background, # Vertical gradient\n draw_circle, # Helper for circles\n draw_text, # Simple text rendering\n draw_star # 5-pointed star\n)\n```\n\n## Animation Concepts\n\n### Shake/Vibrate\nOffset object position with oscillation:\n- Use `math.sin()` or `math.cos()` with frame index\n- Add small random variations for natural feel\n- Apply to x and/or y position\n\n### Pulse/Heartbeat\nScale object size rhythmically:\n- Use `math.sin(t * frequency * 2 * math.pi)` for smooth pulse\n- For heartbeat: two quick pulses then pause (adjust sine wave)\n- Scale between 0.8 and 1.2 of base size\n\n### Bounce\nObject falls and bounces:\n- Use `interpolate()` with `easing='bounce_out'` for landing\n- Use `easing='ease_in'` for falling (accelerating)\n- Apply gravity by increasing y velocity each frame\n\n### Spin/Rotate\nRotate object around center:\n- PIL: `image.rotate(angle, resample=Image.BICUBIC)`\n- For wobble: use sine wave for angle instead of linear\n\n### Fade In/Out\nGradually appear or disappear:\n- Create RGBA image, adjust alpha channel\n- Or use `Image.blend(image1, image2, alpha)`\n- Fade in: alpha from 0 to 1\n- Fade out: alpha from 1 to 0\n\n### Slide\nMove object from off-screen to position:\n- Start position: outside frame bounds\n- End position: target location\n- Use `interpolate()` with `easing='ease_out'` for smooth stop\n- For overshoot: use `easing='back_out'`\n\n### Zoom\nScale and position for zoom effect:\n- Zoom in: scale from 0.1 to 2.0, crop center\n- Zoom out: scale from 2.0 to 1.0\n- Can add motion blur for drama (PIL filter)\n\n### Explode/Particle Burst\nCreate particles radiating outward:\n- Generate particles with random angles and velocities\n- Update each particle: `x += vx`, `y += vy`\n- Add gravity: `vy += gravity_constant`\n- Fade out particles over time (reduce alpha)\n\n## Optimization Strategies\n\nOnly when asked to make the file size smaller, implement a few of the following methods:\n\n1. **Fewer frames** - Lower FPS (10 instead of 20) or shorter duration\n2. **Fewer colors** - `num_colors=48` instead of 128\n3. **Smaller dimensions** - 128x128 instead of 480x480\n4. **Remove duplicates** - `remove_duplicates=True` in save()\n5. **Emoji mode** - `optimize_for_emoji=True` auto-optimizes\n\n```python\n# Maximum optimization for emoji\nbuilder.save(\n 'emoji.gif',\n num_colors=48,\n optimize_for_emoji=True,\n remove_duplicates=True\n)\n```\n\n## Philosophy\n\nThis skill provides:\n- **Knowledge**: Slack's requirements and animation concepts\n- **Utilities**: GIFBuilder, validators, easing functions\n- **Flexibility**: Create the animation logic using PIL primitives\n\nIt does NOT provide:\n- Rigid animation templates or pre-made functions\n- Emoji font rendering (unreliable across platforms)\n- A library of pre-packaged graphics built into the skill\n\n**Note on user uploads**: This skill doesn't include pre-built graphics, but if a user uploads an image, use PIL to load and work with it - interpret based on their request whether they want it used directly or just as inspiration.\n\nBe creative! Combine concepts (bouncing + rotating, pulsing + sliding, etc.) and use PIL's full capabilities.\n\n## Dependencies\n\n```bash\npip install pillow imageio numpy\n```\n",[],[168,791,344],"anthropic-slack-gif-creator","ccbd1d7e-5974-11f1-a134-ee650bb23af1",115,["D",1779849361111],[218],[168,791],"cc8aee80-5974-11f1-97c9-ee650bb23af1","cc8aef5c-5974-11f1-97c9-ee650bb23af1","cc51bf52-5974-11f1-b30a-ee650bb23af1",114,["D",1779849360781],"---\nname: skill-creator\ndescription: Create new skills, modify and improve existing skills, and measure skill performance. Use when users want to create a skill from scratch, edit, or optimize an existing skill, run evals to test a skill, benchmark skill performance with variance analysis, or optimize a skill's description for better triggering accuracy.\n---\n\n# Skill Creator\n\nA skill for creating new skills and iteratively improving them.\n\nAt a high level, the process of creating a skill goes like this:\n\n- Decide what you want the skill to do and roughly how it should do it\n- Write a draft of the skill\n- Create a few test prompts and run claude-with-access-to-the-skill on them\n- Help the user evaluate the results both qualitatively and quantitatively\n - While the runs happen in the background, draft some quantitative evals if there aren't any (if there are some, you can either use as is or modify if you feel something needs to change about them). Then explain them to the user (or if they already existed, explain the ones that already exist)\n - Use the `eval-viewer/generate_review.py` script to show the user the results for them to look at, and also let them look at the quantitative metrics\n- Rewrite the skill based on feedback from the user's evaluation of the results (and also if there are any glaring flaws that become apparent from the quantitative benchmarks)\n- Repeat until you're satisfied\n- Expand the test set and try again at larger scale\n\nYour job when using this skill is to figure out where the user is in this process and then jump in and help them progress through these stages. So for instance, maybe they're like \"I want to make a skill for X\". You can help narrow down what they mean, write a draft, write the test cases, figure out how they want to evaluate, run all the prompts, and repeat.\n\nOn the other hand, maybe they already have a draft of the skill. In this case you can go straight to the eval/iterate part of the loop.\n\nOf course, you should always be flexible and if the user is like \"I don't need to run a bunch of evaluations, just vibe with me\", you can do that instead.\n\nThen after the skill is done (but again, the order is flexible), you can also run the skill description improver, which we have a whole separate script for, to optimize the triggering of the skill.\n\nCool? Cool.\n\n## Communicating with the user\n\nThe skill creator is liable to be used by people across a wide range of familiarity with coding jargon. If you haven't heard (and how could you, it's only very recently that it started), there's a trend now where the power of Claude is inspiring plumbers to open up their terminals, parents and grandparents to google \"how to install npm\". On the other hand, the bulk of users are probably fairly computer-literate.\n\nSo please pay attention to context cues to understand how to phrase your communication! In the default case, just to give you some idea:\n\n- \"evaluation\" and \"benchmark\" are borderline, but OK\n- for \"JSON\" and \"assertion\" you want to see serious cues from the user that they know what those things are before using them without explaining them\n\nIt's OK to briefly explain terms if you're in doubt, and feel free to clarify terms with a short definition if you're unsure if the user will get it.\n\n---\n\n## Creating a skill\n\n### Capture Intent\n\nStart by understanding the user's intent. The current conversation might already contain a workflow the user wants to capture (e.g., they say \"turn this into a skill\"). If so, extract answers from the conversation history first — the tools used, the sequence of steps, corrections the user made, input/output formats observed. The user may need to fill the gaps, and should confirm before proceeding to the next step.\n\n1. What should this skill enable Claude to do?\n2. When should this skill trigger? (what user phrases/contexts)\n3. What's the expected output format?\n4. Should we set up test cases to verify the skill works? Skills with objectively verifiable outputs (file transforms, data extraction, code generation, fixed workflow steps) benefit from test cases. Skills with subjective outputs (writing style, art) often don't need them. Suggest the appropriate default based on the skill type, but let the user decide.\n\n### Interview and Research\n\nProactively ask questions about edge cases, input/output formats, example files, success criteria, and dependencies. Wait to write test prompts until you've got this part ironed out.\n\nCheck available MCPs - if useful for research (searching docs, finding similar skills, looking up best practices), research in parallel via subagents if available, otherwise inline. Come prepared with context to reduce burden on the user.\n\n### Write the SKILL.md\n\nBased on the user interview, fill in these components:\n\n- **name**: Skill identifier\n- **description**: When to trigger, what it does. This is the primary triggering mechanism - include both what the skill does AND specific contexts for when to use it. All \"when to use\" info goes here, not in the body. Note: currently Claude has a tendency to \"undertrigger\" skills -- to not use them when they'd be useful. To combat this, please make the skill descriptions a little bit \"pushy\". So for instance, instead of \"How to build a simple fast dashboard to display internal Anthropic data.\", you might write \"How to build a simple fast dashboard to display internal Anthropic data. Make sure to use this skill whenever the user mentions dashboards, data visualization, internal metrics, or wants to display any kind of company data, even if they don't explicitly ask for a 'dashboard.'\"\n- **compatibility**: Required tools, dependencies (optional, rarely needed)\n- **the rest of the skill :)**\n\n### Skill Writing Guide\n\n#### Anatomy of a Skill\n\n```\nskill-name/\n├── SKILL.md (required)\n│ ├── YAML frontmatter (name, description required)\n│ └── Markdown instructions\n└── Bundled Resources (optional)\n ├── scripts/ - Executable code for deterministic/repetitive tasks\n ├── references/ - Docs loaded into context as needed\n └── assets/ - Files used in output (templates, icons, fonts)\n```\n\n#### Progressive Disclosure\n\nSkills use a three-level loading system:\n1. **Metadata** (name + description) - Always in context (~100 words)\n2. **SKILL.md body** - In context whenever skill triggers (<500 lines ideal)\n3. **Bundled resources** - As needed (unlimited, scripts can execute without loading)\n\nThese word counts are approximate and you can feel free to go longer if needed.\n\n**Key patterns:**\n- Keep SKILL.md under 500 lines; if you're approaching this limit, add an additional layer of hierarchy along with clear pointers about where the model using the skill should go next to follow up.\n- Reference files clearly from SKILL.md with guidance on when to read them\n- For large reference files (>300 lines), include a table of contents\n\n**Domain organization**: When a skill supports multiple domains/frameworks, organize by variant:\n```\ncloud-deploy/\n├── SKILL.md (workflow + selection)\n└── references/\n ├── aws.md\n ├── gcp.md\n └── azure.md\n```\nClaude reads only the relevant reference file.\n\n#### Principle of Lack of Surprise\n\nThis goes without saying, but skills must not contain malware, exploit code, or any content that could compromise system security. A skill's contents should not surprise the user in their intent if described. Don't go along with requests to create misleading skills or skills designed to facilitate unauthorized access, data exfiltration, or other malicious activities. Things like a \"roleplay as an XYZ\" are OK though.\n\n#### Writing Patterns\n\nPrefer using the imperative form in instructions.\n\n**Defining output formats** - You can do it like this:\n```markdown\n## Report structure\nALWAYS use this exact template:\n# [Title]\n## Executive summary\n## Key findings\n## Recommendations\n```\n\n**Examples pattern** - It's useful to include examples. You can format them like this (but if \"Input\" and \"Output\" are in the examples you might want to deviate a little):\n```markdown\n## Commit message format\n**Example 1:**\nInput: Added user authentication with JWT tokens\nOutput: feat(auth): implement JWT-based authentication\n```\n\n### Writing Style\n\nTry to explain to the model why things are important in lieu of heavy-handed musty MUSTs. Use theory of mind and try to make the skill general and not super-narrow to specific examples. Start by writing a draft and then look at it with fresh eyes and improve it.\n\n### Test Cases\n\nAfter writing the skill draft, come up with 2-3 realistic test prompts — the kind of thing a real user would actually say. Share them with the user: [you don't have to use this exact language] \"Here are a few test cases I'd like to try. Do these look right, or do you want to add more?\" Then run them.\n\nSave test cases to `evals/evals.json`. Don't write assertions yet — just the prompts. You'll draft assertions in the next step while the runs are in progress.\n\n```json\n{\n \"skill_name\": \"example-skill\",\n \"evals\": [\n {\n \"id\": 1,\n \"prompt\": \"User's task prompt\",\n \"expected_output\": \"Description of expected result\",\n \"files\": []\n }\n ]\n}\n```\n\nSee `references/schemas.md` for the full schema (including the `assertions` field, which you'll add later).\n\n## Running and evaluating test cases\n\nThis section is one continuous sequence — don't stop partway through. Do NOT use `/skill-test` or any other testing skill.\n\nPut results in `-workspace/` as a sibling to the skill directory. Within the workspace, organize results by iteration (`iteration-1/`, `iteration-2/`, etc.) and within that, each test case gets a directory (`eval-0/`, `eval-1/`, etc.). Don't create all of this upfront — just create directories as you go.\n\n### Step 1: Spawn all runs (with-skill AND baseline) in the same turn\n\nFor each test case, spawn two subagents in the same turn — one with the skill, one without. This is important: don't spawn the with-skill runs first and then come back for baselines later. Launch everything at once so it all finishes around the same time.\n\n**With-skill run:**\n\n```\nExecute this task:\n- Skill path: \n- Task: \n- Input files: \n- Save outputs to: /iteration-/eval-/with_skill/outputs/\n- Outputs to save: \n```\n\n**Baseline run** (same prompt, but the baseline depends on context):\n- **Creating a new skill**: no skill at all. Same prompt, no skill path, save to `without_skill/outputs/`.\n- **Improving an existing skill**: the old version. Before editing, snapshot the skill (`cp -r /skill-snapshot/`), then point the baseline subagent at the snapshot. Save to `old_skill/outputs/`.\n\nWrite an `eval_metadata.json` for each test case (assertions can be empty for now). Give each eval a descriptive name based on what it's testing — not just \"eval-0\". Use this name for the directory too. If this iteration uses new or modified eval prompts, create these files for each new eval directory — don't assume they carry over from previous iterations.\n\n```json\n{\n \"eval_id\": 0,\n \"eval_name\": \"descriptive-name-here\",\n \"prompt\": \"The user's task prompt\",\n \"assertions\": []\n}\n```\n\n### Step 2: While runs are in progress, draft assertions\n\nDon't just wait for the runs to finish — you can use this time productively. Draft quantitative assertions for each test case and explain them to the user. If assertions already exist in `evals/evals.json`, review them and explain what they check.\n\nGood assertions are objectively verifiable and have descriptive names — they should read clearly in the benchmark viewer so someone glancing at the results immediately understands what each one checks. Subjective skills (writing style, design quality) are better evaluated qualitatively — don't force assertions onto things that need human judgment.\n\nUpdate the `eval_metadata.json` files and `evals/evals.json` with the assertions once drafted. Also explain to the user what they'll see in the viewer — both the qualitative outputs and the quantitative benchmark.\n\n### Step 3: As runs complete, capture timing data\n\nWhen each subagent task completes, you receive a notification containing `total_tokens` and `duration_ms`. Save this data immediately to `timing.json` in the run directory:\n\n```json\n{\n \"total_tokens\": 84852,\n \"duration_ms\": 23332,\n \"total_duration_seconds\": 23.3\n}\n```\n\nThis is the only opportunity to capture this data — it comes through the task notification and isn't persisted elsewhere. Process each notification as it arrives rather than trying to batch them.\n\n### Step 4: Grade, aggregate, and launch the viewer\n\nOnce all runs are done:\n\n1. **Grade each run** — spawn a grader subagent (or grade inline) that reads `agents/grader.md` and evaluates each assertion against the outputs. Save results to `grading.json` in each run directory. The grading.json expectations array must use the fields `text`, `passed`, and `evidence` (not `name`/`met`/`details` or other variants) — the viewer depends on these exact field names. For assertions that can be checked programmatically, write and run a script rather than eyeballing it — scripts are faster, more reliable, and can be reused across iterations.\n\n2. **Aggregate into benchmark** — run the aggregation script from the skill-creator directory:\n ```bash\n python -m scripts.aggregate_benchmark /iteration-N --skill-name \n ```\n This produces `benchmark.json` and `benchmark.md` with pass_rate, time, and tokens for each configuration, with mean ± stddev and the delta. If generating benchmark.json manually, see `references/schemas.md` for the exact schema the viewer expects.\nPut each with_skill version before its baseline counterpart.\n\n3. **Do an analyst pass** — read the benchmark data and surface patterns the aggregate stats might hide. See `agents/analyzer.md` (the \"Analyzing Benchmark Results\" section) for what to look for — things like assertions that always pass regardless of skill (non-discriminating), high-variance evals (possibly flaky), and time/token tradeoffs.\n\n4. **Launch the viewer** with both qualitative outputs and quantitative data:\n ```bash\n nohup python /eval-viewer/generate_review.py \\\n /iteration-N \\\n --skill-name \"my-skill\" \\\n --benchmark /iteration-N/benchmark.json \\\n > /dev/null 2>&1 &\n VIEWER_PID=$!\n ```\n For iteration 2+, also pass `--previous-workspace /iteration-`.\n\n **Cowork / headless environments:** If `webbrowser.open()` is not available or the environment has no display, use `--static ` to write a standalone HTML file instead of starting a server. Feedback will be downloaded as a `feedback.json` file when the user clicks \"Submit All Reviews\". After download, copy `feedback.json` into the workspace directory for the next iteration to pick up.\n\nNote: please use generate_review.py to create the viewer; there's no need to write custom HTML.\n\n5. **Tell the user** something like: \"I've opened the results in your browser. There are two tabs — 'Outputs' lets you click through each test case and leave feedback, 'Benchmark' shows the quantitative comparison. When you're done, come back here and let me know.\"\n\n### What the user sees in the viewer\n\nThe \"Outputs\" tab shows one test case at a time:\n- **Prompt**: the task that was given\n- **Output**: the files the skill produced, rendered inline where possible\n- **Previous Output** (iteration 2+): collapsed section showing last iteration's output\n- **Formal Grades** (if grading was run): collapsed section showing assertion pass/fail\n- **Feedback**: a textbox that auto-saves as they type\n- **Previous Feedback** (iteration 2+): their comments from last time, shown below the textbox\n\nThe \"Benchmark\" tab shows the stats summary: pass rates, timing, and token usage for each configuration, with per-eval breakdowns and analyst observations.\n\nNavigation is via prev/next buttons or arrow keys. When done, they click \"Submit All Reviews\" which saves all feedback to `feedback.json`.\n\n### Step 5: Read the feedback\n\nWhen the user tells you they're done, read `feedback.json`:\n\n```json\n{\n \"reviews\": [\n {\"run_id\": \"eval-0-with_skill\", \"feedback\": \"the chart is missing axis labels\", \"timestamp\": \"...\"},\n {\"run_id\": \"eval-1-with_skill\", \"feedback\": \"\", \"timestamp\": \"...\"},\n {\"run_id\": \"eval-2-with_skill\", \"feedback\": \"perfect, love this\", \"timestamp\": \"...\"}\n ],\n \"status\": \"complete\"\n}\n```\n\nEmpty feedback means the user thought it was fine. Focus your improvements on the test cases where the user had specific complaints.\n\nKill the viewer server when you're done with it:\n\n```bash\nkill $VIEWER_PID 2>/dev/null\n```\n\n---\n\n## Improving the skill\n\nThis is the heart of the loop. You've run the test cases, the user has reviewed the results, and now you need to make the skill better based on their feedback.\n\n### How to think about improvements\n\n1. **Generalize from the feedback.** The big picture thing that's happening here is that we're trying to create skills that can be used a million times (maybe literally, maybe even more who knows) across many different prompts. Here you and the user are iterating on only a few examples over and over again because it helps move faster. The user knows these examples in and out and it's quick for them to assess new outputs. But if the skill you and the user are codeveloping works only for those examples, it's useless. Rather than put in fiddly overfitty changes, or oppressively constrictive MUSTs, if there's some stubborn issue, you might try branching out and using different metaphors, or recommending different patterns of working. It's relatively cheap to try and maybe you'll land on something great.\n\n2. **Keep the prompt lean.** Remove things that aren't pulling their weight. Make sure to read the transcripts, not just the final outputs — if it looks like the skill is making the model waste a bunch of time doing things that are unproductive, you can try getting rid of the parts of the skill that are making it do that and seeing what happens.\n\n3. **Explain the why.** Try hard to explain the **why** behind everything you're asking the model to do. Today's LLMs are *smart*. They have good theory of mind and when given a good harness can go beyond rote instructions and really make things happen. Even if the feedback from the user is terse or frustrated, try to actually understand the task and why the user is writing what they wrote, and what they actually wrote, and then transmit this understanding into the instructions. If you find yourself writing ALWAYS or NEVER in all caps, or using super rigid structures, that's a yellow flag — if possible, reframe and explain the reasoning so that the model understands why the thing you're asking for is important. That's a more humane, powerful, and effective approach.\n\n4. **Look for repeated work across test cases.** Read the transcripts from the test runs and notice if the subagents all independently wrote similar helper scripts or took the same multi-step approach to something. If all 3 test cases resulted in the subagent writing a `create_docx.py` or a `build_chart.py`, that's a strong signal the skill should bundle that script. Write it once, put it in `scripts/`, and tell the skill to use it. This saves every future invocation from reinventing the wheel.\n\nThis task is pretty important (we are trying to create billions a year in economic value here!) and your thinking time is not the blocker; take your time and really mull things over. I'd suggest writing a draft revision and then looking at it anew and making improvements. Really do your best to get into the head of the user and understand what they want and need.\n\n### The iteration loop\n\nAfter improving the skill:\n\n1. Apply your improvements to the skill\n2. Rerun all test cases into a new `iteration-/` directory, including baseline runs. If you're creating a new skill, the baseline is always `without_skill` (no skill) — that stays the same across iterations. If you're improving an existing skill, use your judgment on what makes sense as the baseline: the original version the user came in with, or the previous iteration.\n3. Launch the reviewer with `--previous-workspace` pointing at the previous iteration\n4. Wait for the user to review and tell you they're done\n5. Read the new feedback, improve again, repeat\n\nKeep going until:\n- The user says they're happy\n- The feedback is all empty (everything looks good)\n- You're not making meaningful progress\n\n---\n\n## Advanced: Blind comparison\n\nFor situations where you want a more rigorous comparison between two versions of a skill (e.g., the user asks \"is the new version actually better?\"), there's a blind comparison system. Read `agents/comparator.md` and `agents/analyzer.md` for the details. The basic idea is: give two outputs to an independent agent without telling it which is which, and let it judge quality. Then analyze why the winner won.\n\nThis is optional, requires subagents, and most users won't need it. The human review loop is usually sufficient.\n\n---\n\n## Description Optimization\n\nThe description field in SKILL.md frontmatter is the primary mechanism that determines whether Claude invokes a skill. After creating or improving a skill, offer to optimize the description for better triggering accuracy.\n\n### Step 1: Generate trigger eval queries\n\nCreate 20 eval queries — a mix of should-trigger and should-not-trigger. Save as JSON:\n\n```json\n[\n {\"query\": \"the user prompt\", \"should_trigger\": true},\n {\"query\": \"another prompt\", \"should_trigger\": false}\n]\n```\n\nThe queries must be realistic and something a Claude Code or Claude.ai user would actually type. Not abstract requests, but requests that are concrete and specific and have a good amount of detail. For instance, file paths, personal context about the user's job or situation, column names and values, company names, URLs. A little bit of backstory. Some might be in lowercase or contain abbreviations or typos or casual speech. Use a mix of different lengths, and focus on edge cases rather than making them clear-cut (the user will get a chance to sign off on them).\n\nBad: `\"Format this data\"`, `\"Extract text from PDF\"`, `\"Create a chart\"`\n\nGood: `\"ok so my boss just sent me this xlsx file (its in my downloads, called something like 'Q4 sales final FINAL v2.xlsx') and she wants me to add a column that shows the profit margin as a percentage. The revenue is in column C and costs are in column D i think\"`\n\nFor the **should-trigger** queries (8-10), think about coverage. You want different phrasings of the same intent — some formal, some casual. Include cases where the user doesn't explicitly name the skill or file type but clearly needs it. Throw in some uncommon use cases and cases where this skill competes with another but should win.\n\nFor the **should-not-trigger** queries (8-10), the most valuable ones are the near-misses — queries that share keywords or concepts with the skill but actually need something different. Think adjacent domains, ambiguous phrasing where a naive keyword match would trigger but shouldn't, and cases where the query touches on something the skill does but in a context where another tool is more appropriate.\n\nThe key thing to avoid: don't make should-not-trigger queries obviously irrelevant. \"Write a fibonacci function\" as a negative test for a PDF skill is too easy — it doesn't test anything. The negative cases should be genuinely tricky.\n\n### Step 2: Review with user\n\nPresent the eval set to the user for review using the HTML template:\n\n1. Read the template from `assets/eval_review.html`\n2. Replace the placeholders:\n - `__EVAL_DATA_PLACEHOLDER__` → the JSON array of eval items (no quotes around it — it's a JS variable assignment)\n - `__SKILL_NAME_PLACEHOLDER__` → the skill's name\n - `__SKILL_DESCRIPTION_PLACEHOLDER__` → the skill's current description\n3. Write to a temp file (e.g., `/tmp/eval_review_.html`) and open it: `open /tmp/eval_review_.html`\n4. The user can edit queries, toggle should-trigger, add/remove entries, then click \"Export Eval Set\"\n5. The file downloads to `~/Downloads/eval_set.json` — check the Downloads folder for the most recent version in case there are multiple (e.g., `eval_set (1).json`)\n\nThis step matters — bad eval queries lead to bad descriptions.\n\n### Step 3: Run the optimization loop\n\nTell the user: \"This will take some time — I'll run the optimization loop in the background and check on it periodically.\"\n\nSave the eval set to the workspace, then run in the background:\n\n```bash\npython -m scripts.run_loop \\\n --eval-set \\\n --skill-path \\\n --model \\\n --max-iterations 5 \\\n --verbose\n```\n\nUse the model ID from your system prompt (the one powering the current session) so the triggering test matches what the user actually experiences.\n\nWhile it runs, periodically tail the output to give the user updates on which iteration it's on and what the scores look like.\n\nThis handles the full optimization loop automatically. It splits the eval set into 60% train and 40% held-out test, evaluates the current description (running each query 3 times to get a reliable trigger rate), then calls Claude to propose improvements based on what failed. It re-evaluates each new description on both train and test, iterating up to 5 times. When it's done, it opens an HTML report in the browser showing the results per iteration and returns JSON with `best_description` — selected by test score rather than train score to avoid overfitting.\n\n### How skill triggering works\n\nUnderstanding the triggering mechanism helps design better eval queries. Skills appear in Claude's `available_skills` list with their name + description, and Claude decides whether to consult a skill based on that description. The important thing to know is that Claude only consults skills for tasks it can't easily handle on its own — simple, one-step queries like \"read this PDF\" may not trigger a skill even if the description matches perfectly, because Claude can handle them directly with basic tools. Complex, multi-step, or specialized queries reliably trigger skills when the description matches.\n\nThis means your eval queries should be substantive enough that Claude would actually benefit from consulting a skill. Simple queries like \"read file X\" are poor test cases — they won't trigger skills regardless of description quality.\n\n### Step 4: Apply the result\n\nTake `best_description` from the JSON output and update the skill's SKILL.md frontmatter. Show the user before/after and report the scores.\n\n---\n\n### Package and Present (only if `present_files` tool is available)\n\nCheck whether you have access to the `present_files` tool. If you don't, skip this step. If you do, package the skill and present the .skill file to the user:\n\n```bash\npython -m scripts.package_skill \n```\n\nAfter packaging, direct the user to the resulting `.skill` file path so they can install it.\n\n---\n\n## Claude.ai-specific instructions\n\nIn Claude.ai, the core workflow is the same (draft → test → review → improve → repeat), but because Claude.ai doesn't have subagents, some mechanics change. Here's what to adapt:\n\n**Running test cases**: No subagents means no parallel execution. For each test case, read the skill's SKILL.md, then follow its instructions to accomplish the test prompt yourself. Do them one at a time. This is less rigorous than independent subagents (you wrote the skill and you're also running it, so you have full context), but it's a useful sanity check — and the human review step compensates. Skip the baseline runs — just use the skill to complete the task as requested.\n\n**Reviewing results**: If you can't open a browser (e.g., Claude.ai's VM has no display, or you're on a remote server), skip the browser reviewer entirely. Instead, present results directly in the conversation. For each test case, show the prompt and the output. If the output is a file the user needs to see (like a .docx or .xlsx), save it to the filesystem and tell them where it is so they can download and inspect it. Ask for feedback inline: \"How does this look? Anything you'd change?\"\n\n**Benchmarking**: Skip the quantitative benchmarking — it relies on baseline comparisons which aren't meaningful without subagents. Focus on qualitative feedback from the user.\n\n**The iteration loop**: Same as before — improve the skill, rerun the test cases, ask for feedback — just without the browser reviewer in the middle. You can still organize results into iteration directories on the filesystem if you have one.\n\n**Description optimization**: This section requires the `claude` CLI tool (specifically `claude -p`) which is only available in Claude Code. Skip it if you're on Claude.ai.\n\n**Blind comparison**: Requires subagents. Skip it.\n\n**Packaging**: The `package_skill.py` script works anywhere with Python and a filesystem. On Claude.ai, you can run it and the user can download the resulting `.skill` file.\n\n**Updating an existing skill**: The user might be asking you to update an existing skill, not create a new one. In this case:\n- **Preserve the original name.** Note the skill's directory name and `name` frontmatter field -- use them unchanged. E.g., if the installed skill is `research-helper`, output `research-helper.skill` (not `research-helper-v2`).\n- **Copy to a writeable location before editing.** The installed skill path may be read-only. Copy to `/tmp/skill-name/`, edit there, and package from the copy.\n- **If packaging manually, stage in `/tmp/` first**, then copy to the output directory -- direct writes may fail due to permissions.\n\n---\n\n## Cowork-Specific Instructions\n\nIf you're in Cowork, the main things to know are:\n\n- You have subagents, so the main workflow (spawn test cases in parallel, run baselines, grade, etc.) all works. (However, if you run into severe problems with timeouts, it's OK to run the test prompts in series rather than parallel.)\n- You don't have a browser or display, so when generating the eval viewer, use `--static ` to write a standalone HTML file instead of starting a server. Then proffer a link that the user can click to open the HTML in their browser.\n- For whatever reason, the Cowork setup seems to disincline Claude from generating the eval viewer after running the tests, so just to reiterate: whether you're in Cowork or in Claude Code, after running tests, you should always generate the eval viewer for the human to look at examples before revising the skill yourself and trying to make corrections, using `generate_review.py` (not writing your own boutique html code). Sorry in advance but I'm gonna go all caps here: GENERATE THE EVAL VIEWER *BEFORE* evaluating inputs yourself. You want to get them in front of the human ASAP!\n- Feedback works differently: since there's no running server, the viewer's \"Submit All Reviews\" button will download `feedback.json` as a file. You can then read it from there (you may have to request access first).\n- Packaging works — `package_skill.py` just needs Python and a filesystem.\n- Description optimization (`run_loop.py` / `run_eval.py`) should work in Cowork just fine since it uses `claude -p` via subprocess, not a browser, but please save it until you've fully finished making the skill and the user agrees it's in good shape.\n- **Updating an existing skill**: The user might be asking you to update an existing skill, not create a new one. Follow the update guidance in the claude.ai section above.\n\n---\n\n## Reference files\n\nThe agents/ directory contains instructions for specialized subagents. Read them when you need to spawn the relevant subagent.\n\n- `agents/grader.md` — How to evaluate assertions against outputs\n- `agents/comparator.md` — How to do blind A/B comparison between two outputs\n- `agents/analyzer.md` — How to analyze why one version beat another\n\nThe references/ directory has additional documentation:\n- `references/schemas.md` — JSON structures for evals.json, grading.json, etc.\n\n---\n\nRepeating one more time the core loop here for emphasis:\n\n- Figure out what the skill is about\n- Draft or edit the skill\n- Run claude-with-access-to-the-skill on test prompts\n- With the user, evaluate the outputs:\n - Create benchmark.json and run `eval-viewer/generate_review.py` to help the user review them\n - Run quantitative evals\n- Repeat until you and the user are satisfied\n- Package the final skill and return it to the user.\n\nPlease add steps to your TodoList, if you have such a thing, to make sure you don't forget. If you're in Cowork, please specifically put \"Create evals JSON and run `eval-viewer/generate_review.py` so human can review test cases\" in your TodoList to make sure it happens.\n\nGood luck!\n",[],[168,805,344],"anthropic-skill-creator","cc51be30-5974-11f1-b30a-ee650bb23af1",113,["D",1779849360411],[216],[168,805],"cc211492-5974-11f1-aa0b-ee650bb23af1","cc21153c-5974-11f1-aa0b-ee650bb23af1","cbbdf2c2-5974-11f1-8cc9-ee650bb23af1",112,["D",1779849360092],"---\nname: pptx\ndescription: \"Use this skill any time a .pptx file is involved in any way — as input, output, or both. This includes: creating slide decks, pitch decks, or presentations; reading, parsing, or extracting text from any .pptx file (even if the extracted content will be used elsewhere, like in an email or summary); editing, modifying, or updating existing presentations; combining or splitting slide files; working with templates, layouts, speaker notes, or comments. Trigger whenever the user mentions \\\"deck,\\\" \\\"slides,\\\" \\\"presentation,\\\" or references a .pptx filename, regardless of what they plan to do with the content afterward. If a .pptx file needs to be opened, created, or touched, use this skill.\"\nlicense: Proprietary. LICENSE.txt has complete terms\n---\n\n# PPTX Skill\n\n## Quick Reference\n\n| Task | Guide |\n|------|-------|\n| Read/analyze content | `python -m markitdown presentation.pptx` |\n| Edit or create from template | Read [editing.md](editing.md) |\n| Create from scratch | Read [pptxgenjs.md](pptxgenjs.md) |\n\n---\n\n## Reading Content\n\n```bash\n# Text extraction\npython -m markitdown presentation.pptx\n\n# Visual overview\npython scripts/thumbnail.py presentation.pptx\n\n# Raw XML\npython scripts/office/unpack.py presentation.pptx unpacked/\n```\n\n---\n\n## Editing Workflow\n\n**Read [editing.md](editing.md) for full details.**\n\n1. Analyze template with `thumbnail.py`\n2. Unpack → manipulate slides → edit content → clean → pack\n\n---\n\n## Creating from Scratch\n\n**Read [pptxgenjs.md](pptxgenjs.md) for full details.**\n\nUse when no template or reference presentation is available.\n\n---\n\n## Design Ideas\n\n**Don't create boring slides.** Plain bullets on a white background won't impress anyone. Consider ideas from this list for each slide.\n\n### Before Starting\n\n- **Pick a bold, content-informed color palette**: The palette should feel designed for THIS topic. If swapping your colors into a completely different presentation would still \"work,\" you haven't made specific enough choices.\n- **Dominance over equality**: One color should dominate (60-70% visual weight), with 1-2 supporting tones and one sharp accent. Never give all colors equal weight.\n- **Dark/light contrast**: Dark backgrounds for title + conclusion slides, light for content (\"sandwich\" structure). Or commit to dark throughout for a premium feel.\n- **Commit to a visual motif**: Pick ONE distinctive element and repeat it — rounded image frames, icons in colored circles, thick single-side borders. Carry it across every slide.\n\n### Color Palettes\n\nChoose colors that match your topic — don't default to generic blue. Use these palettes as inspiration:\n\n| Theme | Primary | Secondary | Accent |\n|-------|---------|-----------|--------|\n| **Midnight Executive** | `1E2761` (navy) | `CADCFC` (ice blue) | `FFFFFF` (white) |\n| **Forest & Moss** | `2C5F2D` (forest) | `97BC62` (moss) | `F5F5F5` (cream) |\n| **Coral Energy** | `F96167` (coral) | `F9E795` (gold) | `2F3C7E` (navy) |\n| **Warm Terracotta** | `B85042` (terracotta) | `E7E8D1` (sand) | `A7BEAE` (sage) |\n| **Ocean Gradient** | `065A82` (deep blue) | `1C7293` (teal) | `21295C` (midnight) |\n| **Charcoal Minimal** | `36454F` (charcoal) | `F2F2F2` (off-white) | `212121` (black) |\n| **Teal Trust** | `028090` (teal) | `00A896` (seafoam) | `02C39A` (mint) |\n| **Berry & Cream** | `6D2E46` (berry) | `A26769` (dusty rose) | `ECE2D0` (cream) |\n| **Sage Calm** | `84B59F` (sage) | `69A297` (eucalyptus) | `50808E` (slate) |\n| **Cherry Bold** | `990011` (cherry) | `FCF6F5` (off-white) | `2F3C7E` (navy) |\n\n### For Each Slide\n\n**Every slide needs a visual element** — image, chart, icon, or shape. Text-only slides are forgettable.\n\n**Layout options:**\n- Two-column (text left, illustration on right)\n- Icon + text rows (icon in colored circle, bold header, description below)\n- 2x2 or 2x3 grid (image on one side, grid of content blocks on other)\n- Half-bleed image (full left or right side) with content overlay\n\n**Data display:**\n- Large stat callouts (big numbers 60-72pt with small labels below)\n- Comparison columns (before/after, pros/cons, side-by-side options)\n- Timeline or process flow (numbered steps, arrows)\n\n**Visual polish:**\n- Icons in small colored circles next to section headers\n- Italic accent text for key stats or taglines\n\n### Typography\n\n**Choose an interesting font pairing** — don't default to Arial. Pick a header font with personality and pair it with a clean body font.\n\n| Header Font | Body Font |\n|-------------|-----------|\n| Georgia | Calibri |\n| Arial Black | Arial |\n| Calibri | Calibri Light |\n| Cambria | Calibri |\n| Trebuchet MS | Calibri |\n| Impact | Arial |\n| Palatino | Garamond |\n| Consolas | Calibri |\n\n| Element | Size |\n|---------|------|\n| Slide title | 36-44pt bold |\n| Section header | 20-24pt bold |\n| Body text | 14-16pt |\n| Captions | 10-12pt muted |\n\n### Spacing\n\n- 0.5\" minimum margins\n- 0.3-0.5\" between content blocks\n- Leave breathing room—don't fill every inch\n\n### Avoid (Common Mistakes)\n\n- **Don't repeat the same layout** — vary columns, cards, and callouts across slides\n- **Don't center body text** — left-align paragraphs and lists; center only titles\n- **Don't skimp on size contrast** — titles need 36pt+ to stand out from 14-16pt body\n- **Don't default to blue** — pick colors that reflect the specific topic\n- **Don't mix spacing randomly** — choose 0.3\" or 0.5\" gaps and use consistently\n- **Don't style one slide and leave the rest plain** — commit fully or keep it simple throughout\n- **Don't create text-only slides** — add images, icons, charts, or visual elements; avoid plain title + bullets\n- **Don't forget text box padding** — when aligning lines or shapes with text edges, set `margin: 0` on the text box or offset the shape to account for padding\n- **Don't use low-contrast elements** — icons AND text need strong contrast against the background; avoid light text on light backgrounds or dark text on dark backgrounds\n- **NEVER use accent lines under titles** — these are a hallmark of AI-generated slides; use whitespace or background color instead\n\n---\n\n## QA (Required)\n\n**Assume there are problems. Your job is to find them.**\n\nYour first render is almost never correct. Approach QA as a bug hunt, not a confirmation step. If you found zero issues on first inspection, you weren't looking hard enough.\n\n### Content QA\n\n```bash\npython -m markitdown output.pptx\n```\n\nCheck for missing content, typos, wrong order.\n\n**When using templates, check for leftover placeholder text:**\n\n```bash\npython -m markitdown output.pptx | grep -iE \"xxxx|lorem|ipsum|this.*(page|slide).*layout\"\n```\n\nIf grep returns results, fix them before declaring success.\n\n### Visual QA\n\n**⚠️ USE SUBAGENTS** — even for 2-3 slides. You've been staring at the code and will see what you expect, not what's there. Subagents have fresh eyes.\n\nConvert slides to images (see [Converting to Images](#converting-to-images)), then use this prompt:\n\n```\nVisually inspect these slides. Assume there are issues — find them.\n\nLook for:\n- Overlapping elements (text through shapes, lines through words, stacked elements)\n- Text overflow or cut off at edges/box boundaries\n- Decorative lines positioned for single-line text but title wrapped to two lines\n- Source citations or footers colliding with content above\n- Elements too close (< 0.3\" gaps) or cards/sections nearly touching\n- Uneven gaps (large empty area in one place, cramped in another)\n- Insufficient margin from slide edges (< 0.5\")\n- Columns or similar elements not aligned consistently\n- Low-contrast text (e.g., light gray text on cream-colored background)\n- Low-contrast icons (e.g., dark icons on dark backgrounds without a contrasting circle)\n- Text boxes too narrow causing excessive wrapping\n- Leftover placeholder content\n\nFor each slide, list issues or areas of concern, even if minor.\n\nRead and analyze these images:\n1. /path/to/slide-01.jpg (Expected: [brief description])\n2. /path/to/slide-02.jpg (Expected: [brief description])\n\nReport ALL issues found, including minor ones.\n```\n\n### Verification Loop\n\n1. Generate slides → Convert to images → Inspect\n2. **List issues found** (if none found, look again more critically)\n3. Fix issues\n4. **Re-verify affected slides** — one fix often creates another problem\n5. Repeat until a full pass reveals no new issues\n\n**Do not declare success until you've completed at least one fix-and-verify cycle.**\n\n---\n\n## Converting to Images\n\nConvert presentations to individual slide images for visual inspection:\n\n```bash\npython scripts/office/soffice.py --headless --convert-to pdf output.pptx\npdftoppm -jpeg -r 150 output.pdf slide\n```\n\nThis creates `slide-01.jpg`, `slide-02.jpg`, etc.\n\nTo re-render specific slides after fixes:\n\n```bash\npdftoppm -jpeg -r 150 -f N -l N output.pdf slide-fixed\n```\n\n---\n\n## Dependencies\n\n- `pip install \"markitdown[pptx]\"` - text extraction\n- `pip install Pillow` - thumbnail grids\n- `npm install -g pptxgenjs` - creating from scratch\n- LibreOffice (`soffice`) - PDF conversion (auto-configured for sandboxed environments via `scripts/office/soffice.py`)\n- Poppler (`pdftoppm`) - PDF to images\n",[],[168,819,344],"anthropic-pptx","cbbdf218-5974-11f1-8cc9-ee650bb23af1",111,["D",1779849359444],[214],[168,819],"cb8ded98-5974-11f1-97c9-ee650bb23af1","cb8dee6a-5974-11f1-97c9-ee650bb23af1","cb069f6e-5974-11f1-8f1f-ee650bb23af1",110,["D",1779849359120],"---\nname: pdf\ndescription: Use this skill whenever the user wants to do anything with PDF files. This includes reading or extracting text/tables from PDFs, combining or merging multiple PDFs into one, splitting PDFs apart, rotating pages, adding watermarks, creating new PDFs, filling PDF forms, encrypting/decrypting PDFs, extracting images, and OCR on scanned PDFs to make them searchable. If the user mentions a .pdf file or asks to produce one, use this skill.\nlicense: Proprietary. LICENSE.txt has complete terms\n---\n\n# PDF Processing Guide\n\n## Overview\n\nThis guide covers essential PDF processing operations using Python libraries and command-line tools. For advanced features, JavaScript libraries, and detailed examples, see REFERENCE.md. If you need to fill out a PDF form, read FORMS.md and follow its instructions.\n\n## Quick Start\n\n```python\nfrom pypdf import PdfReader, PdfWriter\n\n# Read a PDF\nreader = PdfReader(\"document.pdf\")\nprint(f\"Pages: {len(reader.pages)}\")\n\n# Extract text\ntext = \"\"\nfor page in reader.pages:\n text += page.extract_text()\n```\n\n## Python Libraries\n\n### pypdf - Basic Operations\n\n#### Merge PDFs\n```python\nfrom pypdf import PdfWriter, PdfReader\n\nwriter = PdfWriter()\nfor pdf_file in [\"doc1.pdf\", \"doc2.pdf\", \"doc3.pdf\"]:\n reader = PdfReader(pdf_file)\n for page in reader.pages:\n writer.add_page(page)\n\nwith open(\"merged.pdf\", \"wb\") as output:\n writer.write(output)\n```\n\n#### Split PDF\n```python\nreader = PdfReader(\"input.pdf\")\nfor i, page in enumerate(reader.pages):\n writer = PdfWriter()\n writer.add_page(page)\n with open(f\"page_{i+1}.pdf\", \"wb\") as output:\n writer.write(output)\n```\n\n#### Extract Metadata\n```python\nreader = PdfReader(\"document.pdf\")\nmeta = reader.metadata\nprint(f\"Title: {meta.title}\")\nprint(f\"Author: {meta.author}\")\nprint(f\"Subject: {meta.subject}\")\nprint(f\"Creator: {meta.creator}\")\n```\n\n#### Rotate Pages\n```python\nreader = PdfReader(\"input.pdf\")\nwriter = PdfWriter()\n\npage = reader.pages[0]\npage.rotate(90) # Rotate 90 degrees clockwise\nwriter.add_page(page)\n\nwith open(\"rotated.pdf\", \"wb\") as output:\n writer.write(output)\n```\n\n### pdfplumber - Text and Table Extraction\n\n#### Extract Text with Layout\n```python\nimport pdfplumber\n\nwith pdfplumber.open(\"document.pdf\") as pdf:\n for page in pdf.pages:\n text = page.extract_text()\n print(text)\n```\n\n#### Extract Tables\n```python\nwith pdfplumber.open(\"document.pdf\") as pdf:\n for i, page in enumerate(pdf.pages):\n tables = page.extract_tables()\n for j, table in enumerate(tables):\n print(f\"Table {j+1} on page {i+1}:\")\n for row in table:\n print(row)\n```\n\n#### Advanced Table Extraction\n```python\nimport pandas as pd\n\nwith pdfplumber.open(\"document.pdf\") as pdf:\n all_tables = []\n for page in pdf.pages:\n tables = page.extract_tables()\n for table in tables:\n if table: # Check if table is not empty\n df = pd.DataFrame(table[1:], columns=table[0])\n all_tables.append(df)\n\n# Combine all tables\nif all_tables:\n combined_df = pd.concat(all_tables, ignore_index=True)\n combined_df.to_excel(\"extracted_tables.xlsx\", index=False)\n```\n\n### reportlab - Create PDFs\n\n#### Basic PDF Creation\n```python\nfrom reportlab.lib.pagesizes import letter\nfrom reportlab.pdfgen import canvas\n\nc = canvas.Canvas(\"hello.pdf\", pagesize=letter)\nwidth, height = letter\n\n# Add text\nc.drawString(100, height - 100, \"Hello World!\")\nc.drawString(100, height - 120, \"This is a PDF created with reportlab\")\n\n# Add a line\nc.line(100, height - 140, 400, height - 140)\n\n# Save\nc.save()\n```\n\n#### Create PDF with Multiple Pages\n```python\nfrom reportlab.lib.pagesizes import letter\nfrom reportlab.platypus import SimpleDocTemplate, Paragraph, Spacer, PageBreak\nfrom reportlab.lib.styles import getSampleStyleSheet\n\ndoc = SimpleDocTemplate(\"report.pdf\", pagesize=letter)\nstyles = getSampleStyleSheet()\nstory = []\n\n# Add content\ntitle = Paragraph(\"Report Title\", styles['Title'])\nstory.append(title)\nstory.append(Spacer(1, 12))\n\nbody = Paragraph(\"This is the body of the report. \" * 20, styles['Normal'])\nstory.append(body)\nstory.append(PageBreak())\n\n# Page 2\nstory.append(Paragraph(\"Page 2\", styles['Heading1']))\nstory.append(Paragraph(\"Content for page 2\", styles['Normal']))\n\n# Build PDF\ndoc.build(story)\n```\n\n#### Subscripts and Superscripts\n\n**IMPORTANT**: Never use Unicode subscript/superscript characters (₀₁₂₃₄₅₆₇₈₉, ⁰¹²³⁴⁵⁶⁷⁸⁹) in ReportLab PDFs. The built-in fonts do not include these glyphs, causing them to render as solid black boxes.\n\nInstead, use ReportLab's XML markup tags in Paragraph objects:\n```python\nfrom reportlab.platypus import Paragraph\nfrom reportlab.lib.styles import getSampleStyleSheet\n\nstyles = getSampleStyleSheet()\n\n# Subscripts: use _{tag\nchemical = Paragraph(\"H₂O\", styles['Normal'])\n\n# Superscripts: use tag\nsquared = Paragraph(\"x2 + y2\", styles['Normal'])\n```\n\nFor canvas-drawn text (not Paragraph objects), manually adjust font the size and position rather than using Unicode subscripts/superscripts.\n\n## Command-Line Tools\n\n### pdftotext (poppler-utils)\n```bash\n# Extract text\npdftotext input.pdf output.txt\n\n# Extract text preserving layout\npdftotext -layout input.pdf output.txt\n\n# Extract specific pages\npdftotext -f 1 -l 5 input.pdf output.txt # Pages 1-5\n```\n\n### qpdf\n```bash\n# Merge PDFs\nqpdf --empty --pages file1.pdf file2.pdf -- merged.pdf\n\n# Split pages\nqpdf input.pdf --pages . 1-5 -- pages1-5.pdf\nqpdf input.pdf --pages . 6-10 -- pages6-10.pdf\n\n# Rotate pages\nqpdf input.pdf output.pdf --rotate=+90:1 # Rotate page 1 by 90 degrees\n\n# Remove password\nqpdf --password=mypassword --decrypt encrypted.pdf decrypted.pdf\n```\n\n### pdftk (if available)\n```bash\n# Merge\npdftk file1.pdf file2.pdf cat output merged.pdf\n\n# Split\npdftk input.pdf burst\n\n# Rotate\npdftk input.pdf rotate 1east output rotated.pdf\n```\n\n## Common Tasks\n\n### Extract Text from Scanned PDFs\n```python\n# Requires: pip install pytesseract pdf2image\nimport pytesseract\nfrom pdf2image import convert_from_path\n\n# Convert PDF to images\nimages = convert_from_path('scanned.pdf')\n\n# OCR each page\ntext = \"\"\nfor i, image in enumerate(images):\n text += f\"Page {i+1}:\\n\"\n text += pytesseract.image_to_string(image)\n text += \"\\n\\n\"\n\nprint(text)\n```\n\n### Add Watermark\n```python\nfrom pypdf import PdfReader, PdfWriter\n\n# Create watermark (or load existing)\nwatermark = PdfReader(\"watermark.pdf\").pages[0]\n\n# Apply to all pages\nreader = PdfReader(\"document.pdf\")\nwriter = PdfWriter()\n\nfor page in reader.pages:\n page.merge_page(watermark)\n writer.add_page(page)\n\nwith open(\"watermarked.pdf\", \"wb\") as output:\n writer.write(output)\n```\n\n### Extract Images\n```bash\n# Using pdfimages (poppler-utils)\npdfimages -j input.pdf output_prefix\n\n# This extracts all images as output_prefix-000.jpg, output_prefix-001.jpg, etc.\n```\n\n### Password Protection\n```python\nfrom pypdf import PdfReader, PdfWriter\n\nreader = PdfReader(\"input.pdf\")\nwriter = PdfWriter()\n\nfor page in reader.pages:\n writer.add_page(page)\n\n# Add password\nwriter.encrypt(\"userpassword\", \"ownerpassword\")\n\nwith open(\"encrypted.pdf\", \"wb\") as output:\n writer.write(output)\n```\n\n## Quick Reference\n\n| Task | Best Tool | Command/Code |\n|------|-----------|--------------|\n| Merge PDFs | pypdf | `writer.add_page(page)` |\n| Split PDFs | pypdf | One page per file |\n| Extract text | pdfplumber | `page.extract_text()` |\n| Extract tables | pdfplumber | `page.extract_tables()` |\n| Create PDFs | reportlab | Canvas or Platypus |\n| Command line merge | qpdf | `qpdf --empty --pages ...` |\n| OCR scanned PDFs | pytesseract | Convert to image first |\n| Fill PDF forms | pdf-lib or pypdf (see FORMS.md) | See FORMS.md |\n\n## Next Steps\n\n- For advanced pypdfium2 usage, see REFERENCE.md\n- For JavaScript libraries (pdf-lib), see REFERENCE.md\n- If you need to fill out a PDF form, follow the instructions in FORMS.md\n- For troubleshooting guides, see REFERENCE.md\n",[],[168,833,344],"anthropic-pdf","cb069ec4-5974-11f1-8f1f-ee650bb23af1",109,["D",1779849358239],[212],[168,833],"cad13c7a-5974-11f1-9a2f-ee650bb23af1","cad13d56-5974-11f1-9a2f-ee650bb23af1","ca9d476c-5974-11f1-80fb-ee650bb23af1",108,["D",1779849357892],"---\nname: mcp-builder\ndescription: Guide for creating high-quality MCP (Model Context Protocol) servers that enable LLMs to interact with external services through well-designed tools. Use when building MCP servers to integrate external APIs or services, whether in Python (FastMCP) or Node/TypeScript (MCP SDK).\nlicense: Complete terms in LICENSE.txt\n---\n\n# MCP Server Development Guide\n\n## Overview\n\nCreate MCP (Model Context Protocol) servers that enable LLMs to interact with external services through well-designed tools. The quality of an MCP server is measured by how well it enables LLMs to accomplish real-world tasks.\n\n---\n\n# Process\n\n## 🚀 High-Level Workflow\n\nCreating a high-quality MCP server involves four main phases:\n\n### Phase 1: Deep Research and Planning\n\n#### 1.1 Understand Modern MCP Design\n\n**API Coverage vs. Workflow Tools:**\nBalance comprehensive API endpoint coverage with specialized workflow tools. Workflow tools can be more convenient for specific tasks, while comprehensive coverage gives agents flexibility to compose operations. Performance varies by client—some clients benefit from code execution that combines basic tools, while others work better with higher-level workflows. When uncertain, prioritize comprehensive API coverage.\n\n**Tool Naming and Discoverability:**\nClear, descriptive tool names help agents find the right tools quickly. Use consistent prefixes (e.g., `github_create_issue`, `github_list_repos`) and action-oriented naming.\n\n**Context Management:**\nAgents benefit from concise tool descriptions and the ability to filter/paginate results. Design tools that return focused, relevant data. Some clients support code execution which can help agents filter and process data efficiently.\n\n**Actionable Error Messages:**\nError messages should guide agents toward solutions with specific suggestions and next steps.\n\n#### 1.2 Study MCP Protocol Documentation\n\n**Navigate the MCP specification:**\n\nStart with the sitemap to find relevant pages: `https://modelcontextprotocol.io/sitemap.xml`\n\nThen fetch specific pages with `.md` suffix for markdown format (e.g., `https://modelcontextprotocol.io/specification/draft.md`).\n\nKey pages to review:\n- Specification overview and architecture\n- Transport mechanisms (streamable HTTP, stdio)\n- Tool, resource, and prompt definitions\n\n#### 1.3 Study Framework Documentation\n\n**Recommended stack:**\n- **Language**: TypeScript (high-quality SDK support and good compatibility in many execution environments e.g. MCPB. Plus AI models are good at generating TypeScript code, benefiting from its broad usage, static typing and good linting tools)\n- **Transport**: Streamable HTTP for remote servers, using stateless JSON (simpler to scale and maintain, as opposed to stateful sessions and streaming responses). stdio for local servers.\n\n**Load framework documentation:**\n\n- **MCP Best Practices**: [📋 View Best Practices](./reference/mcp_best_practices.md) - Core guidelines\n\n**For TypeScript (recommended):**\n- **TypeScript SDK**: Use WebFetch to load `https://raw.githubusercontent.com/modelcontextprotocol/typescript-sdk/main/README.md`\n- [⚡ TypeScript Guide](./reference/node_mcp_server.md) - TypeScript patterns and examples\n\n**For Python:**\n- **Python SDK**: Use WebFetch to load `https://raw.githubusercontent.com/modelcontextprotocol/python-sdk/main/README.md`\n- [🐍 Python Guide](./reference/python_mcp_server.md) - Python patterns and examples\n\n#### 1.4 Plan Your Implementation\n\n**Understand the API:**\nReview the service's API documentation to identify key endpoints, authentication requirements, and data models. Use web search and WebFetch as needed.\n\n**Tool Selection:**\nPrioritize comprehensive API coverage. List endpoints to implement, starting with the most common operations.\n\n---\n\n### Phase 2: Implementation\n\n#### 2.1 Set Up Project Structure\n\nSee language-specific guides for project setup:\n- [⚡ TypeScript Guide](./reference/node_mcp_server.md) - Project structure, package.json, tsconfig.json\n- [🐍 Python Guide](./reference/python_mcp_server.md) - Module organization, dependencies\n\n#### 2.2 Implement Core Infrastructure\n\nCreate shared utilities:\n- API client with authentication\n- Error handling helpers\n- Response formatting (JSON/Markdown)\n- Pagination support\n\n#### 2.3 Implement Tools\n\nFor each tool:\n\n**Input Schema:**\n- Use Zod (TypeScript) or Pydantic (Python)\n- Include constraints and clear descriptions\n- Add examples in field descriptions\n\n**Output Schema:**\n- Define `outputSchema` where possible for structured data\n- Use `structuredContent` in tool responses (TypeScript SDK feature)\n- Helps clients understand and process tool outputs\n\n**Tool Description:**\n- Concise summary of functionality\n- Parameter descriptions\n- Return type schema\n\n**Implementation:**\n- Async/await for I/O operations\n- Proper error handling with actionable messages\n- Support pagination where applicable\n- Return both text content and structured data when using modern SDKs\n\n**Annotations:**\n- `readOnlyHint`: true/false\n- `destructiveHint`: true/false\n- `idempotentHint`: true/false\n- `openWorldHint`: true/false\n\n---\n\n### Phase 3: Review and Test\n\n#### 3.1 Code Quality\n\nReview for:\n- No duplicated code (DRY principle)\n- Consistent error handling\n- Full type coverage\n- Clear tool descriptions\n\n#### 3.2 Build and Test\n\n**TypeScript:**\n- Run `npm run build` to verify compilation\n- Test with MCP Inspector: `npx @modelcontextprotocol/inspector`\n\n**Python:**\n- Verify syntax: `python -m py_compile your_server.py`\n- Test with MCP Inspector\n\nSee language-specific guides for detailed testing approaches and quality checklists.\n\n---\n\n### Phase 4: Create Evaluations\n\nAfter implementing your MCP server, create comprehensive evaluations to test its effectiveness.\n\n**Load [✅ Evaluation Guide](./reference/evaluation.md) for complete evaluation guidelines.**\n\n#### 4.1 Understand Evaluation Purpose\n\nUse evaluations to test whether LLMs can effectively use your MCP server to answer realistic, complex questions.\n\n#### 4.2 Create 10 Evaluation Questions\n\nTo create effective evaluations, follow the process outlined in the evaluation guide:\n\n1. **Tool Inspection**: List available tools and understand their capabilities\n2. **Content Exploration**: Use READ-ONLY operations to explore available data\n3. **Question Generation**: Create 10 complex, realistic questions\n4. **Answer Verification**: Solve each question yourself to verify answers\n\n#### 4.3 Evaluation Requirements\n\nEnsure each question is:\n- **Independent**: Not dependent on other questions\n- **Read-only**: Only non-destructive operations required\n- **Complex**: Requiring multiple tool calls and deep exploration\n- **Realistic**: Based on real use cases humans would care about\n- **Verifiable**: Single, clear answer that can be verified by string comparison\n- **Stable**: Answer won't change over time\n\n#### 4.4 Output Format\n\nCreate an XML file with this structure:\n\n```xml\n\n \n Find discussions about AI model launches with animal codenames. One model needed a specific safety designation that uses the format ASL-X. What number X was being determined for the model named after a spotted wild cat?\n 3\n \n\n\n```\n\n---\n\n# Reference Files\n\n## 📚 Documentation Library\n\nLoad these resources as needed during development:\n\n### Core MCP Documentation (Load First)\n- **MCP Protocol**: Start with sitemap at `https://modelcontextprotocol.io/sitemap.xml`, then fetch specific pages with `.md` suffix\n- [📋 MCP Best Practices](./reference/mcp_best_practices.md) - Universal MCP guidelines including:\n - Server and tool naming conventions\n - Response format guidelines (JSON vs Markdown)\n - Pagination best practices\n - Transport selection (streamable HTTP vs stdio)\n - Security and error handling standards\n\n### SDK Documentation (Load During Phase 1/2)\n- **Python SDK**: Fetch from `https://raw.githubusercontent.com/modelcontextprotocol/python-sdk/main/README.md`\n- **TypeScript SDK**: Fetch from `https://raw.githubusercontent.com/modelcontextprotocol/typescript-sdk/main/README.md`\n\n### Language-Specific Implementation Guides (Load During Phase 2)\n- [🐍 Python Implementation Guide](./reference/python_mcp_server.md) - Complete Python/FastMCP guide with:\n - Server initialization patterns\n - Pydantic model examples\n - Tool registration with `@mcp.tool`\n - Complete working examples\n - Quality checklist\n\n- [⚡ TypeScript Implementation Guide](./reference/node_mcp_server.md) - Complete TypeScript guide with:\n - Project structure\n - Zod schema patterns\n - Tool registration with `server.registerTool`\n - Complete working examples\n - Quality checklist\n\n### Evaluation Guide (Load During Phase 4)\n- [✅ Evaluation Guide](./reference/evaluation.md) - Complete evaluation creation guide with:\n - Question creation guidelines\n - Answer verification strategies\n - XML format specifications\n - Example questions and answers\n - Running an evaluation with the provided scripts\n",[],[168,847,344],"anthropic-mcp-builder","ca9d46ae-5974-11f1-80fb-ee650bb23af1",107,["D",1779849357552],[210],[168,847],"ca6e6262-5974-11f1-9534-ee650bb23af1","ca6e633e-5974-11f1-9534-ee650bb23af1","ca36758c-5974-11f1-8cc9-ee650bb23af1",106,["D",1779849357228],"---\nname: internal-comms\ndescription: A set of resources to help me write all kinds of internal communications, using the formats that my company likes to use. Claude should use this skill whenever asked to write some sort of internal communications (status reports, leadership updates, 3P updates, company newsletters, FAQs, incident reports, project updates, etc.).\nlicense: Complete terms in LICENSE.txt\n---\n\n## When to use this skill\nTo write internal communications, use this skill for:\n- 3P updates (Progress, Plans, Problems)\n- Company newsletters\n- FAQ responses\n- Status reports\n- Leadership updates\n- Project updates\n- Incident reports\n\n## How to use this skill\n\nTo write any internal communication:\n\n1. **Identify the communication type** from the request\n2. **Load the appropriate guideline file** from the `examples/` directory:\n - `examples/3p-updates.md` - For Progress/Plans/Problems team updates\n - `examples/company-newsletter.md` - For company-wide newsletters\n - `examples/faq-answers.md` - For answering frequently asked questions\n - `examples/general-comms.md` - For anything else that doesn't explicitly match one of the above\n3. **Follow the specific instructions** in that file for formatting, tone, and content gathering\n\nIf the communication type doesn't match any existing guideline, ask for clarification or more context about the desired format.\n\n## Keywords\n3P updates, company newsletter, company comms, weekly update, faqs, common questions, updates, internal comms\n",[],[168,861,344],"anthropic-internal-comms","ca3674c4-5974-11f1-8cc9-ee650bb23af1",105,["D",1779849356842],[208],[168,861],"c9a6d954-5974-11f1-97c9-ee650bb23af1","c9a6da30-5974-11f1-97c9-ee650bb23af1","c95f76e0-5974-11f1-9af7-ee650bb23af1",104,["D",1779849355912],"---\nname: frontend-design\ndescription: Create distinctive, production-grade frontend interfaces with high design quality. Use this skill when the user asks to build web components, pages, artifacts, posters, or applications (examples include websites, landing pages, dashboards, React components, HTML/CSS layouts, or when styling/beautifying any web UI). Generates creative, polished code and UI design that avoids generic AI aesthetics.\nlicense: Complete terms in LICENSE.txt\n---\n\nThis skill guides creation of distinctive, production-grade frontend interfaces that avoid generic \"AI slop\" aesthetics. Implement real working code with exceptional attention to aesthetic details and creative choices.\n\nThe user provides frontend requirements: a component, page, application, or interface to build. They may include context about the purpose, audience, or technical constraints.\n\n## Design Thinking\n\nBefore coding, understand the context and commit to a BOLD aesthetic direction:\n- **Purpose**: What problem does this interface solve? Who uses it?\n- **Tone**: Pick an extreme: brutally minimal, maximalist chaos, retro-futuristic, organic/natural, luxury/refined, playful/toy-like, editorial/magazine, brutalist/raw, art deco/geometric, soft/pastel, industrial/utilitarian, etc. There are so many flavors to choose from. Use these for inspiration but design one that is true to the aesthetic direction.\n- **Constraints**: Technical requirements (framework, performance, accessibility).\n- **Differentiation**: What makes this UNFORGETTABLE? What's the one thing someone will remember?\n\n**CRITICAL**: Choose a clear conceptual direction and execute it with precision. Bold maximalism and refined minimalism both work - the key is intentionality, not intensity.\n\nThen implement working code (HTML/CSS/JS, React, Vue, etc.) that is:\n- Production-grade and functional\n- Visually striking and memorable\n- Cohesive with a clear aesthetic point-of-view\n- Meticulously refined in every detail\n\n## Frontend Aesthetics Guidelines\n\nFocus on:\n- **Typography**: Choose fonts that are beautiful, unique, and interesting. Avoid generic fonts like Arial and Inter; opt instead for distinctive choices that elevate the frontend's aesthetics; unexpected, characterful font choices. Pair a distinctive display font with a refined body font.\n- **Color & Theme**: Commit to a cohesive aesthetic. Use CSS variables for consistency. Dominant colors with sharp accents outperform timid, evenly-distributed palettes.\n- **Motion**: Use animations for effects and micro-interactions. Prioritize CSS-only solutions for HTML. Use Motion library for React when available. Focus on high-impact moments: one well-orchestrated page load with staggered reveals (animation-delay) creates more delight than scattered micro-interactions. Use scroll-triggering and hover states that surprise.\n- **Spatial Composition**: Unexpected layouts. Asymmetry. Overlap. Diagonal flow. Grid-breaking elements. Generous negative space OR controlled density.\n- **Backgrounds & Visual Details**: Create atmosphere and depth rather than defaulting to solid colors. Add contextual effects and textures that match the overall aesthetic. Apply creative forms like gradient meshes, noise textures, geometric patterns, layered transparencies, dramatic shadows, decorative borders, custom cursors, and grain overlays.\n\nNEVER use generic AI-generated aesthetics like overused font families (Inter, Roboto, Arial, system fonts), cliched color schemes (particularly purple gradients on white backgrounds), predictable layouts and component patterns, and cookie-cutter design that lacks context-specific character.\n\nInterpret creatively and make unexpected choices that feel genuinely designed for the context. No design should be the same. Vary between light and dark themes, different fonts, different aesthetics. NEVER converge on common choices (Space Grotesk, for example) across generations.\n\n**IMPORTANT**: Match implementation complexity to the aesthetic vision. Maximalist designs need elaborate code with extensive animations and effects. Minimalist or refined designs need restraint, precision, and careful attention to spacing, typography, and subtle details. Elegance comes from executing the vision well.\n\nRemember: Claude is capable of extraordinary creative work. Don't hold back, show what can truly be created when thinking outside the box and committing fully to a distinctive vision.\n",[],[168,875,344],"anthropic-frontend-design","c95f764a-5974-11f1-9af7-ee650bb23af1",103,["D",1779849355461],[206],[168,875],"c91af178-5974-11f1-9bbc-ee650bb23af1","c91af236-5974-11f1-9bbc-ee650bb23af1","c8b7d7be-5974-11f1-80fb-ee650bb23af1",102,["D",1779849355014],"---\nname: docx\ndescription: \"Use this skill whenever the user wants to create, read, edit, or manipulate Word documents (.docx files). Triggers include: any mention of 'Word doc', 'word document', '.docx', or requests to produce professional documents with formatting like tables of contents, headings, page numbers, or letterheads. Also use when extracting or reorganizing content from .docx files, inserting or replacing images in documents, performing find-and-replace in Word files, working with tracked changes or comments, or converting content into a polished Word document. If the user asks for a 'report', 'memo', 'letter', 'template', or similar deliverable as a Word or .docx file, use this skill. Do NOT use for PDFs, spreadsheets, Google Docs, or general coding tasks unrelated to document generation.\"\nlicense: Proprietary. LICENSE.txt has complete terms\n---\n\n# DOCX creation, editing, and analysis\n\n## Overview\n\nA .docx file is a ZIP archive containing XML files.\n\n## Quick Reference\n\n| Task | Approach |\n|------|----------|\n| Read/analyze content | `pandoc` or unpack for raw XML |\n| Create new document | Use `docx-js` - see Creating New Documents below |\n| Edit existing document | Unpack → edit XML → repack - see Editing Existing Documents below |\n\n### Converting .doc to .docx\n\nLegacy `.doc` files must be converted before editing:\n\n```bash\npython scripts/office/soffice.py --headless --convert-to docx document.doc\n```\n\n### Reading Content\n\n```bash\n# Text extraction with tracked changes\npandoc --track-changes=all document.docx -o output.md\n\n# Raw XML access\npython scripts/office/unpack.py document.docx unpacked/\n```\n\n### Converting to Images\n\n```bash\npython scripts/office/soffice.py --headless --convert-to pdf document.docx\npdftoppm -jpeg -r 150 document.pdf page\n```\n\n### Accepting Tracked Changes\n\nTo produce a clean document with all tracked changes accepted (requires LibreOffice):\n\n```bash\npython scripts/accept_changes.py input.docx output.docx\n```\n\n---\n\n## Creating New Documents\n\nGenerate .docx files with JavaScript, then validate. Install: `npm install -g docx`\n\n### Setup\n```javascript\nconst { Document, Packer, Paragraph, TextRun, Table, TableRow, TableCell, ImageRun,\n Header, Footer, AlignmentType, PageOrientation, LevelFormat, ExternalHyperlink,\n InternalHyperlink, Bookmark, FootnoteReferenceRun, PositionalTab,\n PositionalTabAlignment, PositionalTabRelativeTo, PositionalTabLeader,\n TabStopType, TabStopPosition, Column, SectionType,\n TableOfContents, HeadingLevel, BorderStyle, WidthType, ShadingType,\n VerticalAlign, PageNumber, PageBreak } = require('docx');\n\nconst doc = new Document({ sections: [{ children: [/* content */] }] });\nPacker.toBuffer(doc).then(buffer => fs.writeFileSync(\"doc.docx\", buffer));\n```\n\n### Validation\nAfter creating the file, validate it. If validation fails, unpack, fix the XML, and repack.\n```bash\npython scripts/office/validate.py doc.docx\n```\n\n### Page Size\n\n```javascript\n// CRITICAL: docx-js defaults to A4, not US Letter\n// Always set page size explicitly for consistent results\nsections: [{\n properties: {\n page: {\n size: {\n width: 12240, // 8.5 inches in DXA\n height: 15840 // 11 inches in DXA\n },\n margin: { top: 1440, right: 1440, bottom: 1440, left: 1440 } // 1 inch margins\n }\n },\n children: [/* content */]\n}]\n```\n\n**Common page sizes (DXA units, 1440 DXA = 1 inch):**\n\n| Paper | Width | Height | Content Width (1\" margins) |\n|-------|-------|--------|---------------------------|\n| US Letter | 12,240 | 15,840 | 9,360 |\n| A4 (default) | 11,906 | 16,838 | 9,026 |\n\n**Landscape orientation:** docx-js swaps width/height internally, so pass portrait dimensions and let it handle the swap:\n```javascript\nsize: {\n width: 12240, // Pass SHORT edge as width\n height: 15840, // Pass LONG edge as height\n orientation: PageOrientation.LANDSCAPE // docx-js swaps them in the XML\n},\n// Content width = 15840 - left margin - right margin (uses the long edge)\n```\n\n### Styles (Override Built-in Headings)\n\nUse Arial as the default font (universally supported). Keep titles black for readability.\n\n```javascript\nconst doc = new Document({\n styles: {\n default: { document: { run: { font: \"Arial\", size: 24 } } }, // 12pt default\n paragraphStyles: [\n // IMPORTANT: Use exact IDs to override built-in styles\n { id: \"Heading1\", name: \"Heading 1\", basedOn: \"Normal\", next: \"Normal\", quickFormat: true,\n run: { size: 32, bold: true, font: \"Arial\" },\n paragraph: { spacing: { before: 240, after: 240 }, outlineLevel: 0 } }, // outlineLevel required for TOC\n { id: \"Heading2\", name: \"Heading 2\", basedOn: \"Normal\", next: \"Normal\", quickFormat: true,\n run: { size: 28, bold: true, font: \"Arial\" },\n paragraph: { spacing: { before: 180, after: 180 }, outlineLevel: 1 } },\n ]\n },\n sections: [{\n children: [\n new Paragraph({ heading: HeadingLevel.HEADING_1, children: [new TextRun(\"Title\")] }),\n ]\n }]\n});\n```\n\n### Lists (NEVER use unicode bullets)\n\n```javascript\n// ❌ WRONG - never manually insert bullet characters\nnew Paragraph({ children: [new TextRun(\"• Item\")] }) // BAD\nnew Paragraph({ children: [new TextRun(\"\\u2022 Item\")] }) // BAD\n\n// ✅ CORRECT - use numbering config with LevelFormat.BULLET\nconst doc = new Document({\n numbering: {\n config: [\n { reference: \"bullets\",\n levels: [{ level: 0, format: LevelFormat.BULLET, text: \"•\", alignment: AlignmentType.LEFT,\n style: { paragraph: { indent: { left: 720, hanging: 360 } } } }] },\n { reference: \"numbers\",\n levels: [{ level: 0, format: LevelFormat.DECIMAL, text: \"%1.\", alignment: AlignmentType.LEFT,\n style: { paragraph: { indent: { left: 720, hanging: 360 } } } }] },\n ]\n },\n sections: [{\n children: [\n new Paragraph({ numbering: { reference: \"bullets\", level: 0 },\n children: [new TextRun(\"Bullet item\")] }),\n new Paragraph({ numbering: { reference: \"numbers\", level: 0 },\n children: [new TextRun(\"Numbered item\")] }),\n ]\n }]\n});\n\n// ⚠️ Each reference creates INDEPENDENT numbering\n// Same reference = continues (1,2,3 then 4,5,6)\n// Different reference = restarts (1,2,3 then 1,2,3)\n```\n\n### Tables\n\n**CRITICAL: Tables need dual widths** - set both `columnWidths` on the table AND `width` on each cell. Without both, tables render incorrectly on some platforms.\n\n```javascript\n// CRITICAL: Always set table width for consistent rendering\n// CRITICAL: Use ShadingType.CLEAR (not SOLID) to prevent black backgrounds\nconst border = { style: BorderStyle.SINGLE, size: 1, color: \"CCCCCC\" };\nconst borders = { top: border, bottom: border, left: border, right: border };\n\nnew Table({\n width: { size: 9360, type: WidthType.DXA }, // Always use DXA (percentages break in Google Docs)\n columnWidths: [4680, 4680], // Must sum to table width (DXA: 1440 = 1 inch)\n rows: [\n new TableRow({\n children: [\n new TableCell({\n borders,\n width: { size: 4680, type: WidthType.DXA }, // Also set on each cell\n shading: { fill: \"D5E8F0\", type: ShadingType.CLEAR }, // CLEAR not SOLID\n margins: { top: 80, bottom: 80, left: 120, right: 120 }, // Cell padding (internal, not added to width)\n children: [new Paragraph({ children: [new TextRun(\"Cell\")] })]\n })\n ]\n })\n ]\n})\n```\n\n**Table width calculation:**\n\nAlways use `WidthType.DXA` — `WidthType.PERCENTAGE` breaks in Google Docs.\n\n```javascript\n// Table width = sum of columnWidths = content width\n// US Letter with 1\" margins: 12240 - 2880 = 9360 DXA\nwidth: { size: 9360, type: WidthType.DXA },\ncolumnWidths: [7000, 2360] // Must sum to table width\n```\n\n**Width rules:**\n- **Always use `WidthType.DXA`** — never `WidthType.PERCENTAGE` (incompatible with Google Docs)\n- Table width must equal the sum of `columnWidths`\n- Cell `width` must match corresponding `columnWidth`\n- Cell `margins` are internal padding - they reduce content area, not add to cell width\n- For full-width tables: use content width (page width minus left and right margins)\n\n### Images\n\n```javascript\n// CRITICAL: type parameter is REQUIRED\nnew Paragraph({\n children: [new ImageRun({\n type: \"png\", // Required: png, jpg, jpeg, gif, bmp, svg\n data: fs.readFileSync(\"image.png\"),\n transformation: { width: 200, height: 150 },\n altText: { title: \"Title\", description: \"Desc\", name: \"Name\" } // All three required\n })]\n})\n```\n\n### Page Breaks\n\n```javascript\n// CRITICAL: PageBreak must be inside a Paragraph\nnew Paragraph({ children: [new PageBreak()] })\n\n// Or use pageBreakBefore\nnew Paragraph({ pageBreakBefore: true, children: [new TextRun(\"New page\")] })\n```\n\n### Hyperlinks\n\n```javascript\n// External link\nnew Paragraph({\n children: [new ExternalHyperlink({\n children: [new TextRun({ text: \"Click here\", style: \"Hyperlink\" })],\n link: \"https://example.com\",\n })]\n})\n\n// Internal link (bookmark + reference)\n// 1. Create bookmark at destination\nnew Paragraph({ heading: HeadingLevel.HEADING_1, children: [\n new Bookmark({ id: \"chapter1\", children: [new TextRun(\"Chapter 1\")] }),\n]})\n// 2. Link to it\nnew Paragraph({ children: [new InternalHyperlink({\n children: [new TextRun({ text: \"See Chapter 1\", style: \"Hyperlink\" })],\n anchor: \"chapter1\",\n})]})\n```\n\n### Footnotes\n\n```javascript\nconst doc = new Document({\n footnotes: {\n 1: { children: [new Paragraph(\"Source: Annual Report 2024\")] },\n 2: { children: [new Paragraph(\"See appendix for methodology\")] },\n },\n sections: [{\n children: [new Paragraph({\n children: [\n new TextRun(\"Revenue grew 15%\"),\n new FootnoteReferenceRun(1),\n new TextRun(\" using adjusted metrics\"),\n new FootnoteReferenceRun(2),\n ],\n })]\n }]\n});\n```\n\n### Tab Stops\n\n```javascript\n// Right-align text on same line (e.g., date opposite a title)\nnew Paragraph({\n children: [\n new TextRun(\"Company Name\"),\n new TextRun(\"\\tJanuary 2025\"),\n ],\n tabStops: [{ type: TabStopType.RIGHT, position: TabStopPosition.MAX }],\n})\n\n// Dot leader (e.g., TOC-style)\nnew Paragraph({\n children: [\n new TextRun(\"Introduction\"),\n new TextRun({ children: [\n new PositionalTab({\n alignment: PositionalTabAlignment.RIGHT,\n relativeTo: PositionalTabRelativeTo.MARGIN,\n leader: PositionalTabLeader.DOT,\n }),\n \"3\",\n ]}),\n ],\n})\n```\n\n### Multi-Column Layouts\n\n```javascript\n// Equal-width columns\nsections: [{\n properties: {\n column: {\n count: 2, // number of columns\n space: 720, // gap between columns in DXA (720 = 0.5 inch)\n equalWidth: true,\n separate: true, // vertical line between columns\n },\n },\n children: [/* content flows naturally across columns */]\n}]\n\n// Custom-width columns (equalWidth must be false)\nsections: [{\n properties: {\n column: {\n equalWidth: false,\n children: [\n new Column({ width: 5400, space: 720 }),\n new Column({ width: 3240 }),\n ],\n },\n },\n children: [/* content */]\n}]\n```\n\nForce a column break with a new section using `type: SectionType.NEXT_COLUMN`.\n\n### Table of Contents\n\n```javascript\n// CRITICAL: Headings must use HeadingLevel ONLY - no custom styles\nnew TableOfContents(\"Table of Contents\", { hyperlink: true, headingStyleRange: \"1-3\" })\n```\n\n### Headers/Footers\n\n```javascript\nsections: [{\n properties: {\n page: { margin: { top: 1440, right: 1440, bottom: 1440, left: 1440 } } // 1440 = 1 inch\n },\n headers: {\n default: new Header({ children: [new Paragraph({ children: [new TextRun(\"Header\")] })] })\n },\n footers: {\n default: new Footer({ children: [new Paragraph({\n children: [new TextRun(\"Page \"), new TextRun({ children: [PageNumber.CURRENT] })]\n })] })\n },\n children: [/* content */]\n}]\n```\n\n### Critical Rules for docx-js\n\n- **Set page size explicitly** - docx-js defaults to A4; use US Letter (12240 x 15840 DXA) for US documents\n- **Landscape: pass portrait dimensions** - docx-js swaps width/height internally; pass short edge as `width`, long edge as `height`, and set `orientation: PageOrientation.LANDSCAPE`\n- **Never use `\\n`** - use separate Paragraph elements\n- **Never use unicode bullets** - use `LevelFormat.BULLET` with numbering config\n- **PageBreak must be in Paragraph** - standalone creates invalid XML\n- **ImageRun requires `type`** - always specify png/jpg/etc\n- **Always set table `width` with DXA** - never use `WidthType.PERCENTAGE` (breaks in Google Docs)\n- **Tables need dual widths** - `columnWidths` array AND cell `width`, both must match\n- **Table width = sum of columnWidths** - for DXA, ensure they add up exactly\n- **Always add cell margins** - use `margins: { top: 80, bottom: 80, left: 120, right: 120 }` for readable padding\n- **Use `ShadingType.CLEAR`** - never SOLID for table shading\n- **Never use tables as dividers/rules** - cells have minimum height and render as empty boxes (including in headers/footers); use `border: { bottom: { style: BorderStyle.SINGLE, size: 6, color: \"2E75B6\", space: 1 } }` on a Paragraph instead. For two-column footers, use tab stops (see Tab Stops section), not tables\n- **TOC requires HeadingLevel only** - no custom styles on heading paragraphs\n- **Override built-in styles** - use exact IDs: \"Heading1\", \"Heading2\", etc.\n- **Include `outlineLevel`** - required for TOC (0 for H1, 1 for H2, etc.)\n\n---\n\n## Editing Existing Documents\n\n**Follow all 3 steps in order.**\n\n### Step 1: Unpack\n```bash\npython scripts/office/unpack.py document.docx unpacked/\n```\nExtracts XML, pretty-prints, merges adjacent runs, and converts smart quotes to XML entities (`“` etc.) so they survive editing. Use `--merge-runs false` to skip run merging.\n\n### Step 2: Edit XML\n\nEdit files in `unpacked/word/`. See XML Reference below for patterns.\n\n**Use \"Claude\" as the author** for tracked changes and comments, unless the user explicitly requests use of a different name.\n\n**Use the Edit tool directly for string replacement. Do not write Python scripts.** Scripts introduce unnecessary complexity. The Edit tool shows exactly what is being replaced.\n\n**CRITICAL: Use smart quotes for new content.** When adding text with apostrophes or quotes, use XML entities to produce smart quotes:\n```xml\n\nHere’s a quote: “Hello”\n```\n| Entity | Character |\n|--------|-----------|\n| `‘` | ‘ (left single) |\n| `’` | ’ (right single / apostrophe) |\n| `“` | “ (left double) |\n| `”` | ” (right double) |\n\n**Adding comments:** Use `comment.py` to handle boilerplate across multiple XML files (text must be pre-escaped XML):\n```bash\npython scripts/comment.py unpacked/ 0 \"Comment text with & and ’\"\npython scripts/comment.py unpacked/ 1 \"Reply text\" --parent 0 # reply to comment 0\npython scripts/comment.py unpacked/ 0 \"Text\" --author \"Custom Author\" # custom author name\n```\nThen add markers to document.xml (see Comments in XML Reference).\n\n### Step 3: Pack\n```bash\npython scripts/office/pack.py unpacked/ output.docx --original document.docx\n```\nValidates with auto-repair, condenses XML, and creates DOCX. Use `--validate false` to skip.\n\n**Auto-repair will fix:**\n- `durableId` >= 0x7FFFFFFF (regenerates valid ID)\n- Missing `xml:space=\"preserve\"` on `` with whitespace\n\n**Auto-repair won't fix:**\n- Malformed XML, invalid element nesting, missing relationships, schema violations\n\n### Common Pitfalls\n\n- **Replace entire `` elements**: When adding tracked changes, replace the whole `...` block with `......` as siblings. Don't inject tracked change tags inside a run.\n- **Preserve `` formatting**: Copy the original run's `` block into your tracked change runs to maintain bold, font size, etc.\n\n---\n\n## XML Reference\n\n### Schema Compliance\n\n- **Element order in ``**: ``, ``, ``, ``, ``, `` last\n- **Whitespace**: Add `xml:space=\"preserve\"` to `` with leading/trailing spaces\n- **RSIDs**: Must be 8-digit hex (e.g., `00AB1234`)\n\n### Tracked Changes\n\n**Insertion:**\n```xml\n\n inserted text\n\n```\n\n**Deletion:**\n```xml\n\n deleted text\n\n```\n\n**Inside ``**: Use `` instead of ``, and `` instead of ``.\n\n**Minimal edits** - only mark what changes:\n```xml\n\nThe term is \n\n 30\n\n\n 60\n\n days.\n```\n\n**Deleting entire paragraphs/list items** - when removing ALL content from a paragraph, also mark the paragraph mark as deleted so it merges with the next paragraph. Add `` inside ``:\n```xml\n\n \n ... \n \n \n \n \n \n Entire paragraph content being deleted...\n \n\n```\nWithout the `` in ``, accepting changes leaves an empty paragraph/list item.\n\n**Rejecting another author's insertion** - nest deletion inside their insertion:\n```xml\n\n \n their inserted text\n \n\n```\n\n**Restoring another author's deletion** - add insertion after (don't modify their deletion):\n```xml\n\n deleted text\n\n\n deleted text\n\n```\n\n### Comments\n\nAfter running `comment.py` (see Step 2), add markers to document.xml. For replies, use `--parent` flag and nest markers inside the parent's.\n\n**CRITICAL: `` and `` are siblings of ``, never inside ``.**\n\n```xml\n\n\n\n deleted\n\n more text\n\n\n\n\n\n \n text\n \n\n\n\n```\n\n### Images\n\n1. Add image file to `word/media/`\n2. Add relationship to `word/_rels/document.xml.rels`:\n```xml\n\n```\n3. Add content type to `[Content_Types].xml`:\n```xml\n\n```\n4. Reference in document.xml:\n```xml\n\n \n \n \n \n \n \n \n \n \n \n\n```\n\n---\n\n## Dependencies\n\n- **pandoc**: Text extraction\n- **docx**: `npm install -g docx` (new documents)\n- **LibreOffice**: PDF conversion (auto-configured for sandboxed environments via `scripts/office/soffice.py`)\n- **Poppler**: `pdftoppm` for images\n",[],[168,889,344],"anthropic-docx","c8b7d714-5974-11f1-80fb-ee650bb23af1",101,["D",1779849354371],[204],[168,889],"c888b0c4-5974-11f1-97c9-ee650bb23af1","c888b16e-5974-11f1-97c9-ee650bb23af1","c854629c-5974-11f1-9a2f-ee650bb23af1",100,["D",1779849354046],"---\nname: doc-coauthoring\ndescription: Guide users through a structured workflow for co-authoring documentation. Use when user wants to write documentation, proposals, technical specs, decision docs, or similar structured content. This workflow helps users efficiently transfer context, refine content through iteration, and verify the doc works for readers. Trigger when user mentions writing docs, creating proposals, drafting specs, or similar documentation tasks.\n---\n\n# Doc Co-Authoring Workflow\n\nThis skill provides a structured workflow for guiding users through collaborative document creation. Act as an active guide, walking users through three stages: Context Gathering, Refinement & Structure, and Reader Testing.\n\n## When to Offer This Workflow\n\n**Trigger conditions:**\n- User mentions writing documentation: \"write a doc\", \"draft a proposal\", \"create a spec\", \"write up\"\n- User mentions specific doc types: \"PRD\", \"design doc\", \"decision doc\", \"RFC\"\n- User seems to be starting a substantial writing task\n\n**Initial offer:**\nOffer the user a structured workflow for co-authoring the document. Explain the three stages:\n\n1. **Context Gathering**: User provides all relevant context while Claude asks clarifying questions\n2. **Refinement & Structure**: Iteratively build each section through brainstorming and editing\n3. **Reader Testing**: Test the doc with a fresh Claude (no context) to catch blind spots before others read it\n\nExplain that this approach helps ensure the doc works well when others read it (including when they paste it into Claude). Ask if they want to try this workflow or prefer to work freeform.\n\nIf user declines, work freeform. If user accepts, proceed to Stage 1.\n\n## Stage 1: Context Gathering\n\n**Goal:** Close the gap between what the user knows and what Claude knows, enabling smart guidance later.\n\n### Initial Questions\n\nStart by asking the user for meta-context about the document:\n\n1. What type of document is this? (e.g., technical spec, decision doc, proposal)\n2. Who's the primary audience?\n3. What's the desired impact when someone reads this?\n4. Is there a template or specific format to follow?\n5. Any other constraints or context to know?\n\nInform them they can answer in shorthand or dump information however works best for them.\n\n**If user provides a template or mentions a doc type:**\n- Ask if they have a template document to share\n- If they provide a link to a shared document, use the appropriate integration to fetch it\n- If they provide a file, read it\n\n**If user mentions editing an existing shared document:**\n- Use the appropriate integration to read the current state\n- Check for images without alt-text\n- If images exist without alt-text, explain that when others use Claude to understand the doc, Claude won't be able to see them. Ask if they want alt-text generated. If so, request they paste each image into chat for descriptive alt-text generation.\n\n### Info Dumping\n\nOnce initial questions are answered, encourage the user to dump all the context they have. Request information such as:\n- Background on the project/problem\n- Related team discussions or shared documents\n- Why alternative solutions aren't being used\n- Organizational context (team dynamics, past incidents, politics)\n- Timeline pressures or constraints\n- Technical architecture or dependencies\n- Stakeholder concerns\n\nAdvise them not to worry about organizing it - just get it all out. Offer multiple ways to provide context:\n- Info dump stream-of-consciousness\n- Point to team channels or threads to read\n- Link to shared documents\n\n**If integrations are available** (e.g., Slack, Teams, Google Drive, SharePoint, or other MCP servers), mention that these can be used to pull in context directly.\n\n**If no integrations are detected and in Claude.ai or Claude app:** Suggest they can enable connectors in their Claude settings to allow pulling context from messaging apps and document storage directly.\n\nInform them clarifying questions will be asked once they've done their initial dump.\n\n**During context gathering:**\n\n- If user mentions team channels or shared documents:\n - If integrations available: Inform them the content will be read now, then use the appropriate integration\n - If integrations not available: Explain lack of access. Suggest they enable connectors in Claude settings, or paste the relevant content directly.\n\n- If user mentions entities/projects that are unknown:\n - Ask if connected tools should be searched to learn more\n - Wait for user confirmation before searching\n\n- As user provides context, track what's being learned and what's still unclear\n\n**Asking clarifying questions:**\n\nWhen user signals they've done their initial dump (or after substantial context provided), ask clarifying questions to ensure understanding:\n\nGenerate 5-10 numbered questions based on gaps in the context.\n\nInform them they can use shorthand to answer (e.g., \"1: yes, 2: see #channel, 3: no because backwards compat\"), link to more docs, point to channels to read, or just keep info-dumping. Whatever's most efficient for them.\n\n**Exit condition:**\nSufficient context has been gathered when questions show understanding - when edge cases and trade-offs can be asked about without needing basics explained.\n\n**Transition:**\nAsk if there's any more context they want to provide at this stage, or if it's time to move on to drafting the document.\n\nIf user wants to add more, let them. When ready, proceed to Stage 2.\n\n## Stage 2: Refinement & Structure\n\n**Goal:** Build the document section by section through brainstorming, curation, and iterative refinement.\n\n**Instructions to user:**\nExplain that the document will be built section by section. For each section:\n1. Clarifying questions will be asked about what to include\n2. 5-20 options will be brainstormed\n3. User will indicate what to keep/remove/combine\n4. The section will be drafted\n5. It will be refined through surgical edits\n\nStart with whichever section has the most unknowns (usually the core decision/proposal), then work through the rest.\n\n**Section ordering:**\n\nIf the document structure is clear:\nAsk which section they'd like to start with.\n\nSuggest starting with whichever section has the most unknowns. For decision docs, that's usually the core proposal. For specs, it's typically the technical approach. Summary sections are best left for last.\n\nIf user doesn't know what sections they need:\nBased on the type of document and template, suggest 3-5 sections appropriate for the doc type.\n\nAsk if this structure works, or if they want to adjust it.\n\n**Once structure is agreed:**\n\nCreate the initial document structure with placeholder text for all sections.\n\n**If access to artifacts is available:**\nUse `create_file` to create an artifact. This gives both Claude and the user a scaffold to work from.\n\nInform them that the initial structure with placeholders for all sections will be created.\n\nCreate artifact with all section headers and brief placeholder text like \"[To be written]\" or \"[Content here]\".\n\nProvide the scaffold link and indicate it's time to fill in each section.\n\n**If no access to artifacts:**\nCreate a markdown file in the working directory. Name it appropriately (e.g., `decision-doc.md`, `technical-spec.md`).\n\nInform them that the initial structure with placeholders for all sections will be created.\n\nCreate file with all section headers and placeholder text.\n\nConfirm the filename has been created and indicate it's time to fill in each section.\n\n**For each section:**\n\n### Step 1: Clarifying Questions\n\nAnnounce work will begin on the [SECTION NAME] section. Ask 5-10 clarifying questions about what should be included:\n\nGenerate 5-10 specific questions based on context and section purpose.\n\nInform them they can answer in shorthand or just indicate what's important to cover.\n\n### Step 2: Brainstorming\n\nFor the [SECTION NAME] section, brainstorm [5-20] things that might be included, depending on the section's complexity. Look for:\n- Context shared that might have been forgotten\n- Angles or considerations not yet mentioned\n\nGenerate 5-20 numbered options based on section complexity. At the end, offer to brainstorm more if they want additional options.\n\n### Step 3: Curation\n\nAsk which points should be kept, removed, or combined. Request brief justifications to help learn priorities for the next sections.\n\nProvide examples:\n- \"Keep 1,4,7,9\"\n- \"Remove 3 (duplicates 1)\"\n- \"Remove 6 (audience already knows this)\"\n- \"Combine 11 and 12\"\n\n**If user gives freeform feedback** (e.g., \"looks good\" or \"I like most of it but...\") instead of numbered selections, extract their preferences and proceed. Parse what they want kept/removed/changed and apply it.\n\n### Step 4: Gap Check\n\nBased on what they've selected, ask if there's anything important missing for the [SECTION NAME] section.\n\n### Step 5: Drafting\n\nUse `str_replace` to replace the placeholder text for this section with the actual drafted content.\n\nAnnounce the [SECTION NAME] section will be drafted now based on what they've selected.\n\n**If using artifacts:**\nAfter drafting, provide a link to the artifact.\n\nAsk them to read through it and indicate what to change. Note that being specific helps learning for the next sections.\n\n**If using a file (no artifacts):**\nAfter drafting, confirm completion.\n\nInform them the [SECTION NAME] section has been drafted in [filename]. Ask them to read through it and indicate what to change. Note that being specific helps learning for the next sections.\n\n**Key instruction for user (include when drafting the first section):**\nProvide a note: Instead of editing the doc directly, ask them to indicate what to change. This helps learning of their style for future sections. For example: \"Remove the X bullet - already covered by Y\" or \"Make the third paragraph more concise\".\n\n### Step 6: Iterative Refinement\n\nAs user provides feedback:\n- Use `str_replace` to make edits (never reprint the whole doc)\n- **If using artifacts:** Provide link to artifact after each edit\n- **If using files:** Just confirm edits are complete\n- If user edits doc directly and asks to read it: mentally note the changes they made and keep them in mind for future sections (this shows their preferences)\n\n**Continue iterating** until user is satisfied with the section.\n\n### Quality Checking\n\nAfter 3 consecutive iterations with no substantial changes, ask if anything can be removed without losing important information.\n\nWhen section is done, confirm [SECTION NAME] is complete. Ask if ready to move to the next section.\n\n**Repeat for all sections.**\n\n### Near Completion\n\nAs approaching completion (80%+ of sections done), announce intention to re-read the entire document and check for:\n- Flow and consistency across sections\n- Redundancy or contradictions\n- Anything that feels like \"slop\" or generic filler\n- Whether every sentence carries weight\n\nRead entire document and provide feedback.\n\n**When all sections are drafted and refined:**\nAnnounce all sections are drafted. Indicate intention to review the complete document one more time.\n\nReview for overall coherence, flow, completeness.\n\nProvide any final suggestions.\n\nAsk if ready to move to Reader Testing, or if they want to refine anything else.\n\n## Stage 3: Reader Testing\n\n**Goal:** Test the document with a fresh Claude (no context bleed) to verify it works for readers.\n\n**Instructions to user:**\nExplain that testing will now occur to see if the document actually works for readers. This catches blind spots - things that make sense to the authors but might confuse others.\n\n### Testing Approach\n\n**If access to sub-agents is available (e.g., in Claude Code):**\n\nPerform the testing directly without user involvement.\n\n### Step 1: Predict Reader Questions\n\nAnnounce intention to predict what questions readers might ask when trying to discover this document.\n\nGenerate 5-10 questions that readers would realistically ask.\n\n### Step 2: Test with Sub-Agent\n\nAnnounce that these questions will be tested with a fresh Claude instance (no context from this conversation).\n\nFor each question, invoke a sub-agent with just the document content and the question.\n\nSummarize what Reader Claude got right/wrong for each question.\n\n### Step 3: Run Additional Checks\n\nAnnounce additional checks will be performed.\n\nInvoke sub-agent to check for ambiguity, false assumptions, contradictions.\n\nSummarize any issues found.\n\n### Step 4: Report and Fix\n\nIf issues found:\nReport that Reader Claude struggled with specific issues.\n\nList the specific issues.\n\nIndicate intention to fix these gaps.\n\nLoop back to refinement for problematic sections.\n\n---\n\n**If no access to sub-agents (e.g., claude.ai web interface):**\n\nThe user will need to do the testing manually.\n\n### Step 1: Predict Reader Questions\n\nAsk what questions people might ask when trying to discover this document. What would they type into Claude.ai?\n\nGenerate 5-10 questions that readers would realistically ask.\n\n### Step 2: Setup Testing\n\nProvide testing instructions:\n1. Open a fresh Claude conversation: https://claude.ai\n2. Paste or share the document content (if using a shared doc platform with connectors enabled, provide the link)\n3. Ask Reader Claude the generated questions\n\nFor each question, instruct Reader Claude to provide:\n- The answer\n- Whether anything was ambiguous or unclear\n- What knowledge/context the doc assumes is already known\n\nCheck if Reader Claude gives correct answers or misinterprets anything.\n\n### Step 3: Additional Checks\n\nAlso ask Reader Claude:\n- \"What in this doc might be ambiguous or unclear to readers?\"\n- \"What knowledge or context does this doc assume readers already have?\"\n- \"Are there any internal contradictions or inconsistencies?\"\n\n### Step 4: Iterate Based on Results\n\nAsk what Reader Claude got wrong or struggled with. Indicate intention to fix those gaps.\n\nLoop back to refinement for any problematic sections.\n\n---\n\n### Exit Condition (Both Approaches)\n\nWhen Reader Claude consistently answers questions correctly and doesn't surface new gaps or ambiguities, the doc is ready.\n\n## Final Review\n\nWhen Reader Testing passes:\nAnnounce the doc has passed Reader Claude testing. Before completion:\n\n1. Recommend they do a final read-through themselves - they own this document and are responsible for its quality\n2. Suggest double-checking any facts, links, or technical details\n3. Ask them to verify it achieves the impact they wanted\n\nAsk if they want one more review, or if the work is done.\n\n**If user wants final review, provide it. Otherwise:**\nAnnounce document completion. Provide a few final tips:\n- Consider linking this conversation in an appendix so readers can see how the doc was developed\n- Use appendices to provide depth without bloating the main doc\n- Update the doc as feedback is received from real readers\n\n## Tips for Effective Guidance\n\n**Tone:**\n- Be direct and procedural\n- Explain rationale briefly when it affects user behavior\n- Don't try to \"sell\" the approach - just execute it\n\n**Handling Deviations:**\n- If user wants to skip a stage: Ask if they want to skip this and write freeform\n- If user seems frustrated: Acknowledge this is taking longer than expected. Suggest ways to move faster\n- Always give user agency to adjust the process\n\n**Context Management:**\n- Throughout, if context is missing on something mentioned, proactively ask\n- Don't let gaps accumulate - address them as they come up\n\n**Artifact Management:**\n- Use `create_file` for drafting full sections\n- Use `str_replace` for all edits\n- Provide artifact link after every change\n- Never use artifacts for brainstorming lists - that's just conversation\n\n**Quality over Speed:**\n- Don't rush through stages\n- Each iteration should make meaningful improvements\n- The goal is a document that actually works for readers\n",[],[168,903,344],"anthropic-doc-coauthoring","c8546198-5974-11f1-9a2f-ee650bb23af1",99,["D",1779849353716],[202],[168,903],"c8226bd4-5974-11f1-9a2f-ee650bb23af1","c8226c88-5974-11f1-9a2f-ee650bb23af1","c7eaeb1e-5974-11f1-a28a-ee650bb23af1",98,["D",1779849353391],"---\nname: claude-api\ndescription: \"Build, debug, and optimize Claude API / Anthropic SDK apps. Apps built with this skill should include prompt caching. Also handles migrating existing Claude API code between Claude model versions (4.5 → 4.6, 4.6 → 4.7, retired-model replacements). TRIGGER when: code imports `anthropic`/`@anthropic-ai/sdk`; user asks for the Claude API, Anthropic SDK, or Managed Agents; user adds/modifies/tunes a Claude feature (caching, thinking, compaction, tool use, batch, files, citations, memory) or model (Opus/Sonnet/Haiku) in a file; questions about prompt caching / cache hit rate in an Anthropic SDK project. SKIP: file imports `openai`/other-provider SDK, filename like `*-openai.py`/`*-generic.py`, provider-neutral code, general programming/ML.\"\nlicense: Complete terms in LICENSE.txt\n---\n\n# Building LLM-Powered Applications with Claude\n\nThis skill helps you build LLM-powered applications with Claude. Choose the right surface based on your needs, detect the project language, then read the relevant language-specific documentation.\n\n## Before You Start\n\nScan the target file (or, if no target file, the prompt and project) for non-Anthropic provider markers — `import openai`, `from openai`, `langchain_openai`, `OpenAI(`, `gpt-4`, `gpt-5`, file names like `agent-openai.py` or `*-generic.py`, or any explicit instruction to keep the code provider-neutral. If you find any, stop and tell the user that this skill produces Claude/Anthropic SDK code; ask whether they want to switch the file to Claude or want a non-Claude implementation. Do not edit a non-Anthropic file with Anthropic SDK calls.\n\n## Output Requirement\n\nWhen the user asks you to add, modify, or implement a Claude feature, your code must call Claude through one of:\n\n1. **The official Anthropic SDK** for the project's language (`anthropic`, `@anthropic-ai/sdk`, `com.anthropic.*`, etc.). This is the default whenever a supported SDK exists for the project.\n2. **Raw HTTP** (`curl`, `requests`, `fetch`, `httpx`, etc.) — only when the user explicitly asks for cURL/REST/raw HTTP, the project is a shell/cURL project, or the language has no official SDK.\n\nNever mix the two — don't reach for `requests`/`fetch` in a Python or TypeScript project just because it feels lighter. Never fall back to OpenAI-compatible shims.\n\n**Never guess SDK usage.** Function names, class names, namespaces, method signatures, and import paths must come from explicit documentation — either the `{lang}/` files in this skill or the official SDK repositories or documentation links listed in `shared/live-sources.md`. If the binding you need is not explicitly documented in the skill files, WebFetch the relevant SDK repo from `shared/live-sources.md` before writing code. Do not infer Ruby/Java/Go/PHP/C# APIs from cURL shapes or from another language's SDK.\n\n## Defaults\n\nUnless the user requests otherwise:\n\nFor the Claude model version, please use Claude Opus 4.7, which you can access via the exact model string `claude-opus-4-7`. Please default to using adaptive thinking (`thinking: {type: \"adaptive\"}`) for anything remotely complicated. And finally, please default to streaming for any request that may involve long input, long output, or high `max_tokens` — it prevents hitting request timeouts. Use the SDK's `.get_final_message()` / `.finalMessage()` helper to get the complete response if you don't need to handle individual stream events\n\n---\n\n## Subcommands\n\nIf the User Request at the bottom of this prompt is a bare subcommand string (no prose), search every **Subcommands** table in this document — including any in sections appended below — and follow the matching Action column directly. This lets users invoke specific flows via `/claude-api `. If no table in the document matches, treat the request as normal prose.\n\n\n---\n\n## Language Detection\n\nBefore reading code examples, determine which language the user is working in:\n\n1. **Look at project files** to infer the language:\n\n - `*.py`, `requirements.txt`, `pyproject.toml`, `setup.py`, `Pipfile` → **Python** — read from `python/`\n - `*.ts`, `*.tsx`, `package.json`, `tsconfig.json` → **TypeScript** — read from `typescript/`\n - `*.js`, `*.jsx` (no `.ts` files present) → **TypeScript** — JS uses the same SDK, read from `typescript/`\n - `*.java`, `pom.xml`, `build.gradle` → **Java** — read from `java/`\n - `*.kt`, `*.kts`, `build.gradle.kts` → **Java** — Kotlin uses the Java SDK, read from `java/`\n - `*.scala`, `build.sbt` → **Java** — Scala uses the Java SDK, read from `java/`\n - `*.go`, `go.mod` → **Go** — read from `go/`\n - `*.rb`, `Gemfile` → **Ruby** — read from `ruby/`\n - `*.cs`, `*.csproj` → **C#** — read from `csharp/`\n - `*.php`, `composer.json` → **PHP** — read from `php/`\n\n2. **If multiple languages detected** (e.g., both Python and TypeScript files):\n\n - Check which language the user's current file or question relates to\n - If still ambiguous, ask: \"I detected both Python and TypeScript files. Which language are you using for the Claude API integration?\"\n\n3. **If language can't be inferred** (empty project, no source files, or unsupported language):\n\n - Use AskUserQuestion with options: Python, TypeScript, Java, Go, Ruby, cURL/raw HTTP, C#, PHP\n - If AskUserQuestion is unavailable, default to Python examples and note: \"Showing Python examples. Let me know if you need a different language.\"\n\n4. **If unsupported language detected** (Rust, Swift, C++, Elixir, etc.):\n\n - Suggest cURL/raw HTTP examples from `curl/` and note that community SDKs may exist\n - Offer to show Python or TypeScript examples as reference implementations\n\n5. **If user needs cURL/raw HTTP examples**, read from `curl/`.\n\n### Language-Specific Feature Support\n\n| Language | Tool Runner | Managed Agents | Notes |\n| ---------- | ----------- | -------------- | ------------------------------------- |\n| Python | Yes (beta) | Yes (beta) | Full support — `@beta_tool` decorator |\n| TypeScript | Yes (beta) | Yes (beta) | Full support — `betaZodTool` + Zod |\n| Java | Yes (beta) | Yes (beta) | Beta tool use with annotated classes |\n| Go | Yes (beta) | Yes (beta) | `BetaToolRunner` in `toolrunner` pkg |\n| Ruby | Yes (beta) | Yes (beta) | `BaseTool` + `tool_runner` in beta |\n| C# | No | No | Official SDK |\n| PHP | Yes (beta) | Yes (beta) | `BetaRunnableTool` + `toolRunner()` |\n| cURL | N/A | Yes (beta) | Raw HTTP, no SDK features |\n\n> **Managed Agents code examples**: dedicated language-specific READMEs are provided for Python, TypeScript, Go, Ruby, PHP, Java, and cURL (`{lang}/managed-agents/README.md`, `curl/managed-agents.md`). Read your language's README plus the language-agnostic `shared/managed-agents-*.md` concept files. **Agents are persistent — create once, reference by ID.** Store the agent ID returned by `agents.create` and pass it to every subsequent `sessions.create`; do not call `agents.create` in the request path. The Anthropic CLI is one convenient way to create agents and environments from version-controlled YAML — its URL is in `shared/live-sources.md`. If a binding you need isn't shown in the README, WebFetch the relevant entry from `shared/live-sources.md` rather than guess. C# does not currently have Managed Agents support; use cURL-style raw HTTP requests against the API.\n\n---\n\n## Which Surface Should I Use?\n\n> **Start simple.** Default to the simplest tier that meets your needs. Single API calls and workflows handle most use cases — only reach for agents when the task genuinely requires open-ended, model-driven exploration.\n\n| Use Case | Tier | Recommended Surface | Why |\n| ----------------------------------------------- | --------------- | ------------------------- | ------------------------------------------------------------ |\n| Classification, summarization, extraction, Q&A | Single LLM call | **Claude API** | One request, one response |\n| Batch processing or embeddings | Single LLM call | **Claude API** | Specialized endpoints |\n| Multi-step pipelines with code-controlled logic | Workflow | **Claude API + tool use** | You orchestrate the loop |\n| Custom agent with your own tools | Agent | **Claude API + tool use** | Maximum flexibility |\n| Server-managed stateful agent with workspace | Agent | **Managed Agents** | Anthropic runs the loop and hosts the tool-execution sandbox |\n| Persisted, versioned agent configs | Agent | **Managed Agents** | Agents are stored objects; sessions pin to a version |\n| Long-running multi-turn agent with file mounts | Agent | **Managed Agents** | Per-session containers, SSE event stream, Skills + MCP |\n\n> **Note:** Managed Agents is the right choice when you want Anthropic to run the agent loop *and* host the container where tools execute — file ops, bash, code execution all run in the per-session workspace. If you want to host the compute yourself or run your own custom tool runtime, Claude API + tool use is the right choice — use the tool runner for automatic loop handling, or the manual loop for fine-grained control (approval gates, custom logging, conditional execution).\n\n> **Third-party providers (Amazon Bedrock, Google Vertex AI, Microsoft Foundry):** Managed Agents is **not available** on Bedrock, Vertex, or Foundry. If you are deploying through any third-party provider, use **Claude API + tool use** for all use cases — including ones where Managed Agents would otherwise be the recommended surface.\n\n### Decision Tree\n\n```\nWhat does your application need?\n\n0. Are you deploying through Amazon Bedrock, Google Vertex AI, or Microsoft Foundry?\n └── Yes → Claude API (+ tool use for agents) — Managed Agents is 1P only.\n No → continue.\n\n1. Single LLM call (classification, summarization, extraction, Q&A)\n └── Claude API — one request, one response\n\n2. Do you want Anthropic to run the agent loop and host a per-session\n container where Claude executes tools (bash, file ops, code)?\n └── Yes → Managed Agents — server-managed sessions, persisted agent configs,\n SSE event stream, Skills + MCP, file mounts.\n Examples: \"stateful coding agent with a workspace per task\",\n \"long-running research agent that streams events to a UI\",\n \"agent with persisted, versioned config used across many sessions\"\n\n3. Workflow (multi-step, code-orchestrated, with your own tools)\n └── Claude API with tool use — you control the loop\n\n4. Open-ended agent (model decides its own trajectory, your own tools, you host the compute)\n └── Claude API agentic loop (maximum flexibility)\n```\n\n### Should I Build an Agent?\n\nBefore choosing the agent tier, check all four criteria:\n\n- **Complexity** — Is the task multi-step and hard to fully specify in advance? (e.g., \"turn this design doc into a PR\" vs. \"extract the title from this PDF\")\n- **Value** — Does the outcome justify higher cost and latency?\n- **Viability** — Is Claude capable at this task type?\n- **Cost of error** — Can errors be caught and recovered from? (tests, review, rollback)\n\nIf the answer is \"no\" to any of these, stay at a simpler tier (single call or workflow).\n\n---\n\n## Architecture\n\nEverything goes through `POST /v1/messages`. Tools and output constraints are features of this single endpoint — not separate APIs.\n\n**User-defined tools** — You define tools (via decorators, Zod schemas, or raw JSON), and the SDK's tool runner handles calling the API, executing your functions, and looping until Claude is done. For full control, you can write the loop manually.\n\n**Server-side tools** — Anthropic-hosted tools that run on Anthropic's infrastructure. Code execution is fully server-side (declare it in `tools`, Claude runs code automatically). Computer use can be server-hosted or self-hosted.\n\n**Structured outputs** — Constrains the Messages API response format (`output_config.format`) and/or tool parameter validation (`strict: true`). The recommended approach is `client.messages.parse()` which validates responses against your schema automatically. Note: the old `output_format` parameter is deprecated; use `output_config: {format: {...}}` on `messages.create()`.\n\n**Supporting endpoints** — Batches (`POST /v1/messages/batches`), Files (`POST /v1/files`), Token Counting, and Models (`GET /v1/models`, `GET /v1/models/{id}` — live capability/context-window discovery) feed into or support Messages API requests.\n\n---\n\n## Current Models (cached: 2026-04-15)\n\n| Model | Model ID | Context | Input $/1M | Output $/1M |\n| ----------------- | ------------------- | -------------- | ---------- | ----------- |\n| Claude Opus 4.7 | `claude-opus-4-7` | 1M | $5.00 | $25.00 |\n| Claude Opus 4.6 | `claude-opus-4-6` | 1M | $5.00 | $25.00 |\n| Claude Sonnet 4.6 | `claude-sonnet-4-6` | 1M | $3.00 | $15.00 |\n| Claude Haiku 4.5 | `claude-haiku-4-5` | 200K | $1.00 | $5.00 |\n\n**ALWAYS use `claude-opus-4-7` unless the user explicitly names a different model.** This is non-negotiable. Do not use `claude-sonnet-4-6`, `claude-sonnet-4-5`, or any other model unless the user literally says \"use sonnet\" or \"use haiku\". Never downgrade for cost — that's the user's decision, not yours.\n\n**CRITICAL: Use only the exact model ID strings from the table above — they are complete as-is. Do not append date suffixes.** For example, use `claude-sonnet-4-5`, never `claude-sonnet-4-5-20250514` or any other date-suffixed variant you might recall from training data. If the user requests an older model not in the table (e.g., \"opus 4.5\", \"sonnet 3.7\"), read `shared/models.md` for the exact ID — do not construct one yourself.\n\nA note: if any of the model strings above look unfamiliar to you, that's to be expected — that just means they were released after your training data cutoff. Rest assured they are real models; we wouldn't mess with you like that.\n\n**Live capability lookup:** The table above is cached. When the user asks \"what's the context window for X\", \"does X support vision/thinking/effort\", or \"which models support Y\", query the Models API (`client.models.retrieve(id)` / `client.models.list()`) — see `shared/models.md` for the field reference and capability-filter examples.\n\n---\n\n## Thinking & Effort (Quick Reference)\n\n**Opus 4.7 — Adaptive thinking only:** Use `thinking: {type: \"adaptive\"}`. `thinking: {type: \"enabled\", budget_tokens: N}` returns a 400 on Opus 4.7 — adaptive is the only on-mode. `{type: \"disabled\"}` and omitting `thinking` both work. Sampling parameters (`temperature`, `top_p`, `top_k`) are also removed and will 400. See `shared/model-migration.md` → Migrating to Opus 4.7 for the full breaking-change list.\n**Opus 4.6 — Adaptive thinking (recommended):** Use `thinking: {type: \"adaptive\"}`. Claude dynamically decides when and how much to think. No `budget_tokens` needed — `budget_tokens` is deprecated on Opus 4.6 and Sonnet 4.6 and should not be used for new code. Adaptive thinking also automatically enables interleaved thinking (no beta header needed). **When the user asks for \"extended thinking\", a \"thinking budget\", or `budget_tokens`: always use Opus 4.7 or 4.6 with `thinking: {type: \"adaptive\"}`. The concept of a fixed token budget for thinking is deprecated — adaptive thinking replaces it. Do NOT use `budget_tokens` for new 4.6/4.7 code and do NOT switch to an older model.** *Gradual-migration carve-out:* `budget_tokens` is still functional on Opus 4.6 and Sonnet 4.6 as a transitional escape hatch — if you're migrating existing code and need a hard token ceiling before you've tuned `effort`, see `shared/model-migration.md` → Transitional escape hatch. Note: this carve-out does **not** apply to Opus 4.7 — `budget_tokens` is fully removed there.\n**Effort parameter (GA, no beta header):** Controls thinking depth and overall token spend via `output_config: {effort: \"low\"|\"medium\"|\"high\"|\"max\"}` (inside `output_config`, not top-level). Default is `high` (equivalent to omitting it). `max` is Opus-tier only (Opus 4.6 and later — not Sonnet or Haiku). Opus 4.7 adds `\"xhigh\"` (between `high` and `max`) — the best setting for most coding and agentic use cases on 4.7, and the default in Claude Code; use a minimum of `high` for most intelligence-sensitive work. Works on Opus 4.5, Opus 4.6, Opus 4.7, and Sonnet 4.6. Will error on Sonnet 4.5 / Haiku 4.5. On Opus 4.7, effort matters more than on any prior Opus — re-tune it when migrating. Combine with adaptive thinking for the best cost-quality tradeoffs. Lower effort means fewer and more-consolidated tool calls, less preamble, and terser confirmations — `high` is often the sweet spot balancing quality and token efficiency; use `max` when correctness matters more than cost; use `low` for subagents or simple tasks.\n\n**Opus 4.7 — thinking content omitted by default:** `thinking` blocks still stream but their text is empty unless you opt in with `thinking: {type: \"adaptive\", display: \"summarized\"}` (default is `\"omitted\"`). Silent change — no error. If you stream reasoning to users, the default looks like a long pause before output; set `\"summarized\"` to restore visible progress.\n\n**Task Budgets (beta, Opus 4.7):** `output_config: {task_budget: {type: \"tokens\", total: N}}` tells the model how many tokens it has for a full agentic loop — it sees a running countdown and self-moderates (minimum 20,000; beta header `task-budgets-2026-03-13`). Distinct from `max_tokens`, which is an enforced per-response ceiling the model is not aware of. See `shared/model-migration.md` → Task Budgets.\n\n**Sonnet 4.6:** Supports adaptive thinking (`thinking: {type: \"adaptive\"}`). `budget_tokens` is deprecated on Sonnet 4.6 — use adaptive thinking instead.\n\n**Older models (only if explicitly requested):** If the user specifically asks for Sonnet 4.5 or another older model, use `thinking: {type: \"enabled\", budget_tokens: N}`. `budget_tokens` must be less than `max_tokens` (minimum 1024). Never choose an older model just because the user mentions `budget_tokens` — use Opus 4.7 with adaptive thinking instead.\n\n---\n\n## Compaction (Quick Reference)\n\n**Beta, Opus 4.7, Opus 4.6, and Sonnet 4.6.** For long-running conversations that may exceed the 1M context window, enable server-side compaction. The API automatically summarizes earlier context when it approaches the trigger threshold (default: 150K tokens). Requires beta header `compact-2026-01-12`.\n\n**Critical:** Append `response.content` (not just the text) back to your messages on every turn. Compaction blocks in the response must be preserved — the API uses them to replace the compacted history on the next request. Extracting only the text string and appending that will silently lose the compaction state.\n\nSee `{lang}/claude-api/README.md` (Compaction section) for code examples. Full docs via WebFetch in `shared/live-sources.md`.\n\n---\n\n## Prompt Caching (Quick Reference)\n\n**Prefix match.** Any byte change anywhere in the prefix invalidates everything after it. Render order is `tools` → `system` → `messages`. Keep stable content first (frozen system prompt, deterministic tool list), put volatile content (timestamps, per-request IDs, varying questions) after the last `cache_control` breakpoint.\n\n**Top-level auto-caching** (`cache_control: {type: \"ephemeral\"}` on `messages.create()`) is the simplest option when you don't need fine-grained placement. Max 4 breakpoints per request. Minimum cacheable prefix is ~1024 tokens — shorter prefixes silently won't cache.\n\n**Verify with `usage.cache_read_input_tokens`** — if it's zero across repeated requests, a silent invalidator is at work (`datetime.now()` in system prompt, unsorted JSON, varying tool set).\n\nFor placement patterns, architectural guidance, and the silent-invalidator audit checklist: read `shared/prompt-caching.md`. Language-specific syntax: `{lang}/claude-api/README.md` (Prompt Caching section).\n\n---\n\n## Managed Agents (Beta)\n\n**Managed Agents** is a third surface: server-managed stateful agents with Anthropic-hosted tool execution. You create a persisted, versioned Agent config (`POST /v1/agents`), then start Sessions that reference it. Each session provisions a container as the agent's workspace — bash, file ops, and code execution run there; the agent loop itself runs on Anthropic's orchestration layer and acts on the container via tools. The session streams events; you send messages and tool results back.\n\n**Managed Agents is first-party only.** It is not available on Amazon Bedrock, Google Vertex AI, or Microsoft Foundry. For agents on third-party providers, use Claude API + tool use.\n\n**Mandatory flow:** Agent (once) → Session (every run). `model`/`system`/`tools` live on the agent, never the session. See `shared/managed-agents-overview.md` for the full reading guide, beta headers, and pitfalls.\n\n**Beta headers:** `managed-agents-2026-04-01` — the SDK sets this automatically for all `client.beta.{agents,environments,sessions,vaults,memory_stores}.*` calls. Skills API uses `skills-2025-10-02` and Files API uses `files-api-2025-04-14`, but you don't need to explicitly pass those in for endpoints other than `/v1/skills` and `/v1/files`.\n\n**Subcommands** — invoke directly with `/claude-api `:\n\n| Subcommand | Action |\n|---|---|\n| `managed-agents-onboard` | Walk the user through setting up a Managed Agent from scratch. **Read `shared/managed-agents-onboarding.md` immediately** and follow its interview script: mental model → know-or-explore branch → template config → session setup → emit code. Do not summarize — run the interview. |\n\n**Reading guide:** Start with `shared/managed-agents-overview.md`, then the topical `shared/managed-agents-*.md` files (core, environments, tools, events, outcomes, multiagent, webhooks, memory, client-patterns, onboarding, api-reference). For Python, TypeScript, Go, Ruby, PHP, and Java, read `{lang}/managed-agents/README.md` for code examples. For cURL, read `curl/managed-agents.md`. **Agents are persistent — create once, reference by ID.** Store the agent ID returned by `agents.create` and pass it to every subsequent `sessions.create`; do not call `agents.create` in the request path. The Anthropic CLI is one convenient way to create agents and environments from version-controlled YAML (URL in `shared/live-sources.md`). If a binding you need isn't shown in the language README, WebFetch the relevant entry from `shared/live-sources.md` rather than guess. C# does not currently have Managed Agents support; use raw HTTP from `curl/managed-agents.md` as a reference.\n\n**When the user wants to set up a Managed Agent from scratch** (e.g. \"how do I get started\", \"walk me through creating one\", \"set up a new agent\"): read `shared/managed-agents-onboarding.md` and run its interview — same flow as the `managed-agents-onboard` subcommand.\n\n**When the user asks \"how do I write the client code for X\":** reach for `shared/managed-agents-client-patterns.md` — covers lossless stream reconnect, `processed_at` queued/processed gate, interrupt, `tool_confirmation` round-trip, the correct idle/terminated break gate, post-idle status race, stream-first ordering, file-mount gotchas, keeping credentials host-side via custom tools, etc.\n\n---\n\n## Reading Guide\n\nAfter detecting the language, read the relevant files based on what the user needs:\n\n### Quick Task Reference\n\n**Single text classification/summarization/extraction/Q&A:**\n→ Read only `{lang}/claude-api/README.md`\n\n**Chat UI or real-time response display:**\n→ Read `{lang}/claude-api/README.md` + `{lang}/claude-api/streaming.md`\n\n**Long-running conversations (may exceed context window):**\n→ Read `{lang}/claude-api/README.md` — see Compaction section\n**Migrating to a newer model (Opus 4.7 / Opus 4.6 / Sonnet 4.6) or replacing a retired model:**\n→ Read `shared/model-migration.md`\n**Prompt caching / optimize caching / \"why is my cache hit rate low\":**\n→ Read `shared/prompt-caching.md` + `{lang}/claude-api/README.md` (Prompt Caching section)\n\n**Function calling / tool use / agents:**\n→ Read `{lang}/claude-api/README.md` + `shared/tool-use-concepts.md` + `{lang}/claude-api/tool-use.md`\n\n**Agent design (tool surface, context management, caching strategy):**\n→ Read `shared/agent-design.md`\n\n**Batch processing (non-latency-sensitive):**\n→ Read `{lang}/claude-api/README.md` + `{lang}/claude-api/batches.md`\n\n**File uploads across multiple requests:**\n→ Read `{lang}/claude-api/README.md` + `{lang}/claude-api/files-api.md`\n\n**Managed Agents (server-managed stateful agents with workspace):**\n→ Read `shared/managed-agents-overview.md` + the rest of the `shared/managed-agents-*.md` files. For Python, TypeScript, Go, Ruby, PHP, and Java, read `{lang}/managed-agents/README.md` for code examples. For cURL, read `curl/managed-agents.md`. **Agents are persistent — create once, reference by ID.** Store the agent ID returned by `agents.create` and pass it to every subsequent `sessions.create`; do not call `agents.create` in the request path. The Anthropic CLI is one convenient way to create agents and environments from version-controlled YAML (URL in `shared/live-sources.md`). If a binding you need isn't shown in the language README, WebFetch the relevant entry from `shared/live-sources.md` rather than guess. C# does not currently support Managed Agents — use raw HTTP from `curl/managed-agents.md` as a reference.\n\n### Claude API (Full File Reference)\n\nRead the **language-specific Claude API folder** (`{language}/claude-api/`):\n\n1. **`{language}/claude-api/README.md`** — **Read this first.** Installation, quick start, common patterns, error handling.\n2. **`shared/tool-use-concepts.md`** — Read when the user needs function calling, code execution, memory, or structured outputs. Covers conceptual foundations.\n3. **`shared/agent-design.md`** — Read when designing an agent: bash vs. dedicated tools, programmatic tool calling, tool search/skills, context editing vs. compaction vs. memory, caching principles.\n4. **`{language}/claude-api/tool-use.md`** — Read for language-specific tool use code examples (tool runner, manual loop, code execution, memory, structured outputs).\n5. **`{language}/claude-api/streaming.md`** — Read when building chat UIs or interfaces that display responses incrementally.\n6. **`{language}/claude-api/batches.md`** — Read when processing many requests offline (not latency-sensitive). Runs asynchronously at 50% cost.\n7. **`{language}/claude-api/files-api.md`** — Read when sending the same file across multiple requests without re-uploading.\n8. **`shared/prompt-caching.md`** — Read when adding or optimizing prompt caching. Covers prefix-stability design, breakpoint placement, and anti-patterns that silently invalidate cache.\n9. **`shared/error-codes.md`** — Read when debugging HTTP errors or implementing error handling.\n10. **`shared/model-migration.md`** — Read when upgrading to newer models, replacing retired models, or translating `budget_tokens` / prefill patterns to the current API.\n11. **`shared/live-sources.md`** — WebFetch URLs for fetching the latest official documentation.\n\n> **Note:** For Java, Go, Ruby, C#, PHP, and cURL — these have a single file each covering all basics. Read that file plus `shared/tool-use-concepts.md` and `shared/error-codes.md` as needed.\n\n> **Note:** For the Managed Agents file reference, see the `## Managed Agents (Beta)` section above — it lists every `shared/managed-agents-*.md` file and the language-specific READMEs.\n\n---\n\n## When to Use WebFetch\n\nUse WebFetch to get the latest documentation when:\n\n- User asks for \"latest\" or \"current\" information\n- Cached data seems incorrect\n- User asks about features not covered here\n\nLive documentation URLs are in `shared/live-sources.md`.\n\n## Common Pitfalls\n\n- Don't truncate inputs when passing files or content to the API. If the content is too long to fit in the context window, notify the user and discuss options (chunking, summarization, etc.) rather than silently truncating.\n- **Opus 4.7 thinking:** Adaptive only. `thinking: {type: \"enabled\", budget_tokens: N}` returns 400 on Opus 4.7 — `budget_tokens` is fully removed there (along with `temperature`, `top_p`, `top_k`). Use `thinking: {type: \"adaptive\"}`.\n- **Opus 4.6 / Sonnet 4.6 thinking:** Use `thinking: {type: \"adaptive\"}` — do NOT use `budget_tokens` for new 4.6 code (deprecated on both Opus 4.6 and Sonnet 4.6; for gradual migration of existing code, see the transitional escape hatch in `shared/model-migration.md` — note this carve-out does not apply to Opus 4.7). For older models, `budget_tokens` must be less than `max_tokens` (minimum 1024). This will throw an error if you get it wrong.\n- **4.6/4.7 family prefill removed:** Assistant message prefills (last-assistant-turn prefills) return a 400 error on Opus 4.6, Opus 4.7, and Sonnet 4.6. Use structured outputs (`output_config.format`) or system prompt instructions to control response format instead.\n- **Confirm migration scope before editing:** When a user asks to migrate code to a newer Claude model without naming a specific file, directory, or file list, **ask which scope to apply first** — the entire working directory, a specific subdirectory, or a specific set of files. Do not start editing until the user confirms. Imperative phrasings like \"migrate my codebase\", \"move my project to X\", \"upgrade to Sonnet 4.6\", or bare \"migrate to Opus 4.7\" are **still ambiguous** — they tell you what to do but not where, so ask. Proceed without asking only when the prompt names an exact file, a specific directory, or an explicit file list (\"migrate `app.py`\", \"migrate everything under `services/`\", \"update `a.py` and `b.py`\"). See `shared/model-migration.md` Step 0.\n- **`max_tokens` defaults:** Don't lowball `max_tokens` — hitting the cap truncates output mid-thought and requires a retry. For non-streaming requests, default to `~16000` (keeps responses under SDK HTTP timeouts). For streaming requests, default to `~64000` (timeouts aren't a concern, so give the model room). Only go lower when you have a hard reason: classification (`~256`), cost caps, or deliberately short outputs.\n- **128K output tokens:** Opus 4.6 and Opus 4.7 support up to 128K `max_tokens`, but the SDKs require streaming for values that large to avoid HTTP timeouts. Use `.stream()` with `.get_final_message()` / `.finalMessage()`.\n- **Tool call JSON parsing (4.6/4.7 family):** Opus 4.6, Opus 4.7, and Sonnet 4.6 may produce different JSON string escaping in tool call `input` fields (e.g., Unicode or forward-slash escaping). Always parse tool inputs with `json.loads()` / `JSON.parse()` — never do raw string matching on the serialized input.\n- **Structured outputs (all models):** Use `output_config: {format: {...}}` instead of the deprecated `output_format` parameter on `messages.create()`. This is a general API change, not 4.6-specific.\n- **Don't reimplement SDK functionality:** The SDK provides high-level helpers — use them instead of building from scratch. Specifically: use `stream.finalMessage()` instead of wrapping `.on()` events in `new Promise()`; use typed exception classes (`Anthropic.RateLimitError`, etc.) instead of string-matching error messages; use SDK types (`Anthropic.MessageParam`, `Anthropic.Tool`, `Anthropic.Message`, etc.) instead of redefining equivalent interfaces.\n- **Don't define custom types for SDK data structures:** The SDK exports types for all API objects. Use `Anthropic.MessageParam` for messages, `Anthropic.Tool` for tool definitions, `Anthropic.ToolUseBlock` / `Anthropic.ToolResultBlockParam` for tool results, `Anthropic.Message` for responses. Defining your own `interface ChatMessage { role: string; content: unknown }` duplicates what the SDK already provides and loses type safety.\n- **Report and document output:** For tasks that produce reports, documents, or visualizations, the code execution sandbox has `python-docx`, `python-pptx`, `matplotlib`, `pillow`, and `pypdf` pre-installed. Claude can generate formatted files (DOCX, PDF, charts) and return them via the Files API — consider this for \"report\" or \"document\" type requests instead of plain stdout text.\n",[],[168,917,344],"anthropic-claude-api","c7eaea6a-5974-11f1-a28a-ee650bb23af1",97,["D",1779849353026],[200],[168,917],"c7bc7ab8-5974-11f1-80fb-ee650bb23af1","c7bc7b62-5974-11f1-80fb-ee650bb23af1","c7831584-5974-11f1-b3e1-ee650bb23af1",96,["D",1779849352722],"---\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.",[],[168,931,344],"anthropic-canvas-design","c78314da-5974-11f1-b3e1-ee650bb23af1",95,["D",1779849352346],[198],[168,931],"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",[],[168,945,344],"anthropic-brand-guidelines","c6f94d04-5974-11f1-b3e1-ee650bb23af1",93,["D",1779849351443],[196],[168,945],"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\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",[],[168,959,344],"anthropic-algorithmic-art","c6628842-5974-11f1-9c4b-ee650bb23af1",91,["D",1779849350455],[194],[168,959],["D",1779816059463],[193,195,197,199,201,203,205,207,209,211,213,215,217,219,221,223,225,227,236,244,253,262,274,283],[168],"cf7ec45e-5974-11f1-b3e1-ee650bb23af1","loader.ts","ae9857de-5927-11f1-8d94-ee650bb23af1",126,["D",1779849365719],"// 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\" | \"anthropic\";\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 deck: string;\n deck?: string;\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 deck: meta.deck ?? \"Skillbook\",\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",[],[174,969],["D",1779814995869],[191],[174],["D",1779814930341],{"_97":96,"_105":101},{"_97":96,"_98":99,"_100":101,"_18":55,"_102":103,"_104":25},{"_13":86,"_32":87,"_43":42,"_88":44,"_89":-5,"_90":-5,"_91":-5,"_92":-5,"_93":-5,"_94":45,"_95":96},"ctx",{"_79":-5,"_125":1016,"_1017":1018,"_1019":1020,"_1021":25,"_1022":25,"_1023":25,"_1024":59,"_1025":-5,"_1026":-7,"_1027":-7,"_1028":158,"_1029":25,"_1030":25,"_1031":-5,"_1032":25,"_1033":25,"_1034":25,"_1035":-5},"ENV",{"_987":988,"_989":990,"_991":87,"_992":993,"_994":995,"_996":997,"_998":999,"_1000":1001,"_1002":1003,"_1004":1005,"_1006":1007,"_1008":1009,"_1010":1011,"_1012":1013,"_1014":1015},"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"]}

🎨 sprite-builder

reference

raw (1024)

32px sprite

🎨 sprite-builder

raw (1024)

32px sprite

Skillbook

Memories (stickers)

Templates

Scripts

${esc(deck)}

Diff · v136