[{"_1":2,"_3":-5,"_4":-5},"loaderData",{"_5":6,"_7":8,"_9":10},"actionData","errors","root",{"_1014":1015,"_1016":1017},"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",149,"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","skills/_index.json","latestPath","fileId","4368c0f2-5927-11f1-8ea0-ee650bb23af1","name","_index.json","fileType","content","{\n \"_comment\": \"Card metadata and deck layout. The canonical agent-readable source remains each skills//SKILL.md.\",\n \"valtown-mcp-app\": {\n \"type\": \"Skill — Lore\",\n \"color\": \"blue\",\n \"art\": \"🖼️\",\n \"artPrompt\": \"an ornate enchanted picture frame on a study wall, a glowing miniature world sealed behind glass that cannot spill past its border, candlelit desk — cool sapphire and pale silver palette, luminous, contained, arcane — fantasy trading card illustration, painterly digital art, dramatic cinematic lighting, framed centered composition, square format, no text, no letters, no words, no logos, no UI\",\n \"manaCost\": 2,\n \"level\": 6,\n \"invocations\": 1,\n \"lastUsed\": \"today\",\n \"flavor\": \"885 × 386, no scroll, no clicks — paint inside the frame or not at all.\",\n \"deck\": \"Skillbook\"\n },\n \"daily-standup\": {\n \"type\": \"Skill — Routine\",\n \"color\": \"blue\",\n \"art\": \"🌅\",\n \"artPrompt\": \"a peaceful sunrise over a writer's desk by a window, steaming coffee mug, open notebook, soft watercolor light — cool blue and pale silver palette, soft morning mist, serene — fantasy trading card illustration, painterly digital art, dramatic cinematic lighting, framed centered composition, square format, no text, no letters, no words, no logos, no UI\",\n \"manaCost\": 2,\n \"level\": 5,\n \"invocations\": 38,\n \"lastUsed\": \"2d ago\",\n \"flavor\": \"Yesterday's threads, today's commitments, tomorrow's traps.\",\n \"deck\": \"Skillbook\"\n },\n \"inbox-zero\": {\n \"type\": \"Skill — Maintenance\",\n \"color\": \"white\",\n \"art\": \"✉️\",\n \"artPrompt\": \"a single white origami paper plane resting on an empty wooden letter tray, soft golden window light, minimalist still life — warm cream and antique gold palette, sunlit, hopeful, clean — fantasy trading card illustration, painterly digital art, dramatic cinematic lighting, framed centered composition, square format, no text, no letters, no words, no logos, no UI\",\n \"manaCost\": 1,\n \"level\": 4,\n \"invocations\": 21,\n \"lastUsed\": \"5d ago\",\n \"flavor\": \"Three folders, no regrets: Reply, Wait, Done.\",\n \"deck\": \"Skillbook\"\n },\n \"pr-review\": {\n \"type\": \"Skill — Action\",\n \"color\": \"red\",\n \"art\": \"⚔️\",\n \"artPrompt\": \"crossed swords planted at a forked stone path on a hilltop at dusk, sparks and ember motes, heroic fantasy painting — deep ember red and amber palette, fiery energy, dynamic motion — fantasy trading card illustration, painterly digital art, dramatic cinematic lighting, framed centered composition, square format, no text, no letters, no words, no logos, no UI\",\n \"manaCost\": 3,\n \"level\": 7,\n \"invocations\": 64,\n \"lastUsed\": \"yesterday\",\n \"flavor\": \"\\\"Always create NEW commits rather than amending.\\\" — the elder agents\",\n \"deck\": \"Skillbook\"\n },\n \"bug-triage\": {\n \"type\": \"Skill — Action\",\n \"color\": \"black\",\n \"art\": \"🐛\",\n \"artPrompt\": \"a glowing bioluminescent beetle crawling across a dark server rack, dim red emergency light, moody noir illustration — deep indigo and charcoal palette, shadowy, ominous, glowing accents — fantasy trading card illustration, painterly digital art, dramatic cinematic lighting, framed centered composition, square format, no text, no letters, no words, no logos, no UI\",\n \"manaCost\": 4,\n \"level\": 3,\n \"invocations\": 11,\n \"lastUsed\": \"3w ago\",\n \"flavor\": \"The graph is red. Begin.\",\n \"deck\": \"Skillbook\"\n },\n \"code-cartographer\": {\n \"type\": \"Skill — Lookup\",\n \"color\": \"green\",\n \"art\": \"🗺️\",\n \"artPrompt\": \"an old hand-drawn parchment map of a verdant city with rivers and streets, brass compass and quill resting on it, study desk — lush emerald and moss palette, verdant, organic textures — fantasy trading card illustration, painterly digital art, dramatic cinematic lighting, framed centered composition, square format, no text, no letters, no words, no logos, no UI\",\n \"manaCost\": 2,\n \"level\": 6,\n \"invocations\": 47,\n \"lastUsed\": \"today\",\n \"flavor\": \"Every codebase is a city. Someone has to keep the map.\",\n \"deck\": \"Skillbook\"\n },\n \"release-notes\": {\n \"type\": \"Skill — Creative\",\n \"color\": \"gold\",\n \"art\": \"📜\",\n \"artPrompt\": \"an ornate unfurled parchment scroll with a feather quill and wax seal, warm candlelight, baroque still life — ornate burnished gold and burgundy palette, regal, decorative — fantasy trading card illustration, painterly digital art, dramatic cinematic lighting, framed centered composition, square format, no text, no letters, no words, no logos, no UI\",\n \"manaCost\": 3,\n \"level\": 2,\n \"invocations\": 6,\n \"lastUsed\": \"2w ago\",\n \"flavor\": \"Write for the user who reads the changelog, not the engineer who wrote the diff.\",\n \"deck\": \"Skillbook\"\n },\n \"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","{\n \"_comment\": \"Card metadata and deck layout. The canonical agent-readable source remains each skills//SKILL.md.\",\n \"valtown-mcp-app\": {\n \"type\": \"Skill — Lore\",\n \"color\": \"blue\",\n \"art\": \"🖼️\",\n \"artPrompt\": \"an ornate enchanted picture frame on a study wall, a glowing miniature world sealed behind glass that cannot spill past its border, candlelit desk — cool sapphire and pale silver palette, luminous, contained, arcane — fantasy trading card illustration, painterly digital art, dramatic cinematic lighting, framed centered composition, square format, no text, no letters, no words, no logos, no UI\",\n \"manaCost\": 2,\n \"level\": 6,\n \"invocations\": 1,\n \"lastUsed\": \"today\",\n \"flavor\": \"885 × 386, no scroll, no clicks — paint inside the frame or not at all.\",\n \"deck\": \"Skillbook\"\n },\n \"daily-standup\": {\n \"type\": \"Skill — Routine\",\n \"color\": \"blue\",\n \"art\": \"🌅\",\n \"artPrompt\": \"a peaceful sunrise over a writer's desk by a window, steaming coffee mug, open notebook, soft watercolor light — cool blue and pale silver palette, soft morning mist, serene — fantasy trading card illustration, painterly digital art, dramatic cinematic lighting, framed centered composition, square format, no text, no letters, no words, no logos, no UI\",\n \"manaCost\": 2,\n \"level\": 5,\n \"invocations\": 38,\n \"lastUsed\": \"2d ago\",\n \"flavor\": \"Yesterday's threads, today's commitments, tomorrow's traps.\",\n \"deck\": \"Skillbook\"\n },\n \"inbox-zero\": {\n \"type\": \"Skill — Maintenance\",\n \"color\": \"white\",\n \"art\": \"✉️\",\n \"artPrompt\": \"a single white origami paper plane resting on an empty wooden letter tray, soft golden window light, minimalist still life — warm cream and antique gold palette, sunlit, hopeful, clean — fantasy trading card illustration, painterly digital art, dramatic cinematic lighting, framed centered composition, square format, no text, no letters, no words, no logos, no UI\",\n \"manaCost\": 1,\n \"level\": 4,\n \"invocations\": 21,\n \"lastUsed\": \"5d ago\",\n \"flavor\": \"Three folders, no regrets: Reply, Wait, Done.\",\n \"deck\": \"Skillbook\"\n },\n \"pr-review\": {\n \"type\": \"Skill — Action\",\n \"color\": \"red\",\n \"art\": \"⚔️\",\n \"artPrompt\": \"crossed swords planted at a forked stone path on a hilltop at dusk, sparks and ember motes, heroic fantasy painting — deep ember red and amber palette, fiery energy, dynamic motion — fantasy trading card illustration, painterly digital art, dramatic cinematic lighting, framed centered composition, square format, no text, no letters, no words, no logos, no UI\",\n \"manaCost\": 3,\n \"level\": 7,\n \"invocations\": 64,\n \"lastUsed\": \"yesterday\",\n \"flavor\": \"\\\"Always create NEW commits rather than amending.\\\" — the elder agents\",\n \"deck\": \"Skillbook\"\n },\n \"bug-triage\": {\n \"type\": \"Skill — Action\",\n \"color\": \"black\",\n \"art\": \"🐛\",\n \"artPrompt\": \"a glowing bioluminescent beetle crawling across a dark server rack, dim red emergency light, moody noir illustration — deep indigo and charcoal palette, shadowy, ominous, glowing accents — fantasy trading card illustration, painterly digital art, dramatic cinematic lighting, framed centered composition, square format, no text, no letters, no words, no logos, no UI\",\n \"manaCost\": 4,\n \"level\": 3,\n \"invocations\": 11,\n \"lastUsed\": \"3w ago\",\n \"flavor\": \"The graph is red. Begin.\",\n \"deck\": \"Skillbook\"\n },\n \"code-cartographer\": {\n \"type\": \"Skill — Lookup\",\n \"color\": \"green\",\n \"art\": \"🗺️\",\n \"artPrompt\": \"an old hand-drawn parchment map of a verdant city with rivers and streets, brass compass and quill resting on it, study desk — lush emerald and moss palette, verdant, organic textures — fantasy trading card illustration, painterly digital art, dramatic cinematic lighting, framed centered composition, square format, no text, no letters, no words, no logos, no UI\",\n \"manaCost\": 2,\n \"level\": 6,\n \"invocations\": 47,\n \"lastUsed\": \"today\",\n \"flavor\": \"Every codebase is a city. Someone has to keep the map.\",\n \"deck\": \"Skillbook\"\n },\n \"release-notes\": {\n \"type\": \"Skill — Creative\",\n \"color\": \"gold\",\n \"art\": \"📜\",\n \"artPrompt\": \"an ornate unfurled parchment scroll with a feather quill and wax seal, warm candlelight, baroque still life — ornate burnished gold and burgundy palette, regal, decorative — fantasy trading card illustration, painterly digital art, dramatic cinematic lighting, framed centered composition, square format, no text, no letters, no words, no logos, no UI\",\n \"manaCost\": 3,\n \"level\": 2,\n \"invocations\": 6,\n \"lastUsed\": \"2w ago\",\n \"flavor\": \"Write for the user who reads the changelog, not the engineer who wrote the diff.\",\n \"deck\": \"Skillbook\"\n },\n \"hyperframes\": {\n \"deck\": \"HyperFrames\",\n \"type\": \"Skill — Creative\",\n \"color\": \"black\",\n \"art\": \"🎬\",\n \"artPrompt\": \"an enchanted reel of film unspooling into living scenes painted with light, HTML brackets glowing as runic sigils along the strip, a director's lantern casting cinematic beams in a dark studio — deep violet and electric magenta palette with neon cyan accents, luminous, kinetic, premium — fantasy trading card illustration, painterly digital art, dramatic cinematic lighting, framed centered composition, square format, no text, no letters, no words, no logos, no UI\",\n \"manaCost\": 4,\n \"level\": 7,\n \"invocations\": 0,\n \"lastUsed\": \"new\",\n \"flavor\": \"Write HTML. Render video. The composition is the spec.\",\n \"deck\": \"HyperFrames\"\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","createdAt",["D",1780430572107],"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=1789595999&sig=6fac8bc0bc7212c66f64aa50e972ecbb47f4393e2654ceac0cd4a0aa9fd99014","tier","pro","canRestrictVals","profileImageUrl","branchName","","adoptOrgId",{"_43":44,"_32":45,"_38":1010,"_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":1011,"_81":1012,"_83":1013,"_85":25},"tree",[190,192,288,291,294,295],"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,292,293,294,295],"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":1007,"_13":158,"_34":159,"_35":-5,"_24":25,"_143":-5,"_297":1008,"_27":1009},{"_43":999,"_32":1000,"_30":1001,"_136":175,"_41":42,"_40":1002,"_138":25,"_38":1003,"_13":176,"_34":317,"_35":1004,"_24":25,"_143":-5,"_297":1005,"_27":1006},{"_43":167,"_32":168,"_30":169,"_136":-5,"_41":42,"_40":170,"_138":59,"_38":996,"_13":158,"_34":159,"_35":-5,"_24":25,"_143":-5,"_297":997,"_27":998},{"_43":991,"_32":990,"_30":984,"_136":169,"_41":42,"_40":992,"_138":25,"_38":993,"_13":158,"_34":159,"_35":-5,"_24":25,"_143":-5,"_297":994,"_27":995},{"_43":982,"_32":349,"_30":983,"_136":984,"_41":42,"_40":985,"_138":59,"_38":986,"_13":158,"_34":20,"_35":987,"_24":25,"_143":-5,"_297":988,"_27":989},{"_43":977,"_32":976,"_30":970,"_136":169,"_41":42,"_40":978,"_138":25,"_38":979,"_13":158,"_34":159,"_35":-5,"_24":25,"_143":-5,"_297":980,"_27":981},{"_43":968,"_32":349,"_30":969,"_136":970,"_41":42,"_40":971,"_138":59,"_38":972,"_13":158,"_34":20,"_35":973,"_24":25,"_143":-5,"_297":974,"_27":975},{"_43":963,"_32":962,"_30":956,"_136":169,"_41":42,"_40":964,"_138":25,"_38":965,"_13":158,"_34":159,"_35":-5,"_24":25,"_143":-5,"_297":966,"_27":967},{"_43":954,"_32":349,"_30":955,"_136":956,"_41":42,"_40":957,"_138":59,"_38":958,"_13":158,"_34":20,"_35":959,"_24":25,"_143":-5,"_297":960,"_27":961},{"_43":949,"_32":948,"_30":942,"_136":169,"_41":42,"_40":950,"_138":25,"_38":951,"_13":158,"_34":159,"_35":-5,"_24":25,"_143":-5,"_297":952,"_27":953},{"_43":940,"_32":349,"_30":941,"_136":942,"_41":42,"_40":943,"_138":59,"_38":944,"_13":158,"_34":20,"_35":945,"_24":25,"_143":-5,"_297":946,"_27":947},{"_43":935,"_32":934,"_30":928,"_136":169,"_41":42,"_40":936,"_138":25,"_38":937,"_13":158,"_34":159,"_35":-5,"_24":25,"_143":-5,"_297":938,"_27":939},{"_43":926,"_32":349,"_30":927,"_136":928,"_41":42,"_40":929,"_138":59,"_38":930,"_13":158,"_34":20,"_35":931,"_24":25,"_143":-5,"_297":932,"_27":933},{"_43":921,"_32":920,"_30":914,"_136":169,"_41":42,"_40":922,"_138":25,"_38":923,"_13":158,"_34":159,"_35":-5,"_24":25,"_143":-5,"_297":924,"_27":925},{"_43":912,"_32":349,"_30":913,"_136":914,"_41":42,"_40":915,"_138":59,"_38":916,"_13":158,"_34":20,"_35":917,"_24":25,"_143":-5,"_297":918,"_27":919},{"_43":907,"_32":906,"_30":900,"_136":169,"_41":42,"_40":908,"_138":25,"_38":909,"_13":158,"_34":159,"_35":-5,"_24":25,"_143":-5,"_297":910,"_27":911},{"_43":898,"_32":349,"_30":899,"_136":900,"_41":42,"_40":901,"_138":59,"_38":902,"_13":158,"_34":20,"_35":903,"_24":25,"_143":-5,"_297":904,"_27":905},{"_43":893,"_32":892,"_30":886,"_136":169,"_41":42,"_40":894,"_138":25,"_38":895,"_13":158,"_34":159,"_35":-5,"_24":25,"_143":-5,"_297":896,"_27":897},{"_43":884,"_32":349,"_30":885,"_136":886,"_41":42,"_40":887,"_138":59,"_38":888,"_13":158,"_34":20,"_35":889,"_24":25,"_143":-5,"_297":890,"_27":891},{"_43":879,"_32":878,"_30":872,"_136":169,"_41":42,"_40":880,"_138":25,"_38":881,"_13":158,"_34":159,"_35":-5,"_24":25,"_143":-5,"_297":882,"_27":883},{"_43":870,"_32":349,"_30":871,"_136":872,"_41":42,"_40":873,"_138":59,"_38":874,"_13":158,"_34":20,"_35":875,"_24":25,"_143":-5,"_297":876,"_27":877},{"_43":865,"_32":864,"_30":858,"_136":169,"_41":42,"_40":866,"_138":25,"_38":867,"_13":158,"_34":159,"_35":-5,"_24":25,"_143":-5,"_297":868,"_27":869},{"_43":856,"_32":349,"_30":857,"_136":858,"_41":42,"_40":859,"_138":59,"_38":860,"_13":158,"_34":20,"_35":861,"_24":25,"_143":-5,"_297":862,"_27":863},{"_43":851,"_32":850,"_30":844,"_136":169,"_41":42,"_40":852,"_138":25,"_38":853,"_13":158,"_34":159,"_35":-5,"_24":25,"_143":-5,"_297":854,"_27":855},{"_43":842,"_32":349,"_30":843,"_136":844,"_41":42,"_40":845,"_138":59,"_38":846,"_13":158,"_34":20,"_35":847,"_24":25,"_143":-5,"_297":848,"_27":849},{"_43":837,"_32":836,"_30":830,"_136":169,"_41":42,"_40":838,"_138":25,"_38":839,"_13":158,"_34":159,"_35":-5,"_24":25,"_143":-5,"_297":840,"_27":841},{"_43":828,"_32":349,"_30":829,"_136":830,"_41":42,"_40":831,"_138":59,"_38":832,"_13":158,"_34":20,"_35":833,"_24":25,"_143":-5,"_297":834,"_27":835},{"_43":823,"_32":822,"_30":816,"_136":169,"_41":42,"_40":824,"_138":25,"_38":825,"_13":158,"_34":159,"_35":-5,"_24":25,"_143":-5,"_297":826,"_27":827},{"_43":814,"_32":349,"_30":815,"_136":816,"_41":42,"_40":817,"_138":59,"_38":818,"_13":158,"_34":20,"_35":819,"_24":25,"_143":-5,"_297":820,"_27":821},{"_43":809,"_32":808,"_30":802,"_136":169,"_41":42,"_40":810,"_138":25,"_38":811,"_13":158,"_34":159,"_35":-5,"_24":25,"_143":-5,"_297":812,"_27":813},{"_43":800,"_32":349,"_30":801,"_136":802,"_41":42,"_40":803,"_138":59,"_38":804,"_13":158,"_34":20,"_35":805,"_24":25,"_143":-5,"_297":806,"_27":807},{"_43":795,"_32":794,"_30":788,"_136":169,"_41":42,"_40":796,"_138":25,"_38":797,"_13":158,"_34":159,"_35":-5,"_24":25,"_143":-5,"_297":798,"_27":799},{"_43":786,"_32":349,"_30":787,"_136":788,"_41":42,"_40":789,"_138":59,"_38":790,"_13":158,"_34":20,"_35":791,"_24":25,"_143":-5,"_297":792,"_27":793},{"_43":781,"_32":780,"_30":774,"_136":169,"_41":42,"_40":782,"_138":25,"_38":783,"_13":158,"_34":159,"_35":-5,"_24":25,"_143":-5,"_297":784,"_27":785},{"_43":772,"_32":349,"_30":773,"_136":774,"_41":42,"_40":775,"_138":59,"_38":776,"_13":158,"_34":20,"_35":777,"_24":25,"_143":-5,"_297":778,"_27":779},{"_43":767,"_32":766,"_30":760,"_136":169,"_41":42,"_40":768,"_138":25,"_38":769,"_13":158,"_34":159,"_35":-5,"_24":25,"_143":-5,"_297":770,"_27":771},{"_43":758,"_32":349,"_30":759,"_136":760,"_41":42,"_40":761,"_138":59,"_38":762,"_13":158,"_34":20,"_35":763,"_24":25,"_143":-5,"_297":764,"_27":765},{"_43":754,"_32":706,"_30":701,"_136":169,"_41":42,"_40":140,"_138":59,"_38":755,"_13":158,"_34":159,"_35":-5,"_24":25,"_143":-5,"_297":756,"_27":757},{"_43":750,"_32":408,"_30":736,"_136":701,"_41":42,"_40":737,"_138":59,"_38":751,"_13":158,"_34":159,"_35":-5,"_24":25,"_143":-5,"_297":752,"_27":753},{"_43":742,"_32":743,"_30":744,"_136":736,"_41":42,"_40":745,"_138":59,"_38":746,"_13":158,"_34":20,"_35":747,"_24":25,"_143":-5,"_297":748,"_27":749},{"_43":733,"_32":734,"_30":735,"_136":736,"_41":42,"_40":737,"_138":59,"_38":738,"_13":158,"_34":20,"_35":739,"_24":25,"_143":-5,"_297":740,"_27":741},{"_43":729,"_32":394,"_30":723,"_136":701,"_41":42,"_40":724,"_138":59,"_38":730,"_13":158,"_34":159,"_35":-5,"_24":25,"_143":-5,"_297":731,"_27":732},{"_43":720,"_32":721,"_30":722,"_136":723,"_41":42,"_40":724,"_138":59,"_38":725,"_13":158,"_34":317,"_35":726,"_24":25,"_143":-5,"_297":727,"_27":728},{"_43":716,"_32":380,"_30":710,"_136":701,"_41":42,"_40":711,"_138":59,"_38":717,"_13":158,"_34":159,"_35":-5,"_24":25,"_143":-5,"_297":718,"_27":719},{"_43":707,"_32":708,"_30":709,"_136":710,"_41":42,"_40":711,"_138":59,"_38":712,"_13":158,"_34":20,"_35":713,"_24":25,"_143":-5,"_297":714,"_27":715},{"_43":699,"_32":349,"_30":700,"_136":701,"_41":42,"_40":140,"_138":59,"_38":702,"_13":158,"_34":20,"_35":703,"_24":25,"_143":-5,"_297":704,"_27":705},{"_43":695,"_32":652,"_30":646,"_136":169,"_41":42,"_40":647,"_138":59,"_38":696,"_13":158,"_34":159,"_35":-5,"_24":25,"_143":-5,"_297":697,"_27":698},{"_43":691,"_32":408,"_30":669,"_136":646,"_41":42,"_40":678,"_138":59,"_38":692,"_13":158,"_34":159,"_35":-5,"_24":25,"_143":-5,"_297":693,"_27":694},{"_43":683,"_32":684,"_30":685,"_136":669,"_41":42,"_40":686,"_138":59,"_38":687,"_13":158,"_34":20,"_35":688,"_24":25,"_143":-5,"_297":689,"_27":690},{"_43":675,"_32":676,"_30":677,"_136":669,"_41":42,"_40":678,"_138":59,"_38":679,"_13":158,"_34":20,"_35":680,"_24":25,"_143":-5,"_297":681,"_27":682},{"_43":666,"_32":667,"_30":668,"_136":669,"_41":42,"_40":670,"_138":59,"_38":671,"_13":158,"_34":20,"_35":672,"_24":25,"_143":-5,"_297":673,"_27":674},{"_43":662,"_32":394,"_30":656,"_136":646,"_41":42,"_40":657,"_138":59,"_38":663,"_13":158,"_34":159,"_35":-5,"_24":25,"_143":-5,"_297":664,"_27":665},{"_43":653,"_32":654,"_30":655,"_136":656,"_41":42,"_40":657,"_138":59,"_38":658,"_13":158,"_34":317,"_35":659,"_24":25,"_143":-5,"_297":660,"_27":661},{"_43":644,"_32":349,"_30":645,"_136":646,"_41":42,"_40":647,"_138":59,"_38":648,"_13":158,"_34":20,"_35":649,"_24":25,"_143":-5,"_297":650,"_27":651},{"_43":640,"_32":589,"_30":583,"_136":169,"_41":42,"_40":584,"_138":59,"_38":641,"_13":158,"_34":159,"_35":-5,"_24":25,"_143":-5,"_297":642,"_27":643},{"_43":636,"_32":408,"_30":614,"_136":583,"_41":42,"_40":631,"_138":59,"_38":637,"_13":158,"_34":159,"_35":-5,"_24":25,"_143":-5,"_297":638,"_27":639},{"_43":628,"_32":629,"_30":630,"_136":614,"_41":42,"_40":631,"_138":59,"_38":632,"_13":158,"_34":20,"_35":633,"_24":25,"_143":-5,"_297":634,"_27":635},{"_43":620,"_32":621,"_30":622,"_136":614,"_41":42,"_40":623,"_138":59,"_38":624,"_13":158,"_34":20,"_35":625,"_24":25,"_143":-5,"_297":626,"_27":627},{"_43":611,"_32":612,"_30":613,"_136":614,"_41":42,"_40":615,"_138":59,"_38":616,"_13":158,"_34":20,"_35":617,"_24":25,"_143":-5,"_297":618,"_27":619},{"_43":607,"_32":380,"_30":593,"_136":583,"_41":42,"_40":594,"_138":59,"_38":608,"_13":158,"_34":159,"_35":-5,"_24":25,"_143":-5,"_297":609,"_27":610},{"_43":599,"_32":600,"_30":601,"_136":593,"_41":42,"_40":602,"_138":59,"_38":603,"_13":158,"_34":20,"_35":604,"_24":25,"_143":-5,"_297":605,"_27":606},{"_43":590,"_32":591,"_30":592,"_136":593,"_41":42,"_40":594,"_138":59,"_38":595,"_13":158,"_34":20,"_35":596,"_24":25,"_143":-5,"_297":597,"_27":598},{"_43":581,"_32":349,"_30":582,"_136":583,"_41":42,"_40":584,"_138":59,"_38":585,"_13":158,"_34":20,"_35":586,"_24":25,"_143":-5,"_297":587,"_27":588},{"_43":577,"_32":576,"_30":570,"_136":169,"_41":42,"_40":571,"_138":25,"_38":578,"_13":158,"_34":159,"_35":-5,"_24":25,"_143":-5,"_297":579,"_27":580},{"_43":568,"_32":349,"_30":569,"_136":570,"_41":42,"_40":571,"_138":25,"_38":572,"_13":158,"_34":20,"_35":573,"_24":25,"_143":-5,"_297":574,"_27":575},{"_43":564,"_32":516,"_30":511,"_136":169,"_41":42,"_40":308,"_138":59,"_38":565,"_13":158,"_34":159,"_35":-5,"_24":25,"_143":-5,"_297":566,"_27":567},{"_43":560,"_32":408,"_30":546,"_136":511,"_41":42,"_40":555,"_138":59,"_38":561,"_13":158,"_34":159,"_35":-5,"_24":25,"_143":-5,"_297":562,"_27":563},{"_43":552,"_32":553,"_30":554,"_136":546,"_41":42,"_40":555,"_138":59,"_38":556,"_13":158,"_34":20,"_35":557,"_24":25,"_143":-5,"_297":558,"_27":559},{"_43":543,"_32":544,"_30":545,"_136":546,"_41":42,"_40":547,"_138":59,"_38":548,"_13":158,"_34":20,"_35":549,"_24":25,"_143":-5,"_297":550,"_27":551},{"_43":539,"_32":394,"_30":533,"_136":511,"_41":42,"_40":534,"_138":59,"_38":540,"_13":158,"_34":159,"_35":-5,"_24":25,"_143":-5,"_297":541,"_27":542},{"_43":530,"_32":531,"_30":532,"_136":533,"_41":42,"_40":534,"_138":59,"_38":535,"_13":158,"_34":317,"_35":536,"_24":25,"_143":-5,"_297":537,"_27":538},{"_43":526,"_32":380,"_30":520,"_136":511,"_41":42,"_40":521,"_138":59,"_38":527,"_13":158,"_34":159,"_35":-5,"_24":25,"_143":-5,"_297":528,"_27":529},{"_43":517,"_32":518,"_30":519,"_136":520,"_41":42,"_40":521,"_138":59,"_38":522,"_13":158,"_34":20,"_35":523,"_24":25,"_143":-5,"_297":524,"_27":525},{"_43":509,"_32":349,"_30":510,"_136":511,"_41":42,"_40":308,"_138":59,"_38":512,"_13":158,"_34":20,"_35":513,"_24":25,"_143":-5,"_297":514,"_27":515},{"_43":505,"_32":433,"_30":427,"_136":169,"_41":42,"_40":428,"_138":59,"_38":506,"_13":158,"_34":159,"_35":-5,"_24":25,"_143":-5,"_297":507,"_27":508},{"_43":501,"_32":408,"_30":471,"_136":427,"_41":42,"_40":496,"_138":59,"_38":502,"_13":158,"_34":159,"_35":-5,"_24":25,"_143":-5,"_297":503,"_27":504},{"_43":493,"_32":494,"_30":495,"_136":471,"_41":42,"_40":496,"_138":59,"_38":497,"_13":158,"_34":20,"_35":498,"_24":25,"_143":-5,"_297":499,"_27":500},{"_43":485,"_32":486,"_30":487,"_136":471,"_41":42,"_40":488,"_138":59,"_38":489,"_13":158,"_34":20,"_35":490,"_24":25,"_143":-5,"_297":491,"_27":492},{"_43":477,"_32":478,"_30":479,"_136":471,"_41":42,"_40":480,"_138":59,"_38":481,"_13":158,"_34":20,"_35":482,"_24":25,"_143":-5,"_297":483,"_27":484},{"_43":468,"_32":469,"_30":470,"_136":471,"_41":42,"_40":472,"_138":59,"_38":473,"_13":158,"_34":20,"_35":474,"_24":25,"_143":-5,"_297":475,"_27":476},{"_43":464,"_32":394,"_30":450,"_136":427,"_41":42,"_40":451,"_138":59,"_38":465,"_13":158,"_34":159,"_35":-5,"_24":25,"_143":-5,"_297":466,"_27":467},{"_43":456,"_32":457,"_30":458,"_136":450,"_41":42,"_40":459,"_138":59,"_38":460,"_13":158,"_34":317,"_35":461,"_24":25,"_143":-5,"_297":462,"_27":463},{"_43":447,"_32":448,"_30":449,"_136":450,"_41":42,"_40":451,"_138":59,"_38":452,"_13":158,"_34":317,"_35":453,"_24":25,"_143":-5,"_297":454,"_27":455},{"_43":443,"_32":380,"_30":437,"_136":427,"_41":42,"_40":438,"_138":59,"_38":444,"_13":158,"_34":159,"_35":-5,"_24":25,"_143":-5,"_297":445,"_27":446},{"_43":434,"_32":435,"_30":436,"_136":437,"_41":42,"_40":438,"_138":59,"_38":439,"_13":158,"_34":20,"_35":440,"_24":25,"_143":-5,"_297":441,"_27":442},{"_43":425,"_32":349,"_30":426,"_136":427,"_41":42,"_40":428,"_138":59,"_38":429,"_13":158,"_34":20,"_35":430,"_24":25,"_143":-5,"_297":431,"_27":432},{"_43":421,"_32":370,"_30":364,"_136":169,"_41":42,"_40":365,"_138":59,"_38":422,"_13":158,"_34":159,"_35":-5,"_24":25,"_143":-5,"_297":423,"_27":424},{"_43":417,"_32":408,"_30":402,"_136":364,"_41":42,"_40":412,"_138":59,"_38":418,"_13":158,"_34":159,"_35":-5,"_24":25,"_143":-5,"_297":419,"_27":420},{"_43":409,"_32":410,"_30":411,"_136":402,"_41":42,"_40":412,"_138":59,"_38":413,"_13":158,"_34":20,"_35":414,"_24":25,"_143":-5,"_297":415,"_27":416},{"_43":399,"_32":400,"_30":401,"_136":402,"_41":42,"_40":403,"_138":59,"_38":404,"_13":158,"_34":20,"_35":405,"_24":25,"_143":-5,"_297":406,"_27":407},{"_43":395,"_32":394,"_30":388,"_136":364,"_41":42,"_40":389,"_138":59,"_38":396,"_13":158,"_34":159,"_35":-5,"_24":25,"_143":-5,"_297":397,"_27":398},{"_43":385,"_32":386,"_30":387,"_136":388,"_41":42,"_40":389,"_138":59,"_38":390,"_13":158,"_34":317,"_35":391,"_24":25,"_143":-5,"_297":392,"_27":393},{"_43":381,"_32":380,"_30":374,"_136":364,"_41":42,"_40":375,"_138":59,"_38":382,"_13":158,"_34":159,"_35":-5,"_24":25,"_143":-5,"_297":383,"_27":384},{"_43":371,"_32":372,"_30":373,"_136":374,"_41":42,"_40":375,"_138":59,"_38":376,"_13":158,"_34":20,"_35":377,"_24":25,"_143":-5,"_297":378,"_27":379},{"_43":362,"_32":349,"_30":363,"_136":364,"_41":42,"_40":365,"_138":59,"_38":366,"_13":158,"_34":20,"_35":367,"_24":25,"_143":-5,"_297":368,"_27":369},{"_43":358,"_32":357,"_30":351,"_136":169,"_41":42,"_40":352,"_138":59,"_38":359,"_13":158,"_34":159,"_35":-5,"_24":25,"_143":-5,"_297":360,"_27":361},{"_43":348,"_32":349,"_30":350,"_136":351,"_41":42,"_40":352,"_138":59,"_38":353,"_13":158,"_34":20,"_35":354,"_24":25,"_143":-5,"_297":355,"_27":356},{"_43":344,"_32":33,"_30":31,"_136":169,"_41":42,"_40":14,"_138":25,"_38":345,"_13":188,"_34":20,"_35":37,"_24":25,"_143":-5,"_297":346,"_27":347},{"_43":161,"_32":162,"_30":163,"_136":-5,"_41":42,"_40":164,"_138":59,"_38":341,"_13":158,"_34":159,"_35":-5,"_24":25,"_143":-5,"_297":342,"_27":343},{"_43":333,"_32":334,"_30":335,"_136":163,"_41":42,"_40":336,"_138":59,"_38":337,"_13":150,"_34":141,"_35":338,"_24":25,"_143":-5,"_297":339,"_27":340},{"_43":324,"_32":325,"_30":326,"_136":163,"_41":42,"_40":327,"_138":59,"_38":328,"_13":329,"_34":20,"_35":330,"_24":25,"_143":-5,"_297":331,"_27":332},{"_43":153,"_32":154,"_30":155,"_136":-5,"_41":42,"_40":156,"_138":59,"_38":321,"_13":158,"_34":159,"_35":-5,"_24":25,"_143":-5,"_297":322,"_27":323},{"_43":312,"_32":313,"_30":314,"_136":155,"_41":42,"_40":315,"_138":25,"_38":316,"_13":308,"_34":317,"_35":318,"_24":25,"_143":-5,"_297":319,"_27":320},{"_43":303,"_32":304,"_30":305,"_136":155,"_41":42,"_40":306,"_138":25,"_38":307,"_13":308,"_34":20,"_35":309,"_24":25,"_143":-5,"_297":310,"_27":311},{"_43":145,"_32":146,"_30":147,"_136":-5,"_41":42,"_40":148,"_138":25,"_38":300,"_13":150,"_34":20,"_35":151,"_24":25,"_143":-5,"_297":301,"_27":302},{"_43":134,"_32":135,"_30":57,"_136":-5,"_41":42,"_40":137,"_138":25,"_38":296,"_13":140,"_34":141,"_35":142,"_24":25,"_143":45,"_297":298,"_27":299},["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,304],"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,313],["D",1779815151548],[292,293],[154],"cd7b7b2c-5e95-11f1-9652-1607ee4eb77e","ui.html","69a25d74-5e3a-11f1-ac47-1607ee4eb77e",145,["D",1780413291513],5,"\n\n\n\n\nsprite-builder · skillbook\n\n\n\n

