[{"_1":2,"_3":-5,"_4":-5},"loaderData",{"_5":6,"_7":8,"_9":10},"actionData","errors","root",{"_502":503,"_504":505},"routes/_app.x.$handle.$name",{"_98":97,"_32":44,"_107":85,"_27":108,"_13":14,"_109":-5,"_11":110,"_111":112,"_113":114,"_115":116,"_117":118,"_20":-5,"_119":120,"_121":122,"_123":26,"_124":125,"_126":24,"_127":-5,"_128":-5,"_129":130},"routes/_app.x.$handle.$name.branch.$branch.version.$version.diff",{"_11":12,"_13":14,"_15":16,"_17":-5,"_18":-5},"project",{"_42":43,"_32":44,"_37":45,"_46":-5,"_47":26,"_48":49,"_50":49,"_51":52,"_53":-5,"_18":54,"_55":56,"_57":24,"_58":-5,"_59":-5,"_60":61,"_62":63,"_64":-5,"_65":-5,"_66":-5,"_67":-5,"_68":69,"_70":69,"_71":72,"_73":72,"_74":72,"_75":69,"_76":69,"_77":78,"_79":80,"_81":82,"_83":26},"version",3,"changes",[19],"aiChatInfo","userId",{"_20":21,"_22":-7,"_23":24,"_25":26,"_27":28,"_29":28},"file",{"_30":31,"_32":33,"_34":20,"_35":36,"_37":38,"_39":14,"_40":41,"_23":26},"previous","deleted",true,"deletedHere",false,"path","skills/pr-summarizer/SKILL.md","latestPath","fileId","4a6cb9f6-64e1-11f1-ac59-1607ee4eb77e","name","SKILL.md","fileType","content","---\nname: PR Summarizer\ndescription: Reads a GitHub pull-request diff and writes a concise, human-friendly release note. Use it to auto-generate changelogs or PR descriptions.\ncategory: Engineering\n---\n\n## What this skill does\n\nGiven a GitHub pull-request URL (or a raw diff), the agent produces a concise release note suitable for a changelog, a GitHub release, or a Slack announcement.\n\n---\n\n## When to use it\n\n- A PR is about to be merged and you need a one-paragraph summary for the changelog.\n- You want a non-technical release note from a technical diff.\n- You are bulk-summarising several PRs into a release summary.\n\n---\n\n## Step-by-step flow\n\n### 1. Obtain the diff\n- If the user supplied a GitHub PR URL (e.g. `https://github.com/owner/repo/pull/123`), fetch the raw diff by appending `.diff` to the URL:\n `https://github.com/owner/repo/pull/123.diff`\n- If the user pasted a diff directly, use that text as-is.\n- If authentication is needed (private repo), ask the user to supply a GitHub personal access token and include it as `Authorization: Bearer ` in the request.\n\n### 2. Extract PR metadata (optional but preferred)\n- Use the GitHub REST API to fetch the PR title, author, target branch, labels, and linked issues:\n `GET https://api.github.com/repos/{owner}/{repo}/pulls/{number}`\n- If the API is unavailable, derive context from the diff headers alone.\n\n### 3. Analyse the diff\nRead the diff and identify:\n- **What changed** — new features, bug fixes, refactors, dependency bumps, config changes.\n- **Why it changed** — infer from PR title, commit messages, and code comments.\n- **Affected areas** — file paths, modules, services.\n- **Breaking changes** — any removed exports, changed APIs, or migration steps.\n\n### 4. Write the release note\nProduce a release note with this structure:\n\n```\n### \n\n**What's new:** One sentence describing the user-visible change or fix.\n\n**Details:** Two to four sentences expanding on what was changed, why, and any\nnotable implementation choices. Omit internal-only refactors unless they affect\nconsumers.\n\n**Breaking changes:** (omit section if none)\nList any breaking changes and required migration steps.\n\n**Related:** #, @\n```\n\nRules:\n- Write for a technical-but-not-expert audience (e.g. a developer reading a changelog).\n- Use plain English; avoid jargon and internal code names.\n- Keep the whole note under 150 words.\n- Do **not** reproduce raw code snippets or stack traces.\n\n### 5. Return the output\n- Present the formatted release note in a Markdown code block so it is easy to copy.\n- Offer to adjust tone (more technical / more user-facing) or length if asked.\n- If multiple PRs were provided, repeat steps 1–4 for each and present them as a numbered list.\n","createdAt",["D",1781105420415],"branchVersion","branchId","480b51fc-49c7-4905-badf-a9d999a5e35e","id","715ee43d-50f8-4422-93b8-bb95b51d47b5","skills-librarian",["D",1781103906945],"deletedAt","legacyEnvVars","privacy","public","httpPrivacy","description","Shareable agent skill library","imageUrl","9319c175-2593-4f88-ba21-04f2ef7b1c28","pinnedFileId","019eb210-d0df-724e-8ef0-19691e025b98","pinPreview","pinMigrated","screenshotVersion","likeCount",0,"orgId","d663a026-6449-42f6-9156-1d4a2d64d38c","tursoName","tursoHostname","tursoMeasuredAt","pinned","userPerm","r","valPerm","blobPerm","rw","emailPerm","sqlitePerm","projectPerm","telemetryPerm","user",{"_98":97,"_106":102},"org",{"_98":97,"_99":100,"_101":102,"_18":54,"_103":104,"_105":26},"branch",{"_13":84,"_32":85,"_42":41,"_86":43,"_87":88,"_89":90,"_91":49,"_92":93,"_94":63,"_95":44,"_96":97},"isOwned",8,"main","projectId","forkedBranchId","7c862450-0674-426e-9c69-ceda93eca788","forkedBranchVersion",83,"forkedProjectPrivacy","forkedProjectId","6852d2a6-72e8-40e3-b5f0-53b7f8f82e7f","forkedProjectOrgId","projectName","userHandle","dcm31","handle","displayName","Charlie","avatar","https://imagedelivery.net/iHX6Ovru0O7AjmyT5yZRoA/3e904faa-3764-4629-c475-f561a49b0000/square512?exp=1789545599&sig=a8da35ef71655bebef6a4600a21351bd7f28e3bed5ff684593eef639c5d17466","tier","pro","canRestrictVals","profileImageUrl","branchName","","adoptOrgId",{"_42":43,"_32":44,"_37":498,"_46":-5,"_47":26,"_48":49,"_50":49,"_51":52,"_53":-5,"_18":54,"_55":56,"_57":24,"_58":-5,"_59":-5,"_60":61,"_62":63,"_64":-5,"_65":-5,"_66":-5,"_67":-5,"_68":69,"_70":69,"_71":72,"_73":72,"_74":72,"_75":69,"_76":69,"_77":499,"_79":500,"_81":501,"_83":26},"tree",[207,214,216,219,229,246,247,248],"files",[207,208,209,210,211,212,213,214,215,216,217,218,219,220,221,222,223,224,225,226,227,228,229,230,231,232,233,234,235,236,237,238,239,240,241,242,243,244,245,246,247,248],"counts",{"_196":61,"_197":151,"_198":61,"_199":200,"_201":202},"contents",[139,140,141,142,143,144,145,146],"upstreamProject",{"_42":93,"_32":137,"_51":52,"_53":-5,"_48":49,"_77":138},"upstreamBranch",{"_42":88,"_37":131,"_132":133,"_32":85,"_86":93,"_13":134,"_87":-5,"_89":-5,"_135":136,"_46":-5,"_83":26,"_48":49,"_96":97,"_62":63,"_95":137},"emptyEnvVars","flags",[],"hasHttpFiles","grants","orgs","customDomains",{},["D",1780679910053],"updatedAt",["D",1781113983230],96,"lockfileKey","1781113999708-esm.town_v_dcm31_skills@96-main","skills",{"_98":97,"_106":102},{"_42":191,"_32":192,"_30":193,"_150":-5,"_40":41,"_39":151,"_152":24,"_37":194,"_13":61,"_34":174,"_35":-5,"_23":26,"_156":-5,"_27":195},{"_42":186,"_32":187,"_30":188,"_150":-5,"_40":41,"_39":151,"_152":24,"_37":189,"_13":61,"_34":174,"_35":-5,"_23":26,"_156":-5,"_27":190},{"_42":181,"_32":182,"_30":183,"_150":-5,"_40":41,"_39":151,"_152":24,"_37":184,"_13":61,"_34":174,"_35":-5,"_23":26,"_156":-5,"_27":185},{"_42":176,"_32":177,"_30":178,"_150":-5,"_40":41,"_39":151,"_152":24,"_37":179,"_13":61,"_34":174,"_35":-5,"_23":26,"_156":-5,"_27":180},{"_42":171,"_32":137,"_30":172,"_150":-5,"_40":41,"_39":151,"_152":24,"_37":173,"_13":61,"_34":174,"_35":-5,"_23":26,"_156":-5,"_27":175},{"_42":165,"_32":166,"_30":167,"_150":-5,"_40":41,"_39":151,"_152":24,"_37":168,"_13":61,"_34":20,"_35":169,"_23":26,"_156":-5,"_27":170},{"_42":158,"_32":159,"_30":56,"_150":-5,"_40":41,"_39":151,"_152":26,"_37":160,"_13":61,"_34":161,"_35":162,"_23":26,"_156":163,"_27":164},{"_42":147,"_32":148,"_30":149,"_150":-5,"_40":41,"_39":151,"_152":24,"_37":153,"_13":61,"_34":154,"_35":155,"_23":26,"_156":-5,"_27":157},"2b75ade4-2a08-421e-92d7-7da7589bf4d5","og.ts","019eb210-d0df-724e-8ef0-1d88e12edf0f","parentId",1,"latest",["D",1781103906945],"script","// Open Graph / Twitter card image (1200×630), generated with satori (JSX→SVG)\n// + resvg-wasm (SVG→PNG). Served at GET /og.png. Light/blue theme to match the\n// Skill Library UI. Modeled on stevekrouse/agentfax's og.ts.\nimport satori from \"npm:satori@0.10.13\";\nimport { initWasm, Resvg } from \"npm:@resvg/resvg-wasm@2.6.2\";\n\n// Static-weight TTFs (variable fonts crash satori's opentype.js).\nconst SANS_BOLD_TTF =\n \"https://raw.githubusercontent.com/google/fonts/main/ofl/ptsans/PT_Sans-Web-Bold.ttf\";\nconst SANS_REGULAR_TTF =\n \"https://raw.githubusercontent.com/google/fonts/main/ofl/ptsans/PT_Sans-Web-Regular.ttf\";\nconst RESVG_WASM_URL = \"https://unpkg.com/@resvg/resvg-wasm@2.6.2/index_bg.wasm\";\n\nlet fontsPromise: Promise<{ bold: ArrayBuffer; regular: ArrayBuffer }> | null = null;\nfunction loadFonts() {\n if (!fontsPromise) {\n const get = (url: string, label: string) =>\n fetch(url).then((r) => {\n if (!r.ok) throw new Error(`${label} font fetch failed: ${r.status}`);\n return r.arrayBuffer();\n });\n fontsPromise = Promise.all([\n get(SANS_BOLD_TTF, \"Bold\"),\n get(SANS_REGULAR_TTF, \"Regular\"),\n ]).then(([bold, regular]) => ({ bold, regular }));\n }\n return fontsPromise;\n}\n\nlet wasmPromise: Promise | null = null;\nfunction ensureResvg(): Promise {\n if (!wasmPromise) {\n wasmPromise = fetch(RESVG_WASM_URL)\n .then((r) => {\n if (!r.ok) throw new Error(`resvg wasm fetch failed: ${r.status}`);\n return r.arrayBuffer();\n })\n .then((bytes) => initWasm(bytes));\n }\n return wasmPromise;\n}\n\nfunction pill(text: string) {\n return {\n type: \"div\",\n props: {\n style: {\n display: \"flex\",\n fontSize: 26,\n color: \"#404040\",\n background: \"#f5f5f5\",\n border: \"1px solid #e5e5e5\",\n borderRadius: \"999px\",\n padding: \"12px 28px\",\n },\n children: text,\n },\n };\n}\n\n// A stacked-cards \"library\" glyph as a satori SVG node (0–32 grid), scaled to `size`.\nfunction stackIcon(size: number) {\n return {\n type: \"svg\",\n props: {\n width: size,\n height: size,\n viewBox: \"0 0 32 32\",\n children: [\n { type: \"rect\", props: { x: 9, y: 3, width: 18, height: 22, rx: 3, fill: \"#bfdbfe\" } },\n { type: \"rect\", props: { x: 6, y: 6, width: 18, height: 22, rx: 3, fill: \"#60a5fa\" } },\n { type: \"rect\", props: { x: 3, y: 9, width: 18, height: 22, rx: 3, fill: \"#2563eb\" } },\n { type: \"rect\", props: { x: 6, y: 14, width: 12, height: 1.6, rx: 0.8, fill: \"#ffffff\" } },\n { type: \"rect\", props: { x: 6, y: 18, width: 9, height: 1.6, rx: 0.8, fill: \"#ffffff\" } },\n { type: \"rect\", props: { x: 6, y: 22, width: 11, height: 1.6, rx: 0.8, fill: \"#dbeafe\" } },\n ],\n },\n };\n}\n\nasync function renderSvg(count: number): Promise {\n const { bold, regular } = await loadFonts();\n const tree = {\n type: \"div\",\n props: {\n style: {\n width: \"1200px\",\n height: \"630px\",\n display: \"flex\",\n background: \"#fafafa\",\n padding: \"56px\",\n fontFamily: \"Sans\",\n },\n children: [\n {\n type: \"div\",\n props: {\n style: {\n flex: 1,\n display: \"flex\",\n flexDirection: \"row\",\n alignItems: \"center\",\n justifyContent: \"space-between\",\n padding: \"0 72px\",\n border: \"1px solid #e5e5e5\",\n borderRadius: \"28px\",\n background: \"#ffffff\",\n },\n children: [\n {\n type: \"div\",\n props: {\n style: { display: \"flex\", flexDirection: \"column\", maxWidth: \"640px\" },\n children: [\n {\n type: \"div\",\n props: {\n style: { display: \"flex\", fontSize: 28, fontWeight: 700, color: \"#2563eb\", letterSpacing: \"6px\" },\n children: \"SKILL LIBRARY\",\n },\n },\n {\n type: \"div\",\n props: {\n style: { display: \"flex\", fontSize: 104, fontWeight: 700, color: \"#171717\", letterSpacing: \"-3px\", marginTop: \"18px\" },\n children: \"Skill Library\",\n },\n },\n {\n type: \"div\",\n props: {\n style: { display: \"flex\", fontSize: 36, color: \"#525252\", lineHeight: 1.35, marginTop: \"20px\" },\n children: \"A shared library of reusable agent skills. Fork it and drop in your own.\",\n },\n },\n {\n type: \"div\",\n props: {\n style: { display: \"flex\", flexDirection: \"row\", gap: \"14px\", marginTop: \"34px\" },\n children: [pill(`${count} skill${count === 1 ? \"\" : \"s\"}`), pill(\"Built on Val Town\")],\n },\n },\n ],\n },\n },\n stackIcon(300),\n ],\n },\n },\n ],\n },\n };\n return await satori(tree as any, {\n width: 1200,\n height: 630,\n fonts: [\n { name: \"Sans\", data: bold, weight: 700, style: \"normal\" },\n { name: \"Sans\", data: regular, weight: 400, style: \"normal\" },\n ],\n });\n}\n\nexport async function renderOg(count: number): Promise {\n try {\n const svg = await renderSvg(count);\n await ensureResvg();\n const png = new Resvg(svg).render().asPng();\n return new Response(png, {\n headers: { \"content-type\": \"image/png\", \"cache-control\": \"public, max-age=3600\" },\n });\n } catch (err) {\n const msg = err instanceof Error ? err.stack || err.message : String(err);\n return new Response(`OG render failed:\\n${msg}`, {\n status: 500,\n headers: { \"content-type\": \"text/plain\" },\n });\n }\n}\n","label",[148],"0641aee1-076f-4061-8c5f-572eee06c7b8","http.tsx",["D",1781103906945],"http","/** @jsxImportSource npm:hono@4/jsx */\n// Skill Library — thin HTTP orchestrator for the public catalog. Routes only;\n// markup lives in components/, data + helpers in lib/skills.ts, client JS in\n// frontend/client.js. A skill is just a folder under skills/ — the catalog is\n// derived at runtime from each SKILL.md's frontmatter (no manifest). See\n// README.md. (The Slack \"skills librarian\" bot lives in librarian/.)\n\nimport { Hono } from \"npm:hono@4\";\nimport { marked } from \"npm:marked@15\";\nimport { readFile } from \"https://esm.town/v/std/utils/index.ts\";\nimport { parseVal } from \"https://esm.town/v/std/utils/index.ts\";\n\nimport {\n buildCopyPayload,\n esc,\n exampleAsset,\n getSkill,\n getSkills,\n parseFrontmatter,\n readSkillFile,\n} from \"./lib/skills.ts\";\nimport { librarianBar } from \"./lib/vt.ts\";\nimport { renderOg } from \"./og.ts\";\nimport { Layout } from \"./components/Layout.tsx\";\nimport { Home } from \"./components/Home.tsx\";\nimport { SkillDetail } from \"./components/SkillDetail.tsx\";\nimport { FileView } from \"./components/FileView.tsx\";\n\nconst app = new Hono();\napp.onError((err) => Promise.reject(err)); // full stack traces in logs\n\nconst origin = (c: { req: { url: string } }) => new URL(c.req.url).origin;\n\n// ── Public assets ────────────────────────────────────────────────────────────\n\napp.get(\"/client.js\", async () => {\n const js = await readFile(\"/frontend/client.js\", import.meta.url);\n return new Response(js, {\n headers: { \"content-type\": \"text/javascript; charset=utf-8\" },\n });\n});\n\napp.get(\"/source\", (c) => c.redirect(parseVal().links.self.val));\n\n// Social card image (Open Graph / Twitter)\napp.get(\"/og.png\", async () => renderOg((await getSkills()).length));\n\n// ── Pages ────────────────────────────────────────────────────────────────────\n\napp.get(\"/\", async (c) => {\n const librarian = await librarianBar();\n if (c.req.query(\"nudge\") === \"1\") librarian.connected = false; // ?nudge=1 previews the not-connected nudge\n if (c.req.query(\"nodm\") === \"1\") librarian.dmUrl = null; // ?nodm=1 previews the \"Add to Slack\" state\n return c.html(\n \n \n ,\n );\n});\n\napp.get(\"/skills/:slug\", async (c) => {\n const skill = await getSkill(c.req.param(\"slug\"));\n if (!skill) return c.notFound();\n const rawMd = await readSkillFile(skill.slug, \"SKILL.md\");\n if (!rawMd) return c.notFound();\n const { body } = parseFrontmatter(rawMd);\n const html = await marked.parse(body);\n const payload = buildCopyPayload(skill, rawMd); // payload keeps frontmatter — that IS the skill format\n // Live preview = the skill's first assets/*.html (see lib/skills.ts).\n const examplePath = exampleAsset(skill);\n const exampleHtml = examplePath\n ? (await readSkillFile(skill.slug, examplePath)) ?? undefined\n : undefined;\n return c.html(\n \n \n ,\n );\n});\n\n// Standalone, embeddable render of a skill's live example asset. Same design\n// system, no surrounding app chrome.\napp.get(\"/skills/:slug/example\", async (c) => {\n const skill = await getSkill(c.req.param(\"slug\"));\n const examplePath = skill && exampleAsset(skill);\n if (!skill || !examplePath) return c.notFound();\n const html = await readSkillFile(skill.slug, examplePath);\n if (html == null) return c.notFound();\n return c.html(\n \n \n ← {skill.name}\n \n

\n {skill.name} — examples\n

\n ,\n );\n});\n\napp.get(\"/skills/:slug/files/*\", async (c) => {\n const skill = await getSkill(c.req.param(\"slug\"));\n if (!skill) return c.notFound();\n const path = c.req.path.replace(`/skills/${skill.slug}/files/`, \"\");\n if (!skill.files.includes(path)) return c.notFound();\n const content = await readSkillFile(skill.slug, path);\n if (content === null) return c.notFound();\n const isMarkdown = path.endsWith(\".md\");\n const rendered = isMarkdown\n ? await marked.parse(parseFrontmatter(content).body)\n : `

${esc(content)}

`;\n return c.html(\n \n \n ,\n );\n});\n\nexport default app.fetch;\n","skill-library-example",[159],"5d121397-ccd8-400b-a3bf-385c821df739","README.md","019eb210-d0df-724e-8ef0-153f974d6fbb",["D",1781103906945],"# Skill Library\n\nA directory of reusable **agent skills**. Each skill is a folder of Markdown and\ncode; the app renders every skill's `SKILL.md` and gives you a one-click **Copy\nskill** button that puts a ready-to-run payload on your clipboard.\n\nA skill is **just a folder** — drop `skills//SKILL.md` in and it shows up.\nThere's no manifest to keep in sync. There's also a **Slack \"Skills Librarian\"**\nbot (in `librarian/`) that can list, explain, and CRUD skills by chat.\n\n🔗 **Catalog:** https://dcm31--92861134610211f1a0c51607ee4eb77e.web.val.run\n\n## How a skill is structured\n\nA skill is a folder under `skills//` following the standard Agent-Skills\nlayout, so it stays valid and discoverable by agents reading it outside this app:\n\n```\nskills//\n SKILL.md # entry point — what the skill does and the flow to follow\n scripts/ # runnable code the agent writes locally\n knowledge/ # reference docs the agent reads for context\n assets/ # optional HTML fragment, shown as a live example\n```\n\nOnly `SKILL.md` is required. Its YAML frontmatter is the skill's metadata —\n**this is the single source of truth; there is no separate manifest:**\n\n```markdown\n---\nname: PR Summarizer\ndescription: Reads a GitHub PR diff and writes a release note. Use when…\ncategory: Engineering\n---\n\n# PR Summarizer\n…the instructions an agent follows…\n```\n\nThe catalog is derived at request time: the app lists `skills/*`, reads each\n`SKILL.md`'s frontmatter for `name` / `description` / `category`, and collects\nthe folder's files. Add a folder → it appears. Edit frontmatter → the card\nupdates. (`name` falls back to a title-cased slug, `category` to\n\"Uncategorized\", if you omit them.)\n\n## Managing skills\n\nThree ways, in increasing convenience:\n\n1. **The Slack Skills Librarian** (see below) — \"list the skills\", \"how does X\n work\", \"create a skill that…\", \"change the UI skill to…\".\n2. **A coding agent** via the Val Town plugin (Claude Code / Codex / Cursor):\n `npx plugins add val-town/plugins`, then ask it to add or edit a skill.\n3. **By hand** in the Val Town editor — a skill's body is plain Markdown, so a\n typo fix is a two-second edit that deploys on save.\n\n## The Slack Skills Librarian (`librarian/`)\n\nA Slack agent (Claude + the Vercel AI SDK, built on the `templates/ai-slackbot`\nquickstart) that manages this library through a small set of structured tools.\nThe design split: **reads are broad, writes are deliberate.**\n\n| Tool | What it does |\n| --- | --- |\n| `list_skills` | Lightweight catalog (name / category / description) |\n| `read_skill` / `read_skill_file` | Read a skill's SKILL.md or a supporting file |\n| `create_skill` | New skill — writes the folder + SKILL.md with correct frontmatter |\n| `update_skill` | Change metadata, body, or one file of an existing skill |\n| `delete_skill` | Remove a skill (guarded by an explicit `confirm`) |\n\n`create_skill` / `update_skill` own the folder-and-frontmatter shape, so the bot\ncan't produce a malformed skill, and every write is scoped to this val's\n`skills/` folder. Reads use `std/utils` (token-free); writes use the Val Town\nREST API with a token (`VALTOWN_TOKEN`) and target the **current branch**, so on\nthe `librarian` branch new skills land on the branch until you merge to `main`.\n\n### Setup\n\n1. Open the bot's HTTP endpoint (the `librarian/events.ts` file's URL) and click\n **Create Slack App →** — scopes, events, and the webhook URL are pre-filled\n from a manifest.\n2. Install the app to your workspace, then set these environment variables on\n this val:\n - `SLACK_BOT_TOKEN`, `SLACK_SIGNING_SECRET` — from the Slack app\n - `ANTHROPIC_API_KEY` — for the model\n - `SLACK_APP_ID` *(optional)* — powers the catalog toolbar's \"DM the librarian\" link\n3. **Authorize Val Town writes** with one click on the `/connect` page (the\n `librarian/connect.ts` endpoint — also surfaced from the catalog's bottom\n bar). That stores a self-refreshing OAuth token so the librarian can create &\n edit skills. No API token to create or paste.\n4. Message the bot in its Assistant tab or `@mention` it in a channel.\n\n> Prefer a token over OAuth (or running headless)? Set `VALTOWN_TOKEN` to a Val\n> Town API token with val write access and the librarian uses that instead — it\n> takes priority. Either way, only the skill-CRUD tools touch it.\n\n---\n\n## Live examples\n\nA skill can ship a live preview — a working UI rendered right on its page. Drop\nan HTML fragment in the skill's `assets/` folder (e.g. `assets/showcase.html`)\nand reference it from `SKILL.md` with a Markdown link. The app renders the first\n`assets/*.html` it finds as an **Examples** panel, and serves it standalone\n(iframe-embeddable) at `/skills//example`. The **ui-example** skill ships\none and walks through the feature.\n\n## Technical details\n\n### Files\n\n```\nhttp.tsx # public catalog routes\nlib/skills.ts # skill discovery (folder → catalog), file + copy-payload helpers, frontmatter parse\nlib/vt.ts # Val Town REST client: skill writes + a catalog read-list fallback\nog.ts # social card image\ncomponents/ # Layout, Home, SkillDetail, FileView, FileTree\nfrontend/client.js # clipboard wiring for [data-copy] buttons\nskills// # the skills themselves (source of truth)\nlibrarian/ # the Slack Skills Librarian bot\n events.ts # HTTP entry: setup page + Slack /events + /process\n generate-response.ts # the agent loop (Claude + tools)\n skill-tools.ts # list / read / create / update / delete tools\n slack-utils.ts # Slack client, verification, thread reconstruction\n handle-*.ts # app_mention / message / thread_started handlers\n prompt.md # librarian system prompt\n```\n\n### Catalog routes\n\n| Route | Purpose |\n| --- | --- |\n| `/` | Home — grid of skill cards |\n| `/skills/:slug` | Skill detail — rendered `SKILL.md`, Copy button, file tree |\n| `/skills/:slug/example` | Standalone live example (when a skill ships an `assets/*.html`) |\n| `/skills/:slug/files/*` | Raw file viewer |\n| `/client.js`, `/source`, `/og.png` | Clipboard JS, source redirect, social card |\n\n### Gating it to your team\n\nBy default the catalog is public. To restrict it to a Val Town org, sign requests\nthrough `std/oauth` and check the signed-in user against your org's members (wrap\nthe `http.tsx` `fetch` export with the OAuth middleware). Requires a Teams\naccount.\n",[166],"3d37c7eb-e23c-4c61-ac2a-32db85bc7e93","019eb210-d0df-724e-8ef0-12a009395958",["D",1781103906945],"directory",[137],"8d48fe9b-81ba-424e-8510-14e50be10406","librarian","019eb210-d0df-724e-8eef-d61502f023fa",["D",1781103906945],[177],"490ea20d-0700-465e-a51e-5973a58cf309","lib","019eb210-d0df-724e-8eef-aed75fe9248d",["D",1781103906945],[182],"9e310058-7ef2-46b4-9cc4-f9a337443b0e","frontend","019eb210-d0df-724e-8eef-a0d067f439ac",["D",1781103906945],[187],"94ef85bd-59a7-4244-9aa3-fe2507888462","components","019eb210-d0df-724e-8eef-98bf7ecc2a38",["D",1781103906945],[192],"pulls","branches","forks","envVars",{"_203":205,"_206":205},"connections",{"_203":61,"_204":61},"count","unfilledCount",4,"emptyCount",{"_42":191,"_32":192,"_30":193,"_150":-5,"_40":41,"_39":151,"_152":24,"_37":495,"_13":61,"_34":174,"_35":-5,"_23":26,"_156":-5,"_250":496,"_27":497},{"_42":488,"_32":489,"_30":490,"_150":193,"_40":41,"_39":151,"_152":24,"_37":491,"_13":61,"_34":154,"_35":492,"_23":26,"_156":-5,"_250":493,"_27":494},{"_42":481,"_32":482,"_30":483,"_150":193,"_40":41,"_39":151,"_152":24,"_37":484,"_13":61,"_34":154,"_35":485,"_23":26,"_156":-5,"_250":486,"_27":487},{"_42":474,"_32":475,"_30":476,"_150":193,"_40":41,"_39":151,"_152":24,"_37":477,"_13":61,"_34":154,"_35":478,"_23":26,"_156":-5,"_250":479,"_27":480},{"_42":467,"_32":468,"_30":469,"_150":193,"_40":41,"_39":151,"_152":24,"_37":470,"_13":61,"_34":154,"_35":471,"_23":26,"_156":-5,"_250":472,"_27":473},{"_42":460,"_32":461,"_30":462,"_150":193,"_40":41,"_39":151,"_152":24,"_37":463,"_13":61,"_34":154,"_35":464,"_23":26,"_156":-5,"_250":465,"_27":466},{"_42":453,"_32":454,"_30":455,"_150":193,"_40":41,"_39":151,"_152":24,"_37":456,"_13":61,"_34":154,"_35":457,"_23":26,"_156":-5,"_250":458,"_27":459},{"_42":186,"_32":187,"_30":188,"_150":-5,"_40":41,"_39":151,"_152":24,"_37":450,"_13":61,"_34":174,"_35":-5,"_23":26,"_156":-5,"_250":451,"_27":452},{"_42":443,"_32":444,"_30":445,"_150":188,"_40":41,"_39":151,"_152":24,"_37":446,"_13":61,"_34":154,"_35":447,"_23":26,"_156":-5,"_250":448,"_27":449},{"_42":181,"_32":182,"_30":183,"_150":-5,"_40":41,"_39":151,"_152":24,"_37":440,"_13":61,"_34":174,"_35":-5,"_23":26,"_156":-5,"_250":441,"_27":442},{"_42":433,"_32":434,"_30":435,"_150":183,"_40":41,"_39":151,"_152":24,"_37":436,"_13":61,"_34":154,"_35":437,"_23":26,"_156":-5,"_250":438,"_27":439},{"_42":426,"_32":427,"_30":428,"_150":183,"_40":41,"_39":151,"_152":24,"_37":429,"_13":61,"_34":154,"_35":430,"_23":26,"_156":-5,"_250":431,"_27":432},{"_42":176,"_32":177,"_30":178,"_150":-5,"_40":41,"_39":151,"_152":24,"_37":423,"_13":61,"_34":174,"_35":-5,"_23":26,"_156":-5,"_250":424,"_27":425},{"_42":416,"_32":417,"_30":418,"_150":178,"_40":41,"_39":151,"_152":24,"_37":419,"_13":61,"_34":161,"_35":420,"_23":26,"_156":-5,"_250":421,"_27":422},{"_42":409,"_32":410,"_30":411,"_150":178,"_40":41,"_39":151,"_152":24,"_37":412,"_13":61,"_34":161,"_35":413,"_23":26,"_156":-5,"_250":414,"_27":415},{"_42":402,"_32":403,"_30":404,"_150":178,"_40":41,"_39":151,"_152":24,"_37":405,"_13":61,"_34":154,"_35":406,"_23":26,"_156":-5,"_250":407,"_27":408},{"_42":395,"_32":396,"_30":397,"_150":178,"_40":41,"_39":151,"_152":24,"_37":398,"_13":61,"_34":154,"_35":399,"_23":26,"_156":-5,"_250":400,"_27":401},{"_42":388,"_32":389,"_30":390,"_150":178,"_40":41,"_39":151,"_152":24,"_37":391,"_13":61,"_34":154,"_35":392,"_23":26,"_156":-5,"_250":393,"_27":394},{"_42":381,"_32":382,"_30":383,"_150":178,"_40":41,"_39":151,"_152":24,"_37":384,"_13":61,"_34":154,"_35":385,"_23":26,"_156":-5,"_250":386,"_27":387},{"_42":374,"_32":375,"_30":376,"_150":178,"_40":41,"_39":151,"_152":24,"_37":377,"_13":61,"_34":20,"_35":378,"_23":26,"_156":-5,"_250":379,"_27":380},{"_42":367,"_32":368,"_30":369,"_150":178,"_40":41,"_39":151,"_152":24,"_37":370,"_13":61,"_34":154,"_35":371,"_23":26,"_156":-5,"_250":372,"_27":373},{"_42":360,"_32":361,"_30":362,"_150":178,"_40":41,"_39":151,"_152":24,"_37":363,"_13":61,"_34":154,"_35":364,"_23":26,"_156":-5,"_250":365,"_27":366},{"_42":171,"_32":137,"_30":172,"_150":-5,"_40":41,"_39":151,"_152":24,"_37":357,"_13":61,"_34":174,"_35":-5,"_23":26,"_156":-5,"_250":358,"_27":359},{"_42":353,"_32":340,"_30":335,"_150":172,"_40":41,"_39":151,"_152":24,"_37":354,"_13":61,"_34":174,"_35":-5,"_23":26,"_156":-5,"_250":355,"_27":356},{"_42":349,"_32":324,"_30":344,"_150":335,"_40":41,"_39":151,"_152":24,"_37":350,"_13":61,"_34":174,"_35":-5,"_23":26,"_156":-5,"_250":351,"_27":352},{"_42":341,"_32":342,"_30":343,"_150":344,"_40":41,"_39":151,"_152":24,"_37":345,"_13":61,"_34":20,"_35":346,"_23":26,"_156":-5,"_250":347,"_27":348},{"_42":333,"_32":33,"_30":334,"_150":335,"_40":41,"_39":151,"_152":24,"_37":336,"_13":61,"_34":20,"_35":337,"_23":26,"_156":-5,"_250":338,"_27":339},{"_42":329,"_32":302,"_30":297,"_150":172,"_40":41,"_39":151,"_152":24,"_37":330,"_13":61,"_34":174,"_35":-5,"_23":26,"_156":-5,"_250":331,"_27":332},{"_42":325,"_32":324,"_30":319,"_150":297,"_40":41,"_39":151,"_152":24,"_37":326,"_13":61,"_34":174,"_35":-5,"_23":26,"_156":-5,"_250":327,"_27":328},{"_42":316,"_32":317,"_30":318,"_150":319,"_40":41,"_39":151,"_152":24,"_37":320,"_13":61,"_34":20,"_35":321,"_23":26,"_156":-5,"_250":322,"_27":323},{"_42":312,"_32":311,"_30":306,"_150":297,"_40":41,"_39":151,"_152":24,"_37":313,"_13":61,"_34":174,"_35":-5,"_23":26,"_156":-5,"_250":314,"_27":315},{"_42":303,"_32":304,"_30":305,"_150":306,"_40":41,"_39":151,"_152":24,"_37":307,"_13":61,"_34":154,"_35":308,"_23":26,"_156":-5,"_250":309,"_27":310},{"_42":295,"_32":33,"_30":296,"_150":297,"_40":41,"_39":151,"_152":24,"_37":298,"_13":61,"_34":20,"_35":299,"_23":26,"_156":-5,"_250":300,"_27":301},{"_42":290,"_32":289,"_30":285,"_150":172,"_40":41,"_39":291,"_152":26,"_37":292,"_13":61,"_34":174,"_35":-5,"_23":26,"_156":-5,"_250":293,"_27":294},{"_42":284,"_32":33,"_30":31,"_150":285,"_40":41,"_39":14,"_152":26,"_37":286,"_13":61,"_34":20,"_35":36,"_23":26,"_156":-5,"_250":287,"_27":288},{"_42":280,"_32":266,"_30":261,"_150":172,"_40":41,"_39":151,"_152":24,"_37":281,"_13":61,"_34":174,"_35":-5,"_23":26,"_156":-5,"_250":282,"_27":283},{"_42":276,"_32":275,"_30":270,"_150":261,"_40":41,"_39":151,"_152":24,"_37":277,"_13":61,"_34":174,"_35":-5,"_23":26,"_156":-5,"_250":278,"_27":279},{"_42":267,"_32":268,"_30":269,"_150":270,"_40":41,"_39":151,"_152":24,"_37":271,"_13":61,"_34":20,"_35":272,"_23":26,"_156":-5,"_250":273,"_27":274},{"_42":259,"_32":33,"_30":260,"_150":261,"_40":41,"_39":151,"_152":24,"_37":262,"_13":61,"_34":20,"_35":263,"_23":26,"_156":-5,"_250":264,"_27":265},{"_42":165,"_32":166,"_30":167,"_150":-5,"_40":41,"_39":151,"_152":24,"_37":256,"_13":61,"_34":20,"_35":169,"_23":26,"_156":-5,"_250":257,"_27":258},{"_42":158,"_32":159,"_30":56,"_150":-5,"_40":41,"_39":151,"_152":26,"_37":253,"_13":61,"_34":161,"_35":162,"_23":26,"_156":163,"_250":254,"_27":255},{"_42":147,"_32":148,"_30":149,"_150":-5,"_40":41,"_39":151,"_152":24,"_37":249,"_13":61,"_34":154,"_35":155,"_23":26,"_156":-5,"_250":251,"_27":252},["D",1781103906945],"children",[],[148],["D",1781103906945],[],[159],["D",1781103906945],[],[166],"37c375fd-15f4-439f-b226-43b20aadb543","019eb210-d0df-724e-8ef0-08fd176edb70","019eb210-d0df-724e-8ef0-0ca76c8efe90",["D",1781103906945],"---\nname: UI Example\ndescription: Shows off the live-example feature — a skill that ships an HTML fragment, rendered inline on its page and standalone. Read it to learn how examples work.\ncategory: Reference\n---\n\n# UI Example\n\n> This skill exists to demonstrate the library's **live-example feature** — and to double as a quick reference for the design system every page here inherits. Scroll up: the **Examples** panel above this text is rendered live from the HTML fragment this skill ships.\n\n## What you're looking at\n\nA skill can ship a single HTML fragment under its `assets/` directory. When it does, two things happen automatically:\n\n1. It renders as an **Examples** panel at the top of the skill page (the box above).\n2. It's served on its own, full-bleed, at `/skills//example` — open it with the **\"Open standalone ↗\"** link. That URL is embeddable (drop it in an `

Diff · v3