[{"_1":2,"_3":-5,"_4":-5},"loaderData",{"_5":6,"_7":8,"_9":10},"actionData","errors","root",{"_384":385,"_386":387},"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",38,"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/SkillDetail.tsx","latestPath","fileId","448cb48e-611a-11f1-bb8a-1607ee4eb77e","name","SkillDetail.tsx","fileType","script","content","/** @jsxImportSource npm:hono@4/jsx */\nimport { type Skill } from \"../lib/skills.ts\";\nimport { FileTree } from \"./FileTree.tsx\";\n\nexport const SkillDetail = (props: {\n skill: Skill;\n html: string;\n payload: string;\n exampleHtml?: string;\n triggers?: string[];\n}) => (\n <>\n \n ← Back to skills\n \n {/* Header: title block on the left, the one primary action top-right. */}\n

{props.skill.category}

{props.skill.name}

{props.skill.description}

\n {/* triggers from SKILL.md frontmatter — the \"when to invoke\" hints */}\n {props.triggers?.length\n ? (\n

\n {props.triggers.map((t) => (\n \n {t}\n \n ))}\n

\n )\n : null}\n

\n {/* Copy button: clipboard wiring in frontend/client.js via [data-copy]. */}\n \n Copy skill\n \n

\n {/* Live example preview — only for skills that ship an examples/ fragment. */}\n {props.exampleHtml\n ? (\n

Examples

\n \n Open standalone ↗\n \n

\n \n

\n )\n : null}\n

\n \n

\n \n);\n","/** @jsxImportSource npm:hono@4/jsx */\nimport { type Skill } from \"../lib/skills.ts\";\nimport { FileTree } from \"./FileTree.tsx\";\n\nexport const SkillDetail = (props: {\n skill: Skill;\n html: string;\n payload: string;\n exampleHtml?: string;\n}) => (\n <>\n \n ← Back to skills\n \n {/* Header: title block on the left, the one primary action top-right. */}\n

{props.skill.category}

{props.skill.name}

{props.skill.description}

\n {/* triggers from SKILL.md frontmatter — the \"when to invoke\" hints */}\n {props.triggers?.length\n ? (\n

\n {props.triggers.map((t) => (\n \n {t}\n \n ))}\n

\n )\n : null}\n

\n {/* Copy button: clipboard wiring in frontend/client.js via [data-copy]. */}\n \n Copy skill\n \n

\n {/* Live example preview — only for skills that ship an examples/ fragment. */}\n {props.exampleHtml\n ? (\n

Examples

\n \n Open standalone ↗\n \n

\n \n

\n )\n : null}\n

\n \n

\n \n);\n","createdAt",["D",1780693670098],"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=1789592399&sig=88bcaa4ca5c91b3d37bd9f9e2265f250b254a647312a9ccca82d0aeb36af01f0","tier","pro","canRestrictVals","profileImageUrl","branchName","","adoptOrgId",{"_44":45,"_32":46,"_39":380,"_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":381,"_82":382,"_84":383,"_86":25},"tree",[189,195,197,199,214,215],"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],"counts",{"_177":156,"_178":179,"_180":179,"_181":182,"_183":184},"contents",[129,130,131,132,133,134],"upstreamProject","upstreamBranch","emptyEnvVars","flags",[],"hasHttpFiles","grants","orgs","customDomains",{},{"_44":171,"_32":172,"_30":173,"_137":-5,"_42":43,"_41":174,"_139":60,"_39":175,"_13":156,"_34":157,"_36":-5,"_24":25,"_144":-5,"_27":176},{"_44":165,"_32":166,"_30":167,"_137":-5,"_42":43,"_41":168,"_139":60,"_39":169,"_13":156,"_34":157,"_36":-5,"_24":25,"_144":-5,"_27":170},{"_44":159,"_32":160,"_30":161,"_137":-5,"_42":43,"_41":162,"_139":60,"_39":163,"_13":156,"_34":157,"_36":-5,"_24":25,"_144":-5,"_27":164},{"_44":153,"_32":46,"_30":154,"_137":-5,"_42":43,"_41":141,"_139":25,"_39":155,"_13":156,"_34":157,"_36":-5,"_24":25,"_144":-5,"_27":158},{"_44":146,"_32":147,"_30":148,"_137":-5,"_42":43,"_41":149,"_139":25,"_39":150,"_13":141,"_34":20,"_36":151,"_24":25,"_144":-5,"_27":152},{"_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},"abac8ff3-5500-4ff1-ab8d-60c9ed9f8503","http.tsx","parentId",36,"latest",["D",1780693350935],3,"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],"08eca19c-b4f8-41e5-825d-ec2bf6757dd3","README.md","6f71b83e-611a-11f1-b6b7-1607ee4eb77e",31,["D",1780693233743],"# 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## 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: 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 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 · v38