[{"_1":2,"_3":-5,"_4":-5},"loaderData",{"_5":6,"_7":8,"_9":10},"actionData","errors","root",{"_415":416,"_417":418},"routes/_app.x.$handle.$name",{"_104":103,"_38":52,"_113":94,"_33":114,"_13":14,"_115":-5,"_11":116,"_117":118,"_119":120,"_121":122,"_123":124,"_26":-5,"_125":-5,"_126":-5,"_127":31,"_128":129,"_130":66,"_131":-5,"_132":-5,"_133":134},"routes/_app.x.$handle.$name.branch.$branch.version.$version.diff",{"_11":12,"_13":14,"_15":16,"_17":18,"_19":-5},"project",{"_50":51,"_38":52,"_45":53,"_54":-5,"_55":31,"_56":57,"_58":57,"_59":60,"_61":-5,"_19":62,"_63":64,"_65":66,"_67":-5,"_68":-5,"_69":70,"_71":72,"_73":-5,"_74":-5,"_75":-5,"_76":-5,"_77":78,"_79":78,"_80":81,"_82":81,"_83":81,"_84":78,"_85":78,"_86":87,"_88":89,"_90":91,"_92":31},"version",65,"changes",[25],"aiChatInfo",{"_20":21,"_22":-5,"_23":-5,"_24":-5},"userId","aiChatMessageId","239daea9-879a-4166-b0f2-48e4c2191a5b","aiChatThreadId","aiChatThreadUserId","aiChatThreadTitle",{"_26":27,"_28":29,"_30":31,"_32":31,"_33":34,"_35":34},"file",{"_36":37,"_38":39,"_40":41,"_42":44,"_45":46,"_47":14,"_48":49,"_30":31},"previous",{"_36":37,"_38":39,"_40":41,"_42":43},"deleted",false,"deletedHere","path","lib/skills.ts","latestPath","fileId","22d0ab48-611a-11f1-8ee2-1607ee4eb77e","name","skills.ts","fileType","script","content","// 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// Set this to \"/\" after forking so the Copy-skill payload\n// tells agents where to read the rest of each skill's files.\nexport const VAL_ID = \"dcm31/skills\";\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","// 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","createdAt",["D",1780945878741],"branchVersion","branchId","7c862450-0674-426e-9c69-ceda93eca788","id","6852d2a6-72e8-40e3-b5f0-53b7f8f82e7f","skills",["D",1780679910046],"deletedAt","legacyEnvVars","privacy","public","httpPrivacy","description","Shareable agent skill library","imageUrl","9319c175-2593-4f88-ba21-04f2ef7b1c28","pinnedFileId","92861134-6102-11f1-a0c5-1607ee4eb77e","pinPreview",true,"pinMigrated","screenshotVersion","likeCount",1,"orgId","d663a026-6449-42f6-9156-1d4a2d64d38c","tursoName","tursoHostname","tursoMeasuredAt","pinned","userPerm","r","valPerm","blobPerm","rw","emailPerm","sqlitePerm","projectPerm","telemetryPerm","user",{"_104":103,"_112":108},"org",{"_104":103,"_105":106,"_107":108,"_19":62,"_109":110,"_111":31},"branch",{"_13":93,"_38":94,"_50":49,"_95":51,"_96":-5,"_97":-5,"_98":-5,"_99":-5,"_100":-5,"_101":52,"_102":103},"isOwned",96,"main","projectId","forkedBranchId","forkedBranchVersion","forkedProjectPrivacy","forkedProjectId","forkedProjectOrgId","projectName","userHandle","dcm31","handle","displayName","Charlie","avatar","https://imagedelivery.net/iHX6Ovru0O7AjmyT5yZRoA/3e904faa-3764-4629-c475-f561a49b0000/square512?exp=1789581599&sig=aa89c75ccb14b30f67f191d970081889e190f659b15ae1946f2f2fd355e8fba5","tier","pro","canRestrictVals","profileImageUrl","branchName","","adoptOrgId",{"_50":51,"_38":52,"_45":411,"_54":-5,"_55":31,"_56":57,"_58":57,"_59":60,"_61":-5,"_19":62,"_63":64,"_65":66,"_67":-5,"_68":-5,"_69":70,"_71":72,"_73":-5,"_74":-5,"_75":-5,"_76":-5,"_77":78,"_79":78,"_80":81,"_82":81,"_83":81,"_84":78,"_85":78,"_86":412,"_88":413,"_90":414,"_92":31},"tree",[212,218,220,222,237,238,239,240],"files",[212,213,214,215,216,217,218,219,220,221,222,223,224,225,226,227,228,229,230,231,232,233,234,235,236,237,238,239,240],"counts",{"_200":150,"_201":202,"_203":202,"_204":205,"_206":207},"contents",[135,136,137,138,139,140,141,142],"upstreamProject","upstreamBranch","emptyEnvVars","flags",[],"hasHttpFiles","grants","orgs","customDomains",{},{"_50":194,"_38":195,"_36":196,"_146":-5,"_48":49,"_47":197,"_148":66,"_45":198,"_13":150,"_40":175,"_42":-5,"_30":31,"_152":-5,"_33":199},{"_50":188,"_38":189,"_36":190,"_146":-5,"_48":49,"_47":191,"_148":66,"_45":192,"_13":150,"_40":175,"_42":-5,"_30":31,"_152":-5,"_33":193},{"_50":182,"_38":183,"_36":184,"_146":-5,"_48":49,"_47":185,"_148":66,"_45":186,"_13":150,"_40":175,"_42":-5,"_30":31,"_152":-5,"_33":187},{"_50":177,"_38":52,"_36":178,"_146":-5,"_48":49,"_47":179,"_148":66,"_45":180,"_13":70,"_40":175,"_42":-5,"_30":31,"_152":-5,"_33":181},{"_50":170,"_38":171,"_36":172,"_146":-5,"_48":49,"_47":173,"_148":31,"_45":174,"_13":150,"_40":175,"_42":-5,"_30":31,"_152":-5,"_33":176},{"_50":162,"_38":163,"_36":164,"_146":-5,"_48":49,"_47":165,"_148":31,"_45":166,"_13":167,"_40":26,"_42":168,"_30":31,"_152":-5,"_33":169},{"_50":154,"_38":155,"_36":64,"_146":-5,"_48":49,"_47":156,"_148":31,"_45":157,"_13":158,"_40":159,"_42":160,"_30":31,"_152":-5,"_33":161},{"_50":143,"_38":144,"_36":145,"_146":-5,"_48":49,"_47":147,"_148":31,"_45":149,"_13":150,"_40":41,"_42":151,"_30":31,"_152":-5,"_33":153},"e2c921a4-344a-42a1-8a36-65d9c3bccc87","og.ts","8a603662-6128-11f1-abe9-1607ee4eb77e","parentId",50,"latest",["D",1780696217319],0,"// 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",[144],"d5a71e5a-c40d-4381-9f0b-b74a7eceac3f","http.tsx",59,["D",1780696264391],13,"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",[155],"d4054666-4519-420d-b205-8f5f8a16550e","README.md","6f71b83e-611a-11f1-b6b7-1607ee4eb77e",62,["D",1780945850578],6,"# Skill Library (template)\n\nA public, forkable template for a shared **agent skill library**. It lists\nreusable agent skills, renders each one's `SKILL.md`, and gives you a one-click\n**Copy skill** button that puts a ready-to-run payload on your clipboard.\n\nStyled with plain defaults — system font, a neutral palette, one blue accent —\nand Twind (Tailwind utilities applied at runtime, no build step).\n\n🔗 **Live:** https://dcm31--92861134610211f1a0c51607ee4eb77e.web.val.run\n\n## Remix it\n\n1. Remix this val.\n2. Set `VAL_ID` in `lib/skills.ts` to your `/` (it's baked into the\n copy payload so agents know where to read each skill's files).\n3. Replace the `skills/` folders and the `SKILLS` manifest with your own.\n\nThere's no auth — the template is fully public. (Add a gate in `http.tsx` if you\nwant one.)\n\n## Architecture\n\nServer-rendered Hono app using **Hono JSX** components and **Twind** (Tailwind\nutilities at runtime, no build step). Each request renders a component tree;\nthere is no client-side framework — the only browser JS is the clipboard wiring\nin `frontend/client.js`, served at `/client.js`.\n\n```\nhttp.tsx # thin orchestrator: routes only\nlib/\n skills.ts # SKILLS manifest, file helpers, copy-payload, frontmatter parse\ncomponents/\n Layout.tsx # HTML shell: Twind, system font, markdown CSS\n Home.tsx # skill grid\n SkillDetail.tsx # rendered SKILL.md + copy button + live example + file tree\n FileView.tsx # raw file viewer\n FileTree.tsx # sidebar file tree\nfrontend/\n client.js # clipboard wiring for [data-copy] buttons (served at /client.js)\nskills/\n /\n SKILL.md # entry point — what the skill does + the flow\n scripts/ # runnable code the agent writes locally\n knowledge/ # reference docs the agent reads\n assets/ # optional — HTML fragment shown live on the skill page\n```\n\nThe folder names (`scripts/`, `knowledge/`/`references/`, `assets/`) follow the\nstandard Agent-Skills layout, so the skills validate and stay discoverable by\nagents reading them outside this app.\n\n## Examples (optional, per-skill)\n\nA skill can ship a live preview: drop an HTML fragment in the skill's standard\n`assets/` directory (e.g. `assets/showcase.html`) and list it in the manifest's\n`files`. The app renders the first `assets/*.html` it finds as an **Examples**\npanel on the skill page, and serves it standalone (and embeddable) at\n`/skills//example`. **Reference the file from the skill's `SKILL.md`** (a\nMarkdown link) so agents using the standard skill structure discover it too. The\n**ui-example** skill ships one and explains the feature.\n\n## Routes\n\n| Route | Purpose |\n| --- | --- |\n| `/` | Home — grid of skill cards |\n| `/skills/:slug` | Skill detail — rendered `SKILL.md` + Copy skill button + file tree |\n| `/skills/:slug/example` | Standalone live example (skills with an `assets/*.html` fragment) |\n| `/skills/:slug/files/*` | Raw file viewer for any file in a skill |\n| `/client.js` | Clipboard wiring, served as a module |\n| `/source` | Redirects to this val's source |\n\n## Adding a skill\n\n1. Create `skills//SKILL.md` plus any `scripts/`, `knowledge/`, or\n `assets/` files.\n2. Add an entry to the `SKILLS` array in `lib/skills.ts` — `slug`, `name`,\n `description`, `category`, and the full `files` list.\n\n## Conventions\n\nHono JSX in `.tsx` files (no template-string HTML), Twind/Tailwind styling, a\n`/source` view-source link, and `app.onError` for full stack traces. The one\nscoped `

Diff · v65