A directory of reusable agent skills. Each skill is a folder of Markdown and code; the app renders every skill's SKILL.md and gives you a one-click Copy skill button that puts a ready-to-run payload on your clipboard.

A skill is just a folder — drop skills/<slug>/SKILL.md in and it shows up. There's also a Slack "Skills Librarian" bot (in librarian/) that can list, explain, and CRUD skills by chat.

🔗 Catalog: https://dcm31--92861134610211f1a0c51607ee4eb77e.web.val.run

A skill is a folder under skills/<slug>/ following the standard Agent-Skills layout, so it stays valid and discoverable by agents reading it outside this app:

skills/<slug>/
  SKILL.md       # entry point — what the skill does and the flow to follow
  scripts/       # runnable code the agent writes locally
  knowledge/     # reference docs the agent reads for context
  assets/        # optional HTML fragment, shown as a live example

Only SKILL.md is required. Its YAML frontmatter is the skill's metadata.

---
name: PR Summarizer
description: Reads a GitHub PR diff and writes a release note. Use when…
category: Engineering
---

# PR Summarizer

…the instructions an agent follows…

The catalog is derived at request time: the app lists skills/*, reads each SKILL.md's frontmatter for name / description / category, and collects the folder's files. Add a folder → it appears. Edit frontmatter → the card updates. (name falls back to a title-cased slug, category to "Uncategorized", if you omit them.)

Three ways, in increasing convenience:

1. The Slack Skills Librarian (see below) — "list the skills", "how does X work", "create a skill that…", "change the UI skill to…".
2. A coding agent via the Val Town plugin (Claude Code / Codex / Cursor): npx plugins add val-town/plugins, then ask it to add or edit a skill.
3. By hand in the Val Town editor — a skill's body is plain Markdown, so a typo fix is a two-second edit that deploys on save.

A Slack agent (Claude + the Vercel AI SDK, built on the templates/ai-slackbot quickstart) that manages this library through a small set of structured tools. The design split: reads are broad, writes are deliberate.

create_skill / update_skill own the folder-and-frontmatter shape, so the bot can't produce a malformed skill, and every write is scoped to this val's skills/ folder. Reads use std/utils (token-free); writes use the Val Town REST API with a token (VALTOWN_TOKEN) and target the current branch, so on the librarian branch new skills land on the branch until you merge to main.

1. Open the bot's HTTP endpoint (the librarian/events.ts file's URL) and click Create Slack App → — scopes, events, and the webhook URL are pre-filled from a manifest.
2. Give the bot its face: Slack manifests can't carry an icon, so upload the owl (served at the endpoint's /icon.png) under the app's Basic Information → Display Information. Replies wear the owl automatically via chat:write.customize either way; the upload covers everything else (DM list, Assistant pane, app home).
3. Install the app to your workspace, then set these environment variables on this val:
   • SLACK_BOT_TOKEN, SLACK_SIGNING_SECRET — from the Slack app
   • ANTHROPIC_API_KEY — for the model
   • SLACK_APP_ID (optional) — powers the catalog toolbar's "DM the librarian" link
4. Authorize Val Town writes with one click on the /connect page (the librarian/connect.ts endpoint — also surfaced from the catalog's bottom bar). That stores a self-refreshing OAuth token so the librarian can create & edit skills. No API token to create or paste.
5. Message the bot in its Assistant tab or @mention it in a channel.

Prefer a token over OAuth (or running headless)? Set VALTOWN_TOKEN to a Val Town API token with val write access and the librarian uses that instead — it takes priority. Either way, only the skill-CRUD tools touch it.

A skill can ship a live preview — a working UI rendered right on its page. Drop an HTML fragment in the skill's assets/ folder (e.g. assets/showcase.html) and reference it from SKILL.md with a Markdown link. The app renders the first assets/*.html it finds as an Examples panel, and serves it standalone (iframe-embeddable) at /skills/<slug>/example. The ui-example skill ships one and walks through the feature.

http.tsx                 # public catalog routes
lib/skills.ts            # skill discovery (folder → catalog), file + copy-payload helpers, frontmatter parse
lib/vt.ts                # Val Town REST client: skill writes + a catalog read-list fallback
og.ts                    # social card image
components/               # Layout, Home, SkillDetail, FileView, FileTree
frontend/client.js        # clipboard wiring for [data-copy] buttons
skills/<slug>/           # the skills themselves (source of truth)
librarian/               # the Slack Skills Librarian bot
  events.ts              #   HTTP entry: setup page + /icon.png + Slack /events + /process
  generate-response.ts   #   the agent loop (Claude + tools)
  icon.ts                #   the owl avatar (embedded base64 PNG)
  skill-tools.ts         #   list / read / create / update / delete tools
  slack-utils.ts         #   Slack client, verification, thread reconstruction
  handle-*.ts            #   app_mention / message / thread_started handlers
  prompt.md              #   librarian system prompt

By default the catalog is public. To restrict it to a Val Town org, sign requests through std/oauth and check the signed-in user against your org's members (wrap the http.tsx fetch export with the OAuth middleware). Requires a Teams account.