Buttons

\n \n \n \n \n Link action\n

\n\n

Form

\n \n \n Public\n

\n\n

Card

Getting Started

hello-world

The simplest possible skill — a greeting and one knowledge file.

\n\n

Callout

\n Heads up — this is how a callout reads: a tinted surface with a matching hairline border. Swap blue for amber, red, or green to change the tone.\n

\n","label",[154,155,156,63],"skills","ui-example","assets","pulls","branches",1,"forks","envVars",{"_165":26,"_167":26},"connections",{"_165":26,"_166":26},"count","unfilledCount","emptyCount",{"_32":383,"_13":350,"_61":344,"_42":-5,"_34":35,"_147":354,"_148":84,"_36":384,"_38":26,"_64":235,"_150":-5,"_65":24,"_152":-5,"_203":385,"_17":386},{"_32":375,"_13":376,"_61":377,"_42":344,"_34":35,"_147":378,"_148":84,"_36":379,"_38":26,"_64":201,"_150":380,"_65":24,"_152":-5,"_203":381,"_17":382},{"_32":367,"_13":368,"_61":369,"_42":344,"_34":35,"_147":370,"_148":84,"_36":371,"_38":26,"_64":201,"_150":372,"_65":24,"_152":-5,"_203":373,"_17":374},{"_32":359,"_13":360,"_61":361,"_42":344,"_34":35,"_147":362,"_148":84,"_36":363,"_38":26,"_64":201,"_150":364,"_65":24,"_152":-5,"_203":365,"_17":366},{"_32":351,"_13":352,"_61":353,"_42":344,"_34":35,"_147":354,"_148":84,"_36":355,"_38":26,"_64":201,"_150":356,"_65":24,"_152":-5,"_203":357,"_17":358},{"_32":341,"_13":342,"_61":343,"_42":344,"_34":35,"_147":345,"_148":84,"_36":346,"_38":26,"_64":201,"_150":347,"_65":24,"_152":-5,"_203":348,"_17":349},{"_32":337,"_13":336,"_61":330,"_42":-5,"_34":35,"_147":331,"_148":84,"_36":338,"_38":26,"_64":235,"_150":-5,"_65":24,"_152":-5,"_203":339,"_17":340},{"_32":327,"_13":328,"_61":329,"_42":330,"_34":35,"_147":331,"_148":84,"_36":332,"_38":26,"_64":201,"_150":333,"_65":24,"_152":-5,"_203":334,"_17":335},{"_32":323,"_13":322,"_61":316,"_42":-5,"_34":35,"_147":317,"_148":84,"_36":324,"_38":26,"_64":235,"_150":-5,"_65":24,"_152":-5,"_203":325,"_17":326},{"_32":313,"_13":314,"_61":315,"_42":316,"_34":35,"_147":317,"_148":84,"_36":318,"_38":26,"_64":201,"_150":319,"_65":24,"_152":-5,"_203":320,"_17":321},{"_32":309,"_13":154,"_61":239,"_42":-5,"_34":35,"_147":159,"_148":84,"_36":310,"_38":26,"_64":235,"_150":-5,"_65":24,"_152":-5,"_203":311,"_17":312},{"_32":305,"_13":291,"_61":285,"_42":239,"_34":35,"_147":286,"_148":84,"_36":306,"_38":26,"_64":235,"_150":-5,"_65":24,"_152":-5,"_203":307,"_17":308},{"_32":301,"_13":274,"_61":295,"_42":285,"_34":35,"_147":296,"_148":84,"_36":302,"_38":26,"_64":235,"_150":-5,"_65":24,"_152":-5,"_203":303,"_17":304},{"_32":292,"_13":293,"_61":294,"_42":295,"_34":35,"_147":296,"_148":84,"_36":297,"_38":26,"_64":21,"_150":298,"_65":24,"_152":-5,"_203":299,"_17":300},{"_32":283,"_13":222,"_61":284,"_42":285,"_34":35,"_147":286,"_148":84,"_36":287,"_38":26,"_64":21,"_150":288,"_65":24,"_152":-5,"_203":289,"_17":290},{"_32":279,"_13":251,"_61":245,"_42":239,"_34":35,"_147":159,"_148":84,"_36":280,"_38":26,"_64":235,"_150":-5,"_65":24,"_152":-5,"_203":281,"_17":282},{"_32":275,"_13":274,"_61":268,"_42":245,"_34":35,"_147":269,"_148":84,"_36":276,"_38":26,"_64":235,"_150":-5,"_65":24,"_152":-5,"_203":277,"_17":278},{"_32":265,"_13":266,"_61":267,"_42":268,"_34":35,"_147":269,"_148":84,"_36":270,"_38":26,"_64":21,"_150":271,"_65":24,"_152":-5,"_203":272,"_17":273},{"_32":261,"_13":260,"_61":255,"_42":245,"_34":35,"_147":159,"_148":84,"_36":262,"_38":26,"_64":235,"_150":-5,"_65":24,"_152":-5,"_203":263,"_17":264},{"_32":252,"_13":253,"_61":254,"_42":255,"_34":35,"_147":159,"_148":84,"_36":256,"_38":26,"_64":201,"_150":257,"_65":24,"_152":-5,"_203":258,"_17":259},{"_32":243,"_13":222,"_61":244,"_42":245,"_34":35,"_147":246,"_148":84,"_36":247,"_38":26,"_64":21,"_150":248,"_65":24,"_152":-5,"_203":249,"_17":250},{"_32":238,"_13":155,"_61":224,"_42":239,"_34":35,"_147":225,"_148":84,"_36":240,"_38":26,"_64":235,"_150":-5,"_65":24,"_152":-5,"_203":241,"_17":242},{"_32":233,"_13":156,"_61":146,"_42":224,"_34":35,"_147":39,"_148":84,"_36":234,"_38":26,"_64":235,"_150":-5,"_65":24,"_152":-5,"_203":236,"_17":237},{"_32":145,"_13":63,"_61":62,"_42":146,"_34":35,"_147":39,"_148":84,"_36":230,"_38":26,"_64":21,"_150":151,"_65":24,"_152":-5,"_203":231,"_17":232},{"_32":221,"_13":222,"_61":223,"_42":224,"_34":35,"_147":225,"_148":84,"_36":226,"_38":26,"_64":21,"_150":227,"_65":24,"_152":-5,"_203":228,"_17":229},{"_32":214,"_13":215,"_61":216,"_42":-5,"_34":35,"_147":108,"_148":84,"_36":217,"_38":159,"_64":21,"_150":218,"_65":24,"_152":-5,"_203":219,"_17":220},{"_32":206,"_13":207,"_61":82,"_42":-5,"_34":35,"_147":208,"_148":84,"_36":209,"_38":26,"_64":210,"_150":211,"_65":24,"_152":-5,"_203":212,"_17":213},{"_32":196,"_13":197,"_61":198,"_42":-5,"_34":35,"_147":199,"_148":84,"_36":200,"_38":26,"_64":201,"_150":202,"_65":24,"_152":-5,"_203":204,"_17":205},"5f17aa0f-c817-4e73-8a6d-6b8780f20301","og.ts","6bf1ce32-6454-11f1-8f6c-1607ee4eb77e",6,["D",1781044917611],"script","// 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\";\nimport { SKILLS } from \"./lib/skills.ts\";\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(): Promise {\n const { bold, regular } = await loadFonts();\n const count = SKILLS.length;\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(): Promise {\n try {\n const svg = await renderSvg();\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",[],[197],"fc00783c-59fb-4da4-8802-0e58fafad58e","http.tsx",4,["D",1781044883172],"http","/** @jsxImportSource npm:hono@4/jsx */\n// Skill Library — thin HTTP orchestrator (generic, public template).\n// Routes only; markup lives in components/, data + helpers in lib/skills.ts,\n// client JS in frontend/client.js. Fork this val to build your own library.\n// See README.md.\n\nimport { Hono } from \"npm:hono@4\";\nimport { marked } from \"npm:marked@15\";\nimport { readFile } from \"https://esm.town/v/std/utils@85-main/index.ts\";\nimport { parseVal } from \"https://esm.town/v/std/utils/index.ts\";\n\nimport {\n buildCopyPayload,\n esc,\n exampleAsset,\n findSkill,\n parseFrontmatter,\n readSkillFile,\n} from \"./lib/skills.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\", () => renderOg());\n\n// ── Pages ────────────────────────────────────────────────────────────────────\n\napp.get(\"/\", (c) =>\n c.html(\n \n \n ,\n ));\n\napp.get(\"/skills/:slug\", async (c) => {\n const skill = findSkill(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 = findSkill(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 = findSkill(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",[],[207],"aec15f98-c150-4ee9-bee2-4412a486a67e","README.md","bf2513ca-6454-11f1-9006-1607ee4eb77e",["D",1781045797493],"# Skill Library (template)\n\nA forkable directory of reusable **agent skills**. Each skill is a folder of\nMarkdown and code; the app renders every skill's `SKILL.md` and gives you a\none-click **Copy skill** button that puts a ready-to-run payload on your\nclipboard.\n\n🔗 **Live:** https://templates--576a3bb6645411f181421607ee4eb77e.web.val.run\n\n## Getting started\n\nThe intended way to manage this library is with an agent — let it add, edit, and\ndeploy skills for you. You don't need to touch the file tree by hand.\n\n1. **Remix this val** to get your own copy.\n2. **Connect your coding agent** with the Val Town plugin, which bundles the\n Val Town MCP server and platform skills. It works with Claude Code, Codex,\n and Cursor:\n\n ```sh\n npx plugins add val-town/plugins\n ```\n\n See the [plugin guide](https://docs.val.town/guides/prompting/plugin/) for\n per-agent install commands.\n3. **Ask it to add a skill.** For example:\n\n > Add a skill called `pr-summarizer` to my skills val that reads a GitHub PR\n > diff and writes a release note. Put the prompt in `SKILL.md` and a fetch\n > script in `scripts/`.\n\n The agent reads the existing skills for the pattern, creates\n `skills//` with the right files, registers it in the `SKILLS` manifest,\n and deploys — all in place.\n\nPrefer not to set up a local agent? Open this val on val.town and talk to\n**Townie** in the sidebar instead. Same workflow, in the browser.\n\nYou can also just edit a skill by hand — every file opens in the Val Town editor,\ne.g. [`skills/hello-world/SKILL.md`](https://www.val.town/x/dcm31/skills/code/skills/hello-world/SKILL.md).\nA skill's body is plain Markdown, so tweaking wording or fixing a typo is a\ntwo-second edit that deploys on save.\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. Each skill is also listed in the `SKILLS` array in\n`lib/skills.ts` (`slug`, `name`, `description`, `category`, and its `files`),\nwhich drives the home grid, the sidebar file tree, and the copy payload — your\nagent keeps this in sync for you.\n\n## Live examples\n\nA skill can ship a live preview — a working UI rendered right on its page, so you\ncan see what the skill produces instead of just reading about it.\n\nTo add one, drop an HTML fragment in the skill's `assets/` folder (e.g.\n`assets/showcase.html`) and list it in the manifest's `files`. That's it — the\napp renders the first `assets/*.html` it finds as an **Examples** panel on the\nskill page, and also serves it standalone (and embeddable in an iframe) at\n`/skills//example`.\n\nThe fragment is just HTML; it can pull in CSS or a `\n \n

History · showcase.html