Skill Binder

[{"_1":2,"_3":-5,"_4":-5},"loaderData",{"_5":6,"_7":8,"_9":10},"actionData","errors","root",{"_682":683,"_684":685},"routes/_app.x.$handle.$name",{"_103":102,"_32":51,"_112":93,"_27":113,"_13":14,"_114":-5,"_11":115,"_116":117,"_118":119,"_120":121,"_122":123,"_21":-5,"_124":-5,"_125":-5,"_126":25,"_127":128,"_129":65,"_130":-5,"_131":-5,"_132":133},"routes/_app.x.$handle.$name.branch.$branch.version.$version.diff",{"_11":12,"_13":14,"_15":16,"_17":-5,"_18":-5},"project",{"_49":50,"_32":51,"_37":52,"_53":-5,"_54":25,"_55":56,"_57":56,"_58":59,"_60":-5,"_18":61,"_62":63,"_64":65,"_66":-5,"_67":-5,"_68":69,"_70":71,"_72":-5,"_73":-5,"_74":-5,"_75":-5,"_76":77,"_78":77,"_79":80,"_81":80,"_82":80,"_83":77,"_84":77,"_85":86,"_87":88,"_89":90,"_91":25},"version",46,"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":35,"_36":-5,"_37":38,"_39":14,"_40":41,"_24":25},"previous","deleted",false,"deletedHere","path","skills/release-notes/scripts","latestPath","fileId","e9f00e27-63ed-463f-bdff-6f6771dd781e","name","scripts","fileType","directory","content","createdAt",["D",1779816201922],"branchVersion","branchId","a265a3e8-5924-11f1-b614-ee650bb23af1",{"_30":44,"_32":45,"_34":46,"_36":47,"_37":48,"_39":14,"_40":41,"_24":25},"skills/release-notes/scripts/merged_prs.ts","985af1f2-5927-11f1-8b1a-ee650bb23af1","merged_prs.ts","script","// List merged PRs in a date range for release-notes drafting.\n// Usage:\n// deno run --allow-run merged_prs.ts

\n\nconst [start, end] = Deno.args;\nif (!start || !end) throw new Error(\"Usage: merged_prs.ts

\");\n\nconst cmd = new Deno.Command(\"gh\", {\n args: [\n \"pr\",\n \"list\",\n \"--state\",\n \"merged\",\n \"--search\",\n `merged:${start}..${end}`,\n \"--json\",\n \"number,title,author,labels,mergedAt\",\n \"--limit\",\n \"200\",\n ],\n});\nconst { stdout } = await cmd.output();\nconsole.log(new TextDecoder().decode(stdout));\n",["D",1779816201922],"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",{"_103":102,"_111":107},"org",{"_103":102,"_104":105,"_106":107,"_18":61,"_108":109,"_110":25},"branch",{"_13":92,"_32":93,"_49":41,"_94":50,"_95":-5,"_96":-5,"_97":-5,"_98":-5,"_99":-5,"_100":51,"_101":102},"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=1789556399&sig=79099f5f8ff13fa7ca88ddd17cfb358dd5de01b4572d54739a735b474a8e2cad","tier","pro","canRestrictVals","profileImageUrl","branchName","","adoptOrgId",{"_49":50,"_32":51,"_37":678,"_53":-5,"_54":25,"_55":56,"_57":56,"_58":59,"_60":-5,"_18":61,"_62":63,"_64":65,"_66":-5,"_67":-5,"_68":69,"_70":71,"_72":-5,"_73":-5,"_74":-5,"_75":-5,"_76":77,"_78":77,"_79":80,"_81":80,"_82":80,"_83":77,"_84":77,"_85":679,"_87":680,"_89":681,"_91":25},"tree",[186,188,246,249,250],"files",[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,220,221,222,223,224,225,226,227,228,229,230,231,232,233,234,235,236,237,238,239,240,241,242,243,244,245,246,247,248,249,250],"counts",{"_176":155,"_177":69,"_178":155,"_179":180,"_181":182},"contents",[134,135,136,137,138],"upstreamProject","upstreamBranch","emptyEnvVars","flags",[],"hasHttpFiles","grants","orgs","customDomains",{},{"_49":170,"_32":171,"_30":172,"_141":-5,"_40":41,"_39":173,"_143":65,"_37":174,"_13":155,"_34":35,"_36":-5,"_24":25,"_148":-5,"_27":175},{"_49":164,"_32":165,"_30":166,"_141":-5,"_40":41,"_39":167,"_143":65,"_37":168,"_13":155,"_34":35,"_36":-5,"_24":25,"_148":-5,"_27":169},{"_49":158,"_32":159,"_30":160,"_141":-5,"_40":41,"_39":161,"_143":65,"_37":162,"_13":155,"_34":35,"_36":-5,"_24":25,"_148":-5,"_27":163},{"_49":150,"_32":151,"_30":152,"_141":-5,"_40":41,"_39":153,"_143":25,"_37":154,"_13":155,"_34":21,"_36":156,"_24":25,"_148":-5,"_27":157},{"_49":139,"_32":140,"_30":63,"_141":-5,"_40":41,"_39":142,"_143":25,"_37":144,"_13":145,"_34":146,"_36":147,"_24":25,"_148":51,"_27":149},"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",[140],"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 · v46