🎨 sprite-builder

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

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

\n Kind\n \n

\n Model\n \n

\n Quality\n \n

\n Size\n \n

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

\n\n

\n \n

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

\n\n\n\n\n",[],[162,325],"ca63e0b4-5e95-11f1-bb0e-1607ee4eb77e","index.tsx","552ffd56-5e3a-11f1-b60a-1607ee4eb77e",144,["D",1780413286369],"/** sprite-builder — token-gated, reference-conditioned pixel-art generator.\n *\n * Workflow (per dcm31): feed an existing sprite SHEET → get a new sheet in the\n * same grid/style; feed a tile/tileset → get a new tile. The server returns the\n * RAW model output (no destructive downscale). Slicing a sheet into frames /\n * cropping a tile happens downstream (UI button or the village renderer).\n *\n * Protection reuses skillbook's card-art pattern so the public key can't be\n * spammed: x-skillbook-art-admin must match ART_ADMIN_TOKEN (else 404), uses\n * SKILLBOOK_OPENAI_API_KEY, plus a per-day cap + blob cache. Separate http\n * file — main.tsx is untouched.\n */\nimport { Hono } from \"npm:hono@4\";\nimport { parseVal, serveFile } from \"https://esm.town/v/std/utils/index.ts\";\nimport { blob } from \"https://esm.town/v/std/blob\";\n\nconst AITOWN = \"https://raw.githubusercontent.com/a16z-infra/ai-town/main\";\n// sprite-animator is the canonical reference val: its built-in walk-cycle sheet\n// is served live and used as the default CHARACTER reference here. Tiles still\n// use the AI Town tileset. Either is overridable per-request with refUrl.\nconst SPRITE_ANIMATOR = \"https://dcm31--a0f721e05e3711f1b6c61607ee4eb77e.web.val.run\";\nconst REFS: Record = {\n character: `${SPRITE_ANIMATOR}/api/sheets/sample/image`,\n tile: `${AITOWN}/public/assets/gentle-obj.png`,\n};\nconst DEFAULT_PROMPT: Record = {\n character:\n \"Generate a complete character sprite SHEET that matches the reference sheet EXACTLY in grid layout, cell size, number of rows and columns, palette and pixel-art style. Rows are character facings and columns are walk-cycle frames, in the SAME arrangement as the reference. One single new distinct character, one pose per cell, consistent across all cells. Transparent background. No text, labels, numbers, grid lines, or border.\",\n tile:\n \"Generate ONE new top-down map tile in the EXACT pixel-art style and palette of the reference. A single motif filling the frame edge-to-edge on a transparent background so it can be cropped to a square tile. No text, no grid lines, no border.\",\n};\nconst DEFAULT_SIZE: Record = { character: \"1024x1536\", tile: \"1024x1024\" };\nconst ALLOWED_SIZE = [\"1024x1024\", \"1024x1536\", \"1536x1024\", \"auto\"];\nconst DAILY_CAP = 40;\nconst PREFIX = \"skillbook/sprites/v1\";\n\nconst app = new Hono();\napp.onError((err) => Promise.reject(err));\n\nconst b64ToBytes = (s: string) => {\n const bin = atob(s); const a = new Uint8Array(bin.length);\n for (let i = 0; i < bin.length; i++) a[i] = bin.charCodeAt(i);\n return a;\n};\nconst bytesToB64 = (bytes: Uint8Array) => {\n let bin = \"\"; for (let i = 0; i < bytes.length; i++) bin += String.fromCharCode(bytes[i]);\n return btoa(bin);\n};\nconst dataUrl = (bytes: Uint8Array) => `data:image/png;base64,${bytesToB64(bytes)}`;\nfunction hash(s: string) {\n let h = 2166136261;\n for (let i = 0; i < s.length; i++) { h ^= s.charCodeAt(i); h = Math.imul(h, 16777619); }\n return (h >>> 0).toString(36);\n}\n\napp.get(\"/\", () => serveFile(\"/sprite-builder/ui.html\", import.meta.url));\napp.get(\"/source\", (c) => c.redirect(parseVal().links.self.val));\n\n// Public read of a generated image (stable URL).\napp.get(\"/sprite/:key\", async (c) => {\n const key = c.req.param(\"key\");\n if (!/^[a-z0-9-]+$/.test(key)) return c.text(\"bad key\", 400);\n try {\n const r = await blob.get(`${PREFIX}/${key}.png`);\n if (r?.ok) {\n const buf = await r.arrayBuffer();\n if (buf.byteLength) {\n return new Response(buf, {\n headers: { \"content-type\": \"image/png\", \"cache-control\": \"public, max-age=604800, immutable\" },\n });\n }\n }\n } catch {}\n return c.text(\"not found\", 404);\n});\n\napp.post(\"/generate\", async (c) => {\n // --- same gate as the card-art route: no/!match token => 404 ---\n const admin = Deno.env.get(\"ART_ADMIN_TOKEN\");\n if (!admin || c.req.header(\"x-skillbook-art-admin\") !== admin) return c.text(\"not found\", 404);\n\n const body = await c.req.json().catch(() => ({} as any));\n const kind = body.kind === \"tile\" ? \"tile\" : \"character\";\n const prompt = (typeof body.prompt === \"string\" && body.prompt.trim()) || DEFAULT_PROMPT[kind];\n const ALLOWED_MODELS = [\"gpt-image-2\", \"gpt-image-1.5\", \"gpt-image-1\", \"gpt-image-1-mini\"];\n const model = ALLOWED_MODELS.includes(body.model) ? body.model : \"gpt-image-1.5\";\n // gpt-image-2 is OpenAI's newest/sharpest, but it can't render transparent\n // backgrounds — sprites need alpha — so gpt-image-1.5 is the default.\n const transparent = model !== \"gpt-image-2\";\n const quality = [\"low\", \"medium\", \"high\"].includes(body.quality) ? body.quality : \"low\";\n const size = ALLOWED_SIZE.includes(body.size) ? body.size : DEFAULT_SIZE[kind];\n const refUrl = typeof body.refUrl === \"string\" && body.refUrl.startsWith(\"https://\") ? body.refUrl : REFS[kind];\n const force = body.force === true;\n\n const key = `${kind}-${hash(model + \"|\" + quality + \"|\" + size + \"|\" + refUrl + \"|\" + prompt)}`;\n\n if (!force) {\n try {\n const raw = await blob.get(`${PREFIX}/${key}.png`);\n if (raw?.ok) {\n const rb = new Uint8Array(await raw.arrayBuffer());\n if (rb.length) return c.json({ ok: true, cached: true, key, kind, model, quality, size, prompt, rawDataUrl: dataUrl(rb), spriteUrl: `./sprite/${key}` });\n }\n } catch {}\n }\n\n // per-day cap (cheap backstop if the token ever leaks)\n const day = new Date().toISOString().slice(0, 10);\n const quotaKey = `${PREFIX}/quota-${day}`;\n let used = 0;\n try { used = ((await blob.getJSON(quotaKey)) as number) || 0; } catch {}\n if (used >= DAILY_CAP) return c.json({ ok: false, error: `daily cap of ${DAILY_CAP} reached` }, 429);\n\n const refResp = await fetch(refUrl);\n if (!refResp.ok) return c.json({ ok: false, error: \"could not fetch reference image\" }, 502);\n const refBytes = new Uint8Array(await refResp.arrayBuffer());\n\n const KEY = Deno.env.get(\"SKILLBOOK_OPENAI_API_KEY\") ?? Deno.env.get(\"OPENAI_API_KEY\");\n if (!KEY) return c.json({ ok: false, error: \"art key missing\" }, 503);\n\n const form = new FormData();\n form.set(\"model\", model);\n form.set(\"prompt\", prompt);\n form.set(\"size\", size);\n form.set(\"quality\", quality);\n if (transparent) form.set(\"background\", \"transparent\");\n form.set(\"output_format\", \"png\");\n form.set(\"image\", new File([refBytes], \"reference.png\", { type: \"image/png\" }));\n\n const r = await fetch(\"https://api.openai.com/v1/images/edits\", {\n method: \"POST\",\n headers: { authorization: \"Bearer \" + KEY },\n body: form,\n });\n const json = await r.json().catch(() => ({} as any));\n if (!r.ok) {\n console.error(\"openai edits failed\", json);\n return c.json({ ok: false, error: json?.error?.message || \"image edit error\" }, 502);\n }\n const outB64 = json?.data?.[0]?.b64_json;\n if (!outB64) return c.json({ ok: false, error: \"no image in OpenAI response\" }, 502);\n const rawBytes = b64ToBytes(outB64);\n\n try {\n await blob.set(`${PREFIX}/${key}.png`, rawBytes);\n await blob.setJSON(quotaKey, used + 1);\n } catch (e) { console.error(\"cache write failed\", e); }\n\n return c.json({ ok: true, cached: false, key, kind, model, quality, size, prompt, rawDataUrl: dataUrl(rawBytes), spriteUrl: `./sprite/${key}` });\n});\n\nexport default app.fetch;\n",[],[162,334],["D",1780374005541],[289,290],[162],"097dc56c-5ebe-11f1-894d-1607ee4eb77e",["D",1780430572107],[],[168,33],"5adcb4ce-5e99-11f1-a034-1607ee4eb77e","SKILL.md","5adcb56e-5e99-11f1-a034-1607ee4eb77e","fd668265-bc64-4e47-a723-83718aed95d2",146,["D",1780414817247],"---\nname: valtown-mcp-app\ndescription: Render a val's HTTP response as a visual card inside Claude via the Val Town MCP — a fixed ~885x386 frame, static and non-interactive, clipped to content height\ntriggers:\n - render a val in chat\n - val town mcp app\n - show this val inline\n - fetch val endpoint render\n - why is my val render blank\n - my val render is getting clipped\n---\n\n# Val Town MCP — rendering a val inline in Claude\n\nThe Val Town MCP can display a val's HTTP response as a visual widget inside a Claude conversation. Treat the output as a **static poster in a fixed, no-scroll frame** — not a live web page, and not interactive.\n\n## What triggers a render\n\n- A render only happens when you call **`fetch_val_endpoint`**. The `run: { kind: \"fetch_val_endpoint\" }` option on `update_file` / `replace_in_file` counts, because it calls the same thing.\n- `create_file`, `update_file`, `list_files`, etc. show a *file / diff* widget, **not** the rendered HTML. Don't expect them to preview a page.\n- `fetch_val_endpoint` also returns the response (status + headers + body) to you as text, so it doubles as your inspect/debug tool. The endpoint is public.\n\n## The frame (measured)\n\n- Fixed size **≈ 885 × 386 px** — wide and short, aspect ≈ 2.3:1. It can vary slightly with client width, so design with a little margin.\n- **No scroll.** The iframe is sized to the document's *content height* and then clipped inside the fixed frame. Anything past ~386px tall is **cut off at the bottom** — there is no scrollbar.\n- You don't control the frame height from inside it, so you can't vertically center to it. Top-aligned content with empty space below is fine; overflow is not.\n\n## Hard rules (break these and the render fails)\n\n- **Never use `height:100vh`, `height:100%` on html/body, or `position:fixed` for layout.** Because the iframe is content-sized, viewport-relative heights resolve to ~0 and the whole thing renders **blank**. Use **normal document flow** with `auto` / explicit `px` heights.\n- **It is not interactive.** Clicks do not toggle CSS `:checked`, fire handlers, or submit forms — a click appears to **open / navigate to the val** instead. So:\n - No tabs, accordions, modals, hover-to-reveal, or anything that needs a click or tap.\n - Don't rely on `\n \n \n\n```\n\nLoad in root: `

