[{"_1":2,"_3":-5,"_4":-5},"loaderData",{"_5":6,"_7":8,"_9":10},"actionData","errors","root",{"_404":405,"_406":407},"routes/_app.x.$handle.$name",{"_102":101,"_38":50,"_111":92,"_33":112,"_13":14,"_113":-5,"_11":114,"_115":116,"_117":118,"_119":120,"_121":122,"_26":-5,"_123":-5,"_124":-5,"_125":31,"_126":127,"_128":64,"_129":-5,"_130":-5,"_131":132},"routes/_app.x.$handle.$name.branch.$branch.version.$version.diff",{"_11":12,"_13":14,"_15":16,"_17":18,"_19":-5},"project",{"_48":49,"_38":50,"_43":51,"_52":-5,"_53":31,"_54":55,"_56":55,"_57":58,"_59":-5,"_19":60,"_61":62,"_63":64,"_65":-5,"_66":-5,"_67":68,"_69":70,"_71":-5,"_72":-5,"_73":-5,"_74":-5,"_75":76,"_77":76,"_78":79,"_80":79,"_81":79,"_82":76,"_83":76,"_84":85,"_86":87,"_88":89,"_90":31},"version",71,"changes",[25],"aiChatInfo",{"_20":21,"_22":-5,"_23":-5,"_24":-5},"userId","aiChatMessageId","f05de77c-28be-4666-804b-2b00189cb644","aiChatThreadId","aiChatThreadUserId","aiChatThreadTitle",{"_26":27,"_28":29,"_30":31,"_32":31,"_33":34,"_35":34},"file",{"_36":37,"_38":34,"_39":26,"_40":42,"_43":44,"_45":14,"_46":47,"_30":31},"previous",{"_36":37,"_38":34,"_39":26,"_40":41},"deleted",false,"deletedHere","path","README.md","latestPath","fileId","6f71b83e-611a-11f1-b6b7-1607ee4eb77e","name","fileType","content","# 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://dcm31--92861134610211f1a0c51607ee4eb77e.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\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: drop an HTML fragment in `assets/` (e.g.\n`assets/showcase.html`) and list it in the manifest's `files`. The app renders\nthe first `assets/*.html` it finds as an **Examples** panel on the skill page and\nserves it standalone at `/skills//example`. Link to it from the skill's\n`SKILL.md` so agents discover it too. See the **ui-example** skill.\n\n---\n\n## Technical details\n\n### Architecture\n\nServer-rendered [Hono](https://hono.dev) app using Hono JSX components and\n[Twind](https://twind.style) (Tailwind utilities at runtime, no build step).\nThere is no client-side framework — the only browser JS is the clipboard wiring\nin `frontend/client.js`.\n\n```\nhttp.tsx # routes\nlib/skills.ts # SKILLS manifest, file + copy-payload helpers, frontmatter parse\ncomponents/\n Layout.tsx # HTML shell: Twind, fonts, 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/client.js # clipboard wiring for [data-copy] buttons\nskills// # the skills themselves\n```\n\n### Routes\n\n| Route | Purpose |\n| --- | --- |\n| `/` | Home — grid of skill cards |\n| `/skills/:slug` | Skill detail — rendered `SKILL.md`, Copy button, file tree |\n| `/skills/:slug/example` | Standalone live example (when a skill ships an `assets/*.html`) |\n| `/skills/:slug/files/*` | Raw file viewer |\n| `/client.js` | Clipboard wiring, served as a module |\n| `/source` | Redirects to this val's source |\n\n### Gating it to your team\n\nBy default the library is fully public. To restrict it to members of a Val Town\norganization, sign requests through `std/oauth` and check the signed-in user\nagainst your org's members.\n\n> **Requires a Teams account.** Create an org, then enable it at\n> `https://www.val.town/orgs/ORGNAME/settings/billing` (swap in your org name).\n\nWrap the app's `fetch` export with the OAuth middleware and add a gate that runs\nbefore your routes:\n\n```tsx\n// http.tsx\nimport {\n getOAuthUserData,\n oauthMiddleware,\n} from \"https://esm.town/v/std/oauth/middleware.ts\";\nimport { isOrgMember } from \"./lib/auth.ts\";\n\napp.use(\"*\", async (c, next) => {\n const session = await getOAuthUserData(c.req.raw);\n if (!session?.user) return c.text(\"Sign in required\", 401);\n const { username } = session.user as { username: string };\n if (!(await isOrgMember(username))) return c.text(\"Not authorized\", 403);\n return next();\n});\n\nexport default oauthMiddleware(app.fetch);\n```\n\nThe membership check calls the org members API, with a small set of usernames as\na fallback if the token is missing or the call fails:\n\n```ts\n// lib/auth.ts\nconst ORG_ID = \"your-org-uuid\";\nconst FALLBACK = new Set([\"you\", \"teammate\"]);\n\nexport async function isOrgMember(username: string): Promise {\n const token = Deno.env.get(\"valtown\");\n if (!token) return FALLBACK.has(username);\n try {\n const resp = await fetch(\n `https://api.val.town/v2/orgs/${ORG_ID}/members?limit=100`,\n { headers: { Authorization: `Bearer ${token}` } },\n );\n if (!resp.ok) throw new Error(`${resp.status}`);\n const { data = [] } = await resp.json();\n return data.some((m: any) => (m.username ?? m.user?.username) === username);\n } catch {\n return FALLBACK.has(username);\n }\n}\n```\n\nOAuth itself needs no config — `std/oauth` handles credentials and callbacks.\nThe members lookup needs a `valtown` API token in the val's environment\nvariables. Register `/client.js` and `/source` *before* the gate if you want them\nto stay public.\n","# 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://dcm31--92861134610211f1a0c51607ee4eb77e.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: drop an HTML fragment in `assets/` (e.g.\n`assets/showcase.html`) and list it in the manifest's `files`. The app renders\nthe first `assets/*.html` it finds as an **Examples** panel on the skill page and\nserves it standalone at `/skills//example`. Link to it from the skill's\n`SKILL.md` so agents discover it too. See the **ui-example** skill.\n\n---\n\n## Technical details\n\n### Architecture\n\nServer-rendered [Hono](https://hono.dev) app using Hono JSX components and\n[Twind](https://twind.style) (Tailwind utilities at runtime, no build step).\nThere is no client-side framework — the only browser JS is the clipboard wiring\nin `frontend/client.js`.\n\n```\nhttp.tsx # routes\nlib/skills.ts # SKILLS manifest, file + copy-payload helpers, frontmatter parse\ncomponents/\n Layout.tsx # HTML shell: Twind, fonts, 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/client.js # clipboard wiring for [data-copy] buttons\nskills// # the skills themselves\n```\n\n### Routes\n\n| Route | Purpose |\n| --- | --- |\n| `/` | Home — grid of skill cards |\n| `/skills/:slug` | Skill detail — rendered `SKILL.md`, Copy button, file tree |\n| `/skills/:slug/example` | Standalone live example (when a skill ships an `assets/*.html`) |\n| `/skills/:slug/files/*` | Raw file viewer |\n| `/client.js` | Clipboard wiring, served as a module |\n| `/source` | Redirects to this val's source |\n\n### Gating it to your team\n\nBy default the library is fully public. To restrict it to members of a Val Town\norganization, sign requests through `std/oauth` and check the signed-in user\nagainst your org's members.\n\n> **Requires a Teams account.** Create an org, then enable it at\n> `https://www.val.town/orgs/ORGNAME/settings/billing` (swap in your org name).\n\nWrap the app's `fetch` export with the OAuth middleware and add a gate that runs\nbefore your routes:\n\n```tsx\n// http.tsx\nimport {\n getOAuthUserData,\n oauthMiddleware,\n} from \"https://esm.town/v/std/oauth/middleware.ts\";\nimport { isOrgMember } from \"./lib/auth.ts\";\n\napp.use(\"*\", async (c, next) => {\n const session = await getOAuthUserData(c.req.raw);\n if (!session?.user) return c.text(\"Sign in required\", 401);\n const { username } = session.user as { username: string };\n if (!(await isOrgMember(username))) return c.text(\"Not authorized\", 403);\n return next();\n});\n\nexport default oauthMiddleware(app.fetch);\n```\n\nThe membership check calls the org members API, with a small set of usernames as\na fallback if the token is missing or the call fails:\n\n```ts\n// lib/auth.ts\nconst ORG_ID = \"your-org-uuid\";\nconst FALLBACK = new Set([\"you\", \"teammate\"]);\n\nexport async function isOrgMember(username: string): Promise {\n const token = Deno.env.get(\"valtown\");\n if (!token) return FALLBACK.has(username);\n try {\n const resp = await fetch(\n `https://api.val.town/v2/orgs/${ORG_ID}/members?limit=100`,\n { headers: { Authorization: `Bearer ${token}` } },\n );\n if (!resp.ok) throw new Error(`${resp.status}`);\n const { data = [] } = await resp.json();\n return data.some((m: any) => (m.username ?? m.user?.username) === username);\n } catch {\n return FALLBACK.has(username);\n }\n}\n```\n\nOAuth itself needs no config — `std/oauth` handles credentials and callbacks.\nThe members lookup needs a `valtown` API token in the val's environment\nvariables. Register `/client.js` and `/source` *before* the gate if you want them\nto stay public.\n","createdAt",["D",1781018365191],"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",{"_102":101,"_110":106},"org",{"_102":101,"_103":104,"_105":106,"_19":60,"_107":108,"_109":31},"branch",{"_13":91,"_38":92,"_48":47,"_93":49,"_94":-5,"_95":-5,"_96":-5,"_97":-5,"_98":-5,"_99":50,"_100":101},"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",{"_48":49,"_38":50,"_43":400,"_52":-5,"_53":31,"_54":55,"_56":55,"_57":58,"_59":-5,"_19":60,"_61":62,"_63":64,"_65":-5,"_66":-5,"_67":68,"_69":70,"_71":-5,"_72":-5,"_73":-5,"_74":-5,"_75":76,"_77":76,"_78":79,"_80":79,"_81":79,"_82":76,"_83":76,"_84":401,"_86":402,"_88":403,"_90":31},"tree",[200,206,208,210,225,226,227],"files",[200,201,202,203,204,205,206,207,208,209,210,211,212,213,214,215,216,217,218,219,220,221,222,223,224,225,226,227],"counts",{"_188":147,"_189":190,"_191":190,"_192":193,"_194":195},"contents",[133,134,135,136,137,138,139],"upstreamProject","upstreamBranch","emptyEnvVars","flags",[],"hasHttpFiles","grants","orgs","customDomains",{},{"_48":182,"_38":183,"_36":184,"_143":-5,"_46":47,"_45":185,"_145":64,"_43":186,"_13":147,"_39":168,"_40":-5,"_30":31,"_150":-5,"_33":187},{"_48":176,"_38":177,"_36":178,"_143":-5,"_46":47,"_45":179,"_145":64,"_43":180,"_13":147,"_39":168,"_40":-5,"_30":31,"_150":-5,"_33":181},{"_48":170,"_38":171,"_36":172,"_143":-5,"_46":47,"_45":173,"_145":64,"_43":174,"_13":147,"_39":168,"_40":-5,"_30":31,"_150":-5,"_33":175},{"_48":164,"_38":50,"_36":165,"_143":-5,"_46":47,"_45":166,"_145":64,"_43":167,"_13":68,"_39":168,"_40":-5,"_30":31,"_150":-5,"_33":169},{"_48":160,"_38":34,"_36":37,"_143":-5,"_46":47,"_45":14,"_145":31,"_43":161,"_13":162,"_39":26,"_40":42,"_30":31,"_150":-5,"_33":163},{"_48":152,"_38":153,"_36":62,"_143":-5,"_46":47,"_45":154,"_145":31,"_43":155,"_13":156,"_39":157,"_40":158,"_30":31,"_150":-5,"_33":159},{"_48":140,"_38":141,"_36":142,"_143":-5,"_46":47,"_45":144,"_145":31,"_43":146,"_13":147,"_39":148,"_40":149,"_30":31,"_150":-5,"_33":151},"e2c921a4-344a-42a1-8a36-65d9c3bccc87","og.ts","8a603662-6128-11f1-abe9-1607ee4eb77e","parentId",50,"latest",["D",1780696217319],0,"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","label",[141],"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",[153],"50a87f07-be81-441f-85cb-0e8877f17166",["D",1781018365191],11,[34],"208bcc7a-dbb3-4d97-b6b5-79f20ea31507","a1b35e7d-59ce-4d6b-8738-2d706101a7d2",60,["D",1780696519223],"directory",[50],"7bda0f03-93e2-4732-a3a6-6a2e07040a64","lib","12f0707e-2c4a-41a9-92ef-370a78c04011",8,["D",1780690030621],[171],"13306b3b-c86a-4aed-acf5-e5718b8ed0da","frontend","0f3784d6-e4a2-4781-a7f4-2d6a3fea5d8d",9,["D",1780690033369],[177],"09b94b55-391d-44c3-9b5c-7c1312d29db4","components","d0b511be-7c7d-403e-addd-624c52fec544",10,["D",1780690053093],[183],"pulls","branches",2,"forks","envVars",{"_196":198,"_199":198},"connections",{"_196":147,"_197":147},"count","unfilledCount",4,"emptyCount",{"_48":182,"_38":183,"_36":184,"_143":-5,"_46":47,"_45":185,"_145":64,"_43":397,"_13":147,"_39":168,"_40":-5,"_30":31,"_150":-5,"_229":398,"_33":399},{"_48":389,"_38":390,"_36":391,"_143":184,"_46":47,"_45":392,"_145":64,"_43":393,"_13":68,"_39":148,"_40":394,"_30":31,"_150":-5,"_229":395,"_33":396},{"_48":381,"_38":382,"_36":383,"_143":184,"_46":47,"_45":384,"_145":64,"_43":385,"_13":68,"_39":148,"_40":386,"_30":31,"_150":-5,"_229":387,"_33":388},{"_48":373,"_38":374,"_36":375,"_143":184,"_46":47,"_45":376,"_145":31,"_43":377,"_13":68,"_39":148,"_40":378,"_30":31,"_150":-5,"_229":379,"_33":380},{"_48":365,"_38":366,"_36":367,"_143":184,"_46":47,"_45":368,"_145":31,"_43":369,"_13":198,"_39":148,"_40":370,"_30":31,"_150":-5,"_229":371,"_33":372},{"_48":357,"_38":358,"_36":359,"_143":184,"_46":47,"_45":360,"_145":64,"_43":361,"_13":271,"_39":148,"_40":362,"_30":31,"_150":-5,"_229":363,"_33":364},{"_48":176,"_38":177,"_36":178,"_143":-5,"_46":47,"_45":179,"_145":64,"_43":354,"_13":147,"_39":168,"_40":-5,"_30":31,"_150":-5,"_229":355,"_33":356},{"_48":347,"_38":348,"_36":349,"_143":178,"_46":47,"_45":179,"_145":64,"_43":350,"_13":147,"_39":148,"_40":351,"_30":31,"_150":-5,"_229":352,"_33":353},{"_48":170,"_38":171,"_36":172,"_143":-5,"_46":47,"_45":173,"_145":64,"_43":344,"_13":147,"_39":168,"_40":-5,"_30":31,"_150":-5,"_229":345,"_33":346},{"_48":336,"_38":337,"_36":338,"_143":172,"_46":47,"_45":339,"_145":31,"_43":340,"_13":271,"_39":148,"_40":341,"_30":31,"_150":-5,"_229":342,"_33":343},{"_48":164,"_38":50,"_36":165,"_143":-5,"_46":47,"_45":166,"_145":64,"_43":333,"_13":68,"_39":168,"_40":-5,"_30":31,"_150":-5,"_229":334,"_33":335},{"_48":329,"_38":316,"_36":310,"_143":165,"_46":47,"_45":311,"_145":64,"_43":330,"_13":147,"_39":168,"_40":-5,"_30":31,"_150":-5,"_229":331,"_33":332},{"_48":325,"_38":299,"_36":320,"_143":310,"_46":47,"_45":244,"_145":64,"_43":326,"_13":147,"_39":168,"_40":-5,"_30":31,"_150":-5,"_229":327,"_33":328},{"_48":317,"_38":318,"_36":319,"_143":320,"_46":47,"_45":244,"_145":64,"_43":321,"_13":147,"_39":26,"_40":322,"_30":31,"_150":-5,"_229":323,"_33":324},{"_48":308,"_38":239,"_36":309,"_143":310,"_46":47,"_45":311,"_145":31,"_43":312,"_13":147,"_39":26,"_40":313,"_30":31,"_150":-5,"_229":314,"_33":315},{"_48":304,"_38":276,"_36":270,"_143":165,"_46":47,"_45":271,"_145":64,"_43":305,"_13":147,"_39":168,"_40":-5,"_30":31,"_150":-5,"_229":306,"_33":307},{"_48":300,"_38":299,"_36":293,"_143":270,"_46":47,"_45":294,"_145":64,"_43":301,"_13":147,"_39":168,"_40":-5,"_30":31,"_150":-5,"_229":302,"_33":303},{"_48":290,"_38":291,"_36":292,"_143":293,"_46":47,"_45":294,"_145":64,"_43":295,"_13":147,"_39":26,"_40":296,"_30":31,"_150":-5,"_229":297,"_33":298},{"_48":286,"_38":285,"_36":280,"_143":270,"_46":47,"_45":198,"_145":64,"_43":287,"_13":147,"_39":168,"_40":-5,"_30":31,"_150":-5,"_229":288,"_33":289},{"_48":277,"_38":278,"_36":279,"_143":280,"_46":47,"_45":198,"_145":64,"_43":281,"_13":147,"_39":148,"_40":282,"_30":31,"_150":-5,"_229":283,"_33":284},{"_48":268,"_38":239,"_36":269,"_143":270,"_46":47,"_45":271,"_145":31,"_43":272,"_13":147,"_39":26,"_40":273,"_30":31,"_150":-5,"_229":274,"_33":275},{"_48":263,"_38":248,"_36":241,"_143":165,"_46":47,"_45":264,"_145":64,"_43":265,"_13":147,"_39":168,"_40":-5,"_30":31,"_150":-5,"_229":266,"_33":267},{"_48":259,"_38":258,"_36":252,"_143":241,"_46":47,"_45":253,"_145":64,"_43":260,"_13":147,"_39":168,"_40":-5,"_30":31,"_150":-5,"_229":261,"_33":262},{"_48":249,"_38":250,"_36":251,"_143":252,"_46":47,"_45":253,"_145":64,"_43":254,"_13":147,"_39":26,"_40":255,"_30":31,"_150":-5,"_229":256,"_33":257},{"_48":238,"_38":239,"_36":240,"_143":241,"_46":47,"_45":242,"_145":31,"_43":243,"_13":244,"_39":26,"_40":245,"_30":31,"_150":-5,"_229":246,"_33":247},{"_48":160,"_38":34,"_36":37,"_143":-5,"_46":47,"_45":14,"_145":31,"_43":235,"_13":162,"_39":26,"_40":42,"_30":31,"_150":-5,"_229":236,"_33":237},{"_48":152,"_38":153,"_36":62,"_143":-5,"_46":47,"_45":154,"_145":31,"_43":232,"_13":156,"_39":157,"_40":158,"_30":31,"_150":-5,"_229":233,"_33":234},{"_48":140,"_38":141,"_36":142,"_143":-5,"_46":47,"_45":144,"_145":31,"_43":228,"_13":147,"_39":148,"_40":149,"_30":31,"_150":-5,"_229":230,"_33":231},["D",1780696217319],"children",[],[141],["D",1780696264391],[],[153],["D",1781018365191],[],[34],"dc107775-b1d1-4497-82e8-2a312819db8e","SKILL.md","5b495132-611a-11f1-ac10-1607ee4eb77e","82af8637-3f7d-4a48-b2eb-33adcb23f00e",47,["D",1780694091267],7,"---\nname: ui-example\ndescription: Use when you want to ship a live, rendered preview alongside a skill — a self-contained HTML fragment that shows the UI a skill produces. Demonstrates the example feature of this library.\n---\n\n# UI Example\n\n> This skill exists to demonstrate the library's **live-example feature** — and to double as a quick reference for the design system every page here inherits. Scroll up: the **Examples** panel above this text is rendered live from the HTML fragment this skill ships.\n\n## What you're looking at\n\nA skill can ship a single HTML fragment under its `assets/` directory. When it does, two things happen automatically:\n\n1. It renders as an **Examples** panel at the top of the skill page (the box above).\n2. It's served on its own, full-bleed, at `/skills//example` — open it with the **\"Open standalone ↗\"** link. That URL is embeddable (drop it in an `

Diff · v71