Skill Binder

[{"_1":2,"_3":-5,"_4":-5},"loaderData",{"_5":6,"_7":8,"_9":10},"actionData","errors","root",{"_446":447,"_448":449},"routes/_app.x.$handle.$name",{"_102":101,"_32":50,"_111":92,"_27":112,"_13":14,"_113":-5,"_11":114,"_115":116,"_117":118,"_119":120,"_121":122,"_21":-5,"_123":-5,"_124":-5,"_125":25,"_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":-5,"_18":-5},"project",{"_48":49,"_32":50,"_37":51,"_52":-5,"_53":25,"_54":55,"_56":55,"_57":58,"_59":-5,"_18":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":25},"version",28,"changes",[19,20],"aiChatInfo","userId",{"_21":42,"_23":-7,"_24":25,"_26":25,"_27":43,"_29":43},{"_21":22,"_23":-7,"_24":25,"_26":25,"_27":28,"_29":28},"file",{"_30":31,"_32":33,"_34":21,"_35":36,"_37":38,"_39":14,"_40":41,"_24":25},"previous","deleted",false,"deletedHere","path","skills/bug-triage/memories/reference_latency_dashboard.md","latestPath","fileId","6d8aa7e2-5927-11f1-bfab-ee650bb23af1","name","reference_latency_dashboard.md","fileType","content","---\nname: latency-dashboard\ndescription: grafana.internal/d/api-latency is the oncall watch dashboard\nmetadata:\n type: reference\n---\n\n`grafana.internal/d/api-latency` is the dashboard oncall watches — the thing that pages someone when latency spikes.\n\n**How to apply:** Step 1 of any incident is checking this dashboard to confirm impact and bound the time window of the issue. Quote the affected percentile and time range in the incident note.\n","createdAt",["D",1779816130149],"branchVersion","branchId","a265a3e8-5924-11f1-b614-ee650bb23af1",{"_30":44,"_32":45,"_34":46,"_35":-5,"_37":47,"_39":14,"_40":41,"_24":25},"skills/bug-triage/memories","17178805-ed8d-46fd-ba2f-0c641ab35d7a","memories","directory",["D",1779816130149],"id","a264eee4-5924-11f1-b614-ee650bb23af1","skillbook",["D",1779814930341],"deletedAt","legacyEnvVars","privacy","public","httpPrivacy","description","Interactive trading-card view of an agent skill repo","imageUrl","9319c175-2593-4f88-ba21-04f2ef7b1c28","pinnedFileId","a2693198-5924-11f1-b614-ee650bb23af1","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,"_18":60,"_107":108,"_109":25},"branch",{"_13":91,"_32":92,"_48":41,"_93":49,"_94":-5,"_95":-5,"_96":-5,"_97":-5,"_98":-5,"_99":50,"_100":101},"isOwned",345,"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=1789588799&sig=a14eb9817176bf9786e020bfe2fb839d300621c44b97fc9c0f1d671ade6ad942","tier","pro","canRestrictVals","profileImageUrl","branchName","","adoptOrgId",{"_48":49,"_32":50,"_37":442,"_52":-5,"_53":25,"_54":55,"_56":55,"_57":58,"_59":-5,"_18":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":443,"_86":444,"_88":445,"_90":25},"tree",[185,187,215,218,219],"files",[185,186,187,188,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,217,218,219],"counts",{"_175":154,"_176":68,"_177":154,"_178":179,"_180":181},"contents",[133,134,135,136,137],"upstreamProject","upstreamBranch","emptyEnvVars","flags",[],"hasHttpFiles","grants","orgs","customDomains",{},{"_48":169,"_32":170,"_30":171,"_140":-5,"_40":41,"_39":172,"_142":64,"_37":173,"_13":154,"_34":46,"_35":-5,"_24":25,"_147":-5,"_27":174},{"_48":163,"_32":164,"_30":165,"_140":-5,"_40":41,"_39":166,"_142":64,"_37":167,"_13":154,"_34":46,"_35":-5,"_24":25,"_147":-5,"_27":168},{"_48":157,"_32":158,"_30":159,"_140":-5,"_40":41,"_39":160,"_142":64,"_37":161,"_13":154,"_34":46,"_35":-5,"_24":25,"_147":-5,"_27":162},{"_48":149,"_32":150,"_30":151,"_140":-5,"_40":41,"_39":152,"_142":25,"_37":153,"_13":154,"_34":21,"_35":155,"_24":25,"_147":-5,"_27":156},{"_48":138,"_32":139,"_30":62,"_140":-5,"_40":41,"_39":141,"_142":25,"_37":143,"_13":144,"_34":145,"_35":146,"_24":25,"_147":50,"_27":148},"d076a744-5926-11f1-adbe-ee650bb23af1","main.tsx","parentId",11,"latest",["D",1779815866614],3,"http","// skill-binder — interactive trading-card view of an agent skill repo.\n//\n// Tariq's frame: \"HTML is the new markdown.\" Agents are happy with terse\n// markdown. Humans want richer, more spatial, more alive formats. So the\n// data layer stays markdown (the agent reads it verbatim) and the human\n// view layers HTML on top. Same source, two faces.\n\nimport { Hono } from \"npm:hono@4\";\nimport { parseVal, readFile, serveFile } from \"https://esm.town/v/std/utils/index.ts\";\nimport { blob } from \"https://esm.town/v/std/blob\";\nimport { SKILLS } from \"./data/skills.ts\";\n\nconst app = new Hono();\napp.onError((err) => Promise.reject(err));\n\napp.get(\"/\", async (c) => {\n const html = await readFile(\"/static/index.html\", import.meta.url);\n return c.html(html);\n});\n\napp.get(\"/static/:file\", (c) => serveFile(`/static/${c.req.param(\"file\")}`, import.meta.url));\n\napp.get(\"/api/skills\", (c) => c.json(SKILLS));\n\napp.get(\"/api/skills/:slug\", (c) => {\n const slug = c.req.param(\"slug\");\n const skill = SKILLS.find((s) => s.slug === slug);\n if (!skill) return c.json({ error: \"not found\" }, 404);\n return c.json(skill);\n});\n\n// Raw SKILL.md — what an agent reads off disk.\napp.get(\"/raw/:slug/SKILL.md\", (c) => {\n const slug = c.req.param(\"slug\");\n const skill = SKILLS.find((s) => s.slug === slug);\n if (!skill) return c.text(\"not found\", 404);\n return c.text(skill.body, 200, { \"content-type\": \"text/markdown; charset=utf-8\" });\n});\n\n// AI-generated card art via fal.ai (flux/schnell). Cached in blob storage —\n// first request per skill ~5s, subsequent requests instant.\n//\n// To enable, set FAL_KEY (get one at https://fal.ai/dashboard/keys):\n// https://www.val.town/x/dcm31/skill-binder/environment-variables?key=FAL_KEY\n// Without it, this route returns 503 and the client gracefully falls back\n// to the emoji.\nconst BLOB_PREFIX = \"skill-binder/art/v1\";\n\napp.get(\"/art/:slug\", async (c) => {\n const slug = c.req.param(\"slug\");\n const skill = SKILLS.find((s) => s.slug === slug);\n if (!skill) return c.text(\"not found\", 404);\n\n const force = c.req.query(\"force\") === \"1\";\n const blobKey = `${BLOB_PREFIX}/${slug}.jpg`;\n const headers = {\n \"content-type\": \"image/jpeg\",\n \"cache-control\": \"public, max-age=86400\",\n };\n\n if (!force) {\n try {\n const cached = await blob.get(blobKey);\n if (cached?.ok) {\n const buf = await cached.arrayBuffer();\n if (buf.byteLength > 0) return new Response(buf, { headers });\n }\n } catch {\n // not cached — fall through to generation\n }\n }\n\n const FAL_KEY = Deno.env.get(\"FAL_KEY\");\n if (!FAL_KEY) {\n return c.text(\n \"FAL_KEY not configured. Add one at /environment-variables?key=FAL_KEY\",\n 503,\n );\n }\n\n const falRes = await fetch(\"https://fal.run/fal-ai/flux/schnell\", {\n method: \"POST\",\n headers: {\n Authorization: `Key ${FAL_KEY}`,\n \"Content-Type\": \"application/json\",\n },\n body: JSON.stringify({\n prompt: skill.artPrompt,\n image_size: \"square\",\n num_inference_steps: 4,\n num_images: 1,\n enable_safety_checker: true,\n }),\n });\n if (!falRes.ok) {\n const errBody = await falRes.text();\n console.error(\"fal error\", falRes.status, errBody);\n return c.text(`fal error: ${falRes.status}`, 502);\n }\n const data = await falRes.json();\n const url = data?.images?.[0]?.url;\n if (!url) return c.text(\"no image url in fal response\", 502);\n\n const imgRes = await fetch(url);\n if (!imgRes.ok) return c.text(`failed to fetch fal image: ${imgRes.status}`, 502);\n const buf = await imgRes.arrayBuffer();\n\n await blob.set(blobKey, new Uint8Array(buf));\n\n return new Response(buf, { headers });\n});\n\napp.get(\"/source\", (c) => c.redirect(parseVal().links.self.val));\n\nexport default app.fetch;\n","label",[139],"6208b0aa-5925-11f1-9516-ee650bb23af1","README.md","6208b168-5925-11f1-9516-ee650bb23af1",6,["D",1779815251849],0,"# skill-binder\n\nA trading-card view of an agent skill repo.\n\n**Live:** [/](/) · **Raw JSON the agent reads:** [/api/skills](/api/skills) · **Raw SKILL.md for one card:** [/raw/daily-standup/SKILL.md](/raw/daily-standup/SKILL.md)\n\n## Why\n\nInspired by [Thariq's \"HTML is the new markdown\"](https://x.com/trq212/status/2052811606032269638). Agent skills today are just folders of markdown files — fine for the agent, bleak for the human looking at their own library. The data layer should stay markdown (so the agent picks up edits next session); the human view can be anything HTML lets you build. So this prototype keeps the same source and renders two faces:\n\n- **Agent face:** the raw `SKILL.md` markdown, served verbatim at `/raw//SKILL.md` and as JSON at `/api/skills`.\n- **Human face:** trading cards — flip to read, drag to reorder, search by trigger phrase. Memories sit on the back as stickers; ⚡ mana cost = setup needed; Lv 7+ cards get the gold foil treatment.\n\n## Files\n\n- `main.tsx` — Hono server. Two real routes (`/`, `/api/skills`), one raw-markdown route per skill, one static handler.\n- `data/skills.ts` — six demo skills, each with a real-feeling `SKILL.md` body, memories, trigger phrases.\n- `static/index.html` — the page shell + a `

Skill Binder

Memories (stickers)

Templates

Scripts

Diff · v28