Skill Binder

[{"_1":2,"_3":-5,"_4":-5},"loaderData",{"_5":6,"_7":8,"_9":10},"actionData","errors","root",{"_613":614,"_615":616},"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,"_38":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",41,"changes",[19,20],"aiChatInfo","userId",{"_21":43,"_23":-7,"_24":25,"_26":25,"_27":44,"_29":44},{"_21":22,"_23":-7,"_24":25,"_26":25,"_27":28,"_29":28},"file",{"_30":31,"_32":33,"_34":35,"_36":37,"_38":39,"_40":14,"_41":42,"_24":25},"previous","deleted",false,"deletedHere","path","skills/inbox-zero/scripts/fetch_unread.ts","latestPath","fileId","8cb080c4-5927-11f1-ba97-ee650bb23af1","name","fetch_unread.ts","fileType","script","content","// Fetch unread Gmail threads via the Gmail API.\n// Stub — wire to your own Gmail credentials.\n//\n// Usage:\n// deno run --allow-net --allow-env fetch_unread.ts\n\nconst TOKEN = Deno.env.get(\"GMAIL_ACCESS_TOKEN\");\nif (!TOKEN) throw new Error(\"Set GMAIL_ACCESS_TOKEN\");\n\nconst res = await fetch(\n \"https://gmail.googleapis.com/gmail/v1/users/me/threads?q=is:unread&maxResults=50\",\n { headers: { Authorization: `Bearer ${TOKEN}` } },\n);\nconst data = await res.json();\nconsole.log(JSON.stringify(data.threads ?? [], null, 2));\n","createdAt",["D",1779816182408],"branchVersion","branchId","a265a3e8-5924-11f1-b614-ee650bb23af1",{"_30":45,"_32":46,"_34":47,"_36":-5,"_38":48,"_40":14,"_41":42,"_24":25},"skills/inbox-zero/scripts","01c250be-e49a-4eda-8827-79bb4fb18305","scripts","directory",["D",1779816182408],"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":42,"_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=1789577999&sig=ccae2bd9e85fa66acf31b16bebb92bf56e22818ff77cfbe2634e1b690ccd40dc","tier","pro","canRestrictVals","profileImageUrl","branchName","","adoptOrgId",{"_49":50,"_32":51,"_38":609,"_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":610,"_87":611,"_89":612,"_91":25},"tree",[186,188,237,240,241],"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],"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,"_41":42,"_40":173,"_143":65,"_38":174,"_13":155,"_34":47,"_36":-5,"_24":25,"_148":-5,"_27":175},{"_49":164,"_32":165,"_30":166,"_141":-5,"_41":42,"_40":167,"_143":65,"_38":168,"_13":155,"_34":47,"_36":-5,"_24":25,"_148":-5,"_27":169},{"_49":158,"_32":159,"_30":160,"_141":-5,"_41":42,"_40":161,"_143":65,"_38":162,"_13":155,"_34":47,"_36":-5,"_24":25,"_148":-5,"_27":163},{"_49":150,"_32":151,"_30":152,"_141":-5,"_41":42,"_40":153,"_143":25,"_38":154,"_13":155,"_34":21,"_36":156,"_24":25,"_148":-5,"_27":157},{"_49":139,"_32":140,"_30":63,"_141":-5,"_41":42,"_40":142,"_143":25,"_38":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 · v41