Skill Binder

[{"_1":2,"_3":-5,"_4":-5},"loaderData",{"_5":6,"_7":8,"_9":10},"actionData","errors","root",{"_508":509,"_510":511},"routes/_app.x.$handle.$name",{"_95":94,"_31":43,"_104":85,"_26":105,"_13":14,"_106":-5,"_11":107,"_108":109,"_110":111,"_112":113,"_114":115,"_20":-5,"_116":-5,"_117":-5,"_118":24,"_119":120,"_121":57,"_122":-5,"_123":-5,"_124":125},"routes/_app.x.$handle.$name.branch.$branch.version.$version.diff",{"_11":12,"_13":14,"_15":16,"_17":-5,"_18":-5},"project",{"_41":42,"_31":43,"_36":44,"_45":-5,"_46":24,"_47":48,"_49":48,"_50":51,"_52":-5,"_18":53,"_54":55,"_56":57,"_58":-5,"_59":-5,"_60":61,"_62":63,"_64":-5,"_65":-5,"_66":-5,"_67":-5,"_68":69,"_70":69,"_71":72,"_73":72,"_74":72,"_75":69,"_76":69,"_77":78,"_79":80,"_81":82,"_83":24},"version",34,"changes",[19],"aiChatInfo","userId",{"_20":21,"_22":-7,"_23":24,"_25":24,"_26":27,"_28":27},"file",{"_29":30,"_31":32,"_33":20,"_34":35,"_36":37,"_38":14,"_39":40,"_23":24},"previous","deleted",false,"deletedHere","path","skills/release-notes/memories/user_i_write_headline.md","latestPath","fileId","7ac5b7f8-5927-11f1-a17b-ee650bb23af1","name","user_i_write_headline.md","fileType","content","---\nname: i-write-headline\ndescription: I write the headline; agent drafts the body\nmetadata:\n type: user\n---\n\nDraft the body but leave the headline to me — that's where I want to taste-test the framing.\n\n**Why:** The headline sets the editorial tone and I have strong opinions about which beat to lead with. I'd rather see it as a placeholder I overwrite than something I have to talk you out of.\n\n**How to apply:** Output `## [HEADLINE — to fill in]` at the top, then the body. Don't draft a headline.\n","createdAt",["D",1779816152349],"branchVersion","branchId","a265a3e8-5924-11f1-b614-ee650bb23af1","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",{"_95":94,"_103":99},"org",{"_95":94,"_96":97,"_98":99,"_18":53,"_100":101,"_102":24},"branch",{"_13":84,"_31":85,"_41":40,"_86":42,"_87":-5,"_88":-5,"_89":-5,"_90":-5,"_91":-5,"_92":43,"_93":94},"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=1789595999&sig=6fac8bc0bc7212c66f64aa50e972ecbb47f4393e2654ceac0cd4a0aa9fd99014","tier","pro","canRestrictVals","profileImageUrl","branchName","","adoptOrgId",{"_41":42,"_31":43,"_36":504,"_45":-5,"_46":24,"_47":48,"_49":48,"_50":51,"_52":-5,"_18":53,"_54":55,"_56":57,"_58":-5,"_59":-5,"_60":61,"_62":63,"_64":-5,"_65":-5,"_66":-5,"_67":-5,"_68":69,"_70":69,"_71":72,"_73":72,"_74":72,"_75":69,"_76":69,"_77":505,"_79":506,"_81":507,"_83":24},"tree",[179,181,217,220,221],"files",[179,180,181,182,183,184,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,220,221],"counts",{"_169":147,"_170":61,"_171":147,"_172":173,"_174":175},"contents",[126,127,128,129,130],"upstreamProject","upstreamBranch","emptyEnvVars","flags",[],"hasHttpFiles","grants","orgs","customDomains",{},{"_41":163,"_31":164,"_29":165,"_133":-5,"_39":40,"_38":166,"_135":57,"_36":167,"_13":147,"_33":155,"_34":-5,"_23":24,"_140":-5,"_26":168},{"_41":157,"_31":158,"_29":159,"_133":-5,"_39":40,"_38":160,"_135":57,"_36":161,"_13":147,"_33":155,"_34":-5,"_23":24,"_140":-5,"_26":162},{"_41":150,"_31":151,"_29":152,"_133":-5,"_39":40,"_38":153,"_135":57,"_36":154,"_13":147,"_33":155,"_34":-5,"_23":24,"_140":-5,"_26":156},{"_41":142,"_31":143,"_29":144,"_133":-5,"_39":40,"_38":145,"_135":24,"_36":146,"_13":147,"_33":20,"_34":148,"_23":24,"_140":-5,"_26":149},{"_41":131,"_31":132,"_29":55,"_133":-5,"_39":40,"_38":134,"_135":24,"_36":136,"_13":137,"_33":138,"_34":139,"_23":24,"_140":43,"_26":141},"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",[132],"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 · v34