[{"_1":2,"_3":-5,"_4":-5},"loaderData",{"_5":6,"_7":8,"_9":10},"actionData","errors","root",{"_1261":1262,"_1263":1264},"routes/_app.x.$handle.$name",{"_103":102,"_33":51,"_112":93,"_27":113,"_13":14,"_114":-5,"_11":115,"_116":117,"_118":119,"_120":121,"_122":123,"_21":-5,"_124":-5,"_125":-5,"_126":25,"_127":128,"_129":65,"_130":-5,"_131":-5,"_132":133},"routes/_app.x.$handle.$name.branch.$branch.version.$version.diff",{"_11":12,"_13":14,"_15":16,"_17":-5,"_18":-5},"project",{"_49":50,"_33":51,"_38":52,"_53":-5,"_54":25,"_55":56,"_57":56,"_58":59,"_60":-5,"_18":61,"_62":63,"_64":65,"_66":-5,"_67":-5,"_68":69,"_70":71,"_72":-5,"_73":-5,"_74":-5,"_75":-5,"_76":77,"_78":77,"_79":80,"_81":80,"_82":80,"_83":77,"_84":77,"_85":86,"_87":88,"_89":90,"_91":25},"version",191,"changes",[19,20],"aiChatInfo","userId",{"_21":43,"_23":-7,"_24":25,"_26":25,"_27":44,"_29":44},{"_21":22,"_23":-7,"_24":25,"_26":25,"_27":28,"_29":30},"file",{"_31":32,"_33":34,"_35":36,"_37":-5,"_38":39,"_40":14,"_41":42,"_24":25},"previous","deleted",false,"deletedHere","path","skills/valtown-react-ui","latestPath","skills/valtown/react-ui","fileId","9af1c69b-f112-4652-acf6-aad8942719cd","name","valtown-react-ui","fileType","directory","content","createdAt",["D",1781278897711],"branchVersion","branchId","a265a3e8-5924-11f1-b614-ee650bb23af1",{"_31":45,"_33":46,"_35":21,"_37":47,"_38":48,"_40":14,"_41":42,"_24":25},"skills/valtown-react-ui/SKILL.md","32f46cd4-6675-11f1-a4c8-1607ee4eb77e","SKILL.md","---\nname: react-ui\ndescription: Use when building any val with a user interface — dashboards, web apps, landing pages, forms, admin tools, anything users see in a browser. Covers JSX/React conventions, Twind/Tailwind styling, React version pinning, the view-source link requirement, and what to avoid (template-string HTML, external assets).\ntriggers: [react, jsx, tsx, ui, frontend, component, dashboard, page, app, twind, tailwind, styling, css, html]\n---\n\n# React UI\n\nFor any val that renders a UI, prefer to build it with React components in `.tsx` files, unless the user states otherwise. The `templates/react-hono-starter` template is set up for this — start there with `remix_val` instead of building from scratch.\n\n## File conventions\n\nPut markup, styles, and scripts in real files — avoid template literal strings (e.g. `new Response(\\`...\\`)`). Code in template strings has no syntax highlighting, no linting, no type checking, and is unreviewable.\n\n- `.tsx` — React/JSX components, any UI with logic or interactivity\n- `.html` — purely static markup\n- `.ts` — server code and scripts\n\nBuild UI **component by component** in `.tsx` files. Compose small components rather than rendering one giant page.\n\n## Styling: Twind + Tailwind\n\nPrefer Twind to apply Tailwind utility classes at runtime — no build step required. Add the script to your HTML shell:\n\n```html\n\n```\n\nThen use Tailwind classes directly in JSX:\n\n```tsx\n

Hello

\n```\n\nAvoid inline `\n\n\n \n

Skillbook

SKILLS.md meets MTG

\n \n \n

\n\n

\n\n \n\n \n\n \n \n\n\n",[],[161,347],"b87ec6b0-84b1-42d1-b29d-fedf436ece18","client.js","37b85f62-5925-11f1-8789-ee650bb23af1",185,["D",1781116883128],18,"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 // 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",[],[161,355],["D",1779815151548],[335,336],[161],"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",[],[168,368],"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",[],[168,377],["D",1780374005541],[332,333],[168],"67a677b3-c623-4662-9851-b58845f448eb","_index.json","4368c0f2-5927-11f1-8ea0-ee650bb23af1",174,["D",1781115292471],11,"{\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}\n",[],[174,388],"98cdbeed-e3cc-4973-9297-ac6b350efade","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",[],[174,404,46],"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",[],[174,404,414,406],"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",[],[174,404,414,416],"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",[],[174,404,414,424],"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",[],[174,404,414,432],"85a56001-615b-45ec-8890-f9a620b04394",["D",1780537184234],[325,326,327,328],[174,404,414],"b019c496-bc7b-4c03-b334-64b7e32d318f",152,["D",1780537175028],[324,329],[174,404],"fe4cb0aa-b67b-448d-884c-c13138e9434c",["D",1781278897711],[],[174,34,46],"ce0eff11-f5f7-4e93-ab93-03017d29d2e0",["D",1781278897711],[322],[174,34],"2ba7d40c-ed2b-4df8-9b64-2c4b347c01b7","2831f91a-6675-11f1-badb-1607ee4eb77e","acd1b55b-0aa1-40bb-8bfb-4edd2509cdcd",190,["D",1781278879667],"---\nname: oauth\ndescription: Use when a val needs to require login with a Val Town account — gating routes behind authentication, identifying the current user, building user-specific dashboards. Covers std/oauth's `oauthMiddleware` and `getOAuthUserData`, the auto-managed `/auth/*` routes, and session behavior. For third-party OAuth providers (Google, GitHub, etc.) see the `third-party-integrations` skill instead.\ntriggers: [oauth, auth, login, signin, sign-in, logout, session, user, authentication, account, gated, protected, private]\n---\n\n# OAuth (std/oauth)\n\nVal Town provides zero-config \"Log in with Val Town\" via `std/oauth`. No database setup, no provider config — wrap your Hono fetch handler and you get login, logout, and session management for free. Sessions are stored in encrypted cookies and last 30 days.\n\nThis is for **Val Town account login only**. For Google / GitHub / Slack / etc. OAuth, see the `third-party-integrations` skill — those flows are documented per-service.\n\n## Imports\n\n```ts\nimport {\n getOAuthUserData,\n oauthMiddleware,\n} from \"https://esm.town/v/std/oauth/middleware.ts\";\n```\n\n## Wrapping your app\n\n`oauthMiddleware(handler)` takes your Hono fetch handler and returns a wrapped handler that injects three auto-managed routes:\n\n- `GET /auth/login` — starts the login flow\n- `GET /auth/callback` — completes the login flow\n- `POST /auth/logout` — clears the session\n\nExport the wrapped handler as the val's default:\n\n```ts\nimport { Hono } from \"npm:hono\";\nimport { oauthMiddleware } from \"https://esm.town/v/std/oauth/middleware.ts\";\n\nconst app = new Hono();\napp.onError((err) => Promise.reject(err));\n\napp.get(\"/\", (c) => c.text(\"hello\"));\n\nexport default oauthMiddleware(app.fetch);\n```\n\nYou don't write the `/auth/*` routes yourself — the middleware adds them. Don't shadow them in your own app.\n\n## Reading the current user\n\nCall `getOAuthUserData(rawRequest)` from any route. In Hono, `rawRequest` is `c.req.raw`. It returns the session data if the request is authenticated, or `null` otherwise.\n\n```ts\ninterface SessionData {\n user: {\n id: string;\n username: string | null;\n email: string | null;\n bio: string | null;\n tier: \"free\" | \"pro\" | null;\n type: \"user\" | \"org\";\n url: string;\n links: {\n self: string;\n profileImageUrl: string | null;\n };\n };\n accessToken: string; // Val Town API token (act on behalf of the user)\n refreshToken?: string;\n idToken?: string;\n expiresAt: number; // Unix timestamp (ms)\n isOrgMember?: boolean; // true if user belongs to this val's org\n}\n```\n\n```ts\napp.get(\"/\", async (c) => {\n const session = await getOAuthUserData(c.req.raw);\n if (session?.user) {\n return c.html(\n `

Logged in as ${session.user.username}

` +\n ``\n );\n }\n return c.html(`Log in with Val Town`);\n});\n```\n\n## Gating routes\n\nThere's no built-in \"require login\" helper — gate routes by checking `getOAuthUserData` and returning a 401 or redirecting to `/auth/login` when the session is missing:\n\n```ts\napp.get(\"/dashboard\", async (c) => {\n const session = await getOAuthUserData(c.req.raw);\n if (!session?.user) return c.redirect(\"/auth/login\");\n return c.html(`

Welcome ${session.user.username}

`);\n});\n```\n\n## What you don't need to configure\n\n- No env vars — credentials and redirect URLs are handled by the platform.\n- No callback URL setup — `/auth/callback` is wired automatically.\n- No session store — sessions live in encrypted cookies.\n\n## Verifying changes\n\nAfter adding OAuth, call `fetch_val_endpoint` on a gated route to confirm it redirects or 401s when unauthenticated. The full login flow requires a real browser session and can't be exercised by `fetch_val_endpoint` alone — share the live URL and have the user try logging in.\n",[],[174,464,46],"valtown-oauth","efcbaa7d-6517-4cb7-bc07-0b9d590f319e",["D",1781278879667],[320],[174,464],"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\n## Verifying changes\n\nAfter editing an HTTP val, always call `fetch_val_endpoint` to confirm it returns the expected status and body. Do not report a change as done without this step.\n",[],[174,490,46],"valtown-http-endpoints","33bceaab-e30a-43eb-bcfa-3848b13c2da6",["D",1781278865499],[316],[174,490],"6e0f7452-5c6a-42f0-a58d-20924a5cf3d3","1a1dc4c6-6675-11f1-94b4-1607ee4eb77e","78431edd-4a24-49c6-9049-f63208d919d8",188,["D",1781278856005],"---\nname: email\ndescription: Use when a val sends email, receives email, or is triggered by an incoming email. Covers email-type vals (the Email handler shape, attachment limits, the assigned val email address) and sending mail via std/email.\ntriggers: [email, mail, inbox, send, sending, smtp, imap, attachment, message, notification]\n---\n\n# Email\n\nVal Town supports both directions: vals can be **triggered by** incoming mail (email-type vals) and can **send** mail via `std/email`.\n\n## Receiving email — email-type vals\n\nEmail vals (`fileType: \"email\"`) run when a message is delivered to the val's assigned address.\n\n```ts\n// Learn more: https://docs.val.town/vals/email/\n// Email type: {\n// from: string,\n// to: string[],\n// subject?: string,\n// text?: string,\n// html?: string,\n// attachments: File[],\n// headers: Record\n// }\nexport default async function (e: Email) {\n console.log(e.from, e.subject, e.text);\n}\n```\n\nThe file must have an `export` — `export default` for the handler.\n\n**Maximum 30MB per message**, including attachments. Larger messages will be rejected.\n\n### Reading the assigned address\n\nWhen you list files or create an email-type file, the response includes `links.email` — the address that triggers this val. **Always read this from the API response. Never construct an email address yourself** — the format is owned by the platform and may change.\n\n## Sending email — `std/email`\n\nFor outgoing mail, import from `std/email`:\n\n```ts\nimport { email } from \"https://esm.town/v/std/email\";\n\nawait email({\n to: \"user@example.com\",\n subject: \"Hello\",\n text: \"Message body\",\n});\n```\n\n`std/email` exports `email` as the send function itself — call it directly (`email({ ... })`); there is no `email.send` method. It accepts the shape you'd expect: `to`, `subject`, `text`, `html`, plus `from`, `cc`, `bcc`, `replyTo`, `attachments`, and `headers`. If no `to` field is specified, it defaults to sending mail to the val owner's address.\n\n## Replying to an incoming message\n\nCombine the two — read the inbound `from` in an email-type handler, then call `email` to reply:\n\n```ts\nimport { email } from \"https://esm.town/v/std/email\";\n\nexport default async function (e: Email) {\n await email({\n to: e.from,\n subject: `Re: ${e.subject ?? \"\"}`,\n text: \"Got it, thanks!\",\n });\n}\n```\n\n## Verifying changes\n\nAfter editing an email-type val, use `run_file` with a sample `Email` payload to invoke the handler manually instead of waiting for a real incoming message. For send-only vals, run the script the same way and check `get_logs` for delivery errors.\n",[],[174,503,46],"valtown-email","465d5668-660b-4e7d-a6d7-ee7a1c28e569",["D",1781278856005],[314],[174,503],"46954dfa-08ad-4b7b-b010-ef799f4c4bdd","14e5beb4-6675-11f1-a8a2-1607ee4eb77e","cf0cdeee-3ec5-48f4-9faa-10797377ed28",187,["D",1781278847272],"---\nname: cron-and-intervals\ndescription: Use when building a val that runs on a schedule — periodic jobs, recurring tasks, polling, cron jobs, monitoring, alerting. Covers the interval handler signature, cron expressions, the UTC timezone constraint, and the `lastRunAt` pattern for detecting new items since the previous run.\ntriggers: [cron, interval, scheduled, schedule, recurring, periodic, timer, poll, polling, job, daily, hourly]\n---\n\n# Cron / Interval Vals\n\nInterval vals (`fileType: \"interval\"`) run on a recurring schedule defined by a cron expression. Use them for polling external APIs, sending reminders, running cleanups, generating reports, or any work that should happen on a clock rather than in response to a request.\n\n## Basic handler\n\n```ts\n// Learn more: https://docs.val.town/vals/cron/\nexport default async function (interval: Interval) {\n // interval.lastRunAt: Date | undefined\n console.log(interval);\n}\n```\n\nThe file must have an `export` — `export default` for the handler.\n\n## Timezone\n\n**Cron expressions run in UTC.** Convert any human-readable schedule (e.g. \"9am Eastern\") to UTC before writing the cron expression. Daylight savings is not handled — pick a UTC time that's close enough year-round.\n\n## The `lastRunAt` pattern\n\n`interval.lastRunAt` is the timestamp of the previous successful run (or `undefined` on the first run). Use it to fetch only items created since the last run, instead of re-scanning everything:\n\n```ts\nexport default async function (interval: Interval) {\n const since = interval.lastRunAt ?? new Date(Date.now() - 24 * 60 * 60 * 1000);\n const newItems = await fetchItemsSince(since);\n for (const item of newItems) {\n await handle(item);\n }\n}\n```\n\nThis makes the val idempotent against missed runs and avoids reprocessing.\n\n## Reading and updating the schedule\n\n- `read_interval_settings` — fetch the current cron expression and active state of an interval file.\n- `write_interval_settings` — change the cron expression or pause/resume an interval.\n\n## When to skip a template\n\nFor simple scheduled jobs, create a new val with a single `interval`-type file directly — no template needed. Templates are for more complex shapes (dashboards, AI agents, webhook + UI combos).\n\n## Verifying changes\n\nAfter editing an interval val, use `run_file` to invoke the handler manually instead of waiting for the next scheduled run.\n",[],[174,516,46],"valtown-cron-and-intervals","dde0cba9-aee2-4675-8b18-ab91c4f39ec7",["D",1781278847272],[312],[174,516],"4b3aac28-29dc-4033-bda4-8b0a2672acee","1010d388-6675-11f1-a8a2-1607ee4eb77e","3a717903-c375-4a34-9f92-9467602b09a6",186,["D",1781278839163],"---\nname: blob-storage\ndescription: Use when a val needs simple key/value persistence — JSON documents, cached responses, uploaded files, or binary assets. Covers the std/blob API, listing and deleting keys, account-global or val scoping, and storage limits.\ntriggers: [blob, storage, kv, key-value, persistence, cache, store, upload, file, json, asset, binary]\n---\n\n# Blob Storage\n\nVal Town provides built-in key/value blob storage via the `std/blob` module. Reach for it whenever a val needs to persist simple values — JSON documents, cached API responses, uploaded files, or binary assets — keyed by a string. For relational or structured data you query with SQL, prefer `std/sqlite` instead.\n\n## Scoping: account-global or per-val depending on import\n\nThere are two exports of the blob utility: `global.ts`, which is scoped to the user account, and `main.ts`, which is scoped to the val itself. Prefer the `main.ts` interface and val scoping for new vals.\n\nHere is the scoped import:\n\n```ts\n/**\n * Importing from `main.ts` provides an interface to val-scoped blobs.\n */\nimport { blob } from \"https://esm.town/v/std/blob/main.ts\";\n```\n\nHere are the global imports:\n\n```ts\n/**\n * Importing from `global.ts` provides a blob interface that is scoped\n * to your account.\n */\nimport { blob } from \"https://esm.town/v/std/blob/global.ts\";\n/**\n * This entrypoint is also available as `v/std/blob`. This is common\n * in older vals.\n */\nimport { blob } from \"https://esm.town/v/std/blob\";\n```\n\nThe scoped & global `blob` interfaces have the same methods.\n\nScoped & global blobs are stored separately: you cannot access global blobs with the scoped interface or vice versa.\n\n## Basic usage (JSON)\n\n```ts\nimport { blob } from \"https://esm.town/v/std/blob/main.ts\";\n\nawait blob.setJSON(\"config\", { theme: \"dark\", count: 0 });\n\nconst config = await blob.getJSON(\"config\");\n// config = { theme: \"dark\", count: 0 }, or undefined if the key doesn't exist\n```\n\n`getJSON` returns `undefined` when the key is missing, so guard before using the result:\n\n```ts\nconst config = (await blob.getJSON(\"config\")) ?? { theme: \"light\", count: 0 };\n```\n\n## Raw and binary data\n\nUse `set`/`get` for strings, binary, or any `BodyInit`. `get` returns a standard `Response`, so use its body helpers (`.text()`, `.json()`, `.arrayBuffer()`, `.blob()`):\n\n```ts\nawait blob.set(\"logo.png\", imageBytes); // string | BodyInit (Blob, ArrayBuffer, ReadableStream, …)\n\nconst res = await blob.get(\"logo.png\");\nconst bytes = await res.arrayBuffer();\n```\n\nUnlike `getJSON`, `get` **throws** `ValTownBlobNotFoundError` if the key doesn't exist — wrap it in `try/catch` when the key may be absent.\n\n## Listing, deleting, copying\n\n```ts\nconst entries = await blob.list(\"user_\"); // optional key prefix filter\n// entries = [{ key, size, lastModified }, …]\n\nfor (const { key } of entries) {\n await blob.delete(key);\n}\n\nawait blob.copy(\"config\", \"config.bak\"); // duplicate under a new key\nawait blob.move(\"draft\", \"published\"); // rename / relocate\n```\n\n`list(prefix?)` returns an array of `{ key: string; size: number; lastModified: string }` — objects, not bare key strings.\n\n\n## Limits\n\n- **Key length:** up to 512 characters.\n- **Total storage:** 10 MB on the free plan, 1 GB on Pro — shared across all blobs in the account.\n- Store large or structured datasets in `std/sqlite` rather than as one giant blob.\n\n## Reading/writing blobs via tools\n\nWhen using the `storeBlob`, `readBlob`, `listBlobs`, or `deleteBlob` tools against a val owned by an organization (not your personal account), pass the org handle as the `org` parameter so the call hits that organization's blob storage. Example: `{ key: \"myapp:config\", org: \"some-org\" }`. This only matters for the tool calls — code inside the val reads and writes its owning account's storage automatically. Note `storeBlob` accepts UTF-8 text up to 100 KB; write larger or binary blobs from code with `blob.set`.\n\n## Rules\n\n- Treat keys as a flat namespace. Use prefixes (`feature:subkey`) for organization and to scope `list`.\n- `getJSON` returns `undefined` for missing keys; `get` throws `ValTownBlobNotFoundError`. Handle the absent case accordingly.\n- Don't store secrets in blobs — use environment variables for credentials.\n\n## Reference\n\nFull API docs: https://docs.val.town/std/blob/\n",[],[174,529,46],"valtown-blob-storage","29f5efc4-ee4d-4bae-9ac2-05067712665b",["D",1781278839163],[310],[174,529],"8943278c-508e-4380-9fd1-2181361d5012","534f98e0-6117-11f1-a7d0-1607ee4eb77e","251c838b-34ed-4778-ad8d-da5410201759",163,["D",1780688823487],"---\nname: sleek-ui\ndescription: Use when building a user interface that should feel polished, modern, and refined — landing pages, dashboards, marketing sites, or any val where visual quality matters. Covers layout, spacing, typography, color, motion, and the small details that make an interface feel \"sleek.\"\ntriggers:\n - styled UI\n - sleek UI\n---\n\n# Sleek UI\n\n> Use when building a user interface that should feel polished, modern, and refined — landing pages, dashboards, marketing sites, or any val where visual quality matters. Covers layout, spacing, typography, color, motion, and the small details that make an interface feel \"sleek.\"\n\n## Principles\n\nA sleek interface is the result of disciplined restraint, not added decoration. Two\nphilosophies anchor that discipline: **K.I.S.S.** and **Dieter Rams' principles of\ngood design**.\n\n### Keep It Simple, Stupid (K.I.S.S.)\n\nFavor the simplest solution that fully solves the problem. Complexity is a cost the\nuser pays in cognitive load, so every element, option, and flourish must earn its\nplace.\n\n- Solve the user's task in the fewest steps and the fewest UI elements possible.\n- When in doubt, remove it. If the design works without an element, it didn't belong.\n- Prefer one clear way to do something over several clever ones.\n- Reuse consistent patterns instead of inventing new ones per screen.\n\n### Dieter Rams' principles of good design\n\nRams' ten principles for \"as little design as possible\" translate directly to UI.\nGood design is:\n\n1. **Innovative** — uses new possibilities thoughtfully, never novelty for its own sake.\n2. **Useful** — serves the user's goal first; aesthetics support function, not the reverse.\n3. **Aesthetic** — well-made things feel right and earn the user's trust.\n4. **Understandable** — the interface explains itself; it's self-evident, ideally self-explanatory.\n5. **Unobtrusive** — neutral and restrained, leaving room for the user's own expression.\n6. **Honest** — never makes a product seem more capable or valuable than it is.\n7. **Long-lasting** — avoids being fashionable, so it doesn't feel dated tomorrow.\n8. **Thorough down to the last detail** — nothing is arbitrary; care shows in the details.\n9. **Environmentally friendly** — efficient and respectful of resources (and the user's attention).\n10. **As little design as possible** — \"Less, but better.\" Concentrate on the essential.\n\nTaken together: when a design decision is unclear, choose the simpler, quieter,\nmore honest option. That restraint is what reads as \"sleek.\"\n\n## Layout & spacing\n\n### Use a powers-of-two spacing scale\n\nBase all spacing — margins, padding, gaps — on a powers-of-two progression:\n`4, 8, 16, 32, 64...` (px). Snapping every value to this scale keeps rhythm\nconsistent and prevents the slightly-off, arbitrary gaps that make a UI feel sloppy.\n\n- Use only values from the scale; never eyeball a one-off `13px` or `25px`.\n- The progression doubles at each step (4 → 8 → 16 → 32 → 64), giving clear, predictable rhythm.\n- Be generous with whitespace — open space is what makes an interface breathe and\n read as sleek.\n\n### Left-align typography\n\nDefault to left-aligned text. It gives every line a consistent starting edge, which\nis easiest to scan and reinforces the structured, intentional feel of a sleek layout.\n\n- Avoid centered or justified body text — both hurt readability and look less crisp.\n- Reserve centering for rare, deliberate focal moments (e.g. a single hero headline).\n\n### Grid layouts for a Swiss style\n\nLean on grid layouts to organize content. A strong underlying grid produces the clean,\nstructured, \"Swiss-style\" (International Typographic Style) aesthetic — disciplined\nalignment, clear columns, and a confident sense of order.\n\n- Align elements to shared columns and baselines so nothing floats arbitrarily.\n- Let the grid (combined with the spacing scale above) do the work of creating rhythm\n and visual balance.\n\n## Typography\n\n### Conform to a strict type scale\n\nDefine a small, fixed set of font sizes up front and use only those values — never\none-off sizes sprinkled throughout the UI. A modular scale (e.g. a small set such as\n`14 / 16 / 20 / 24 / 32px`) keeps relationships\nconsistent and the whole interface feeling deliberate.\n\n- Pick the scale once; reuse it everywhere.\n- Avoid arbitrary pixel sizes that don't belong to the scale.\n\n### Avoid excessive size differentiation\n\nResist large jumps between text sizes. A sleek interface generally lives within a\nnarrow range of sizes — a few steps is plenty for most layouts. Lean on **weight**\nand **spacing** (per the Color section) to create hierarchy rather than dramatic size\ncontrast.\n\n- Keep the number of distinct sizes on a screen small (often just 2–3).\n- Big display sizes should be the exception, reserved for genuine focal points.\n\n### Prefer system fonts\n\nDefault to the native system font stack unless the user specifies a typeface. System\nfonts load instantly (no web-font request or layout shift), look native on every\nplatform, and stay out of the way — which is exactly the unobtrusive quality sleek\nUI wants.\n\n```css\nfont-family: -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto,\n Helvetica, Arial, sans-serif, \"Apple Color Emoji\", \"Segoe UI Emoji\";\n```\n\nOnly reach for a custom or web font when the user explicitly asks for one.\n\n## Color & contrast\n\nText should be stark, not soft. Use near-pure black on light backgrounds and near-pure\nwhite on dark backgrounds for essentially all text. Resist the urge to gray-down body\ncopy to express hierarchy — muted text reads as low-quality and hurts legibility.\n\n- **Light mode:** text in black (or a very dark neutral, e.g. `#111`); background white or near-white.\n- **Dark mode:** text in white (or a very light neutral); background near-black, not pure `#000`.\n- Aim for high contrast ratios (well past WCAG AA) for primary text.\n\n### Don't use text color for hierarchy\n\nColor is the wrong tool for \"this matters more than that.\" Establish hierarchy with\nthe structural tools instead:\n\n- **Space** — generous whitespace and grouping separate and rank content.\n- **Scale** — size differences signal importance (headings vs. body vs. captions).\n- **Font weight** — bolder weights draw the eye; lighter weights recede.\n\nReach for these before ever reaching for a color change. A page that's all black text\non white, differentiated only by size, weight, and spacing, can feel far more sleek\nthan one peppered with grays and tints.\n\n### Use accent / contrast color sparingly\n\nSave saturated or contrasting color for the rare moments the UI genuinely needs to\nattract attention:\n\n- Primary calls to action (the one button you want clicked).\n- Active or selected states.\n- Critical alerts, errors, or warnings.\n\nWhen everything is colored, nothing stands out. A single restrained accent against an\notherwise black-and-white palette is what makes that accent — and the whole interface —\nfeel intentional.\n\n## Don'ts\n\n- **Never use Tailwind.**\n- Don't use text color to express hierarchy — use space, scale, and weight instead.\n- Don't gray-down body text; keep it stark black or white.\n- Don't scatter one-off sizes or spacing values outside the defined scales.\n- Don't center or justify body text by default.\n- Don't reach for accent color unless the UI genuinely needs to attract attention.\n- Don't add elements that don't earn their place — when in doubt, remove it.\n",[],[174,542,46],"sleek-ui","0a5a971a-13e4-4841-abf8-1093d38f8816",["D",1780688823487],[308],[174,542],"522e2d20-5927-11f1-9996-ee650bb23af1","522e2dfc-5927-11f1-9996-ee650bb23af1","4e2a9291-2907-4c55-b49c-832837935ff8",["D",1779816084246],"---\nname: release-notes\ndescription: Draft user-facing release notes from a week of commits\ntriggers:\n - draft release notes\n - what shipped\n - weekly notes\n - changelog\n---\n\n# Release Notes\n\nGiven a date range:\n\n1. **Pull merged PRs** in that range.\n2. **Cluster by user-visible theme.** \"Auth\", \"Search\", \"Performance\" — not by component name.\n3. **Translate.** A PR titled `fix(api): handle nil pointer in /v2/users` becomes a one-liner like *\"Fixed a rare crash when loading the user list.\"*\n4. **Lead with the wins.** Bug fixes after features.\n\n## Anti-goals\n\n- Don't include internal refactors.\n- Don't list every PR — group ruthlessly.\n- Don't use the words \"improved\" or \"enhanced.\" They're noise.\n",[],[174,554,46],"release-notes","8aaa165a-5927-11f1-983d-ee650bb23af1","release_notes.md","8aaa1718-5927-11f1-983d-ee650bb23af1","040c81aa-8653-4f87-bb1b-464e2d011ac0",40,["D",1779816178993],"# [HEADLINE — to fill in]\n\n## What's new\n\n- [user-visible win, one sentence]\n- [user-visible win, one sentence]\n\n## What we fixed\n\n- [user-visible fix, one sentence]\n- [user-visible fix, one sentence]\n\n---\n\n*Range: [start] → [end]. Internal refactors omitted.*\n",[],[174,554,564,556],"templates","8aaa3ae0-5927-11f1-983d-ee650bb23af1",["D",1779816178993],[305],[174,554,564],"985aeef0-5927-11f1-8b1a-ee650bb23af1","merged_prs.ts","985af1f2-5927-11f1-8b1a-ee650bb23af1","e9f00e27-63ed-463f-bdff-6f6771dd781e",46,["D",1779816201922],"// List merged PRs in a date range for release-notes drafting.\n// Usage:\n// deno run --allow-run merged_prs.ts

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

\");\n\nconst cmd = new Deno.Command(\"gh\", {\n args: [\n \"pr\",\n \"list\",\n \"--state\",\n \"merged\",\n \"--search\",\n `merged:${start}..${end}`,\n \"--json\",\n \"number,title,author,labels,mergedAt\",\n \"--limit\",\n \"200\",\n ],\n});\nconst { stdout } = await cmd.output();\nconsole.log(new TextDecoder().decode(stdout));\n",[],[174,554,180,570],"985afdbe-5927-11f1-8b1a-ee650bb23af1",["D",1779816201922],[303],[174,554,180],"7ac5b758-5927-11f1-a17b-ee650bb23af1","user_i_write_headline.md","7ac5b7f8-5927-11f1-a17b-ee650bb23af1","be506f4b-5755-4680-a0bf-5ced0759d7bf",34,["D",1779816152349],"---\nname: i-write-headline\ndescription: I write the headline; agent drafts the body\nmetadata:\n type: user\n---\n\nDraft the body but leave the headline to me — that's where I want to taste-test the framing.\n\n**Why:** The headline sets the editorial tone and I have strong opinions about which beat to lead with. I'd rather see it as a placeholder I overwrite than something I have to talk you out of.\n\n**How to apply:** Output `## [HEADLINE — to fill in]` at the top, then the body. Don't draft a headline.\n",[],[174,554,414,583],"78c4810a-5927-11f1-a117-ee650bb23af1","feedback_user_voice.md","78c481d2-5927-11f1-a117-ee650bb23af1",33,["D",1779816148916],"---\nname: user-voice-not-engineer-voice\ndescription: Translate from changelog-speak to plain English\nmetadata:\n type: feedback\n---\n\nTranslate from changelog-speak to plain English. If a user wouldn't care, cut it.\n\n**Why:** Release notes that look like git logs are useless to the people who actually read them. Translation is the whole job.\n\n**How to apply:** For each PR, ask \"what changed for the user?\" not \"what changed in the code?\" If the answer is nothing user-visible, drop it.\n",[],[174,554,414,592],"78c4aacc-5927-11f1-a117-ee650bb23af1",["D",1779816148916],[300,301],[174,554,414],"522e5548-5927-11f1-9996-ee650bb23af1",["D",1779816084246],[299,302,304,306],[174,554],"b4c8427a-b74d-4b4d-8d47-e3ef56fb496c","f47bf1fa-5fc8-11f1-b0c1-1607ee4eb77e","d3436b4b-978f-4da0-aaf1-352d9e645bee",157,["D",1780545212495],"---\nname: rabbithole-writeup\ndescription: Write a Wikipedia-style \"rabbithole\" exploration and publish it to the dcm31/mdsite Val Town blog\ntriggers:\n - new rabbithole\n - write a rabbithole\n - add an exploration to my mdsite\n - mdsite writeup\n - save this as a rabbithole\n---\n\n# Rabbithole Writeup\n\nPublish a comprehensive, encyclopedic writeup to **`dcm31/mdsite`** (the \"mdsite\" — markdown-as-a-site val). A \"rabbithole\" is an **exploration**: a Wikipedia-style article that captures everything learned on a topic as durable, impersonal reference — *not* a personal-journey blog post.\n\n## Where it lives\n\n`dcm31/mdsite` is a Hono val that renders markdown. Two things define a post:\n\n1. **`posts.ts`** — the manifest. Append an entry:\n ```ts\n { slug: \"my-slug\", title: \"Title Case Encyclopedic Title\", date: \"YYYY-MM-DD\", category: \"explorations\" }\n ```\n Categories: `writing` (default), **`explorations`** (rabbitholes — use this), `farm-log`. Add `draft: true` only if asked (hides from listings; still reachable by URL).\n2. **`blog/.md`** — the article body. The H1 inside the file is the on-page title.\n\nThe homepage lists explorations via a `{{explorations}}` placeholder; adding the manifest entry is enough to make it appear.\n\n## House style (match the existing explorations)\n\nRead `blog/artificial-land.md` and `blog/kratky-greens.md` first — mirror them.\n\n- **Encyclopedic, third person.** No \"I\", no narrative of how the work happened. Write as if it were a reference article on the *subject*, even when the subject is something we just built.\n- **Lead paragraph** opens with the **bold term** being defined, then summarizes scope.\n- **Numbered `##` sections** (`## 1.`, `### 1.1`) for comprehensive pieces; `---` horizontal rules between top-level sections.\n- **Inline source links** to Wikipedia and primary sources, woven into prose (not a footnote dump).\n- **Tables** render (GFM). Use them for comparisons.\n\n## Table of contents (anchors are manual)\n\n`marked` does **not** auto-generate heading IDs, so `[link](#section)` won't work on its own. Place an explicit anchor on its own line *before* each section heading, and build a Contents list that points to them:\n\n```md\n\n## 1. Hardware overview\n```\n```md\n## Contents\n1. [Hardware overview](#hw)\n2. [The color model](#color)\n```\n\n## Interactive embeds (the killer feature)\n\nThe renderer supports an `iframe` code-fence — use it to embed a live val/demo directly in the article:\n\n````md\n```iframe height=820\nhttps://your-val-endpoint.web.val.run/\n```\n````\n\nThe info string is `iframe` + optional `height=NNN`; the fence body is the URL. It renders a bordered \"▶ interactive\" frame. Always read the live endpoint URL from `list_files`/`fetch_val_endpoint` — never construct it.\n\n## Code on the rabbithole\n\nKeep substantial code in its **own val** and (a) embed the live version via the `iframe` fence, (b) link to source (`https://www.val.town/x//`), (c) inline only a short, illustrative excerpt. If the linked val is referenced from this public site, set its privacy to `unlisted` so the source link resolves for readers.\n\n## Images\n\n- Rehost remote images to stable URLs first: `GET /rehost?url=...&credit=...&token=$REHOST_TOKEN` returns an `/i/` URL on the site. Gallery at `/rehosted`.\n- Or use Wikimedia `Special:FilePath` URLs directly.\n- Caption with an *italic* line immediately under the image; include attribution.\n\n## Finish\n\n1. Append the `posts.ts` entry **and** create `blog/.md`.\n2. Verify: `GET /blog/` returns 200 and the iframe/anchors/tables render.\n\n## Anti-goals\n\n- Don't write it as a personal journal or changelog. It's reference material.\n- Don't invent the live endpoint URL — read it from the API.\n- Don't set `draft: true` unless asked.\n- Don't rely on auto heading-IDs; always add manual `` anchors for the TOC.\n",[],[174,615,46],"rabbithole-writeup","1749c461-161f-4695-a67d-97282483db15",["D",1780545212495],[297],[174,615],"4a92aa82-5927-11f1-8ada-ee650bb23af1","4a92ab4a-5927-11f1-8ada-ee650bb23af1","2a094cab-dd14-41a6-a915-964deb3bb88d",15,["D",1779816071451],"---\nname: pr-review\ndescription: Pre-merge review focused on correctness, not style nits\ntriggers:\n - review my pr\n - ship check\n - is this ready\n - pre-merge\n---\n\n# Ship Check\n\nRun before merging anything to main. Three passes:\n\n1. **Correctness.** Does the diff do what the PR title says? Any unhandled errors, off-by-ones, race conditions?\n2. **Blast radius.** What else might this break? Grep for callers of changed functions.\n3. **Tests.** Does the test plan actually cover the new code path, or is it theater?\n\nOutput: a punch list of high-confidence findings only. Skip nits.\n\n## Anti-goals\n\n- Don't comment on style — the linter handles that.\n- Don't ask for tests where the code is obviously a one-off.\n- Don't approve speculatively. If something smells, say so.\n",[],[174,628,46],"pr-review","875bca2a-5927-11f1-ac92-ee650bb23af1","punch_list.md","875bcb42-5927-11f1-ac92-ee650bb23af1","3f2397d4-8b0f-4ce9-bef8-031bbaa27a50",38,["D",1779816173463],"# Ship Check findings\n\n- **[high]** [file:line] — [terse description, action implied]\n- **[med]** [file:line] — [terse description]\n- **[low]** [file:line] — [terse description]\n\n(No findings means ship it.)\n",[],[174,628,564,630],"875bec8a-5927-11f1-ac92-ee650bb23af1",["D",1779816173463],[294],[174,628,564],"8e732aec-5927-11f1-aa02-ee650bb23af1","pr_diff.ts","8e732bbe-5927-11f1-aa02-ee650bb23af1","505319ee-6aa5-41cb-a106-3f8606bf893f",42,["D",1779816185359],"// Print the diff of a PR for review.\n// Usage:\n// deno run --allow-run pr_diff.ts \n\nconst prNum = Deno.args[0];\nif (!prNum) throw new Error(\"Usage: pr_diff.ts \");\n\nconst cmd = new Deno.Command(\"gh\", { args: [\"pr\", \"diff\", prNum] });\nconst { stdout } = await cmd.output();\nconsole.log(new TextDecoder().decode(stdout));\n",[],[174,628,180,643],"9090e1c0-5927-11f1-ba97-ee650bb23af1","caller_grep.ts","9090e27e-5927-11f1-ba97-ee650bb23af1",43,["D",1779816188902],"// Grep for callers of a given function name across the repo.\n// Usage:\n// deno run --allow-run --allow-read caller_grep.ts [path]\n\nconst [fn, root = \".\"] = Deno.args;\nif (!fn) throw new Error(\"Usage: caller_grep.ts [path]\");\n\nconst cmd = new Deno.Command(\"rg\", {\n args: [\"-n\", \"--no-heading\", `\\\\b${fn}\\\\s*\\\\(`, root],\n});\nconst { stdout } = await cmd.output();\nconsole.log(new TextDecoder().decode(stdout));\n",[],[174,628,180,652],"8e734e28-5927-11f1-aa02-ee650bb23af1",["D",1779816185359],[291,292],[174,628,180],"69a221f0-5927-11f1-9c22-ee650bb23af1","reference_test_conventions.md","69a222ae-5927-11f1-9c22-ee650bb23af1","dd1334f9-6c8b-46b6-97ac-6a33262beda0",26,["D",1779816123580],"---\nname: test-conventions\ndescription: See docs/testing-philosophy.md for what \"real test\" means\nmetadata:\n type: reference\n---\n\n`docs/testing-philosophy.md` defines what a \"real test\" looks like in this codebase — integration over unit, no DB mocks, real fixtures.\n\n**How to apply:** When evaluating the test plan section of a PR, check that new tests follow these conventions. Snapshot tests of mocked output don't count as coverage here.\n",[],[174,628,414,664],"6789c440-5927-11f1-8833-ee650bb23af1","project_merge_freeze.md","6789c51c-5927-11f1-8833-ee650bb23af1",25,["D",1779816120076],"---\nname: merge-freeze\ndescription: Non-critical merges paused through 2026-03-05 mobile release cut\nmetadata:\n type: project\n---\n\nNon-critical merges paused 2026-03-05 through mobile release cut.\n\n**Why:** Mobile team cuts a release branch on 2026-03-05; main needs to be stable. Non-critical PRs should wait.\n\n**How to apply:** When reviewing, flag whether a PR is critical (security, broken-prod-fix) or non-critical (feature, refactor, polish). For non-critical, recommend holding until after the cut.\n",[],[174,628,414,673],"6bc7e7a8-5927-11f1-bdbc-ee650bb23af1","feedback_punch_lists.md","6bc7e848-5927-11f1-bdbc-ee650bb23af1",27,["D",1779816127198],"---\nname: punch-lists-not-prose\ndescription: Output is a bulleted list — no overall framing\nmetadata:\n type: feedback\n---\n\nBulleted list. No \"overall this looks great\" framing.\n\n**Why:** I'm going to act on a list, not read a review essay. Praise paragraphs are noise.\n\n**How to apply:** Format the output as a flat bulleted list of findings, ordered by severity. No intro, no summary, no rating.\n",[],[174,628,414,681],"65714462-5927-11f1-b692-ee650bb23af1","feedback_high_confidence_only.md","65714520-5927-11f1-b692-ee650bb23af1",24,["D",1779816116560],"---\nname: high-confidence-only\ndescription: Skip uncertain findings; only flag what you're sure about\nmetadata:\n type: feedback\n---\n\nUncertain findings waste my time. Either you're sure or you don't mention it.\n\n**Why:** I get one chance to focus on a PR review. \"Might be a race condition, not sure\" forces me to redo the work to confirm. If you can't confirm, don't mention it.\n\n**How to apply:** Before listing a finding, mentally check: \"Would I bet $20 this is a real issue?\" If no, drop it.\n",[],[174,628,414,689],"657166a4-5927-11f1-b692-ee650bb23af1",["D",1779816116560],[286,287,288,289],[174,628,414],"4a92d70a-5927-11f1-8ada-ee650bb23af1",["D",1779816071451],[285,290,293,295],[174,628],"18afdb81-6543-477b-9bdc-6d6bbbd7c5a4","03e96b3e-64f8-11f1-8355-1607ee4eb77e","74e4b252-2812-42e8-b022-40861cc08287",172,["D",1781115180530],"---\nname: pixel-game-assets\ndescription: Generate retro game pixel art (top-down GBA-style rooms, chunky chibi character sprites, 2x2 sprite sheets) with gpt-image-1 reference-anchored image edits, run on Val Town with blob storage. Use when making stevensDemo-style dashboard art, restyling a character into overworld sprites, or any \"tiny pixel world\" asset ask.\ntriggers:\n - \"/pixel-game-assets\"\n - \"make sprites\"\n - \"pixel art assets\"\n - \"sprite sheet\"\n - \"retro game art\"\n - \"stevens style art\"\n---\n\n# Pixel Game Assets (gpt-image-1, Geoff-Litt style)\n\n## What This Skill Does\n\nProduces game-ready retro pixel art that actually matches a target style, by\n**anchoring every generation on reference images** instead of describing style\nin words alone. Proven on the Owl's Library\n(`dcm31/ai-village` → `owl-librarian/`), which restyled a detailed ChatGPT owl\ninto Pokémon-overworld sprites matching Geoff Litt's\n[stevensDemo](https://www.val.town/x/geoffreylitt/stevensDemo) art.\n\n**The one-sentence trick:** images.edit with [identity ref, style ref(s)] +\n\"keep the design of the first image, match the chunkiness/outlines/proportions\nof the second\" beats any text-only prompt.\n\n## The Working Reference Implementation\n\n`dcm31/ai-village/owl-librarian/assets/` —\n\n- `setup-refs.ts` — pull style-anchor images (public URLs) into blob storage `…/ref/*`\n- `convert-refs.ts` — re-encode every ref as RGBA PNG via imagescript (see Failure Modes)\n- `generate.ts` — jobs map `{prompt, refs, size, background}`; set `ONLY=[\"job\"]`, run, output → blob `…/assets/.png`\n- backend serves `/api/images/:filename` from blob → curl locally → look at it → tune → rerun\n\nCopy that folder's pattern wholesale for a new project. Refs the API can't\nfetch by URL (local files) get uploaded via a **temporary nonce-gated PUT\nendpoint that you delete immediately after** (val code is public!).\n\n## The Style Recipe (paste-and-adapt)\n\nThe STYLE string that reproduced Geoff's sprite look:\n\n> very chunky 16-bit pixel art, GBA-era Pokemon overworld NPC style: the\n> character reads as roughly 24x24 logical pixels, thick dark outline around\n> every shape, flat colors with at most 3 shades per material, big-head chibi\n> proportions where the head is half the total height\n\nPer-asset prompt skeletons that worked:\n\n- **Character sprite sheet** (one call = consistent poses): \"Create a 2x2\n sprite sheet of ONE character in 4 poses on a fully transparent background.\n The character is [identity description] — keep the design from the first\n reference image. Render as [STYLE]; match the pixel chunkiness, outline\n weight and proportions of the [style] reference sprites exactly. Grid\n layout, each pose centered in its quadrant, all four the exact same scale:\n top-left: …, top-right: …, bottom-left: …, bottom-right: …. No labels, no\n grid lines, no ground shadows, nothing else.\" → display one quadrant at a\n time with CSS `background-size: 200%` + `background-position` (no slicing).\n- **Room/scene remix**: \"Recreate the first reference image's exact\n composition and pixel-art style, but… KEEP: [list everything to preserve].\n CHANGE: [the re-theme, naming each object and where it goes, sized 'BIG and\n chunky like the reference furniture']. Absolutely no letters or words\n anywhere in the image.\"\n- **Companion character**: style ref only + a tight text identity (\"tiny boxy\n robot courier, mint-green rounded body, single cyan visor eye, antenna with\n amber tip, brown satchel\").\n- **Follow-up scenes** (e.g. the full interior of a building you already\n generated): anchor on YOUR OWN accepted output as the first reference —\n palette, outline weight, and furniture scale carry over, so \"now show the\n whole interior, like a Pokemon building interior, no outdoors anywhere\"\n lands in one or two rolls. Spell out the floor plan wall by wall and add\n \"the room is empty of people and animals\".\n\nSettings: `model: gpt-image-1`, `quality: \"medium\"` is the sweet spot\n(~$0.04, 20–40s, Geoff-grade output); `background: \"transparent\"` for\nsprites, `\"opaque\"` for scenes; 1024x1024.\n\n## Failure Modes → Fixes (all hit in practice)\n\n| Symptom | Cause | Fix |\n|---|---|---|\n| `400 Invalid image file or mode for image N` | palette-mode PNG or JPEG bytes with .png name in refs | re-encode every ref as RGBA PNG (`convert-refs.ts`, imagescript `decode→encode`) |\n| Sign/label text comes out garbled (\"QUIET BOSER\") | pixel-art text generation is unreliable | never request words; ask for an icon plaque instead, or overlay text in CSS |\n| Character body fragments (floating head/antenna) | pose change too far from ref (esp. side profiles of boxy shapes) | \"must stay one solid connected character with the head firmly attached\"; name each part as attached; prefer front-facing step pose over profile |\n| Poses drift off-model across calls | each call re-imagines | generate all poses in ONE sheet call, or feed the accepted pose back as ref for the next |\n| Scene hotspots misaligned in app | coordinates estimated off the raw image | calibrate against the live render (screenshot, measure, convert: css = (screen − origin)/scale) |\n\n## Val Town Gotchas (the pipeline side)\n\n- `blob.get()` returns a **Response** — `await res.arrayBuffer()`, never wrap it in another Response.\n- `std/sqlite` wants `execute({sql, args})` (positional args are silently dropped) and returns **positional array rows**.\n- Frontend value-imports from a `shared/` folder need their own serve route — type-only imports vanish at transpile, value imports 404 unless `/shared/*` is served.\n- Generation runs **on the val** (`run_file`) so the OPENAI_API_KEY never leaves Val Town env.\n\n## Verify Loop (non-negotiable)\n\n1. Generate → 2. curl the serving endpoint to a local file → 3. actually look\nat it (at intended display size — 64px sprites hide flaws at full res) → 4.\ntune ONE thing in the prompt → rerun just that job (`ONLY`). Two or three\nrounds per asset is normal; the sheet landed in one, the walking robot took\nthree.\n\n## Anti-Goals\n\n- Don't hand-draw or SVG-fake pixel art. Don't prompt style by adjectives\n alone when a reference image exists. Don't batch many jobs in one run while\n iterating (timeouts + wasted spend). Don't leave upload endpoints or unused\n refs behind.\n",[],[174,712,46],"pixel-game-assets","2e392136-083f-4a11-815a-f135a168522b",["D",1781115180530],[283],[174,712],"bced21b3-4265-4a8f-81b3-3424d829c83c","1e5fb8f6-64f8-11f1-b104-1607ee4eb77e","7cd03de6-072c-4623-9532-735b236b4acd",173,["D",1781115224928],"---\nname: pixel-diorama-app\ndescription: Turn any system, log, or workflow into a living stevensDemo-style pixel diorama on Val Town — a little room where a character walks between stations doing the work, narrated by speech bubbles, with themed modals for the underlying data. Use when asked to \"make X into a lil pixel world / village / library\", visualize an agent or CRUD system as a scene, or build another Owl's Library.\ntriggers:\n - \"/pixel-diorama-app\"\n - \"make it a lil pixel world\"\n - \"stevens style dashboard\"\n - \"pixel diorama\"\n - \"owl librarian style\"\n - \"visualize this as a village\"\n---\n\n# Pixel Diorama App (the Owl's Library pattern)\n\n## What This Skill Does\n\nWraps a real (or mocked) system in a tiny pixel world: a full-view room, one\nresident character who **walks to a different station for each action type**,\nvisitors who bring requests, speech bubbles that narrate, and clickable\nfurniture that opens legible, themed data views. Born from remixing Geoff\nLitt's [stevensDemo](https://www.val.town/x/geoffreylitt/stevensDemo) into the\n**Owl's Library** (`dcm31/ai-village` → `owl-librarian/` — the reference\nimplementation; live demo on that val's backend endpoint).\n\n## The Recipe\n\n**1. Pick the metaphor first.** System → place; action types → duties with\ndistinct *stations*; requesting actors → visiting patrons; the data log → a\nledger you walk through entry by entry (PREV/NEXT + arrow keys). Example\nmapping (skills librarian): read→fetch from a bookcase, create→shelve a new\nvolume (✨), update→revise at the desk (quill + inkwell), delete→carry to the\nwithdrawn crate, list→survey the stacks. **Every CRUD verb gets its own spot,\npose, and prop** — that's what makes the scene legible.\n\n**2. Data layer (stevensDemo shape).** One sqlite table of entries\n(`id, date, text, actor, action, object, createdDate`), Hono CRUD at\n`/api/entries`, a `populateDemo.ts` seeder with charming in-character text\n(the entry text IS the bubble copy — write it in the character's voice), and a\nmocked catalog as a typed const in `shared/` so the whole thing runs on one\nval until you wire the real source.\n\n**3. Art** via the **pixel-game-assets** skill: full-interior room (Pokemon\nbuilding interior, walls on all four edges, a station per duty + a door +\ncounter for visitors), one 2×2 sprite sheet for the resident (front / back /\nwalking / carrying), a companion sprite ×2 (standing + walking) for patrons.\n\n**4. Scene engine (no canvas, no client framework beyond React):**\n- World = `512×512` div with the room as `background-image`,\n `image-rendering: pixelated` everywhere.\n- Character = a div showing ONE sheet quadrant: `background-size: 128px 128px`\n + `background-position` per pose; moved by inline `left/top` with\n `transition: left .7s ease-in-out, top .7s ease-in-out`.\n- While moving show the walking quadrant and mirror with `scaleX(-1)` when\n heading right; settle into the duty pose on arrival.\n- **Drive \"arrived\" with a timer (transition duration + a beat), not\n `transitionend`** — same-position entries never fire the event.\n- Pulsing `box-shadow` highlight rect on the active station; tiny CSS/emoji\n props per duty (✨ when shelving, quill when revising, teacup easter egg).\n\n**5. Speech bubbles, not caption bars.** Charlie prefers the ai-village\nbubble interface over bottom-of-screen text. Bubble = absolutely-positioned\ndiv above the character (`transform: translate(-50%, -100%)`, clamped x),\ncream bg, 3px dark border, CSS-triangle tail, pop-in keyframe; first line is\na tiny duty badge (`📖 FETCH`), body is the entry text. Hide while walking,\npop on arrival. Patrons get a smaller bubble with their request.\n\n**6. Patron choreography — never loop frames on an interval** (flashing\nsprites read as broken). A small state machine instead: when the current\nentry has an outside actor, mount the patron at the door, double-rAF, then\nset the counter position so the CSS transition walks them in; they stand\n**static** while waiting; when not needed they walk back to the door and fade\n(opacity transition with delay). Walking frame only while actually moving.\n\n**7. Legible data views as furniture.** Every modal is themed but boring-\nreadable inside: the desk opens the ledger (full CRUD table, paginated); the\nbookcases/cabinet open a catalog browser (cards w/ name, blurb, shelf tabs,\nand usage stats computed client-side from the entries already fetched). Keep\nmodals data-driven from the shared consts so swapping mock → real is a data\nchange.\n\n**8. Calibrate coordinates against the live render.** Screenshot the deployed\npage, measure stations in screen px, convert (`css = (screen − worldOriginX) /\nscale`), update the `SCENE_ELEMENTS` / `SPOTS` consts, re-screenshot. Never\ntrust coordinates estimated off the raw image.\n\n## Val Town Gotchas (will bite, in order of likelihood)\n\n- `blob.get()` returns a **Response**: `await res.arrayBuffer()`; serve with\n `new Response(res.body, { headers })`.\n- `std/sqlite`: `execute({ sql, args })` — positional args are **silently\n ignored** (NULL inserts); result rows are **positional arrays**, map by\n SELECT order.\n- Browser value-imports from `shared/` 404 unless you add a\n `/shared/*` → `serveFile` route (type-only imports vanish at transpile,\n value imports don't).\n- After every deploy the first page load **cold-starts** (seconds of\n \"loading\", buttons disabled) — wait before judging it broken.\n- Each http file in a folder gets its own endpoint URL — an offshoot folder\n app never has to touch the host val's `main.ts`.\n\n## Taste Rules (Charlie-calibrated)\n\n- Full-view interiors beat cutaway exteriors — spend the pixels on the room.\n- Speech bubbles > bottom caption bars.\n- Distinct station + pose + prop per action; if two actions look the same,\n the scene failed.\n- No idle frame-flapping; motion only when something moves.\n- Modals: themed frame, legible guts. Parchment is a garnish, not a font.\n\n## Anti-Goals\n\nDon't build a game engine (no canvas loop, no physics). Don't connect the\nreal system before the diorama is charming with mocks. Don't add characters\nthat don't map to real actors in the data.\n",[],[174,725,46],"pixel-diorama-app","66578fc0-0d62-4d92-bfee-fffa559eb076",["D",1781115224928],[281],[174,725],"47eabd4c-5927-11f1-8ee0-ee650bb23af1","47eabf5e-5927-11f1-8ee0-ee650bb23af1","4d45bd9b-e9e4-476e-b30f-9b0f5adb3f20",14,["D",1779816067016],"---\nname: inbox-zero\ndescription: Triage email into reply / wait / archive piles and draft the easy replies\ntriggers:\n - tidy the inbox\n - process email\n - inbox zero\n - clean up email\n---\n\n# Inbox Zero\n\nMove every unread email into one of three buckets:\n\n- **Reply** — needs a response from me in the next 24h.\n- **Wait** — I'm waiting on someone else; archive with a follow-up reminder.\n- **Done** — read-and-archive; no action needed.\n\nFor everything in **Reply**, draft a short response in my voice (terse, no greeting) as a Gmail compose URL.\n\n## Anti-goals\n\n- Don't auto-send anything.\n- Don't archive without showing me the subject lines first.\n",[],[174,738,46],"inbox-zero","85b646a0-5927-11f1-a990-ee650bb23af1","compose_url.md","85b64754-5927-11f1-a990-ee650bb23af1","873a5f92-f92e-4b9c-8e2d-8d29787dd1f6",37,["D",1779816170699],"# Gmail compose URL\n\nURL form (newlines preserved, unlike the draft API):\n\n```\nhttps://mail.google.com/mail/?view=cm&to=RECIPIENT&su=SUBJECT&body=BODY_URLENCODED\n```\n\nEncode the body with `encodeURIComponent(body)`. Don't pre-encode newlines as `%0A` manually — the encoder handles it.\n",[],[174,738,564,740],"85b66ab8-5927-11f1-a990-ee650bb23af1",["D",1779816170699],[278],[174,738,564],"8cb07fe8-5927-11f1-ba97-ee650bb23af1","fetch_unread.ts","8cb080c4-5927-11f1-ba97-ee650bb23af1","01c250be-e49a-4eda-8827-79bb4fb18305",41,["D",1779816182408],"// Fetch unread Gmail threads via the Gmail API.\n// Stub — wire to your own Gmail credentials.\n//\n// Usage:\n// deno run --allow-net --allow-env fetch_unread.ts\n\nconst TOKEN = Deno.env.get(\"GMAIL_ACCESS_TOKEN\");\nif (!TOKEN) throw new Error(\"Set GMAIL_ACCESS_TOKEN\");\n\nconst res = await fetch(\n \"https://gmail.googleapis.com/gmail/v1/users/me/threads?q=is:unread&maxResults=50\",\n { headers: { Authorization: `Bearer ${TOKEN}` } },\n);\nconst data = await res.json();\nconsole.log(JSON.stringify(data.threads ?? [], null, 2));\n",[],[174,738,180,753],"8cb08eca-5927-11f1-ba97-ee650bb23af1",["D",1779816182408],[276],[174,738,180],"62c75b84-5927-11f1-ae70-ee650bb23af1","feedback_terse_voice.md","62c75c2e-5927-11f1-ae70-ee650bb23af1","dd26b882-2c1d-47f7-9d6b-bcc9eb210a3f",23,["D",1779816112046],"---\nname: terse-voice\ndescription: No greeting, no sign-off — just the body\nmetadata:\n type: feedback\n---\n\nNo \"Hi Person,\" and no sign-off. Just the body.\n\n**Why:** I draft email like Slack DMs — quick, casual, no ceremony. Greetings feel formal and stilted in my voice.\n\n**How to apply:** Skip the salutation and the sign-off lines entirely. Open with the first substantive sentence.\n",[],[174,738,414,766],"6092394c-5927-11f1-aec0-ee650bb23af1","feedback_compose_url.md","609239f6-5927-11f1-aec0-ee650bb23af1",22,["D",1779816108382],"---\nname: compose-url-not-draft\ndescription: Use Gmail compose URLs, not the draft API\nmetadata:\n type: feedback\n---\n\nUse Gmail compose URLs; the draft API mangles newlines.\n\n**Why:** Gmail's `create_draft` MCP tool collapses paragraph breaks into single newlines, which makes drafts unreadable when I open them.\n\n**How to apply:** Always produce a `https://mail.google.com/mail/?view=cm&...` URL with the body URL-encoded. See `templates/compose_url.md`.\n",[],[174,738,414,775],"6092599a-5927-11f1-aec0-ee650bb23af1",["D",1779816108382],[273,274],[174,738,414],"47eae3c6-5927-11f1-8ee0-ee650bb23af1",["D",1779816067016],[272,275,277,279],[174,738],"040f73aa-5ebe-11f1-9e8a-1607ee4eb77e","hyperframes","b2853d12-cf83-44e6-9555-27f8df6dc77b",148,["D",1780430562988],[],[174,791],"f87e421d-7732-4426-abfe-d632d58dc809","38a84ee6-6032-11f1-8b39-1607ee4eb77e","b21ddf87-63ff-44cf-9224-0139f3c44157",162,["D",1780591256647],"---\nname: hyperdesigns\ndescription: >\n Create distinctive, animated \"living surface\" UI — WebGL liquid / plasma /\n aurora / chrome buttons and click-spray particle effects — using BOUNDED\n fragment shaders that can never blow out to white. Use when building flashy\n hero buttons, splash/landing pages, loaders, or any surface that should feel\n alive. Includes a reusable shader header (value-noise fbm + cosine palettes),\n a per-canvas runner with hover/click reactions, six palette recipes, and a\n 2D particle spray system. Pairs well with frontend-design for layout/typography.\n---\n\n# Hyperdesigns\n\nMake UI surfaces *alive*: animated GLSL backgrounds inside ordinary buttons and\ncards, plus particle FX that spray on click. The defining rule of this skill is\n**bounded math** — every shade is produced from `fbm` (always in `[0,1]`) and a\ntonemap, so the output is mathematically incapable of washing out to white.\n\n**Live demos:** garden of takes → ·\nliquid-CTA splash → \n\n## When to use\nHero CTAs, splash pages, empty states, loaders, \"wow\" moments. One living\nsurface per screen is plenty — let it carry the page; keep everything else calm.\n\n## Hard-won rules (read these first)\nThese are failure modes that already bit me — do not relearn them:\n\n1. **Never ship precision-dependent raymarch shaders for UI.** Tweet-sized\n raymarchers (e.g. zozuar's \"Waves\") get their dark areas from `mediump`\n floats *overflowing to infinity*. That only happens where `mediump` is true\n 16-bit (mobile). Most desktop GPUs promote `mediump`→`highp`, nothing\n overflows, and the whole thing renders **solid white**. Beautiful in a tweet,\n unreliable in a product. Use bounded math instead.\n2. **Keep all output in `[0,1]`.** Build value from `fbm` + `smoothstep`/`mix` +\n a final `col = col/(col+k); col = pow(col, 0.85);` tonemap. Bounded == safe.\n3. **Re-measure the canvas every frame.** A module script can run before its\n stylesheet applies, so the canvas is `1×1` and scales up into chunky \"N64\"\n pixelation. Resize each frame and skip drawing until it has real size.\n4. **Fail dark, not white.** `gl.clearColor(dark); gl.clear()` every frame and\n wrap shader init in try/catch — a broken program then shows a dark face.\n5. **Cap devicePixelRatio.** `min(dpr, 2)` for one canvas; `min(dpr, 1.5)` for a\n grid of many live canvases (each is its own GL context — browsers cap ~16).\n6. **Verify offline.** You cannot see GPU output here. Port the shader to\n Python/JS and print a brightness histogram (or ASCII render) before shipping —\n confirm `white% ≈ 0`, `black% ≈ 0`, and non-trivial contrast per variant.\n\n## Reusable shader header\nDrop this at the top of any fragment shader in this skill:\n\n```glsl\nprecision highp float; // bounded math -> highp is safe and stable\nuniform vec2 iResolution;\nuniform float iTime;\n\nfloat hash21(vec2 p){ p=fract(p*vec2(123.34,345.45)); p+=dot(p,p+34.345); return fract(p.x*p.y); }\nfloat vnoise(vec2 p){\n vec2 i=floor(p), f=fract(p); vec2 u=f*f*(3.0-2.0*f);\n float a=hash21(i), b=hash21(i+vec2(1,0)), c=hash21(i+vec2(0,1)), d=hash21(i+vec2(1,1));\n return mix(mix(a,b,u.x), mix(c,d,u.x), u.y);\n}\nfloat fbm(vec2 p){ float s=0.,a=.5; for(int i=0;i<4;i++){ s+=a*vnoise(p); p*=2.; a*=.5; } return s; }\nvec3 pal(float t, vec3 a, vec3 b, vec3 c, vec3 d){ return a + b*cos(6.28318*(c*t+d)); } // IQ cosine palette\n```\n\nThe shared \"flow field\" (domain-warped fbm) the takes are built on:\n\n```glsl\nvec2 p = (gl_FragCoord.xy - 0.5*iResolution.xy) / iResolution.y * 3.5; // aspect-correct\nfloat t = iTime * 0.15;\nvec2 q = vec2(fbm(p+vec2(0.,t)), fbm(p+vec2(5.2,1.3)-t));\nvec2 r = vec2(fbm(p+1.6*q+vec2(1.7,9.2)+t*.7), fbm(p+1.6*q+vec2(8.3,2.8)-t*.6));\nfloat n = fbm(p+2.0*r+vec2(t*.5,0.)); // 0..1 base field\nfloat ridge = pow(1.0 - abs(2.0*fbm(p*2.0+3.0*r+vec2(t,0.))-1.0), 3.0); // crest lines\n```\n\nAlways finish bounded:\n```glsl\nvec2 c2 = uv-0.5; col *= 1.0 - 0.28*dot(c2,c2); // vignette\ncol = col/(col+vec3(0.42)); // tonemap\ncol = pow(clamp(col,0.0,1.0), vec3(0.85)); // gentle lift\n```\n\n## Palette recipes (the six takes)\nCompute `n` + `ridge` once, then pick color:\n\n- **Tide** (teal liquid): `mix(deep .02,.09,.16 → mid .05,.45,.55 → hi .6,.93,.96)` by `smoothstep(n)`, add `hi*ridge`.\n- **Lava**: `c1 .18,.02,.02 → c2 .85,.18,.04 → c3 1,.75,.2`; embers `+= vec3(1,.6,.15)*ridge`.\n- **Aurora**: vertical curtains `aur=pow(fbm(vec2(p.x*.8+sin(p.y*1.5+iTime*.6)*.5, p.y*.55-iTime*.25)),1.6)`; `mix(green,violet, fbm)*aur` over a near-black base.\n- **Ink**: `vec3(smoothstep(.42,.72,n))` with a faint cool tint + light `ridge`.\n- **Plasma**: average of three `sin` waves, `mix` with `n`, colored via `pal(...)`.\n- **Mercury**: `mix(steel .08,.10,.13 → light .95,.98,1.0, pow(n,.7))` + sharp `sin` highlight band.\n- **Cells**: animated voronoi (F1/F2), `pal(cellId)` fills with bright `smoothstep(edge)` borders.\n- **Caustics**: 3 layers of `pow(0.5+0.5*sin(x)*sin(y), 6)` on warped coords → a bright underwater web.\n- **Oil-slick**: thin-film `pal(n*3 + r.x*4 + length(p))` iridescence over a near-black base.\n- **CRT**: greenish phosphor field × scanline `sin(gl_FragCoord.y)` × flicker, with an edge RGB fringe.\n\nFull multi-mode source (one `uniform int uMode`): the garden val's `frontend/garden.js`.\n\n## Per-canvas runner (JS)\n```js\nclass ShaderCard {\n constructor(canvas, mode){\n this.canvas = canvas; this.mode = mode|0; this.broken = false;\n this.gl = canvas.getContext(\"webgl\", { antialias:true, alpha:false });\n if (!this.gl) { this.broken = true; return; }\n try { this._init(); } catch (e) { console.error(e); this.broken = true; }\n this.phase = Math.random()*30; // desync multiple cards\n this.speed = 1; this.hover = false; this.last = performance.now();\n requestAnimationFrame((t)=>this._frame(t));\n }\n _resize(){ // RULE 3: re-measure every frame\n const gl=this.gl, c=this.canvas, dpr=Math.min(devicePixelRatio||1, 1.5);\n const w=Math.round(c.clientWidth*dpr), h=Math.round(c.clientHeight*dpr);\n if (w<2||h<2) return false;\n if (c.width!==w||c.height!==h){ c.width=w; c.height=h; gl.viewport(0,0,w,h); }\n return true;\n }\n stir(){ this.speed = Math.max(this.speed, 6.0); } // click = surge\n _frame(t){\n if (!this._resize()){ requestAnimationFrame((x)=>this._frame(x)); return; }\n const gl=this.gl;\n gl.clearColor(0.04,0.07,0.08,1); gl.clear(gl.COLOR_BUFFER_BIT); // RULE 4\n if (!this.broken){\n const dt=Math.min((t-this.last)/1000,0.05); this.last=t;\n this.speed += ((this.hover?2.6:1.0)-this.speed)*Math.min(dt*3,1); // hover = quicken\n this.phase += dt*this.speed;\n gl.useProgram(this.prog);\n gl.uniform2f(this.uRes, this.canvas.width, this.canvas.height);\n gl.uniform1f(this.uTime, this.phase);\n gl.drawArrays(gl.TRIANGLE_STRIP, 0, 4);\n }\n requestAnimationFrame((x)=>this._frame(x));\n }\n}\n```\n(`_init` = compile VERT/FRAG, link, full-screen quad in a STATIC buffer, cache\n`iResolution`/`iTime` locations, set `uMode` once.)\n\n## Click-spray (2D canvas particles)\nFor surfaces that should *spray* on click, overlay a 2D canvas and emit\nparticles at the pointer. Two variants:\n- **Spritz** — water droplets: upward-biased cone, strong gravity (~1500 px/s²),\n teal `hsla` filled circles that shrink+fade, plus an expanding ripple ring.\n- **Spark** — embers: full 360° fan, light gravity (~240), `globalCompositeOperation\n = \"lighter\"`, warm `hsla` line streaks (draw prev→cur) for glow trails.\nRun a continuous rAF (clear each frame, update `vy += g*dt`, drag on `vx`, cull on\n`life > ttl`), and add a faint idle drip every ~1.5s so the card lives before any\nclick. Full source: garden val's `SprayCard`.\n\n## Interaction grammar\n- **Hover** → ease flow speed up (`base 1 → ~2.6`).\n- **Click** → `stir()` (speed surge that eases back) for shaders; emit a burst at\n the pointer for spray cards.\n- Put white labels over a liquid with a dark scrim gradient + text-shadow for\n contrast (liquids drift bright).\n\n## On Val Town\nServe as a static frontend: `serveFile(c.req.path)` for `/frontend/*`, embed\n`

Hello

Memories (stickers)

Templates

Scripts

Memories

Files

${esc(deck)}

🎨 sprite-builder

Welcome ${session.user.username}

Diff · v191