Skillbook

SKILLS.md meets MTG

\n \n \n

\n\n

\n\n \n\n \n\n \n \n\n\n",[],[155,349],"d3974e4a-fd69-4105-aaf3-d4332c0c5675","client.js","37b85f62-5925-11f1-8789-ee650bb23af1",197,["D",1781279014967],"script","import { marked } from \"https://esm.sh/marked@12\";\n\nconst COLOR_BG = {\n blue: \"card-bg-blue\",\n white: \"card-bg-white\",\n red: \"card-bg-red\",\n black: \"card-bg-black\",\n green: \"card-bg-green\",\n gold: \"card-bg-gold\",\n anthropic: \"card-bg-anthropic\",\n valtown: \"card-bg-valtown\",\n};\n\nconst STICKER_CLASS = {\n feedback: \"bg-yellow-100 border-yellow-500 text-yellow-900\",\n project: \"bg-sky-100 border-sky-500 text-sky-900\",\n reference: \"bg-emerald-100 border-emerald-500 text-emerald-900\",\n user: \"bg-pink-100 border-pink-500 text-pink-900\",\n};\n\nconst binder = document.getElementById(\"binder\");\nconst tmpl = document.getElementById(\"card-template\");\nconst search = document.getElementById(\"search\");\nconst shuffleBtn = document.getElementById(\"shuffle\");\nconst modal = document.getElementById(\"modal\");\nconst modalPanel = document.getElementById(\"modal-panel\");\nconst modalClose = document.getElementById(\"modal-close\");\nconst modalTitle = document.getElementById(\"modal-title\");\nconst modalMeta = document.getElementById(\"modal-meta\");\nconst modalTriggers = document.getElementById(\"modal-triggers\");\nconst modalMd = document.getElementById(\"modal-md\");\nconst modalMemories = document.getElementById(\"modal-memories\");\nconst modalTemplates = document.getElementById(\"modal-templates\");\nconst modalScripts = document.getElementById(\"modal-scripts\");\nconst skillbookConfig = window.SKILLBOOK_CONFIG || {};\nconst codeBase = skillbookConfig.codeBase || \"https://www.val.town/x/dcm31/skillbook/code\";\n\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 // Inline style, not the `hidden` utility: the twind CDN shim collapses the\n // class attribute into a hashed class, so classList toggles on utilities no-op.\n modal.style.display = \"flex\";\n document.body.classList.add(\"modal-open\");\n modalPanel.scrollTop = 0;\n}\n\nfunction closeModal() {\n modal.style.display = \"none\";\n document.body.classList.remove(\"modal-open\");\n}\n\nmodalClose.addEventListener(\"click\", closeModal);\nmodal.addEventListener(\"click\", (e) => {\n if (e.target === modal) closeModal();\n});\ndocument.addEventListener(\"keydown\", (e) => {\n if (e.key === \"Escape\" && modal.style.display === \"flex\") closeModal();\n});\n\nfunction render() {\n binder.innerHTML = \"\";\n const q = (search.value || \"\").toLowerCase().trim();\n const 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}?v=2`; // version-bust: pre-fix placeholder responses were immutable-cached for a week\n img.addEventListener(\"load\", () => img.classList.add(\"loaded\"));\n img.addEventListener(\"error\", () => img.remove());\n if (artObserver) artObserver.observe(img);\n else loadArt(img);\n\n node.querySelector(\".type-line\").textContent = s.type;\n node.querySelector(\".description\").textContent = s.description;\n node.querySelector(\".triggers\").innerHTML = `\n Say\n “${esc(s.triggers[0] || s.name)}”\n `;\n node.querySelector(\".flavor\").textContent = `\"${s.flavor}\"`;\n node.querySelector(\".level\").textContent = `Lv ${s.level}`;\n node.querySelector(\".last-used\").textContent = `${s.invocations}× · ${s.lastUsed}`;\n\n // Back face\n node.querySelector(\".open-file\").href = `${codeBase}/skills/${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 — click anywhere on the card toggles it (links and the\n // expand button excepted; the expanded lightbox never flips the card).\n const flip = () => node.classList.toggle(\"flipped\");\n node.addEventListener(\"click\", (e) => {\n if (e.target.closest(\"a\")) return;\n if (e.target.closest(\".expand-card\")) {\n e.stopPropagation();\n openModal(s.slug);\n return;\n }\n if (e.target.closest(\".flip-back\")) {\n e.stopPropagation();\n node.classList.remove(\"flipped\");\n return;\n }\n flip();\n });\n node.addEventListener(\"keydown\", (e) => {\n if (e.key === \"Enter\" || e.key === \" \") {\n if (e.target !== node) return;\n e.preventDefault();\n flip();\n } else if (e.key === \"Escape\") {\n node.classList.remove(\"flipped\");\n }\n });\n\n // Drag-and-drop reorder\n node.addEventListener(\"dragstart\", (e) => {\n node.classList.add(\"drag-ghost\");\n e.dataTransfer.setData(\"text/plain\", s.slug);\n e.dataTransfer.effectAllowed = \"move\";\n });\n node.addEventListener(\"dragend\", () => node.classList.remove(\"drag-ghost\"));\n node.addEventListener(\"dragover\", (e) => {\n e.preventDefault();\n e.dataTransfer.dropEffect = \"move\";\n node.classList.add(\"drop-target\");\n });\n node.addEventListener(\"dragleave\", () => node.classList.remove(\"drop-target\"));\n node.addEventListener(\"drop\", (e) => {\n e.preventDefault();\n node.classList.remove(\"drop-target\");\n const fromSlug = e.dataTransfer.getData(\"text/plain\");\n if (!fromSlug || fromSlug === s.slug) return;\n const fromIdx = skills.findIndex((x) => x.slug === fromSlug);\n const toIdx = skills.findIndex((x) => x.slug === s.slug);\n if (fromIdx < 0 || toIdx < 0) return;\n const [moved] = skills.splice(fromIdx, 1);\n skills.splice(toIdx, 0, moved);\n render();\n });\n\n grid.appendChild(node);\n }\n binder.appendChild(section);\n }\n}\n\nsearch.addEventListener(\"input\", render);\nshuffleBtn.addEventListener(\"click\", () => {\n for (let i = skills.length - 1; i > 0; i--) {\n const j = Math.floor(Math.random() * (i + 1));\n [skills[i], skills[j]] = [skills[j], skills[i]];\n }\n render();\n});\n\nload();\n",[],[155,358],["D",1779815151548],[337,338],[155],"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,370],"ca63e0b4-5e95-11f1-bb0e-1607ee4eb77e","index.tsx","552ffd56-5e3a-11f1-b60a-1607ee4eb77e",144,["D",1780413286369],7,"/** sprite-builder — token-gated, reference-conditioned pixel-art generator.\n *\n * Workflow (per dcm31): feed an existing sprite SHEET → get a new sheet in the\n * same grid/style; feed a tile/tileset → get a new tile. The server returns the\n * RAW model output (no destructive downscale). Slicing a sheet into frames /\n * cropping a tile happens downstream (UI button or the village renderer).\n *\n * Protection reuses skillbook's card-art pattern so the public key can't be\n * spammed: x-skillbook-art-admin must match ART_ADMIN_TOKEN (else 404), uses\n * SKILLBOOK_OPENAI_API_KEY, plus a per-day cap + blob cache. Separate http\n * file — main.tsx is untouched.\n */\nimport { Hono } from \"npm:hono@4\";\nimport { parseVal, serveFile } from \"https://esm.town/v/std/utils/index.ts\";\nimport { blob } from \"https://esm.town/v/std/blob\";\n\nconst AITOWN = \"https://raw.githubusercontent.com/a16z-infra/ai-town/main\";\n// sprite-animator is the canonical reference val: its built-in walk-cycle sheet\n// is served live and used as the default CHARACTER reference here. Tiles still\n// use the AI Town tileset. Either is overridable per-request with refUrl.\nconst SPRITE_ANIMATOR = \"https://dcm31--a0f721e05e3711f1b6c61607ee4eb77e.web.val.run\";\nconst REFS: Record = {\n character: `${SPRITE_ANIMATOR}/api/sheets/sample/image`,\n tile: `${AITOWN}/public/assets/gentle-obj.png`,\n};\nconst DEFAULT_PROMPT: Record = {\n character:\n \"Generate a complete character sprite SHEET that matches the reference sheet EXACTLY in grid layout, cell size, number of rows and columns, palette and pixel-art style. Rows are character facings and columns are walk-cycle frames, in the SAME arrangement as the reference. One single new distinct character, one pose per cell, consistent across all cells. Transparent background. No text, labels, numbers, grid lines, or border.\",\n tile:\n \"Generate ONE new top-down map tile in the EXACT pixel-art style and palette of the reference. A single motif filling the frame edge-to-edge on a transparent background so it can be cropped to a square tile. No text, no grid lines, no border.\",\n};\nconst DEFAULT_SIZE: Record = { character: \"1024x1536\", tile: \"1024x1024\" };\nconst ALLOWED_SIZE = [\"1024x1024\", \"1024x1536\", \"1536x1024\", \"auto\"];\nconst DAILY_CAP = 40;\nconst PREFIX = \"skillbook/sprites/v1\";\n\nconst app = new Hono();\napp.onError((err) => Promise.reject(err));\n\nconst b64ToBytes = (s: string) => {\n const bin = atob(s); const a = new Uint8Array(bin.length);\n for (let i = 0; i < bin.length; i++) a[i] = bin.charCodeAt(i);\n return a;\n};\nconst bytesToB64 = (bytes: Uint8Array) => {\n let bin = \"\"; for (let i = 0; i < bytes.length; i++) bin += String.fromCharCode(bytes[i]);\n return btoa(bin);\n};\nconst dataUrl = (bytes: Uint8Array) => `data:image/png;base64,${bytesToB64(bytes)}`;\nfunction hash(s: string) {\n let h = 2166136261;\n for (let i = 0; i < s.length; i++) { h ^= s.charCodeAt(i); h = Math.imul(h, 16777619); }\n return (h >>> 0).toString(36);\n}\n\napp.get(\"/\", () => serveFile(\"/sprite-builder/ui.html\", import.meta.url));\napp.get(\"/source\", (c) => c.redirect(parseVal().links.self.val));\n\n// Public read of a generated image (stable URL).\napp.get(\"/sprite/:key\", async (c) => {\n const key = c.req.param(\"key\");\n if (!/^[a-z0-9-]+$/.test(key)) return c.text(\"bad key\", 400);\n try {\n const r = await blob.get(`${PREFIX}/${key}.png`);\n if (r?.ok) {\n const buf = await r.arrayBuffer();\n if (buf.byteLength) {\n return new Response(buf, {\n headers: { \"content-type\": \"image/png\", \"cache-control\": \"public, max-age=604800, immutable\" },\n });\n }\n }\n } catch {}\n return c.text(\"not found\", 404);\n});\n\napp.post(\"/generate\", async (c) => {\n // --- same gate as the card-art route: no/!match token => 404 ---\n const admin = Deno.env.get(\"ART_ADMIN_TOKEN\");\n if (!admin || c.req.header(\"x-skillbook-art-admin\") !== admin) return c.text(\"not found\", 404);\n\n const body = await c.req.json().catch(() => ({} as any));\n const kind = body.kind === \"tile\" ? \"tile\" : \"character\";\n const prompt = (typeof body.prompt === \"string\" && body.prompt.trim()) || DEFAULT_PROMPT[kind];\n const ALLOWED_MODELS = [\"gpt-image-2\", \"gpt-image-1.5\", \"gpt-image-1\", \"gpt-image-1-mini\"];\n const model = ALLOWED_MODELS.includes(body.model) ? body.model : \"gpt-image-1.5\";\n // gpt-image-2 is OpenAI's newest/sharpest, but it can't render transparent\n // backgrounds — sprites need alpha — so gpt-image-1.5 is the default.\n const transparent = model !== \"gpt-image-2\";\n const quality = [\"low\", \"medium\", \"high\"].includes(body.quality) ? body.quality : \"low\";\n const size = ALLOWED_SIZE.includes(body.size) ? body.size : DEFAULT_SIZE[kind];\n const refUrl = typeof body.refUrl === \"string\" && body.refUrl.startsWith(\"https://\") ? body.refUrl : REFS[kind];\n const force = body.force === true;\n\n const key = `${kind}-${hash(model + \"|\" + quality + \"|\" + size + \"|\" + refUrl + \"|\" + prompt)}`;\n\n if (!force) {\n try {\n const raw = await blob.get(`${PREFIX}/${key}.png`);\n if (raw?.ok) {\n const rb = new Uint8Array(await raw.arrayBuffer());\n if (rb.length) return c.json({ ok: true, cached: true, key, kind, model, quality, size, prompt, rawDataUrl: dataUrl(rb), spriteUrl: `./sprite/${key}` });\n }\n } catch {}\n }\n\n // per-day cap (cheap backstop if the token ever leaks)\n const day = new Date().toISOString().slice(0, 10);\n const quotaKey = `${PREFIX}/quota-${day}`;\n let used = 0;\n try { used = ((await blob.getJSON(quotaKey)) as number) || 0; } catch {}\n if (used >= DAILY_CAP) return c.json({ ok: false, error: `daily cap of ${DAILY_CAP} reached` }, 429);\n\n const refResp = await fetch(refUrl);\n if (!refResp.ok) return c.json({ ok: false, error: \"could not fetch reference image\" }, 502);\n const refBytes = new Uint8Array(await refResp.arrayBuffer());\n\n const KEY = Deno.env.get(\"SKILLBOOK_OPENAI_API_KEY\") ?? Deno.env.get(\"OPENAI_API_KEY\");\n if (!KEY) return c.json({ ok: false, error: \"art key missing\" }, 503);\n\n const form = new FormData();\n form.set(\"model\", model);\n form.set(\"prompt\", prompt);\n form.set(\"size\", size);\n form.set(\"quality\", quality);\n if (transparent) form.set(\"background\", \"transparent\");\n form.set(\"output_format\", \"png\");\n form.set(\"image\", new File([refBytes], \"reference.png\", { type: \"image/png\" }));\n\n const r = await fetch(\"https://api.openai.com/v1/images/edits\", {\n method: \"POST\",\n headers: { authorization: \"Bearer \" + KEY },\n body: form,\n });\n const json = await r.json().catch(() => ({} as any));\n if (!r.ok) {\n console.error(\"openai edits failed\", json);\n return c.json({ ok: false, error: json?.error?.message || \"image edit error\" }, 502);\n }\n const outB64 = json?.data?.[0]?.b64_json;\n if (!outB64) return c.json({ ok: false, error: \"no image in OpenAI response\" }, 502);\n const rawBytes = b64ToBytes(outB64);\n\n try {\n await blob.set(`${PREFIX}/${key}.png`, rawBytes);\n await blob.setJSON(quotaKey, used + 1);\n } catch (e) { console.error(\"cache write failed\", e); }\n\n return c.json({ ok: true, cached: false, key, kind, model, quality, size, prompt, rawDataUrl: dataUrl(rawBytes), spriteUrl: `./sprite/${key}` });\n});\n\nexport default app.fetch;\n",[],[162,379],["D",1780374005541],[334,335],[162],"5aa1715c-0c39-4ef7-af94-c9a457921899","_index.json","4368c0f2-5927-11f1-8ea0-ee650bb23af1",195,["D",1781279011657],"{\n \"_comment\": \"Card metadata and deck layout. The canonical agent-readable source remains each skills//SKILL.md.\",\n \"pixel-diorama-app\": {\n \"type\": \"Skill — Craft\",\n \"color\": \"green\",\n \"art\": \"🏡\",\n \"artPrompt\": \"a craftsman's hands placing a tiny owl figurine inside a handmade wooden diorama box of a miniature library room — tiny bookcases, a desk, a counter, warm lamplight spilling out of the open box onto a cluttered workbench of paints and tweezers — cozy emerald and warm honey palette, miniature worldbuilding, intimate craft — fantasy trading card illustration, painterly digital art, dramatic cinematic lighting, framed centered composition, square format, no text, no letters, no words, no logos, no UI\",\n \"manaCost\": 4,\n \"level\": 7,\n \"invocations\": 1,\n \"lastUsed\": \"today\",\n \"flavor\": \"Any system becomes a little room where a creature does the work.\",\n \"deck\": \"Skillbook\"\n },\n \"pixel-game-assets\": {\n \"type\": \"Skill — Craft\",\n \"color\": \"gold\",\n \"art\": \"🧩\",\n \"artPrompt\": \"a jeweler's loupe held over an enchanted parchment where a tiny mosaic owl assembles itself from chunky glowing ceramic tiles, pots of enamel paint and a fine brush nearby on a candlelit workbench — warm amber and forest green palette, meticulous arcane craft, satisfying order — fantasy trading card illustration, painterly digital art, dramatic cinematic lighting, framed centered composition, square format, no text, no letters, no words, no logos, no UI\",\n \"manaCost\": 3,\n \"level\": 7,\n \"invocations\": 2,\n \"lastUsed\": \"today\",\n \"flavor\": \"Keep the first image's soul. Borrow the second's bones.\",\n \"deck\": \"Skillbook\"\n },\n \"hyperdesigns\": {\n \"type\": \"Skill — Creative\",\n \"color\": \"blue\",\n \"art\": \"🌊\",\n \"artPrompt\": \"a vial of living liquid light poured across an enchanted glass canvas, luminous teal waves rippling inside the frame while a fine spray of droplets is flung from a fingertip, brass dropper and quill on a candlelit workbench — luminous aqua and deep teal palette, fluid, mesmerizing, arcane craft — fantasy trading card illustration, painterly digital art, dramatic cinematic lighting, framed centered composition, square format, no text, no letters, no words, no logos, no UI\",\n \"manaCost\": 3,\n \"level\": 7,\n \"invocations\": 1,\n \"lastUsed\": \"today\",\n \"flavor\": \"Bounded shaders that never wash out — pour the liquid, then spray on click.\",\n \"deck\": \"Skillbook\"\n },\n \"valtown-mcp-app\": {\n \"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 \"videomaker\": {\n \"type\": \"Skill — Creative\",\n \"color\": \"gold\",\n \"art\": \"🎬\",\n \"artPrompt\": \"a hand-cranked enchanted cinema-box on a candlelit workbench, a strip of film unspooling into tiny painted scenes that glow like stained glass, a brass clapperboard and quill resting beside it — burnished gold and warm amber palette, painterly arcane craft, cinematic — fantasy trading card illustration, painterly digital art, dramatic cinematic lighting, framed centered composition, square format, no text, no letters, no words, no logos, no UI\",\n \"manaCost\": 4,\n \"level\": 7,\n \"invocations\": 1,\n \"lastUsed\": \"today\",\n \"flavor\": \"Write the HTML. Render the video. The composition is the spec.\",\n \"deck\": \"Skillbook\"\n },\n \"rabbithole-writeup\": {\n \"type\": \"Skill — Lore\",\n \"color\": \"purple\",\n \"art\": \"🐇\",\n \"artPrompt\": \"a white rabbit disappearing down a deep glowing burrow lined with shelved books and unfurling scrolls, a brass inkwell and quill at the entrance, candlelit study — deep amethyst and violet palette with warm gold accents, scholarly, curious, descending into knowledge — 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\": 4,\n \"invocations\": 1,\n \"lastUsed\": \"today\",\n \"flavor\": \"Down the hole, and back with an encyclopedia entry.\",\n \"deck\": \"Skillbook\"\n },\n \"sleek-ui\": {\n \"type\": \"Skill — Lore\",\n \"color\": \"white\",\n \"art\": \"◻️\",\n \"artPrompt\": \"a minimalist drafting table under clean north light, a single white set-square, a fine technical pen, and one perfectly aligned blank sheet — nothing extraneous, cool white and pale grey palette with a whisper of warm shadow, serene, disciplined, refined craft — fantasy trading card illustration, painterly digital art, dramatic cinematic lighting, framed centered composition, square format, no text, no letters, no words, no logos, no UI\",\n \"manaCost\": 2,\n \"level\": 6,\n \"invocations\": 0,\n \"lastUsed\": \"new\",\n \"flavor\": \"Less, but better. When in doubt, remove it.\",\n \"deck\": \"Skillbook\"\n },\n \"anthropic-algorithmic-art\": {\n \"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 \"valtown-http-endpoints\": {\n \"deck\": \"Val Town Skills\",\n \"type\": \"Skill — Val Town\",\n \"color\": \"valtown\",\n \"art\": \"\",\n \"artPrompt\": \"a grand stone gatehouse at the town walls where many roads converge, travelers passing scrolls through an arched service window, lanterns burning over the gate; shared Val Town deck theme, a lamplit riverside township of tiny workshops, whitewashed plaster and deep cobalt blue rooftops, warm lantern glow, painterly physical fantasy card art, no text, no logos\",\n \"manaCost\": 1,\n \"level\": 7,\n \"invocations\": 0,\n \"lastUsed\": \"new\",\n \"flavor\": \"One default export and the whole world has your URL.\"\n },\n \"valtown-react-ui\": {\n \"deck\": \"Val Town Skills\",\n \"type\": \"Skill — Val Town\",\n \"color\": \"valtown\",\n \"art\": \"\",\n \"artPrompt\": \"a glazier's workshop where a luminous stained-glass window is assembled pane by pane, fitted glass squares glowing on the bench, sketches pinned above; shared Val Town deck theme, a lamplit riverside township of tiny workshops, whitewashed plaster and deep cobalt blue rooftops, warm lantern glow, painterly physical fantasy card art, no text, no logos\",\n \"manaCost\": 3,\n \"level\": 6,\n \"invocations\": 0,\n \"lastUsed\": \"new\",\n \"flavor\": \"Component by component, pane by pane — and always a view-source link.\"\n },\n \"valtown-sqlite-storage\": {\n \"deck\": \"Val Town Skills\",\n \"type\": \"Skill — Val Town\",\n \"color\": \"valtown\",\n \"art\": \"\",\n \"artPrompt\": \"a records hall lined with card-catalog drawers and bound ledgers, a librarian filing a single card by green-shaded lamplight; shared Val Town deck theme, a lamplit riverside township of tiny workshops, whitewashed plaster and deep cobalt blue rooftops, warm lantern glow, painterly physical fantasy card art, no text, no logos\",\n \"manaCost\": 1,\n \"level\": 7,\n \"invocations\": 0,\n \"lastUsed\": \"new\",\n \"flavor\": \"A real database, one import away. Parameterize everything.\"\n },\n \"valtown-blob-storage\": {\n \"deck\": \"Val Town Skills\",\n \"type\": \"Skill — Val Town\",\n \"color\": \"valtown\",\n \"art\": \"\",\n \"artPrompt\": \"a tidy cellar vault of labeled clay jars and small crates on wooden shelves, a keeper raising a lantern to read one paper tag; shared Val Town deck theme, a lamplit riverside township of tiny workshops, whitewashed plaster and deep cobalt blue rooftops, warm lantern glow, painterly physical fantasy card art, no text, no logos\",\n \"manaCost\": 1,\n \"level\": 5,\n \"invocations\": 0,\n \"lastUsed\": \"new\",\n \"flavor\": \"getJSON returns undefined; get throws. Know your jars.\"\n },\n \"valtown-cron-and-intervals\": {\n \"deck\": \"Val Town Skills\",\n \"type\": \"Skill — Val Town\",\n \"color\": \"valtown\",\n \"art\": \"\",\n \"artPrompt\": \"a tall clocktower over the town square at dawn, exposed brass gears and a swinging bell, birds scattering on the hour; shared Val Town deck theme, a lamplit riverside township of tiny workshops, whitewashed plaster and deep cobalt blue rooftops, warm lantern glow, painterly physical fantasy card art, no text, no logos\",\n \"manaCost\": 2,\n \"level\": 6,\n \"invocations\": 0,\n \"lastUsed\": \"new\",\n \"flavor\": \"The bell rings in UTC, whether anyone is watching or not.\"\n },\n \"valtown-email\": {\n \"deck\": \"Val Town Skills\",\n \"type\": \"Skill — Val Town\",\n \"color\": \"valtown\",\n \"art\": \"\",\n \"artPrompt\": \"a rooftop dovecote post office, messenger pigeons arriving through round windows with sealed letters, rows of sorting pigeonholes; shared Val Town deck theme, a lamplit riverside township of tiny workshops, whitewashed plaster and deep cobalt blue rooftops, warm lantern glow, painterly physical fantasy card art, no text, no logos\",\n \"manaCost\": 2,\n \"level\": 5,\n \"invocations\": 0,\n \"lastUsed\": \"new\",\n \"flavor\": \"Every val has an address; mail arrives as a function call.\"\n },\n \"valtown-oauth\": {\n \"deck\": \"Val Town Skills\",\n \"type\": \"Skill — Val Town\",\n \"color\": \"valtown\",\n \"art\": \"\",\n \"artPrompt\": \"a gatekeeper at a small guarded door inspecting a glowing wax seal on a visitor's letter of passage, a heavy keyring at the belt; shared Val Town deck theme, a lamplit riverside township of tiny workshops, whitewashed plaster and deep cobalt blue rooftops, warm lantern glow, painterly physical fantasy card art, no text, no logos\",\n \"manaCost\": 2,\n \"level\": 5,\n \"invocations\": 0,\n \"lastUsed\": \"new\",\n \"flavor\": \"Wrap the handler once — the /auth doors hang themselves.\"\n },\n \"valtown-templates\": {\n \"deck\": \"Val Town Skills\",\n \"type\": \"Skill — Val Town\",\n \"color\": \"valtown\",\n \"art\": \"\",\n \"artPrompt\": \"a printmaker's shop with carved woodblock stamps shaped like tiny houses, fresh blueprint prints hanging to dry on a line; shared Val Town deck theme, a lamplit riverside township of tiny workshops, whitewashed plaster and deep cobalt blue rooftops, warm lantern glow, painterly physical fantasy card art, no text, no logos\",\n \"manaCost\": 1,\n \"level\": 4,\n \"invocations\": 0,\n \"lastUsed\": \"new\",\n \"flavor\": \"Never start from a blank page — the town keeps blueprints.\"\n },\n \"valtown-third-party-integrations\": {\n \"deck\": \"Val Town Skills\",\n \"type\": \"Skill — Val Town\",\n \"color\": \"valtown\",\n \"art\": \"\",\n \"artPrompt\": \"a busy river-harbor trading post, foreign ships unloading crates stamped with strange sigils, a harbormaster checking a long manifest; shared Val Town deck theme, a lamplit riverside township of tiny workshops, whitewashed plaster and deep cobalt blue rooftops, warm lantern glow, painterly physical fantasy card art, no text, no logos\",\n \"manaCost\": 3,\n \"level\": 6,\n \"invocations\": 0,\n \"lastUsed\": \"new\",\n \"flavor\": \"Fetch the guide before you sail; stow the secrets when you dock.\"\n }\n}\n",[],[168,391],"98cdbeed-e3cc-4973-9297-ac6b350efade","SKILL.md","3dc7dc7e-5fb6-11f1-840a-1607ee4eb77e","2b7603fb-b20d-4ba5-b7f2-c0040d028d21",171,["D",1780859645013],"---\nname: videomaker\ndescription: Make short explainer / promo / launch videos as HTML with HyperFrames and render them to MP4. Use when asked to \"make a video about X\", build a title card or animated overlay, add captions or narration, or turn a project/README into a motion piece. HTML is the source of truth — a composition is one HTML file with data-* timing, a seekable GSAP timeline, and CSS.\ntriggers:\n - \"/videomaker\"\n - \"make me a video\"\n - \"make a video about\"\n - \"turn this into a video\"\n - \"promo video\"\n - \"render to mp4\"\n---\n\n# Videomaker\n\nMy workflow for turning an idea into a rendered MP4 with **HyperFrames** (`npx hyperframes`). HTML is the source of truth: one composition file, a single paused GSAP timeline, CSS for looks. The framework seeks the timeline frame-by-frame and captures with headless Chrome, then muxes with FFmpeg.\n\n> Built once with HeyGen's HyperFrames skill (`npx skills add heygen-com/hyperframes`). This card is the distilled, personal version — extend it as I learn more.\n>\n> **For a real-UI product/feature tour, read `memories/reference_real_ui_product_tour.md` first.** It's the preset + Charlie's rules for that video type, and they override the defaults here: real screenshots / Screen Studio clips only (never a faked/rebuilt UI), fast & short, no Ken Burns zooms, and let the product speak (he writes the script himself).\n\n## Setup (one-time on this machine)\n\nNeeds **Node 22+** and **FFmpeg + ffprobe**; Chrome is used for capture. On the Deno box neither Node nor ffmpeg is global — they live in `~/.local`, so prefix every command:\n\n```bash\nexport PATH=\"$HOME/.local/node/bin:$HOME/.local/bin:$PATH\"\nnpx hyperframes doctor # verify Node / FFmpeg / Chrome\n```\n\n## Loop\n\n1. **Scaffold:** `npx hyperframes init --example blank --non-interactive --skip-skills --resolution landscape`\n2. **Decide before coding:** concept → palette (bg / fg / one accent, declared up front) → two type voices that *cross* a boundary (serif+mono, not two sans). Name the tension.\n3. **Author `index.html`:** one `data-composition-id` root; scenes are full-frame wrappers crossfaded by **opacity** on the single timeline; elements animate in with `tl.fromTo`.\n4. **Verify cheap, then render:**\n ```bash\n npx hyperframes lint\n npx hyperframes snapshot --at 3,9,15,21 --describe false # eyeball frames first\n npx hyperframes render -o renders/out.mp4 -w 2 -q standard # -w 2 keeps RAM sane\n ```\n\n## Hard-won rules (the linter won't catch these)\n\n- **Fonts must be literal, and bundled.** Write real `font-family` names — *not* CSS `var(--serif)`, or the compiler can't detect them and text falls back to Times. Only `PRODUCER_BUNDLED_FONTS` embed offline. Usable serif ≈ **Garamond** (EB Garamond / Playfair are bundled but are AI-tell banned). Mono: **Space Mono**, JetBrains Mono, IBM Plex Mono.\n- **Timeline must be seekable + deterministic:** build it synchronously (no `async`/`setTimeout`); no `Math.random()` / `Date.now()`; attach every ambient/looping tween to `tl` (never a bare `gsap.to`); prefer `tl.fromTo` inside scenes; **never stack two transform tweens on one element** — put the entrance on a wrapper, the ambient float/rotate on a child.\n- **No exit animations except the final scene** — the crossfade *is* the exit.\n- **Video scale ≠ web scale:** 60px+ headlines, 20px+ body, big padding, decorative opacity 12–25%. Aim ~8–10 elements & two focal points per scene; anchor to edges, not centered-floating.\n- **Avoid the AI tells:** cyan-on-dark, purple→blue gradients, gradient text, neon, pure `#000`/`#fff` (tint toward the accent).\n\n## The card pattern (my favorite — lean on it)\n\nA trading-card layout reads beautifully and is the most interesting thing to animate:\n\n- **Structure:** head (`name` + mana `◆◆◆`) · art window · type line · description · `Say \"\"` (mono) · footer (`Lv N` / foil). Theme per card via a `data-c` color attribute driving CSS custom props.\n- **Entrance:** 3D tilt — `rotationY: -110 → -8` on the card, opacity/scale/y on its wrapper.\n- **Foil (Lv 7+):** an absolutely-positioned overlay, `mix-blend-mode: screen`, gold→white gradient, swept across with `x`.\n- **Flip:** `.flip-inner { transform-style: preserve-3d }`, `rotationY 0 → 180`; back face is `rotateY(180deg)` and holds the SKILL.md text + memory stickers.\n- **Binder shot:** a 3×2 grid of cards in distinct colors, staggered in with `back.out`, gently breathing.\n\n## Ideas to add later\n\nPortrait 9:16 cut for social · built-in TTS narration (`hyperframes tts`) · captions synced to audio · a real drag-reorder beat · pull in the Anthropic deck · 4K via `--resolution 4k`.\n",[],[168,407,399],"videomaker","16f4a39b-b48d-48ab-89d6-b7491b2646b3","reference_toolchain_local.md","46d95ea0-5fb6-11f1-ae28-1607ee4eb77e","3cf53122-160b-4e3d-8629-583dc8a1f296",155,["D",1780537190246],"---\nname: toolchain-in-local\ntype: reference\ndescription: Node 22 + static FFmpeg live in ~/.local on this Deno box — prefix PATH\n---\nThis machine is a Deno setup with **no global Node, npm, or FFmpeg**. I installed Node 22 and a static FFmpeg/ffprobe into `~/.local` (no sudo). Chrome was already present and HyperFrames uses it for capture.\n\n**How to apply:** Prefix every hyperframes command:\n\n```bash\nexport PATH=\"$HOME/.local/node/bin:$HOME/.local/bin:$PATH\"\n```\n\n`npx hyperframes doctor` may flag ffprobe on the first Rosetta launch — it works; re-run to confirm. Keep `-w 2` on render so the Chrome workers don't exhaust RAM.\n",[],[168,407,417,409],"memories","ca9d6ea5-27d9-48e7-ac96-1f9690d12709","reference_real_ui_product_tour.md","0abd01c8-62a5-11f1-ac53-1607ee4eb77e",170,["D",1780859641437],"---\nname: real-ui-product-tour\ntype: reference\ndescription: How Charlie likes a real-UI product/feature tour video — the recipe plus his rules (real captures only, fast, no zooms, no narration). A child of videomaker for this one video type.\n---\n\n# Real-UI product tour\n\nThe kind of video built in the `skills`-library session (2026-06): a fast walk through a real web app's features, assembled from **real** screens — not narrated, not editorialized. This is a specific videomaker preset, not a general explainer.\n\n## The recipe\n\n- Tour real screens in sequence (sign-in / home / grid → open an item → the key feature → the payoff). Wrap each in a faint browser-window frame (traffic-light dots + a real URL bar) so it reads as the actual product.\n- Show real interactions with a synthetic cursor: glide to a control, click (quick scale-down + a ring pulse), then the real state change (e.g. **Copy skill → ✓ Copied**).\n- **Hard cuts** between scenes; a ~0.25s crossfade at most.\n- For any \"doing\" beat (typing, editing), a real **Screen Studio** recording is the gold standard — concat it on with FFmpeg (normalize to 1920×1080 / 30fps; pillarbox on the app's own bg color so the bars disappear).\n\n## Charlie's rules (these override videomaker defaults)\n\n- **Real or nothing.** Never rebuild a UI in HTML to fake a screen — he spots it immediately and it's a dealbreaker. Use real screenshots / Screen Studio clips only. If you can't capture it yourself, ask him to grab it.\n- **Fast.** Short and snappy — a ~4-scene tour landed around ~7s. When unsure, cut it shorter.\n- **No Ken Burns.** Slow zoom/pan reads as weird and wastes time. Motion = cuts, quick reveals, real cursor actions; hold scenes still long enough to read.\n- **Let the product speak.** No editorialized captions or marketing copy — he writes the script/voiceover himself.\n- **Full real chrome** (nav, sidebar, URL bar) beats a cropped or stylized slice.\n\n## Working with him on it\n\n- Terse, directional feedback over many fast passes (\"much faster,\" \"take them out,\" \"real or nothin\"). Change and re-render; don't over-discuss.\n- Show snapshots / a contact sheet before committing to a full render.\n- End with 2–3 concrete next-tweak options.\n",[],[168,407,417,419],"a4dc72f7-ea33-4b4a-99f4-8ea83d91a2d3","reference_bundled_fonts.md","465dc5b0-5fb6-11f1-b023-1607ee4eb77e",154,["D",1780537189420],"---\nname: bundled-fonts-only\ntype: reference\ndescription: Only PRODUCER_BUNDLED_FONTS embed offline; write literal font-family names\n---\nHyperFrames only embeds fonts in its `PRODUCER_BUNDLED_FONTS` set, and only when the `font-family` is a **literal name** in the CSS — a `var(--serif)` token hides the name from the compiler and text falls back to a generic (Times/Courier).\n\n**How to apply:** Set literal `font-family: \"Garamond\", serif` / `font-family: \"Space Mono\", monospace`. The only non-banned bundled serif is essentially **Garamond** (EB Garamond and Playfair Display are bundled but are AI-tell banned). Bundled monos: Space Mono, JetBrains Mono, IBM Plex Mono, Source Code Pro. Run `hyperframes lint` — a clean run means every used family will embed.\n",[],[168,407,417,427],"74a38e60-1c95-4b99-bd62-b7ca35fd2b12","feedback_cards_are_the_point.md","4345c80a-5fb6-11f1-8300-1607ee4eb77e",153,["D",1780537184234],"---\nname: cards-are-the-point\ntype: feedback\ndescription: Lean hard on the trading-card visuals — that's the most interesting part\n---\nGo heavy on the cards. The trading-card visuals are the most interesting part of any skillbook video.\n\n**Why:** First pass was a balanced explainer; the cards were one scene. The version that landed put cards in *every* beat — hero tilt-in, the full 6-color binder grid, a front→back flip, a Lv 7 foil close-up, search filtering the deck, a fanned-card close.\n\n**How to apply:** When the subject is skillbook (or any card UI), make the card the recurring hero. Budget most scenes to showcase card mechanics — flip, foil, mana, level, the binder grid — over talking-head copy.\n",[],[168,407,417,435],"85a56001-615b-45ec-8890-f9a620b04394",["D",1780537184234],[327,328,329,330],[168,407,417],"b019c496-bc7b-4c03-b334-64b7e32d318f",152,["D",1780537175028],[326,331],[168,407],"2ee17fe3-2349-42e6-8c88-aafc2f9f1d65","43e7081c-6675-11f1-87fa-1607ee4eb77e","9e6b7566-9ceb-4c18-96cb-32d393f775bc",194,["D",1781278926148],"---\nname: third-party-integrations\ndescription: Use when a val talks to an external service — Slack, Discord, Telegram, Stripe, GitHub, Gmail, Google Sheets, Postgres/Supabase/Upstash/Neon, browser automation (Playwright, Browserbase, Kernel, Steel), web scraping, PDF generation, push notifications, RSS, or any other third-party API. Covers the required workflow (fetch the Val Town guide, get credentials, test, store secrets) and the catalog of available guides.\ntriggers: [integration, third-party, external, service, api, slack, discord, telegram, stripe, github, gmail, sheets, google, neon, postgres, supabase, upstash, database, playwright, browser, browserbase, kernel, steel, browserless, scraping, scrape, pdf, rss, push, notification, webhook]\n---\n\n# Third-Party Integrations\n\nWhen a val uses any external service, follow this order — do not skip steps and do not write integration code from training-data memory alone. Val Town's guides have platform-specific patterns and required workarounds that won't be in your training data.\n\n## Workflow\n\n1. **Fetch the Val Town guide first.** Guides live under `https://docs.val.town/guides/`, but the slug isn't always just the service name — some are grouped under a category (e.g. `databases/neon-postgres/`, `browser-automation/kernel/`) or live on a sub-page (`slack/agent/`). Don't guess the URL: fetch the docs sitemap at `https://docs.val.town/sitemap-0.xml` (it lists every docs URL), find the `guides/…` entry that matches the service, and fetch that page before writing any integration code.\n2. **Help the user get credentials.** Provide direct links to create API keys or step-by-step OAuth setup instructions. Don't make the user hunt.\n3. **Test the connection** with a minimal script (a single fetch / SDK call that returns one record) before building features on top. This isolates auth/setup problems from feature bugs.\n4. **Store secrets in env vars.** Use `Deno.env.get(\"KEY_NAME\")` to read them, and document the required env vars in the README so the user (or anyone remixing the val) knows what to set. Whenever you reference an env var the user needs to set, show the raw, full URL to the prefilled Val Town env var editor on its own line, in this exact format: `👉 Add KEY_NAME here: https://www.val.town/x/HANDLE/VAL_NAME/environment-variables?key=KEY_NAME`. Keep the URL visible (not hidden behind link text) — it's the call-to-action.\n\n## Available guides\n\nServices with dedicated guides today — not exhaustive, so use the sitemap from step 1 as the current source of truth:\n\n- **Messaging / chat:** Slack, Discord, Telegram\n- **Payments:** Stripe\n- **Email:** Gmail (for sending via a user's account; for built-in mail use `std/email` instead — see the `email` skill)\n- **Google:** Google Sheets\n- **External databases:** Neon Postgres, Supabase, Upstash (for SQLite use built-in `std/sqlite` instead — see the `sqlite-storage` skill)\n- **Browser automation:** Kernel (recommended for Playwright), Browserbase, Steel, Browserless\n- **Source control / webhooks:** GitHub (including webhooks)\n- **Content / output:** RSS feeds, PDF generation, web scraping\n- **Notifications:** push notifications\n- **Auth:** OAuth providers (for logging in with a Val Town account use `std/oauth` instead)\n\n## Why this matters\n\nIntegration code is the most common place models hallucinate. APIs change, auth flows get reworked, and platform constraints (no filesystem, no subprocess) break naive approaches. The Val Town guide is the source of truth for what currently works on the platform.\n",[],[168,459,399],"valtown-third-party-integrations","a5cc3650-359c-447b-a16c-49b9d8b038a4",["D",1781278926148],[324],[168,459],"8786c08f-67b9-4e50-ae9c-26bc31190784","3d0c4f7a-6675-11f1-a1cb-1607ee4eb77e","fa171932-318d-4091-b9cb-8ed0eabd4eb8",193,["D",1781278914620],"---\nname: templates\ndescription: Use when creating a new val and choosing which starter to fork. Covers the catalog of official starter templates, which project shape each one fits, and when forking an existing val is the better starting point.\ntriggers: [template, starter, remix, scaffold, boilerplate, new, create, fork, example]\n---\n\n# Templates\n\n**Always start from a template** with `remix_val` — never build from scratch. Templates handle the boilerplate (entrypoints, imports, build config) and are kept up to date with Val Town's current patterns. Pick the closest match and customize from there.\n\n## Catalog\n\nMap the user's intent to the closest starter:\n\n| Project shape | Template |\n| --- | --- |\n| Interactive web app (dashboard, SaaS, CRUD, form, anything with client-side state) | `templates/react-hono-starter` |\n| Static page (landing page, link-in-bio, simple docs) | `templates/basic-html-starter` |\n| AI agent built with OpenAI Agents SDK | `templates/openai-agents` |\n| AI agent, model-agnostic (Vercel AI SDK) | `templates/vercel-ai-agent-demo` |\n| Webhook + AI + dashboard (lead qualification, enrichment) | `templates/leads` |\n| Webhook + enrichment + Slack | `templates/new-user-enrichment` |\n| Telegram bot | `templates/telegram-bot-starter` |\n\nFull list of official starters: https://www.val.town/orgs/templates\n\n## When to skip a template\n\nSimple cron jobs (monitoring, alerts, periodic polling) don't need a template — create a new val with a single `interval`-type file directly. Templates exist to scaffold complex shapes (UI, multi-file apps, integrations); a one-file cron isn't one of them.\n\n## Forking an existing val\n\nWhen the user references an existing val or asks to build something \"like\" another val, use `remix_val` to fork that val as the starting point instead of an official starter. The user's own prior work is often a closer match than any generic template.\n\n## After remixing\n\nShare the live URL immediately so the user can watch the work come together, then customize files one at a time. Update the README last.\n",[],[168,472,399],"valtown-templates","f9b68732-3b82-4bf4-a1ee-ded066942494",["D",1781278914620],[322],[168,472],"bf10bd11-a19f-4190-a497-ef50e2fc6441","38e7e328-6675-11f1-8345-1607ee4eb77e","dd1dad14-dfb0-4887-bc18-3e5d5a1e4f30",192,["D",1781278907625],"---\nname: sqlite-storage\ndescription: Use when a val needs to store structured or relational data. Covers the std/sqlite API, parameterized queries, transactions, and the val-scoped vs organization-scoped database distinction.\ntriggers: [sqlite, database, sql, persistence, storage, table, query, migration]\n---\n\n# SQLite Storage\n\nVal Town provides built-in SQLite via the `std/sqlite` module. Reach for it whenever a val needs relational or structured persistent data. For simple key/value data, prefer `std/blob` instead.\n\n## Basic usage\n\n```ts\nimport { sqlite } from \"https://esm.town/v/std/sqlite/main.ts\";\n\nawait sqlite.execute(`CREATE TABLE IF NOT EXISTS users (\n id INTEGER PRIMARY KEY,\n name TEXT NOT NULL,\n email TEXT UNIQUE\n)`);\n\nawait sqlite.execute({\n sql: \"INSERT INTO users (name, email) VALUES (?, ?)\",\n args: [\"Alice\", \"alice@example.com\"],\n});\n\nconst result = await sqlite.execute(\"SELECT * FROM users\");\n// result.rows = [{ id: 1, name: \"Alice\", email: \"alice@example.com\" }]\n```\n\n## Transactions\n\nUse `sqlite.batch` for atomic multi-statement transactions — all succeed or all roll back:\n\n```ts\nawait sqlite.batch([\n { sql: \"INSERT INTO users (name, email) VALUES (?, ?)\", args: [\"Bob\", \"bob@example.com\"] },\n { sql: \"UPDATE users SET name = ? WHERE id = ?\", args: [\"Robert\", 2] },\n]);\n```\n\n## Per-val vs organization databases\n\nThe import path determines which database you get. Both expose the same `@libsql/client` API (`execute`, `batch`) and return rows as keyed objects (`Record[]`):\n\n- `std/sqlite/main.ts` — **val-scoped** database, isolated to this val. The default for new vals, and what you almost always want.\n- `std/sqlite/global.ts` — **organization-scoped** database, shared across every val owned by the same account. (Your personal account counts as its own organization here, so this database is shared across all of your vals.)\n\nDo not switch an existing val between these import paths — it changes which database the val reads and writes.\n\n## Querying org-owned vals via tools\n\nWhen using the `sqlite_execute` or `sqlite_batch` tools to query a val owned by an organization (not your personal account), pass the org handle as the `org` parameter so the call hits the right database. Example: `{ sql: \"SELECT * FROM users\", org: \"some-org\" }`. This only matters for the tool calls — code inside the val itself reads from its own database automatically.\n\n## Rules\n\n- Always use parameterized queries (the `args` field) for any value derived from user input. Never interpolate strings into SQL.\n- Use `CREATE TABLE IF NOT EXISTS` so schema setup is idempotent across val restarts.\n- Schema migrations: add new columns with `ALTER TABLE ... ADD COLUMN`. Wrap in `try/catch` if the migration may run against an already-updated table.\n\n## Reference\n\nFull API docs: https://docs.val.town/reference/std/sqlite/usage/\n",[],[168,485,399],"valtown-sqlite-storage","c07c6695-84c9-41c5-b9ad-a2f2780d8e43",["D",1781278907625],[320],[168,485],"5adcb4ce-5e99-11f1-a034-1607ee4eb77e","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\nThen use Tailwind classes directly in JSX:\n\n```tsx\n

