\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",[172],"d0cd9afd-aed5-4908-b778-df9b8f0c1a5c","README.md","6f71b83e-611a-11f1-b6b7-1607ee4eb77e",["D",1781113983230],21,"# 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 also a **Slack \"Skills Librarian\"** bot (in `librarian/`) that can list,\nexplain, 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\napp:\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\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\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. Give the bot its face: Slack manifests can't carry an icon, so upload the\n owl (served at the endpoint's `/icon.png`) under the app's **Basic\n Information → Display Information**. Replies wear the owl automatically via\n `chat:write.customize` either way; the upload covers everything else (DM\n list, Assistant pane, app home).\n3. 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\n librarian\" link\n4. **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.\n5. 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 + /icon.png + Slack /events + /process\n generate-response.ts # the agent loop (Claude + tools)\n icon.ts # the owl avatar (embedded base64 PNG)\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\nrequests through `std/oauth` and check the signed-in user against your org's\nmembers (wrap the `http.tsx` `fetch` export with the OAuth middleware). Requires\na Teams account.",[180],"208bcc7a-dbb3-4d97-b6b5-79f20ea31507","a1b35e7d-59ce-4d6b-8738-2d706101a7d2",60,["D",1780696519223],"directory",[14],"0ec00c07-4172-455a-a089-4640bf5fb515","librarian","019eae79-55cb-7558-864f-4ba98efbe737",["D",1781043647946],[193],"7bda0f03-93e2-4732-a3a6-6a2e07040a64","lib","12f0707e-2c4a-41a9-92ef-370a78c04011",8,["D",1780690030621],[198],"13306b3b-c86a-4aed-acf5-e5718b8ed0da","frontend","0f3784d6-e4a2-4781-a7f4-2d6a3fea5d8d",9,["D",1780690033369],[204],"09b94b55-391d-44c3-9b5c-7c1312d29db4","components","d0b511be-7c7d-403e-addd-624c52fec544",10,["D",1780690053093],[210],"pulls","branches",2,"forks","envVars",{"_223":225,"_226":225},"connections",{"_223":26,"_224":26},"count","unfilledCount",4,"emptyCount",{"_33":209,"_13":210,"_63":211,"_43":-5,"_35":36,"_163":212,"_165":79,"_37":528,"_39":26,"_66":190,"_167":-5,"_68":24,"_169":-5,"_269":529,"_17":530},{"_33":520,"_13":521,"_63":522,"_43":211,"_35":36,"_163":523,"_165":79,"_37":524,"_39":97,"_66":67,"_167":525,"_68":24,"_169":-5,"_269":526,"_17":527},{"_33":512,"_13":513,"_63":514,"_43":211,"_35":36,"_163":515,"_165":79,"_37":516,"_39":97,"_66":67,"_167":517,"_68":24,"_169":-5,"_269":518,"_17":519},{"_33":505,"_13":506,"_63":507,"_43":211,"_35":36,"_163":164,"_165":79,"_37":508,"_39":217,"_66":67,"_167":509,"_68":24,"_169":-5,"_269":510,"_17":511},{"_33":498,"_13":499,"_63":500,"_43":211,"_35":36,"_163":164,"_165":79,"_37":501,"_39":331,"_66":67,"_167":502,"_68":24,"_169":-5,"_269":503,"_17":504},{"_33":490,"_13":491,"_63":492,"_43":211,"_35":36,"_163":493,"_165":79,"_37":494,"_39":342,"_66":67,"_167":495,"_68":24,"_169":-5,"_269":496,"_17":497},{"_33":482,"_13":483,"_63":484,"_43":211,"_35":36,"_163":485,"_165":79,"_37":486,"_39":217,"_66":67,"_167":487,"_68":24,"_169":-5,"_269":488,"_17":489},{"_33":203,"_13":204,"_63":205,"_43":-5,"_35":36,"_163":206,"_165":79,"_37":479,"_39":26,"_66":190,"_167":-5,"_68":24,"_169":-5,"_269":480,"_17":481},{"_33":472,"_13":473,"_63":474,"_43":205,"_35":36,"_163":206,"_165":79,"_37":475,"_39":26,"_66":67,"_167":476,"_68":24,"_169":-5,"_269":477,"_17":478},{"_33":197,"_13":198,"_63":199,"_43":-5,"_35":36,"_163":200,"_165":79,"_37":469,"_39":26,"_66":190,"_167":-5,"_68":24,"_169":-5,"_269":470,"_17":471},{"_33":462,"_13":463,"_63":464,"_43":199,"_35":36,"_163":164,"_165":79,"_37":465,"_39":225,"_66":67,"_167":466,"_68":24,"_169":-5,"_269":467,"_17":468},{"_33":454,"_13":455,"_63":456,"_43":199,"_35":36,"_163":457,"_165":79,"_37":458,"_39":217,"_66":67,"_167":459,"_68":24,"_169":-5,"_269":460,"_17":461},{"_33":192,"_13":193,"_63":194,"_43":-5,"_35":36,"_163":164,"_165":79,"_37":451,"_39":26,"_66":190,"_167":-5,"_68":24,"_169":-5,"_269":452,"_17":453},{"_33":444,"_13":445,"_63":446,"_43":194,"_35":36,"_163":164,"_165":79,"_37":447,"_39":26,"_66":176,"_167":448,"_68":24,"_169":-5,"_269":449,"_17":450},{"_33":436,"_13":437,"_63":438,"_43":194,"_35":36,"_163":439,"_165":79,"_37":440,"_39":217,"_66":176,"_167":441,"_68":24,"_169":-5,"_269":442,"_17":443},{"_33":429,"_13":430,"_63":431,"_43":194,"_35":36,"_163":164,"_165":79,"_37":432,"_39":26,"_66":67,"_167":433,"_68":24,"_169":-5,"_269":434,"_17":435},{"_33":421,"_13":422,"_63":423,"_43":194,"_35":36,"_163":424,"_165":79,"_37":425,"_39":97,"_66":67,"_167":426,"_68":24,"_169":-5,"_269":427,"_17":428},{"_33":413,"_13":414,"_63":415,"_43":194,"_35":36,"_163":416,"_165":79,"_37":417,"_39":97,"_66":67,"_167":418,"_68":24,"_169":-5,"_269":419,"_17":420},{"_33":405,"_13":406,"_63":407,"_43":194,"_35":36,"_163":408,"_165":79,"_37":409,"_39":97,"_66":67,"_167":410,"_68":24,"_169":-5,"_269":411,"_17":412},{"_33":397,"_13":398,"_63":399,"_43":194,"_35":36,"_163":400,"_165":79,"_37":401,"_39":97,"_66":67,"_167":402,"_68":24,"_169":-5,"_269":403,"_17":404},{"_33":390,"_13":391,"_63":392,"_43":194,"_35":36,"_163":164,"_165":79,"_37":393,"_39":26,"_66":21,"_167":394,"_68":24,"_169":-5,"_269":395,"_17":396},{"_33":383,"_13":384,"_63":385,"_43":194,"_35":36,"_163":164,"_165":79,"_37":386,"_39":26,"_66":67,"_167":387,"_68":24,"_169":-5,"_269":388,"_17":389},{"_33":375,"_13":376,"_63":377,"_43":194,"_35":36,"_163":378,"_165":79,"_37":379,"_39":97,"_66":67,"_167":380,"_68":24,"_169":-5,"_269":381,"_17":382},{"_33":186,"_13":14,"_63":187,"_43":-5,"_35":36,"_163":188,"_165":79,"_37":372,"_39":97,"_66":190,"_167":-5,"_68":24,"_169":-5,"_269":373,"_17":374},{"_33":367,"_13":353,"_63":348,"_43":187,"_35":36,"_163":368,"_165":79,"_37":369,"_39":26,"_66":190,"_167":-5,"_68":24,"_169":-5,"_269":370,"_17":371},{"_33":363,"_13":336,"_63":357,"_43":348,"_35":36,"_163":358,"_165":79,"_37":364,"_39":26,"_66":190,"_167":-5,"_68":24,"_169":-5,"_269":365,"_17":366},{"_33":354,"_13":355,"_63":356,"_43":357,"_35":36,"_163":358,"_165":79,"_37":359,"_39":26,"_66":21,"_167":360,"_68":24,"_169":-5,"_269":361,"_17":362},{"_33":346,"_13":279,"_63":347,"_43":348,"_35":36,"_163":164,"_165":79,"_37":349,"_39":97,"_66":21,"_167":350,"_68":24,"_169":-5,"_269":351,"_17":352},{"_33":341,"_13":313,"_63":308,"_43":187,"_35":36,"_163":342,"_165":79,"_37":343,"_39":26,"_66":190,"_167":-5,"_68":24,"_169":-5,"_269":344,"_17":345},{"_33":337,"_13":336,"_63":330,"_43":308,"_35":36,"_163":331,"_165":79,"_37":338,"_39":26,"_66":190,"_167":-5,"_68":24,"_169":-5,"_269":339,"_17":340},{"_33":327,"_13":328,"_63":329,"_43":330,"_35":36,"_163":331,"_165":79,"_37":332,"_39":26,"_66":21,"_167":333,"_68":24,"_169":-5,"_269":334,"_17":335},{"_33":323,"_13":322,"_63":317,"_43":308,"_35":36,"_163":225,"_165":79,"_37":324,"_39":26,"_66":190,"_167":-5,"_68":24,"_169":-5,"_269":325,"_17":326},{"_33":314,"_13":315,"_63":316,"_43":317,"_35":36,"_163":225,"_165":79,"_37":318,"_39":26,"_66":67,"_167":319,"_68":24,"_169":-5,"_269":320,"_17":321},{"_33":306,"_13":279,"_63":307,"_43":308,"_35":36,"_163":164,"_165":79,"_37":309,"_39":97,"_66":21,"_167":310,"_68":24,"_169":-5,"_269":311,"_17":312},{"_33":301,"_13":286,"_63":281,"_43":187,"_35":36,"_163":302,"_165":79,"_37":303,"_39":26,"_66":190,"_167":-5,"_68":24,"_169":-5,"_269":304,"_17":305},{"_33":297,"_13":296,"_63":290,"_43":281,"_35":36,"_163":291,"_165":79,"_37":298,"_39":26,"_66":190,"_167":-5,"_68":24,"_169":-5,"_269":299,"_17":300},{"_33":287,"_13":288,"_63":289,"_43":290,"_35":36,"_163":291,"_165":79,"_37":292,"_39":26,"_66":21,"_167":293,"_68":24,"_169":-5,"_269":294,"_17":295},{"_33":278,"_13":279,"_63":280,"_43":281,"_35":36,"_163":164,"_165":79,"_37":282,"_39":200,"_66":21,"_167":283,"_68":24,"_169":-5,"_269":284,"_17":285},{"_33":179,"_13":180,"_63":181,"_43":-5,"_35":36,"_163":117,"_165":79,"_37":275,"_39":183,"_66":21,"_167":184,"_68":24,"_169":-5,"_269":276,"_17":277},{"_33":171,"_13":172,"_63":92,"_43":-5,"_35":36,"_163":173,"_165":79,"_37":272,"_39":175,"_66":176,"_167":177,"_68":24,"_169":-5,"_269":273,"_17":274},{"_33":160,"_13":161,"_63":162,"_43":-5,"_35":36,"_163":164,"_165":79,"_37":268,"_39":97,"_66":67,"_167":168,"_68":24,"_169":-5,"_269":270,"_17":271},["D",1781043647946],"children",[],[161],["D",1781045202033],[],[172],["D",1781113983230],[],[180],"ed64a881-0960-4fb0-b3f3-d4782f61a9cb","SKILL.md","5b495132-611a-11f1-ac10-1607ee4eb77e","82af8637-3f7d-4a48-b2eb-33adcb23f00e",["D",1781043647946],"---\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 · probe-env.ts