\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",[285],"70e4dcd9-8f20-482e-b931-620984f0ec17",["D",1781044706180],"# 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",[279],"c3df0328-0d20-49cb-9363-bf2b521f46d0",["D",1781044706180],[273],"cec41550-0027-4fea-858b-67095cbccc27",["D",1781044706180],[186],"a2b81ac2-f939-4d3d-95aa-9df3a51111c7",["D",1781044706180],[125],"67bed52f-f090-4089-8a65-5586411e2fad",["D",1781044706180],[99],"36aab0cd-edd8-4fd1-8222-0de7ff2d0ea1","components","019eae89-7c0e-729c-9df9-8278d98f256b",["D",1781044706180],[407],"pulls","branches","forks","envVars",{"_286":419,"_420":419},"connections",{"_286":20,"_418":20},"unfilledCount",4,"emptyCount",{"_27":406,"_13":407,"_97":408,"_37":-5,"_29":30,"_379":34,"_380":24,"_31":650,"_33":20,"_100":101,"_382":-5,"_102":103,"_384":-5,"_462":651,"_340":652},{"_27":643,"_13":644,"_97":645,"_37":408,"_29":30,"_379":34,"_380":24,"_31":646,"_33":20,"_100":113,"_382":647,"_102":103,"_384":-5,"_462":648,"_340":649},{"_27":636,"_13":637,"_97":638,"_37":408,"_29":30,"_379":34,"_380":24,"_31":639,"_33":20,"_100":113,"_382":640,"_102":103,"_384":-5,"_462":641,"_340":642},{"_27":629,"_13":630,"_97":631,"_37":408,"_29":30,"_379":34,"_380":24,"_31":632,"_33":20,"_100":113,"_382":633,"_102":103,"_384":-5,"_462":634,"_340":635},{"_27":622,"_13":623,"_97":624,"_37":408,"_29":30,"_379":34,"_380":24,"_31":625,"_33":20,"_100":113,"_382":626,"_102":103,"_384":-5,"_462":627,"_340":628},{"_27":615,"_13":616,"_97":617,"_37":408,"_29":30,"_379":34,"_380":24,"_31":618,"_33":20,"_100":113,"_382":619,"_102":103,"_384":-5,"_462":620,"_340":621},{"_27":608,"_13":609,"_97":610,"_37":408,"_29":30,"_379":34,"_380":24,"_31":611,"_33":20,"_100":113,"_382":612,"_102":103,"_384":-5,"_462":613,"_340":614},{"_27":403,"_13":99,"_97":98,"_37":-5,"_29":30,"_379":34,"_380":24,"_31":605,"_33":20,"_100":101,"_382":-5,"_102":103,"_384":-5,"_462":606,"_340":607},{"_27":598,"_13":599,"_97":600,"_37":98,"_29":30,"_379":34,"_380":24,"_31":601,"_33":20,"_100":113,"_382":602,"_102":103,"_384":-5,"_462":603,"_340":604},{"_27":400,"_13":125,"_97":124,"_37":-5,"_29":30,"_379":34,"_380":24,"_31":595,"_33":20,"_100":101,"_382":-5,"_102":103,"_384":-5,"_462":596,"_340":597},{"_27":590,"_13":112,"_97":111,"_37":124,"_29":30,"_379":34,"_380":24,"_31":591,"_33":20,"_100":113,"_382":592,"_102":103,"_384":-5,"_462":593,"_340":594},{"_27":585,"_13":119,"_97":118,"_37":124,"_29":30,"_379":34,"_380":24,"_31":586,"_33":20,"_100":113,"_382":587,"_102":103,"_384":-5,"_462":588,"_340":589},{"_27":397,"_13":186,"_97":185,"_37":-5,"_29":30,"_379":34,"_380":24,"_31":582,"_33":20,"_100":101,"_382":-5,"_102":103,"_384":-5,"_462":583,"_340":584},{"_27":577,"_13":131,"_97":130,"_37":185,"_29":30,"_379":34,"_380":24,"_31":578,"_33":20,"_100":132,"_382":579,"_102":103,"_384":-5,"_462":580,"_340":581},{"_27":572,"_13":138,"_97":137,"_37":185,"_29":30,"_379":34,"_380":24,"_31":573,"_33":20,"_100":132,"_382":574,"_102":103,"_384":-5,"_462":575,"_340":576},{"_27":567,"_13":144,"_97":143,"_37":185,"_29":30,"_379":34,"_380":24,"_31":568,"_33":20,"_100":113,"_382":569,"_102":103,"_384":-5,"_462":570,"_340":571},{"_27":562,"_13":150,"_97":149,"_37":185,"_29":30,"_379":34,"_380":24,"_31":563,"_33":20,"_100":113,"_382":564,"_102":103,"_384":-5,"_462":565,"_340":566},{"_27":557,"_13":156,"_97":155,"_37":185,"_29":30,"_379":34,"_380":24,"_31":558,"_33":20,"_100":113,"_382":559,"_102":103,"_384":-5,"_462":560,"_340":561},{"_27":552,"_13":162,"_97":161,"_37":185,"_29":30,"_379":34,"_380":24,"_31":553,"_33":20,"_100":113,"_382":554,"_102":103,"_384":-5,"_462":555,"_340":556},{"_27":547,"_13":168,"_97":167,"_37":185,"_29":30,"_379":34,"_380":24,"_31":548,"_33":20,"_100":48,"_382":549,"_102":103,"_384":-5,"_462":550,"_340":551},{"_27":542,"_13":174,"_97":173,"_37":185,"_29":30,"_379":34,"_380":24,"_31":543,"_33":20,"_100":113,"_382":544,"_102":103,"_384":-5,"_462":545,"_340":546},{"_27":537,"_13":180,"_97":179,"_37":185,"_29":30,"_379":34,"_380":24,"_31":538,"_33":20,"_100":113,"_382":539,"_102":103,"_384":-5,"_462":540,"_340":541},{"_27":394,"_13":273,"_97":272,"_37":-5,"_29":30,"_379":34,"_380":24,"_31":534,"_33":20,"_100":101,"_382":-5,"_102":103,"_384":-5,"_462":535,"_340":536},{"_27":530,"_13":210,"_97":209,"_37":272,"_29":30,"_379":34,"_380":24,"_31":531,"_33":20,"_100":101,"_382":-5,"_102":103,"_384":-5,"_462":532,"_340":533},{"_27":526,"_13":198,"_97":197,"_37":209,"_29":30,"_379":34,"_380":24,"_31":527,"_33":20,"_100":101,"_382":-5,"_102":103,"_384":-5,"_462":528,"_340":529},{"_27":521,"_13":192,"_97":191,"_37":197,"_29":30,"_379":34,"_380":24,"_31":522,"_33":20,"_100":48,"_382":523,"_102":103,"_384":-5,"_462":524,"_340":525},{"_27":516,"_13":204,"_97":203,"_37":209,"_29":30,"_379":34,"_380":24,"_31":517,"_33":20,"_100":48,"_382":518,"_102":103,"_384":-5,"_462":519,"_340":520},{"_27":512,"_13":244,"_97":243,"_37":272,"_29":30,"_379":34,"_380":24,"_31":513,"_33":20,"_100":101,"_382":-5,"_102":103,"_384":-5,"_462":514,"_340":515},{"_27":508,"_13":198,"_97":221,"_37":243,"_29":30,"_379":34,"_380":24,"_31":509,"_33":20,"_100":101,"_382":-5,"_102":103,"_384":-5,"_462":510,"_340":511},{"_27":503,"_13":216,"_97":215,"_37":221,"_29":30,"_379":34,"_380":24,"_31":504,"_33":20,"_100":48,"_382":505,"_102":103,"_384":-5,"_462":506,"_340":507},{"_27":499,"_13":233,"_97":232,"_37":243,"_29":30,"_379":34,"_380":24,"_31":500,"_33":20,"_100":101,"_382":-5,"_102":103,"_384":-5,"_462":501,"_340":502},{"_27":494,"_13":227,"_97":226,"_37":232,"_29":30,"_379":34,"_380":24,"_31":495,"_33":20,"_100":113,"_382":496,"_102":103,"_384":-5,"_462":497,"_340":498},{"_27":489,"_13":204,"_97":238,"_37":243,"_29":30,"_379":34,"_380":24,"_31":490,"_33":20,"_100":48,"_382":491,"_102":103,"_384":-5,"_462":492,"_340":493},{"_27":485,"_13":267,"_97":266,"_37":272,"_29":30,"_379":34,"_380":24,"_31":486,"_33":20,"_100":101,"_382":-5,"_102":103,"_384":-5,"_462":487,"_340":488},{"_27":481,"_13":256,"_97":255,"_37":266,"_29":30,"_379":34,"_380":24,"_31":482,"_33":20,"_100":101,"_382":-5,"_102":103,"_384":-5,"_462":483,"_340":484},{"_27":476,"_13":250,"_97":249,"_37":255,"_29":30,"_379":34,"_380":24,"_31":477,"_33":20,"_100":48,"_382":478,"_102":103,"_384":-5,"_462":479,"_340":480},{"_27":471,"_13":204,"_97":261,"_37":266,"_29":30,"_379":34,"_380":24,"_31":472,"_33":20,"_100":48,"_382":473,"_102":103,"_384":-5,"_462":474,"_340":475},{"_27":390,"_13":279,"_97":278,"_37":-5,"_29":30,"_379":34,"_380":24,"_31":468,"_33":20,"_100":48,"_382":392,"_102":103,"_384":-5,"_462":469,"_340":470},{"_27":386,"_13":285,"_97":284,"_37":-5,"_29":30,"_379":34,"_380":24,"_31":465,"_33":20,"_100":132,"_382":388,"_102":103,"_384":-5,"_462":466,"_340":467},{"_27":378,"_13":290,"_97":289,"_37":-5,"_29":30,"_379":34,"_380":24,"_31":461,"_33":20,"_100":113,"_382":383,"_102":103,"_384":-5,"_462":463,"_340":464},["D",1781044706180],"children",[],[290],["D",1781044706180],[],[285],["D",1781044706180],[],[279],"a0ebfb69-5881-467c-99dd-49c3d516b4d7",["D",1781044706180],"---\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 `

History