\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",[160],"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",[167],"3d37c7eb-e23c-4c61-ac2a-32db85bc7e93","019eb210-d0df-724e-8ef0-12a009395958",["D",1781103906945],[138],"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":62,"_204":62},"count","unfilledCount",4,"emptyCount",{"_42":191,"_32":192,"_30":193,"_151":-5,"_40":41,"_39":152,"_153":25,"_37":483,"_13":62,"_34":35,"_36":-5,"_24":48,"_157":-5,"_248":484,"_27":485},{"_42":476,"_32":477,"_30":478,"_151":193,"_40":41,"_39":152,"_153":25,"_37":479,"_13":62,"_34":155,"_36":480,"_24":48,"_157":-5,"_248":481,"_27":482},{"_42":469,"_32":470,"_30":471,"_151":193,"_40":41,"_39":152,"_153":25,"_37":472,"_13":62,"_34":155,"_36":473,"_24":48,"_157":-5,"_248":474,"_27":475},{"_42":462,"_32":463,"_30":464,"_151":193,"_40":41,"_39":152,"_153":25,"_37":465,"_13":62,"_34":155,"_36":466,"_24":48,"_157":-5,"_248":467,"_27":468},{"_42":455,"_32":456,"_30":457,"_151":193,"_40":41,"_39":152,"_153":25,"_37":458,"_13":62,"_34":155,"_36":459,"_24":48,"_157":-5,"_248":460,"_27":461},{"_42":448,"_32":449,"_30":450,"_151":193,"_40":41,"_39":152,"_153":25,"_37":451,"_13":62,"_34":155,"_36":452,"_24":48,"_157":-5,"_248":453,"_27":454},{"_42":441,"_32":442,"_30":443,"_151":193,"_40":41,"_39":152,"_153":25,"_37":444,"_13":62,"_34":155,"_36":445,"_24":48,"_157":-5,"_248":446,"_27":447},{"_42":186,"_32":187,"_30":188,"_151":-5,"_40":41,"_39":152,"_153":25,"_37":438,"_13":62,"_34":35,"_36":-5,"_24":48,"_157":-5,"_248":439,"_27":440},{"_42":431,"_32":432,"_30":433,"_151":188,"_40":41,"_39":152,"_153":25,"_37":434,"_13":62,"_34":155,"_36":435,"_24":48,"_157":-5,"_248":436,"_27":437},{"_42":181,"_32":182,"_30":183,"_151":-5,"_40":41,"_39":152,"_153":25,"_37":428,"_13":62,"_34":35,"_36":-5,"_24":48,"_157":-5,"_248":429,"_27":430},{"_42":421,"_32":422,"_30":423,"_151":183,"_40":41,"_39":152,"_153":25,"_37":424,"_13":62,"_34":155,"_36":425,"_24":48,"_157":-5,"_248":426,"_27":427},{"_42":414,"_32":415,"_30":416,"_151":183,"_40":41,"_39":152,"_153":25,"_37":417,"_13":62,"_34":155,"_36":418,"_24":48,"_157":-5,"_248":419,"_27":420},{"_42":176,"_32":177,"_30":178,"_151":-5,"_40":41,"_39":152,"_153":25,"_37":411,"_13":62,"_34":35,"_36":-5,"_24":48,"_157":-5,"_248":412,"_27":413},{"_42":404,"_32":405,"_30":406,"_151":178,"_40":41,"_39":152,"_153":25,"_37":407,"_13":62,"_34":162,"_36":408,"_24":48,"_157":-5,"_248":409,"_27":410},{"_42":397,"_32":398,"_30":399,"_151":178,"_40":41,"_39":152,"_153":25,"_37":400,"_13":62,"_34":162,"_36":401,"_24":48,"_157":-5,"_248":402,"_27":403},{"_42":390,"_32":391,"_30":392,"_151":178,"_40":41,"_39":152,"_153":25,"_37":393,"_13":62,"_34":155,"_36":394,"_24":48,"_157":-5,"_248":395,"_27":396},{"_42":383,"_32":384,"_30":385,"_151":178,"_40":41,"_39":152,"_153":25,"_37":386,"_13":62,"_34":155,"_36":387,"_24":48,"_157":-5,"_248":388,"_27":389},{"_42":376,"_32":377,"_30":378,"_151":178,"_40":41,"_39":152,"_153":25,"_37":379,"_13":62,"_34":155,"_36":380,"_24":48,"_157":-5,"_248":381,"_27":382},{"_42":369,"_32":370,"_30":371,"_151":178,"_40":41,"_39":152,"_153":25,"_37":372,"_13":62,"_34":155,"_36":373,"_24":48,"_157":-5,"_248":374,"_27":375},{"_42":362,"_32":363,"_30":364,"_151":178,"_40":41,"_39":152,"_153":25,"_37":365,"_13":62,"_34":20,"_36":366,"_24":48,"_157":-5,"_248":367,"_27":368},{"_42":355,"_32":356,"_30":357,"_151":178,"_40":41,"_39":152,"_153":25,"_37":358,"_13":62,"_34":155,"_36":359,"_24":48,"_157":-5,"_248":360,"_27":361},{"_42":348,"_32":349,"_30":350,"_151":178,"_40":41,"_39":152,"_153":25,"_37":351,"_13":62,"_34":155,"_36":352,"_24":48,"_157":-5,"_248":353,"_27":354},{"_42":172,"_32":138,"_30":173,"_151":-5,"_40":41,"_39":152,"_153":25,"_37":345,"_13":62,"_34":35,"_36":-5,"_24":48,"_157":-5,"_248":346,"_27":347},{"_42":341,"_32":328,"_30":323,"_151":173,"_40":41,"_39":152,"_153":25,"_37":342,"_13":62,"_34":35,"_36":-5,"_24":48,"_157":-5,"_248":343,"_27":344},{"_42":337,"_32":312,"_30":332,"_151":323,"_40":41,"_39":152,"_153":25,"_37":338,"_13":62,"_34":35,"_36":-5,"_24":48,"_157":-5,"_248":339,"_27":340},{"_42":329,"_32":330,"_30":331,"_151":332,"_40":41,"_39":152,"_153":25,"_37":333,"_13":62,"_34":20,"_36":334,"_24":48,"_157":-5,"_248":335,"_27":336},{"_42":321,"_32":258,"_30":322,"_151":323,"_40":41,"_39":152,"_153":25,"_37":324,"_13":62,"_34":20,"_36":325,"_24":48,"_157":-5,"_248":326,"_27":327},{"_42":317,"_32":290,"_30":285,"_151":173,"_40":41,"_39":152,"_153":25,"_37":318,"_13":62,"_34":35,"_36":-5,"_24":48,"_157":-5,"_248":319,"_27":320},{"_42":313,"_32":312,"_30":307,"_151":285,"_40":41,"_39":152,"_153":25,"_37":314,"_13":62,"_34":35,"_36":-5,"_24":48,"_157":-5,"_248":315,"_27":316},{"_42":304,"_32":305,"_30":306,"_151":307,"_40":41,"_39":152,"_153":25,"_37":308,"_13":62,"_34":20,"_36":309,"_24":48,"_157":-5,"_248":310,"_27":311},{"_42":300,"_32":299,"_30":294,"_151":285,"_40":41,"_39":152,"_153":25,"_37":301,"_13":62,"_34":35,"_36":-5,"_24":48,"_157":-5,"_248":302,"_27":303},{"_42":291,"_32":292,"_30":293,"_151":294,"_40":41,"_39":152,"_153":25,"_37":295,"_13":62,"_34":155,"_36":296,"_24":48,"_157":-5,"_248":297,"_27":298},{"_42":283,"_32":258,"_30":284,"_151":285,"_40":41,"_39":152,"_153":25,"_37":286,"_13":62,"_34":20,"_36":287,"_24":48,"_157":-5,"_248":288,"_27":289},{"_42":279,"_32":265,"_30":260,"_151":173,"_40":41,"_39":152,"_153":25,"_37":280,"_13":62,"_34":35,"_36":-5,"_24":48,"_157":-5,"_248":281,"_27":282},{"_42":275,"_32":274,"_30":269,"_151":260,"_40":41,"_39":152,"_153":25,"_37":276,"_13":62,"_34":35,"_36":-5,"_24":48,"_157":-5,"_248":277,"_27":278},{"_42":266,"_32":267,"_30":268,"_151":269,"_40":41,"_39":152,"_153":25,"_37":270,"_13":62,"_34":20,"_36":271,"_24":48,"_157":-5,"_248":272,"_27":273},{"_42":257,"_32":258,"_30":259,"_151":260,"_40":41,"_39":152,"_153":25,"_37":261,"_13":62,"_34":20,"_36":262,"_24":48,"_157":-5,"_248":263,"_27":264},{"_42":166,"_32":167,"_30":168,"_151":-5,"_40":41,"_39":152,"_153":25,"_37":254,"_13":62,"_34":20,"_36":170,"_24":48,"_157":-5,"_248":255,"_27":256},{"_42":159,"_32":160,"_30":57,"_151":-5,"_40":41,"_39":152,"_153":48,"_37":251,"_13":62,"_34":162,"_36":163,"_24":48,"_157":164,"_248":252,"_27":253},{"_42":148,"_32":149,"_30":150,"_151":-5,"_40":41,"_39":152,"_153":25,"_37":247,"_13":62,"_34":155,"_36":156,"_24":48,"_157":-5,"_248":249,"_27":250},["D",1781103906945],"children",[],[149],["D",1781103906945],[],[160],["D",1781103906945],[],[167],"37c375fd-15f4-439f-b226-43b20aadb543","SKILL.md","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 · v6