`\n\n## Variables (Parametrized Compositions)\n\nRender the same composition with different content — title, theme color, prices, captions — without editing the source HTML.\n\n**Three-step pattern:**\n\n1. **Declare** variables on the composition's `` root with `data-composition-variables`. Each entry needs `id`, `type` (one of `string`, `number`, `color`, `boolean`, `enum`), `label`, and `default`. Enum entries also need `options: [{value, label}, ...]`.\n2. **Read** the resolved values inside the composition's script with `window.__hyperframes.getVariables()`. Returns the merged result of declared defaults + per-instance overrides + CLI overrides.\n3. **Override** at render time with `npx hyperframes render --variables '{...}'` (top-level) or with `data-variable-values='{...}'` on the host element (per-instance for sub-comps).\n\n```html\n\n\n \n

\n \n

\n \n\n```\n\n```bash\n# Dev preview uses declared defaults\nnpx hyperframes preview\n\n# Render with overrides\nnpx hyperframes render --variables '{\"title\":\"Q4 Report\",\"theme\":\"dark\"}' --output q4.mp4\n\n# Or from a JSON file\nnpx hyperframes render --variables-file ./vars.json\n```\n\n**Sub-composition per-instance values:** the same `getVariables()` works inside sub-comps loaded via `data-composition-src`. Each host element passes its own values:\n\n```html\n\n\n```\n\nThe runtime layers each host's `data-variable-values` over the sub-comp's declared defaults on a per-instance basis, so the same source can be embedded multiple times with different content.\n\n**Rules of thumb:**\n\n- Always provide a sensible `default` for every declared variable. Dev preview uses defaults — without them, the composition won't render correctly until `--variables` is provided.\n- Read variables once at the top of the script (`const { title } = ...`), not inside frame loops or event handlers — `getVariables()` allocates a fresh object per call.\n- Use `--strict-variables` in CI to fail fast on undeclared keys or type mismatches.\n- Variable types are validated at render time. `string`, `number`, `boolean`, and `color` (hex string) check `typeof`; `enum` checks the value is in the declared `options`.\n\n## Video and Audio\n\nVideo must be `muted playsinline`. Audio is always a separate `

