[{"_1":2,"_3":-5,"_4":-5},"loaderData",{"_5":6,"_7":8,"_9":10},"actionData","errors","root",{"_281":282,"_283":284},"routes/_app.x.$handle.$name",{"_96":95,"_31":44,"_105":86,"_26":106,"_13":14,"_107":-5,"_11":108,"_109":110,"_111":112,"_113":114,"_115":116,"_20":-5,"_117":-5,"_118":-5,"_119":24,"_120":121,"_122":58,"_123":-5,"_124":-5,"_125":126},"routes/_app.x.$handle.$name.branch.$branch.version.$version.diff",{"_11":12,"_13":14,"_15":16,"_17":-5,"_18":-5},"project",{"_42":43,"_31":44,"_37":45,"_46":-5,"_47":24,"_48":49,"_50":49,"_51":52,"_53":-5,"_18":54,"_55":56,"_57":58,"_59":-5,"_60":-5,"_61":62,"_63":64,"_65":-5,"_66":-5,"_67":-5,"_68":-5,"_69":70,"_71":70,"_72":73,"_74":73,"_75":73,"_76":70,"_77":70,"_78":79,"_80":81,"_82":83,"_84":24},"version",8,"changes",[19],"aiChatInfo","userId",{"_20":21,"_22":-7,"_23":24,"_25":24,"_26":27,"_28":27},"file",{"_29":30,"_31":32,"_33":34,"_35":36,"_37":38,"_39":14,"_40":41,"_23":24},"previous","deleted",false,"deletedHere","path","components/Home.tsx","latestPath","fileId","77297a3e-6454-11f1-bc9a-1607ee4eb77e","name","Home.tsx","fileType","script","content","/** @jsxImportSource npm:hono@4/jsx */\nimport { SKILLS } from \"../lib/skills.ts\";\n\n// Hairline neutral cards, a small uppercase `.eyebrow` label for category + count.\nexport const Home = () => (\n <>\n

Skill Library

\n A shared library of reusable agent skills. This is a template — fork it and\n drop your own skill folders under skills/.\n

\n {SKILLS.map((s) => (\n \n

{s.category}

{s.name}

{s.description}

{s.files.length} files

\n \n ))}\n

\n \n);\n","createdAt",["D",1781044936432],"branchVersion","branchId","040340e9-158b-4bbd-8f37-b747265ebd0a","id","874fb20a-7ec0-4476-989c-722361ea8c91","skills-library",["D",1781044539263],"deletedAt","legacyEnvVars","privacy","public","httpPrivacy","description","Shareable agent skill library","imageUrl","9319c175-2593-4f88-ba21-04f2ef7b1c28","pinnedFileId","576a3bb6-6454-11f1-8142-1607ee4eb77e","pinPreview",true,"pinMigrated","screenshotVersion","likeCount",0,"orgId","019aa807-52c2-709c-928b-2029bae9a558","tursoName","tursoHostname","tursoMeasuredAt","pinned","userPerm","r","valPerm","blobPerm","rw","emailPerm","sqlitePerm","projectPerm","telemetryPerm","user",{"_96":95,"_104":100},"org",{"_96":95,"_97":98,"_99":100,"_18":-5,"_101":102,"_103":58},"branch",{"_13":85,"_31":86,"_42":41,"_87":43,"_88":-5,"_89":-5,"_90":-5,"_91":-5,"_92":-5,"_93":44,"_94":95},"isOwned",18,"main","projectId","forkedBranchId","forkedBranchVersion","forkedProjectPrivacy","forkedProjectId","forkedProjectOrgId","projectName","userHandle","templates","handle","displayName","Templates","avatar","https://imagedelivery.net/iHX6Ovru0O7AjmyT5yZRoA/129cab32-3bd7-4c3e-f39b-f12900c76100/square512?exp=1789592299&sig=188891e82f4e9571bba4caeb10b96b8ce7fbfdab1cc9b3eb1f759845a58229ac","tier","business","canRestrictVals","profileImageUrl","branchName","","adoptOrgId",{"_42":43,"_31":44,"_37":277,"_46":-5,"_47":24,"_48":49,"_50":49,"_51":52,"_53":-5,"_18":54,"_55":56,"_57":58,"_59":-5,"_60":-5,"_61":62,"_63":64,"_65":-5,"_66":-5,"_67":-5,"_68":-5,"_69":70,"_71":70,"_72":73,"_74":73,"_75":73,"_76":70,"_77":70,"_78":278,"_80":279,"_82":280,"_84":24},"tree",[185,188,190,192,198,199],"files",[185,186,187,188,189,190,191,192,193,194,195,196,197,198,199],"counts",{"_175":62,"_176":153,"_177":153,"_178":179,"_180":181},"contents",[127,128,129,130,131,132],"upstreamProject","upstreamBranch","emptyEnvVars","flags",[],"hasHttpFiles","grants","orgs","customDomains",{},{"_42":169,"_31":170,"_29":171,"_136":-5,"_40":41,"_39":172,"_138":58,"_37":173,"_13":62,"_33":155,"_35":-5,"_23":24,"_141":-5,"_26":174},{"_42":163,"_31":164,"_29":165,"_136":-5,"_40":41,"_39":166,"_138":58,"_37":167,"_13":62,"_33":155,"_35":-5,"_23":24,"_141":-5,"_26":168},{"_42":157,"_31":158,"_29":159,"_136":-5,"_40":41,"_39":160,"_138":58,"_37":161,"_13":62,"_33":155,"_35":-5,"_23":24,"_141":-5,"_26":162},{"_42":150,"_31":151,"_29":152,"_136":-5,"_40":41,"_39":153,"_138":58,"_37":154,"_13":62,"_33":155,"_35":-5,"_23":24,"_141":-5,"_26":156},{"_42":143,"_31":144,"_29":56,"_136":-5,"_40":41,"_39":145,"_138":58,"_37":146,"_13":62,"_33":147,"_35":148,"_23":24,"_141":-5,"_26":149},{"_42":133,"_31":134,"_29":135,"_136":-5,"_40":41,"_39":137,"_138":58,"_37":139,"_13":62,"_33":34,"_35":140,"_23":24,"_141":-5,"_26":142},"5f17aa0f-c817-4e73-8a6d-6b8780f20301","og.ts","6bf1ce32-6454-11f1-8f6c-1607ee4eb77e","parentId",6,"latest",["D",1781044917611],"// 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","label",[134],"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",[144],"8b307b7b-a114-42ce-9e36-20764af9110b","skills","c84b0e0a-a428-433f-be28-bbf54184afb8",1,["D",1781044736920],"directory",[151],"25913dae-207c-40fa-9633-2829ada14625","lib","cfd00ff5-8135-4f3b-b436-1f119431daf5",5,["D",1781044897190],[158],"eb522734-6530-42eb-a90d-c4903e2ac69f","frontend","6a919749-0a30-45c6-a6e3-ea96f31b54b8",2,["D",1781044743903],[164],"b74280fc-92b2-4bc2-8e6d-cca25e5c3f4c","components","424374d4-6080-4620-9091-9850ddf6a854",7,["D",1781044932121],[170],"pulls","branches","forks","envVars",{"_182":62,"_184":62},"connections",{"_182":62,"_183":62},"count","unfilledCount","emptyCount",{"_42":169,"_31":170,"_29":171,"_136":-5,"_40":41,"_39":172,"_138":58,"_37":274,"_13":62,"_33":155,"_35":-5,"_23":24,"_141":-5,"_201":275,"_26":276},{"_42":270,"_31":32,"_29":30,"_136":171,"_40":41,"_39":14,"_138":58,"_37":271,"_13":62,"_33":34,"_35":36,"_23":24,"_141":-5,"_201":272,"_26":273},{"_42":263,"_31":264,"_29":265,"_136":171,"_40":41,"_39":172,"_138":58,"_37":266,"_13":62,"_33":34,"_35":267,"_23":24,"_141":-5,"_201":268,"_26":269},{"_42":163,"_31":164,"_29":165,"_136":-5,"_40":41,"_39":166,"_138":58,"_37":260,"_13":62,"_33":155,"_35":-5,"_23":24,"_141":-5,"_201":261,"_26":262},{"_42":253,"_31":254,"_29":255,"_136":165,"_40":41,"_39":166,"_138":58,"_37":256,"_13":62,"_33":34,"_35":257,"_23":24,"_141":-5,"_201":258,"_26":259},{"_42":157,"_31":158,"_29":159,"_136":-5,"_40":41,"_39":160,"_138":58,"_37":250,"_13":62,"_33":155,"_35":-5,"_23":24,"_141":-5,"_201":251,"_26":252},{"_42":243,"_31":244,"_29":245,"_136":159,"_40":41,"_39":160,"_138":58,"_37":246,"_13":62,"_33":34,"_35":247,"_23":24,"_141":-5,"_201":248,"_26":249},{"_42":150,"_31":151,"_29":152,"_136":-5,"_40":41,"_39":153,"_138":58,"_37":240,"_13":62,"_33":155,"_35":-5,"_23":24,"_141":-5,"_201":241,"_26":242},{"_42":236,"_31":215,"_29":218,"_136":152,"_40":41,"_39":153,"_138":58,"_37":237,"_13":62,"_33":155,"_35":-5,"_23":24,"_141":-5,"_201":238,"_26":239},{"_42":232,"_31":231,"_29":225,"_136":218,"_40":41,"_39":226,"_138":58,"_37":233,"_13":62,"_33":155,"_35":-5,"_23":24,"_141":-5,"_201":234,"_26":235},{"_42":222,"_31":223,"_29":224,"_136":225,"_40":41,"_39":226,"_138":58,"_37":227,"_13":62,"_33":20,"_35":228,"_23":24,"_141":-5,"_201":229,"_26":230},{"_42":217,"_31":216,"_29":210,"_136":218,"_40":41,"_39":153,"_138":58,"_37":219,"_13":62,"_33":155,"_35":-5,"_23":24,"_141":-5,"_201":220,"_26":221},{"_42":207,"_31":208,"_29":209,"_136":210,"_40":41,"_39":153,"_138":58,"_37":211,"_13":62,"_33":34,"_35":212,"_23":24,"_141":-5,"_201":213,"_26":214},{"_42":143,"_31":144,"_29":56,"_136":-5,"_40":41,"_39":145,"_138":58,"_37":204,"_13":62,"_33":147,"_35":148,"_23":24,"_141":-5,"_201":205,"_26":206},{"_42":133,"_31":134,"_29":135,"_136":-5,"_40":41,"_39":137,"_138":58,"_37":200,"_13":62,"_33":34,"_35":140,"_23":24,"_141":-5,"_201":202,"_26":203},["D",1781044917611],"children",[],[134],["D",1781044883172],[],[144],"4ed6542a-802b-4b9d-b25d-405c1c33378d","greet.ts","007c8110-6454-11f1-9b6c-1607ee4eb77e","bfc0b030-b2ef-4b2a-8ccd-69bb20f5ed2e",["D",1781044736920],"// greet.ts — the simplest possible skill script.\n// Usage: deno run greet.ts [name]\n\nconst name = Deno.args[0] || \"World\";\nconst now = new Date().toLocaleString();\n\nconsole.log(`Hello, ${name}!`);\nconsole.log(`The time is ${now}.`);\n",[],[151,215,216,208],"hello-world","scripts","f3533293-708b-4d64-8ba0-a138905e548b","05680e8e-5318-4c5c-8d8b-89596aba1cdb",["D",1781044736920],[197],[151,215,216],"0f470cd9-4c1a-4098-8033-60f44d7d49a8","about-skills.md","05b572c2-6454-11f1-8111-1607ee4eb77e","6400a0ce-a59c-4677-b4bb-413ed14d6c40",3,["D",1781044745851],"# About Skills\n\nA **skill** is a reusable set of instructions and tools that an AI agent can follow to accomplish a specific task. Think of it as a runbook + toolkit.\n\n## The folder convention\n\n```\nskills//\n├── SKILL.md ← entry point: what to do, step by step\n├── scripts/ ← code the agent runs on the user's machine\n│ └── *.ts\n└── knowledge/ ← reference docs the agent reads for context\n └── *.md\n```\n\n## How an agent consumes a skill\n\n1. **Read SKILL.md** — this is the orchestration document. It tells the agent what to do in what order.\n2. **Read knowledge/ files** — these provide context: scoring rubrics, API schemas, checklists, templates. They stay in the agent's context window; they don't get written to disk.\n3. **Write scripts/ to disk** — scripts need to run locally because they interact with the filesystem, environment variables, and external services. The agent reads them from the val via MCP and writes them to the working directory.\n4. **Execute the flow** — follow the steps in SKILL.md, using the scripts and knowledge as needed.\n\n## Why Val Town?\n\nVal Town projects are the perfect host for skill libraries because:\n\n- **Always online** — skills are available via the Val Town MCP from any machine\n- **Versioned** — every file change is tracked; you can see what changed when\n- **Collaborative** — multiple team members can edit skills via the web editor or `vt` CLI\n- **Web UI included** — the `http.tsx` handler gives you a browsable skill catalog for free\n- **Copy-friendly** — the \"Copy Skill\" button bundles the instructions with a pointer back to the val, so the AI always knows where to find the scripts\n",[],[151,215,231,223],"knowledge","09a0e42e-8e22-40ad-a1fe-412b351a427d",["D",1781044745851],[195],[151,215,231],"93523282-cf37-4c40-bd12-5e94f325b143",["D",1781044736920],[194,196],[151,215],["D",1781044736920],[193],[151],"f0988e6a-9cc4-42a5-aadc-24437a0d4611","skills.ts","5fc6970a-6454-11f1-8eb2-1607ee4eb77e",["D",1781044897190],"// Skill manifest, file helpers, and the copy-payload builder.\n// The skills// folder structure (SKILL.md + scripts/ + knowledge/) is the\n// source of truth; this manifest just indexes it for the UI.\n//\n// This is a generic template — fork the val and edit SKILLS below to point at\n// your own skill folders.\n\nimport { readFile } from \"https://esm.town/v/std/utils@85-main/index.ts\";\n\n// \"/\", baked into the Copy-skill payload so agents know where to\n// read the rest of each skill's files. Derived from VALTOWN_ENTRYPOINT (which\n// the runtime injects, e.g. https://esm.town/v//@-/...)\n// so it self-updates on remix — no manual edit needed.\nexport const VAL_ID = (() => {\n const ep = Deno.env.get(\"VALTOWN_ENTRYPOINT\");\n const m = ep?.match(/esm\\.town\\/v\\/([^/]+)\\/([^/@]+)/);\n return m ? `${m[1]}/${m[2]}` : \"dcm31/skills\";\n})();\n\nexport type Skill = {\n slug: string;\n name: string;\n description: string;\n category: string;\n files: string[];\n};\n\nexport const SKILLS: Skill[] = [\n {\n slug: \"hello-world\",\n name: \"Hello World\",\n description:\n \"The simplest possible skill — a greeting script and one knowledge file. Start here to learn the SKILL.md + scripts/ + knowledge/ folder convention.\",\n category: \"Getting Started\",\n files: [\"SKILL.md\", \"scripts/greet.ts\", \"knowledge/about-skills.md\"],\n },\n {\n slug: \"code-reviewer\",\n name: \"Code Reviewer\",\n description:\n \"Reviews a diff for correctness bugs, security issues, and style problems. Demonstrates a multi-step flow backed by a knowledge file.\",\n category: \"Engineering\",\n files: [\"SKILL.md\", \"knowledge/review-checklist.md\"],\n },\n {\n slug: \"ui-example\",\n name: \"UI Example\",\n description:\n \"Shows off the live-example feature: a skill that ships an HTML fragment, rendered inline on this page and standalone. Read it to learn how examples work.\",\n category: \"Reference\",\n files: [\"SKILL.md\", \"assets/showcase.html\"],\n },\n];\n\nexport function findSkill(slug: string): Skill | undefined {\n return SKILLS.find((s) => s.slug === slug);\n}\n\n// A skill's live preview is the first HTML file in its standard `assets/` dir.\n// `assets/` is a recognized Agent-Skills directory, so the file stays\n// discoverable by agents (when referenced from SKILL.md) — and the app can\n// render it without a bespoke manifest flag. Convention over configuration.\nexport function exampleAsset(skill: Skill): string | undefined {\n return skill.files.find((f) => f.startsWith(\"assets/\") && f.endsWith(\".html\"));\n}\n\nexport async function readSkillFile(\n slug: string,\n path: string,\n): Promise {\n try {\n const content = await readFile(`/skills/${slug}/${path}`, import.meta.url);\n return typeof content === \"string\" ? content : null;\n } catch {\n return null;\n }\n}\n\n// Escape text for safe injection into a dangerouslySetInnerHTML code block.\nexport function esc(s: string): string {\n return s.replace(/&/g, \"&\").replace(//g, \">\")\n .replace(/\"/g, \""\");\n}\n\n// The clipboard payload: SKILL.md plus a header telling an agent where to read\n// the rest of the skill's files via the Val Town MCP.\nexport function buildCopyPayload(skill: Skill, raw: string): string {\n return `# ${skill.name}\n# Source: ${VAL_ID} → skills/${skill.slug}/\n#\n# To use this skill, read its remaining files from this val via the Val Town MCP:\n# val: ${VAL_ID}\n# path: skills/${skill.slug}/\n# then follow the flow described below.\n#\n# Files in this skill:\n${skill.files.map((f) => `# ${f}`).join(\"\\n\")}\n\n${raw}`;\n}\n\n// Parse standard SKILL.md YAML frontmatter (name / description) and return the\n// parsed fields plus the body with the frontmatter block removed.\nexport type Frontmatter = {\n name?: string;\n description?: string;\n};\n\nexport function parseFrontmatter(\n raw: string,\n): { data: Frontmatter; body: string } {\n const m = raw.match(/^---\\r?\\n([\\s\\S]*?)\\r?\\n---\\r?\\n?/);\n if (!m) return { data: {}, body: raw };\n const data: Record = {};\n let key: string | null = null;\n for (const line of m[1].split(/\\r?\\n/)) {\n const kv = line.match(/^([A-Za-z0-9_-]+):\\s*(.*)$/);\n const item = line.match(/^\\s+-\\s+(.*)$/);\n if (kv) {\n key = kv[1];\n const v = kv[2].trim().replace(/^[\"']|[\"']$/g, \"\");\n data[key] = v === \"\" ? [] : v;\n } else if (item && key) {\n if (!Array.isArray(data[key])) data[key] = [];\n (data[key] as string[]).push(item[1].trim().replace(/^[\"']|[\"']$/g, \"\"));\n }\n }\n return { data: data as Frontmatter, body: raw.slice(m[0].length) };\n}\n\n// Group a flat file list into root files + subdirectories for the sidebar tree.\nexport type FileGroups = {\n root: string[];\n dirs: { dir: string; files: string[] }[];\n};\n\nexport function groupFiles(files: string[]): FileGroups {\n const root: string[] = [];\n const dirMap: Record = {};\n for (const f of files) {\n const parts = f.split(\"/\");\n if (parts.length === 1) root.push(f);\n else {\n const dir = parts.slice(0, -1).join(\"/\");\n (dirMap[dir] ??= []).push(parts[parts.length - 1]);\n }\n }\n return {\n root,\n dirs: Object.entries(dirMap).map(([dir, files]) => ({ dir, files })),\n };\n}\n",[],[158,244],["D",1781044897190],[191],[158],"a76c0e4f-2d56-47bc-9dcd-455f086afe11","client.js","04a3d5c2-6454-11f1-9821-1607ee4eb77e",["D",1781044743903],"// Client-side behaviour, served at /client.js as a module script.\n// Clipboard wiring for [data-copy] buttons: copy the payload, then briefly flash\n// \"Copied!\" on the button's .label span (falling back to the button itself).\n\nfunction flash(el) {\n const orig = el.textContent;\n el.textContent = \"Copied!\";\n setTimeout(() => {\n el.textContent = orig;\n }, 1600);\n}\n\ndocument.querySelectorAll(\"[data-copy]\").forEach((btn) => {\n btn.addEventListener(\"click\", () => {\n navigator.clipboard.writeText(btn.dataset.copy).then(() => {\n flash(btn.querySelector(\".label\") || btn);\n });\n });\n});\n",[],[164,254],["D",1781044743903],[189],[164],"62907f4e-883d-4850-9a92-fa13dd800923","Layout.tsx","749858a8-6454-11f1-ba60-1607ee4eb77e",["D",1781044932121],"/** @jsxImportSource npm:hono@4/jsx */\nimport { raw } from \"npm:hono@4/html\";\n\n// Plain defaults: system font (Twind `font-sans`), neutral palette, one blue\n// accent. The scoped block styles marked's rendered markdown (which can't carry\n// Twind utility classes) plus a small uppercase `.eyebrow` label helper.\nconst CONTENT_CSS = `\n.eyebrow{font-size:11px;font-weight:500;letter-spacing:0.05em;text-transform:uppercase;color:#a3a3a3}\n.md{margin-bottom:32px}\n.md h1,.md h2,.md h3,.md h4{margin-top:32px;margin-bottom:8px;font-weight:600}\n.md h1{font-size:24px}.md h2{font-size:20px}.md h3{font-size:16px}\n.md p{margin-bottom:16px}\n.md ul,.md ol{margin:8px 0 16px 24px}\n.md ul{list-style:disc}.md ol{list-style:decimal}\n.md li{margin-bottom:4px}\n.md pre{background:#f5f5f5;padding:16px;border-radius:8px;overflow-x:auto;font-size:13px;line-height:1.5;margin:8px 0 16px}\n.md code{background:#f5f5f5;padding:2px 6px;border-radius:6px;font-size:13px;font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,monospace}\n.md pre code{background:none;padding:0}\n.md table{border-collapse:collapse;width:100%;margin:8px 0 16px}\n.md th,.md td{border:1px solid #e5e5e5;padding:8px 12px;text-align:left;font-size:14px}\n.md th{background:#fafafa;font-weight:600}\n.md blockquote{border-left:3px solid #e5e5e5;padding:8px 16px;margin:8px 0 16px;color:#525252}\n.md hr{border:none;border-top:1px solid #e5e5e5;margin:32px 0}\n.md strong{font-weight:600}\n.md a{color:#2563eb;text-decoration:underline;text-underline-offset:2px}\n.file-view pre{background:#f5f5f5;padding:16px;border-radius:8px;overflow-x:auto;font-size:13px;line-height:1.6;font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,monospace}\n`;\n\nconst DEFAULT_DESC =\n \"A shared library of reusable agent skills. Fork it and drop in your own.\";\n\nexport const Layout = (props: {\n title: string;\n children?: unknown;\n client?: boolean;\n baseUrl?: string;\n description?: string;\n}) => {\n const desc = props.description ?? DEFAULT_DESC;\n const ogImage = props.baseUrl ? `${props.baseUrl}/og.png` : \"/og.png\";\n return (\n <>\n {raw(\"\")}\n \n \n \n \n {props.title}\n \n \n \n \n \n {props.baseUrl ? : null}\n \n \n \n \n \n \n

Diff · v8