Hello

\n```\n\nAvoid inline `\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,1060,1286,399],"algorithmic-art","043c08ea-2631-4f1e-b7ff-131a95ef7924",207,["D",1781279544411],[203],[168,1060,1286],"50da6a59-8690-4e72-8c1c-de2b4f8ffc12",204,["D",1781279526503],[202,204,206,208,210,212,214,216,218,220,222,224,226,228,230,232,234],[168,1060],["D",1779816059463],[201,236,245,246,254,263,265,266,275,277,279,291,293,302,304,317,319,321,323,325,332],[168],"8339cde9-ab09-41e2-9bf1-26f705c2a3a0","generate-missing-art.ts","58daf112-64f8-11f1-b95b-1607ee4eb77e",199,["D",1781279020552],"// Generate card art for every skill that has none cached (the cards that fall\n// back to the generic SVG placeholder). Run this file directly; it does up to\n// MAX_PER_RUN generations per execution to stay inside the run timeout —\n// just run it again until it reports nothing missing.\n//\n// Uses gpt-image-1 at medium quality (richer than the route's mini/low — these\n// are the cards Charlie actually looks at). Output lands in the same blob\n// prefix the /art/:slug route serves first.\nimport { blob } from \"https://esm.town/v/std/blob\";\nimport { loadSkills } from \"../data/loader.ts\";\n\nconst MAX_PER_RUN = 3;\nconst FORCE: string[] = []; // slugs to regenerate even if cached\nconst GENERATED_BLOB_PREFIX = \"skillbook/art/openai-webp-v1\";\nconst LEGACY_BLOB_PREFIX = \"skill-binder/art/openai-v2\";\n\n// Mirrors imagePrompt() in main.tsx\nfunction imagePrompt(skill: { artPrompt: string; deck?: string }) {\n return [\n skill.artPrompt,\n skill.deck === \"Anthropic Skills\"\n ? \"Shared theme: warm parchment, charcoal ink, muted orange accent, blue and green details, handcrafted codex, atelier light.\"\n : skill.deck === \"Val Town Skills\"\n ? \"Shared theme: a lamplit riverside township of small workshops, whitewashed plaster, deep cobalt blue rooftops and accents, warm lantern glow, handcrafted miniature world.\"\n : \"\",\n \"Painted collectible fantasy card illustration with traditional brushwork, tactile paper-era art direction.\",\n \"Avoid modern UI, computer screens, app windows, keyboards, terminal text, logos, typography, letters, numbers, watermarks, borders, and captions.\",\n \"Square artwork crop, centered subject, strong silhouette.\",\n ].filter(Boolean).join(\" \");\n}\n\nasync function hasCachedArt(slug: string): Promise {\n try {\n const webp = await blob.get(`${GENERATED_BLOB_PREFIX}/${slug}.webp`);\n if (webp?.ok) return true;\n } catch {}\n try {\n const png = await blob.get(`${LEGACY_BLOB_PREFIX}/${slug}.png`);\n if (png?.ok) return true;\n } catch {}\n return false;\n}\n\nconst OPENAI_API_KEY = Deno.env.get(\"SKILLBOOK_OPENAI_API_KEY\") ?? Deno.env.get(\"OPENAI_API_KEY\");\nif (!OPENAI_API_KEY) throw new Error(\"no OpenAI key on this val\");\n\nconst skills = await loadSkills();\nconst missing: string[] = [];\nfor (const s of skills) {\n if (FORCE.includes(s.slug)) { missing.push(s.slug); continue; }\n if (!s.artPrompt) { console.log(`SKIP ${s.slug}: no artPrompt in _index.json`); continue; }\n if (!(await hasCachedArt(s.slug))) missing.push(s.slug);\n}\n\nconsole.log(`missing art: ${missing.length ? missing.join(\", \") : \"(none — all cards illustrated)\"}`);\nconst batch = missing.slice(0, MAX_PER_RUN);\n\nfor (const slug of batch) {\n const skill = skills.find((s) => s.slug === slug)!;\n console.log(`generating ${slug}...`);\n const t0 = Date.now();\n const result = await fetch(\"https://api.openai.com/v1/images/generations\", {\n method: \"POST\",\n headers: { authorization: `Bearer ${OPENAI_API_KEY}`, \"content-type\": \"application/json\" },\n body: JSON.stringify({\n model: \"gpt-image-1\",\n prompt: imagePrompt(skill),\n size: \"1024x1024\",\n quality: \"medium\",\n n: 1,\n output_format: \"webp\",\n }),\n });\n const json = await result.json();\n if (!result.ok) {\n console.error(`FAILED ${slug}:`, JSON.stringify(json?.error ?? json).slice(0, 300));\n continue;\n }\n const b64 = json?.data?.[0]?.b64_json;\n if (!b64) { console.error(`FAILED ${slug}: no image in response`); continue; }\n const bytes = Uint8Array.from(atob(b64), (c) => c.charCodeAt(0));\n await blob.set(`${GENERATED_BLOB_PREFIX}/${slug}.webp`, bytes);\n console.log(`stored ${slug}.webp (${bytes.length} bytes, ${((Date.now() - t0) / 1000).toFixed(1)}s)`);\n}\n\nconst remaining = missing.slice(MAX_PER_RUN);\nconsole.log(remaining.length ? `RUN AGAIN — still missing: ${remaining.join(\", \")}` : \"done — nothing left to generate\");\n",[],[174,1301],["D",1781115323039],[199],[174],"2a9f29ad-191c-436c-b821-ccc9cc3c0355","loader.ts","ae9857de-5927-11f1-8d94-ee650bb23af1",201,["D",1781279043318],6,"// 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\" | \"valtown\";\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 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 raw = await readFile(`/skills/${slug}/SKILL.md`, import.meta.url);\n // body = markdown only — the YAML frontmatter renders as garbage if fed to marked.\n // Agents who want the verbatim file read /raw//SKILL.md.\n const { frontmatter, body } = splitFrontmatter(raw);\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: body.trim(),\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",[],[180,1312],["D",1779814995869],[197],[180],["D",1779814930341],{"_97":96,"_105":101},{"_97":96,"_98":99,"_100":101,"_18":55,"_102":103,"_104":25},{"_13":86,"_33":87,"_43":42,"_88":44,"_89":-5,"_90":-5,"_91":-5,"_92":-5,"_93":-5,"_94":45,"_95":96},"ctx",{"_79":-5,"_125":1360,"_1361":1362,"_1363":1364,"_1365":25,"_1366":25,"_1367":25,"_1368":59,"_1369":-5,"_1370":-7,"_1371":-7,"_1372":159,"_1373":25,"_1374":25,"_1375":-5,"_1376":25,"_1377":25,"_1378":25,"_1379":-5},"ENV",{"_1331":1332,"_1333":1334,"_1335":87,"_1336":1337,"_1338":1339,"_1340":1341,"_1342":1343,"_1344":1345,"_1346":1347,"_1348":1349,"_1350":1351,"_1352":1353,"_1354":1355,"_1356":1357,"_1358":1359},"REACT_APP_SENTRY_DSN","https://586020d86f05489db63a554690acf1e9@o1398359.ingest.sentry.io/6724499","RENDER_GIT_COMMIT","5015b8df46402d8bba4f485ecc37aec202b0e06b","RENDER_GIT_BRANCH","POSTHOG_API_TOKEN","phc_nmoyuAkStEZuUp69rYlg1DZgrIt19Gx0Y4Hwf8tGgJP","POSTHOG_API_HOST","https://wart.val.town","WEB_API_TEMPLATE","https://{val}.web.val.run","APP_URL","https://www.val.town","MODULE_URL","https://esm.town","VANITY_WEB_API_TEMPLATE","https://{label}.val.run/","DENOLS_URL","https://lsp.val.town","NODE_ENV","production","CLOUDFLARE_TURNSTILE_SITE_KEY","0x4AAAAAACtaIZJH7s9rBMZ6","GOOGLE_CLIENT_ID","875989696899-jtsqkhlbdv5jrlsk8631p7ipjg3c6o62.apps.googleusercontent.com","STRIPE_PUBLISHABLE_KEY","pk_live_51N2zvWEpZTTLipIkVEwXrUG9AT0yeOOEYxszarZT1jpsZV58Ly6wlg3SltZpHN26CUalOBmUSY7adQRQiSkCZz2500qSXNkf8Y","API_URL","https://api.val.town",[],"preferencesKeybindings","default","preferencesTheme","light","preferencesFixers","preferencesCopilot","preferencesSelectionAi","preferencesCloseBrackets","preferencesChatPanelState","preferencesDprint","preferencesDenofmt","notificationCount","flagDenols","isBusinessOrgMember","businessOrgHandle","isBusinessOrgAdmin","isHigherTownieTier","navCollapsed","currentOrgId"]

Memories (stickers)

Templates

Scripts

Memories

Files

${esc(deck)}

🎨 sprite-builder

Hello

Diff · v229