📚 Skills Librarian

A Slack bot that manages your Val Town agent-skill library — list, explain, create, update, and delete skills by chatting. Click below to create the Slack app (scopes, events, and webhook URL are pre-filled from a manifest).

Create Slack App →

Then add these to this val's environment variables:

SLACK_BOT_TOKEN & SLACK_SIGNING_SECRET — from the Slack app you just created
ANTHROPIC_API_KEY — for the model
Then authorize Val Town with one click on the /connect page (or the catalog's bottom bar) — no token to create or paste. Prefer a token? Set VALTOWN_TOKEN instead.

\n`);\n});\n\n// ─── Slack event intake: verify, then early-return to /process ──────────────\napp.post(\"/events\", async (c) => {\n const rawBody = await c.req.text();\n const payload = JSON.parse(rawBody);\n const requestType = payload.type as \"url_verification\" | \"event_callback\";\n\n if (requestType === \"url_verification\") {\n return new Response(payload.challenge, { status: 200 });\n }\n\n try {\n await verifyRequest({ requestType, request: c.req.raw, rawBody });\n const botUserId = await getBotId();\n const event = payload.event as SlackEvent;\n console.log(`[Events] Received ${event.type}, dispatching to /process`);\n\n const processUrl = new URL(\"/process\", c.req.url).toString();\n const internalSecret = Deno.env.get(\"SLACK_SIGNING_SECRET\")!;\n fetch(processUrl, {\n method: \"POST\",\n headers: {\n \"Content-Type\": \"application/json\",\n \"X-Internal-Secret\": internalSecret,\n },\n body: JSON.stringify({ event, botUserId }),\n }); // intentionally NOT awaited (early-return pattern)\n\n return new Response(\"OK\", { status: 200 });\n } catch (error) {\n console.error(\"[Events] Error:\", error);\n return new Response(\"Error\", { status: 500 });\n }\n});\n\n// ─── Process route: the actual heavy lifting, with its own timeout window ────\napp.post(\"/process\", async (c) => {\n const internalSecret = Deno.env.get(\"SLACK_SIGNING_SECRET\")!;\n if (c.req.header(\"X-Internal-Secret\") !== internalSecret) {\n console.warn(\"[Process] Rejected unauthorized request\");\n return new Response(\"Unauthorized\", { status: 401 });\n }\n\n const { event, botUserId } = await c.req.json();\n console.log(`[Process] Handling ${event.type}`);\n\n try {\n switch (event.type) {\n case \"app_mention\":\n await handleAppMention(event, botUserId);\n break;\n case \"assistant_thread_started\":\n await handleThreadStarted(event);\n break;\n case \"message\":\n await handleMessage(event as GenericMessageEvent, botUserId);\n break;\n default:\n console.log(`[Process] Unknown event type: ${event.type}`);\n }\n return new Response(\"Done\", { status: 200 });\n } catch (error) {\n console.error(`[Process] FAILED for ${event.type}:`, error);\n return new Response(\"Error\", { status: 500 });\n }\n});\n\nexport default app.fetch;\n",[18,129],"889f1706-b373-481b-b7f5-5dac83b50db8",["D",1781044706180],"// One-click Val Town authorization for the Skills Librarian.\n//\n// Visit this page and click \"Authorize\": you log into Val Town and grant the\n// librarian val-write access. We capture the resulting access + refresh token\n// and store them (blob) so the bot can create/edit/delete skills on your behalf\n// and refresh on its own — no API token to create, paste, or rotate.\n//\n// Scopes requested: identity (openid/profile/user_r) + val_rw/project_rw only.\n// NOT blob/sqlite/telemetry. Revoke anytime in your Val Town account settings.\nimport { Hono } from \"npm:hono@4\";\nimport {\n getOAuthUserData,\n oauthMiddleware,\n} from \"https://esm.town/v/std/oauth/middleware.ts\";\nimport { blob } from \"https://esm.town/v/std/blob\";\nimport { storeOAuthToken } from \"../lib/vt.ts\";\n\nconst app = new Hono();\n\nconst page = (title: string, body: string) =>\n `${title}` +\n `${body}`;\n\napp.get(\"/\", async (c) => {\n const session = await getOAuthUserData(c.req.raw);\n\n if (!session) {\n return c.html(page(\n \"Connect — Skills Librarian\",\n `

📚 Connect the Skills Librarian

Authorize the librarian to read & write skills in your Val Town account — one click, no API token to create or paste. It requests only identity + val write access (not blob, SQLite, or telemetry), and you can revoke it anytime in your Val Town settings.

Authorize with Val Town →

`,\n ));\n }\n\n // Logged in: capture the write-scoped token + the client_id (needed to refresh\n // later) and persist them for the bot.\n const origin = new URL(c.req.url).origin;\n const redirectUri = `${origin}/auth/callback`;\n let clientId: string | undefined;\n try {\n const cb = (await blob.getJSON(`oauth_client:${redirectUri}`)) as any;\n clientId = cb?.client_id;\n } catch { /* refresh just won't be possible without it; surfaced on expiry */ }\n\n await storeOAuthToken({\n access_token: session.accessToken,\n refresh_token: session.refreshToken,\n client_id: clientId,\n stored_at: Date.now(),\n });\n\n const who = session.user.username ?? \"your account\";\n return c.html(page(\n \"Connected — Skills Librarian\",\n `

✅ Connected

The Skills Librarian is authorized as ${who} and can now create, edit, and delete skills.

Stored a refreshable token — you won't need to do this again. Revoke access anytime from your Val Town account settings. You can close this tab.

`,\n ));\n});\n\nexport default oauthMiddleware(\n {\n scopes: [\"openid\", \"offline_access\", \"profile\", \"user_r\", \"val_rw\", \"project_rw\"],\n clientName: \"Skills Librarian\",\n },\n app.fetch,\n);\n",[18,135],"pulls","branches","forks","envVars",{"_131":279,"_280":279},"connections",{"_131":26,"_278":26},"unfilledCount",4,"emptyCount",{"_33":542,"_13":506,"_79":501,"_43":-5,"_35":36,"_222":40,"_235":24,"_37":543,"_39":26,"_82":137,"_220":-5,"_84":30,"_223":-5,"_326":544,"_17":545},{"_33":535,"_13":536,"_79":537,"_43":501,"_35":36,"_222":40,"_235":24,"_37":538,"_39":26,"_82":83,"_220":539,"_84":30,"_223":-5,"_326":540,"_17":541},{"_33":528,"_13":529,"_79":530,"_43":501,"_35":36,"_222":40,"_235":24,"_37":531,"_39":26,"_82":83,"_220":532,"_84":30,"_223":-5,"_326":533,"_17":534},{"_33":521,"_13":522,"_79":523,"_43":501,"_35":36,"_222":40,"_235":24,"_37":524,"_39":26,"_82":83,"_220":525,"_84":30,"_223":-5,"_326":526,"_17":527},{"_33":514,"_13":515,"_79":516,"_43":501,"_35":36,"_222":40,"_235":24,"_37":517,"_39":26,"_82":83,"_220":518,"_84":30,"_223":-5,"_326":519,"_17":520},{"_33":507,"_13":508,"_79":509,"_43":501,"_35":36,"_222":40,"_235":24,"_37":510,"_39":26,"_82":83,"_220":511,"_84":30,"_223":-5,"_326":512,"_17":513},{"_33":498,"_13":499,"_79":500,"_43":501,"_35":36,"_222":40,"_235":24,"_37":502,"_39":26,"_82":83,"_220":503,"_84":30,"_223":-5,"_326":504,"_17":505},{"_33":494,"_13":493,"_79":488,"_43":-5,"_35":36,"_222":40,"_235":24,"_37":495,"_39":26,"_82":137,"_220":-5,"_84":30,"_223":-5,"_326":496,"_17":497},{"_33":485,"_13":486,"_79":487,"_43":488,"_35":36,"_222":40,"_235":24,"_37":489,"_39":26,"_82":83,"_220":490,"_84":30,"_223":-5,"_326":491,"_17":492},{"_33":481,"_13":473,"_79":468,"_43":-5,"_35":36,"_222":40,"_235":24,"_37":482,"_39":26,"_82":137,"_220":-5,"_84":30,"_223":-5,"_326":483,"_17":484},{"_33":474,"_13":475,"_79":476,"_43":468,"_35":36,"_222":40,"_235":24,"_37":477,"_39":26,"_82":83,"_220":478,"_84":30,"_223":-5,"_326":479,"_17":480},{"_33":465,"_13":466,"_79":467,"_43":468,"_35":36,"_222":40,"_235":24,"_37":469,"_39":26,"_82":83,"_220":470,"_84":30,"_223":-5,"_326":471,"_17":472},{"_33":219,"_13":18,"_79":136,"_43":-5,"_35":36,"_222":40,"_235":24,"_37":462,"_39":26,"_82":137,"_220":-5,"_84":30,"_223":-5,"_326":463,"_17":464},{"_33":267,"_13":135,"_79":134,"_43":136,"_35":36,"_222":40,"_235":24,"_37":459,"_39":26,"_82":130,"_220":269,"_84":30,"_223":-5,"_326":460,"_17":461},{"_33":263,"_13":129,"_79":128,"_43":136,"_35":36,"_222":40,"_235":24,"_37":456,"_39":26,"_82":130,"_220":265,"_84":30,"_223":-5,"_326":457,"_17":458},{"_33":259,"_13":123,"_79":122,"_43":136,"_35":36,"_222":40,"_235":24,"_37":453,"_39":26,"_82":83,"_220":261,"_84":30,"_223":-5,"_326":454,"_17":455},{"_33":255,"_13":117,"_79":116,"_43":136,"_35":36,"_222":40,"_235":24,"_37":450,"_39":26,"_82":83,"_220":257,"_84":30,"_223":-5,"_326":451,"_17":452},{"_33":251,"_13":111,"_79":110,"_43":136,"_35":36,"_222":40,"_235":24,"_37":447,"_39":26,"_82":83,"_220":253,"_84":30,"_223":-5,"_326":448,"_17":449},{"_33":247,"_13":105,"_79":104,"_43":136,"_35":36,"_222":40,"_235":24,"_37":444,"_39":26,"_82":83,"_220":249,"_84":30,"_223":-5,"_326":445,"_17":446},{"_33":243,"_13":99,"_79":98,"_43":136,"_35":36,"_222":40,"_235":24,"_37":441,"_39":26,"_82":21,"_220":245,"_84":30,"_223":-5,"_326":442,"_17":443},{"_33":239,"_13":93,"_79":92,"_43":136,"_35":36,"_222":40,"_235":24,"_37":438,"_39":26,"_82":83,"_220":241,"_84":30,"_223":-5,"_326":439,"_17":440},{"_33":234,"_13":81,"_79":80,"_43":136,"_35":36,"_222":40,"_235":24,"_37":435,"_39":26,"_82":83,"_220":237,"_84":30,"_223":-5,"_326":436,"_17":437},{"_33":431,"_13":217,"_79":365,"_43":-5,"_35":36,"_222":40,"_235":24,"_37":432,"_39":26,"_82":137,"_220":-5,"_84":30,"_223":-5,"_326":433,"_17":434},{"_33":427,"_13":414,"_79":409,"_43":365,"_35":36,"_222":40,"_235":24,"_37":428,"_39":26,"_82":137,"_220":-5,"_84":30,"_223":-5,"_326":429,"_17":430},{"_33":423,"_13":398,"_79":418,"_43":409,"_35":36,"_222":40,"_235":24,"_37":424,"_39":26,"_82":137,"_220":-5,"_84":30,"_223":-5,"_326":425,"_17":426},{"_33":415,"_13":416,"_79":417,"_43":418,"_35":36,"_222":40,"_235":24,"_37":419,"_39":26,"_82":21,"_220":420,"_84":30,"_223":-5,"_326":421,"_17":422},{"_33":407,"_13":343,"_79":408,"_43":409,"_35":36,"_222":40,"_235":24,"_37":410,"_39":26,"_82":21,"_220":411,"_84":30,"_223":-5,"_326":412,"_17":413},{"_33":403,"_13":376,"_79":371,"_43":365,"_35":36,"_222":40,"_235":24,"_37":404,"_39":26,"_82":137,"_220":-5,"_84":30,"_223":-5,"_326":405,"_17":406},{"_33":399,"_13":398,"_79":393,"_43":371,"_35":36,"_222":40,"_235":24,"_37":400,"_39":26,"_82":137,"_220":-5,"_84":30,"_223":-5,"_326":401,"_17":402},{"_33":390,"_13":391,"_79":392,"_43":393,"_35":36,"_222":40,"_235":24,"_37":394,"_39":26,"_82":21,"_220":395,"_84":30,"_223":-5,"_326":396,"_17":397},{"_33":386,"_13":385,"_79":380,"_43":371,"_35":36,"_222":40,"_235":24,"_37":387,"_39":26,"_82":137,"_220":-5,"_84":30,"_223":-5,"_326":388,"_17":389},{"_33":377,"_13":378,"_79":379,"_43":380,"_35":36,"_222":40,"_235":24,"_37":381,"_39":26,"_82":83,"_220":382,"_84":30,"_223":-5,"_326":383,"_17":384},{"_33":369,"_13":343,"_79":370,"_43":371,"_35":36,"_222":40,"_235":24,"_37":372,"_39":26,"_82":21,"_220":373,"_84":30,"_223":-5,"_326":374,"_17":375},{"_33":364,"_13":350,"_79":345,"_43":365,"_35":36,"_222":40,"_235":24,"_37":366,"_39":26,"_82":137,"_220":-5,"_84":30,"_223":-5,"_326":367,"_17":368},{"_33":360,"_13":359,"_79":354,"_43":345,"_35":36,"_222":40,"_235":24,"_37":361,"_39":26,"_82":137,"_220":-5,"_84":30,"_223":-5,"_326":362,"_17":363},{"_33":351,"_13":352,"_79":353,"_43":354,"_35":36,"_222":40,"_235":24,"_37":355,"_39":26,"_82":21,"_220":356,"_84":30,"_223":-5,"_326":357,"_17":358},{"_33":342,"_13":343,"_79":344,"_43":345,"_35":36,"_222":40,"_235":24,"_37":346,"_39":26,"_82":21,"_220":347,"_84":30,"_223":-5,"_326":348,"_17":349},{"_33":335,"_13":336,"_79":337,"_43":-5,"_35":36,"_222":40,"_235":24,"_37":338,"_39":26,"_82":21,"_220":339,"_84":30,"_223":-5,"_326":340,"_17":341},{"_33":329,"_13":330,"_79":149,"_43":-5,"_35":36,"_222":40,"_235":24,"_37":331,"_39":26,"_82":130,"_220":332,"_84":30,"_223":-5,"_326":333,"_17":334},{"_33":321,"_13":322,"_79":323,"_43":-5,"_35":36,"_222":40,"_235":24,"_37":324,"_39":26,"_82":83,"_220":325,"_84":30,"_223":-5,"_326":327,"_17":328},"c5becc87-ab72-4094-bbee-26a3efb3e09f","og.ts","019eae89-7c0f-77b8-b541-63fd27c67176",["D",1781044706180],"// 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","children",[],[322],"561d8b2a-e95b-4c1d-aa74-b0ce5f2f93e7","http.tsx",["D",1781044706180],"/** @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 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",[],[330],"70e4dcd9-8f20-482e-b931-620984f0ec17","README.md","019eae89-7c0f-77b8-b541-5b3fed29b98d",["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",[],[336],"a0ebfb69-5881-467c-99dd-49c3d516b4d7","SKILL.md","019eae89-7c0f-77b8-b541-4ef141aa0da0","019eae89-7c0f-77b8-b541-53cf5ec449a7",["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 · librarian