\n```\n\n## Timeline Contract\n\n- All timelines start `{ paused: true }` — the player controls playback\n- Register every timeline: `window.__timelines[\"\"] = tl`\n- Framework auto-nests sub-timelines — do NOT manually add them\n- Duration comes from `data-duration`, not from GSAP timeline length\n- Never create empty tweens to set duration\n\n## Rules (Non-Negotiable)\n\n**Deterministic:** No `Math.random()`, `Date.now()`, or time-based logic. Use a seeded PRNG if you need pseudo-random values (e.g. mulberry32).\n\n**GSAP:** Only animate visual properties (`opacity`, `x`, `y`, `scale`, `rotation`, `color`, `backgroundColor`, `borderRadius`, transforms). Do NOT animate `visibility`, `display`, or call `video.play()`/`audio.play()`.\n\n**Animation conflicts:** Never animate the same property on the same element from multiple timelines simultaneously.\n\n**No `repeat: -1`:** Infinite-repeat timelines break the capture engine. Calculate the exact repeat count from composition duration: `repeat: Math.ceil(duration / cycleDuration) - 1`.\n\n**Synchronous timeline construction:** Never build timelines inside `async`/`await`, `setTimeout`, or Promises. The capture engine reads `window.__timelines` synchronously after page load. Fonts are embedded by the compiler, so they're available immediately — no need to wait for font loading.\n\n**Never do:**\n\n1. Forget `window.__timelines` registration\n2. Use video for audio — always muted video + separate `

Memories (stickers)

Templates

Scripts

Memories

Files

${esc(deck)}

🎨 sprite-builder

Diff · v149