[{"_1":2,"_3":-5,"_4":-5},"loaderData",{"_5":6,"_7":8,"_9":10},"actionData","errors","root",{"_392":393,"_394":395},"routes/_app.x.$handle.$name",{"_98":97,"_32":46,"_107":88,"_27":108,"_13":14,"_109":-5,"_11":110,"_111":112,"_113":114,"_115":116,"_117":118,"_20":-5,"_119":-5,"_120":-5,"_121":25,"_122":123,"_124":60,"_125":-5,"_126":-5,"_127":128},"routes/_app.x.$handle.$name.branch.$branch.version.$version.diff",{"_11":12,"_13":14,"_15":16,"_17":-5,"_18":-5},"project",{"_44":45,"_32":46,"_39":47,"_48":-5,"_49":25,"_50":51,"_52":51,"_53":54,"_55":-5,"_18":56,"_57":58,"_59":60,"_61":-5,"_62":-5,"_63":64,"_65":66,"_67":-5,"_68":-5,"_69":-5,"_70":-5,"_71":72,"_73":72,"_74":75,"_76":75,"_77":75,"_78":72,"_79":72,"_80":81,"_82":83,"_84":85,"_86":25},"version",24,"changes",[19],"aiChatInfo","userId",{"_20":21,"_22":23,"_24":25,"_26":25,"_27":28,"_29":28},"file",{"_30":31,"_32":33,"_34":35,"_36":38,"_39":40,"_41":14,"_42":43,"_24":25},"previous",{"_30":31,"_32":33,"_34":35,"_36":37},"deleted",false,"deletedHere","path","components/Home.tsx","latestPath","fileId","3e080316-611a-11f1-b7ff-1607ee4eb77e","name","Home.tsx","fileType","script","content","/** @jsxImportSource npm:hono@4/jsx */\nimport { SKILLS } from \"../lib/skills.ts\";\n\n// Val Town style: IBM Plex Sans, hairline slate cards, iA Writer Quattro\n// micro-labels (.eyebrow) for the category and file 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","/** @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",1780693191286],"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",{"_98":97,"_106":102},"org",{"_98":97,"_99":100,"_101":102,"_18":56,"_103":104,"_105":25},"branch",{"_13":87,"_32":88,"_44":43,"_89":45,"_90":-5,"_91":-5,"_92":-5,"_93":-5,"_94":-5,"_95":46,"_96":97},"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=1789592870&sig=40b314efb46c479aefa6f3b5ffc7c36e1822e50de90d7b643ae5bf1748b43d21","tier","pro","canRestrictVals","profileImageUrl","branchName","","adoptOrgId",{"_44":45,"_32":46,"_39":388,"_48":-5,"_49":25,"_50":51,"_52":51,"_53":54,"_55":-5,"_18":56,"_57":58,"_59":60,"_61":-5,"_62":-5,"_63":64,"_65":66,"_67":-5,"_68":-5,"_69":-5,"_70":-5,"_71":72,"_73":72,"_74":75,"_76":75,"_77":75,"_78":72,"_79":72,"_80":389,"_82":390,"_84":391,"_86":25},"tree",[189,196,198,200,215,216],"files",[189,190,191,192,193,194,195,196,197,198,199,200,201,202,203,204,205,206,207,208,209,210,211,212,213,214,215,216],"counts",{"_178":151,"_179":141,"_180":141,"_181":182,"_183":184},"contents",[129,130,131,132,133,134],"upstreamProject","upstreamBranch","emptyEnvVars","flags",[],"hasHttpFiles","grants","orgs","customDomains",{},{"_44":172,"_32":173,"_30":174,"_137":-5,"_42":43,"_41":175,"_139":60,"_39":176,"_13":151,"_34":158,"_36":-5,"_24":25,"_144":-5,"_27":177},{"_44":166,"_32":167,"_30":168,"_137":-5,"_42":43,"_41":169,"_139":60,"_39":170,"_13":151,"_34":158,"_36":-5,"_24":25,"_144":-5,"_27":171},{"_44":160,"_32":161,"_30":162,"_137":-5,"_42":43,"_41":163,"_139":60,"_39":164,"_13":151,"_34":158,"_36":-5,"_24":25,"_144":-5,"_27":165},{"_44":154,"_32":46,"_30":155,"_137":-5,"_42":43,"_41":156,"_139":25,"_39":157,"_13":151,"_34":158,"_36":-5,"_24":25,"_144":-5,"_27":159},{"_44":146,"_32":147,"_30":148,"_137":-5,"_42":43,"_41":149,"_139":25,"_39":150,"_13":151,"_34":20,"_36":152,"_24":25,"_144":-5,"_27":153},{"_44":135,"_32":136,"_30":58,"_137":-5,"_42":43,"_41":138,"_139":25,"_39":140,"_13":141,"_34":142,"_36":143,"_24":25,"_144":-5,"_27":145},"1cc08268-f3a6-462d-8817-2660340318a7","http.tsx","parentId",16,"latest",["D",1780690110433],2,"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 findSkill,\n parseFrontmatter,\n readSkillFile,\n} from \"./lib/skills.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\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// ── 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 { data: fm, 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 const exampleHtml = skill.example\n ? (await readSkillFile(skill.slug, skill.example)) ?? undefined\n : undefined;\n return c.html(\n \n \n ,\n );\n});\n\n// Standalone, embeddable render of a skill's live example. Same design system,\n// no surrounding app chrome.\napp.get(\"/skills/:slug/example\", async (c) => {\n const skill = findSkill(c.req.param(\"slug\"));\n if (!skill?.example) return c.notFound();\n const html = await readSkillFile(skill.slug, skill.example);\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","label",[136],"360d7098-c91a-4667-a0b9-1235cc3a2c10","README.md","6f71b83e-611a-11f1-b6b7-1607ee4eb77e",19,["D",1780690159181],0,"# 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 to match val.town's own product surface: IBM Plex Sans, iA Writer Quattro\nmicro-labels, a slate + sky palette, bold small buttons, and 8px radius.\n\n🔗 **Live:** https://dcm31--92861134610211f1a0c51607ee4eb77e.web.val.run\n\n## Fork 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: IBM Plex Sans + iA Writer Quattro, Twind, markdown CSS\n Button.tsx # the signature button — sky primary / slate / bordered\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 examples/ # optional — HTML fragment shown live on the skill page\n```\n\n## Examples (optional, per-skill)\n\nA skill can ship a live preview: add an HTML fragment under\n`skills//examples/` and point the manifest entry at it with\n`example: \"examples/.html\"`. The fragment uses the same Twind classes +\n`.eyebrow` as the app. When present it renders as an **Examples** panel on the\nskill page and is served standalone (and embeddable) at `/skills//example`.\nThe **ui-example** skill in this template 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 `examples/` 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 `examples/` files.\n2. Add an entry to the `SKILLS` array in `lib/skills.ts` — `slug`, `name`,\n `description`, `category`, the full `files` list, and an optional `example`.\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 · v24