Skill Binder

[{"_1":2,"_3":-5,"_4":-5},"loaderData",{"_5":6,"_7":8,"_9":10},"actionData","errors","root",{"_683":684,"_685":686},"routes/_app.x.$handle.$name",{"_97":96,"_32":45,"_106":87,"_27":107,"_13":14,"_108":-5,"_11":109,"_110":111,"_112":113,"_114":115,"_116":117,"_20":-5,"_118":-5,"_119":-5,"_120":49,"_121":122,"_123":25,"_124":-5,"_125":-5,"_126":127},"routes/_app.x.$handle.$name.branch.$branch.version.$version.diff",{"_11":12,"_13":14,"_15":16,"_17":-5,"_18":-5},"project",{"_43":44,"_32":45,"_38":46,"_47":-5,"_48":49,"_50":51,"_52":51,"_53":54,"_55":-5,"_18":56,"_57":58,"_59":25,"_60":-5,"_61":-5,"_62":63,"_64":65,"_66":-5,"_67":-5,"_68":-5,"_69":-5,"_70":71,"_72":71,"_73":74,"_75":74,"_76":74,"_77":71,"_78":71,"_79":80,"_81":82,"_83":84,"_85":49},"version",49,"changes",[19],"aiChatInfo","userId",{"_20":21,"_22":23,"_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",{"_30":31,"_32":33,"_34":35,"_36":37},"deleted",true,"deletedHere","path","data/skills.ts","latestPath","fileId","c9754984-5924-11f1-8d6c-ee650bb23af1","name","skills.ts","fileType","script","content","// Demo skill data. The \"body\" field is raw SKILL.md markdown — the same\n// thing an agent would read off disk in a real skills/ folder. The card UI\n// is just a richer face on top of that markdown. Edit a memory in the UI\n// and (in a real version) you'd round-trip it back to memories/feedback_*.md.\n\nexport type SkillColor = \"blue\" | \"white\" | \"black\" | \"red\" | \"green\" | \"gold\";\n\nexport interface Memory {\n kind: \"feedback\" | \"project\" | \"reference\" | \"user\";\n title: string;\n body: string;\n}\n\nexport interface Skill {\n slug: string;\n name: string;\n type: string;\n color: SkillColor;\n art: string;\n /** Prompt sent to fal.ai for card art. */\n artPrompt: string;\n manaCost: number;\n level: number;\n invocations: number;\n lastUsed: string;\n triggers: string[];\n flavor: string;\n body: string;\n memories: Memory[];\n templates: string[];\n scripts: string[];\n}\n\nconst BASE_STYLE =\n \"fantasy trading card illustration, painterly digital art, dramatic cinematic lighting, framed centered composition, square format, no text, no letters, no words, no logos, no UI\";\n\nconst PALETTE: Record = {\n blue: \"cool blue and pale silver palette, soft morning mist, serene\",\n white: \"warm cream and antique gold palette, sunlit, hopeful, clean\",\n red: \"deep ember red and amber palette, fiery energy, dynamic motion\",\n black: \"deep indigo and charcoal palette, shadowy, ominous, glowing accents\",\n green: \"lush emerald and moss palette, verdant, organic textures\",\n gold: \"ornate burnished gold and burgundy palette, regal, decorative\",\n};\n\nconst prompt = (subject: string, color: SkillColor) =>\n `${subject} — ${PALETTE[color]} — ${BASE_STYLE}`;\n\nexport const SKILLS: Skill[] = [\n {\n slug: \"daily-standup\",\n name: \"Daily Standup\",\n type: \"Skill — Routine\",\n color: \"blue\",\n art: \"🌅\",\n artPrompt: prompt(\n \"a peaceful sunrise over a writer's desk by a window, steaming coffee mug, open notebook, soft watercolor light\",\n \"blue\",\n ),\n manaCost: 2,\n level: 5,\n invocations: 38,\n lastUsed: \"2d ago\",\n triggers: [\"start my day\", \"morning standup\", \"what's on my plate\"],\n flavor: \"Yesterday's threads, today's commitments, tomorrow's traps.\",\n body: `---\nname: daily-standup\ndescription: Walk through yesterday's progress, today's plan, and blockers\n---\n\n# Daily Standup\n\nWhen invoked, do three things in order:\n\n1. **Yesterday.** Pull commits, PRs, and Slack threads from the last 24h. Summarize what shipped vs. what stalled.\n2. **Today.** Read open issues assigned to me, ordered by priority. Surface the top 3.\n3. **Blockers.** Anything waiting on someone else? Draft a one-line nudge for each.\n\n## Trigger phrases\n\n- \"start my day\"\n- \"morning standup\"\n- \"what's on my plate\"\n\n## Anti-goals\n\n- Don't write the standup *for* me. Surface, don't dictate.\n- Don't include items older than 5 days unless I ask.\n`,\n memories: [\n { kind: \"feedback\", title: \"Group by thread\", body: \"Group items by thread, not by date. Reason: I think in conversations, not in calendar slots.\" },\n { kind: \"project\", title: \"Q2 focus\", body: \"Migration takes priority over polish through end of June.\" },\n { kind: \"feedback\", title: \"Plain prose\", body: \"No emoji prefixes in the summary. Reads gimmicky.\" },\n ],\n templates: [\"standup_message.md\", \"blocker_nudge.md\"],\n scripts: [],\n },\n {\n slug: \"inbox-zero\",\n name: \"Inbox Zero\",\n type: \"Skill — Maintenance\",\n color: \"white\",\n art: \"✉️\",\n artPrompt: prompt(\n \"a single white origami paper plane resting on an empty wooden letter tray, soft golden window light, minimalist still life\",\n \"white\",\n ),\n manaCost: 1,\n level: 4,\n invocations: 21,\n lastUsed: \"5d ago\",\n triggers: [\"tidy the inbox\", \"process email\", \"inbox zero\", \"clean up email\"],\n flavor: \"Three folders, no regrets: Reply, Wait, Done.\",\n body: `---\nname: inbox-zero\ndescription: Triage email into reply / wait / archive piles and draft the easy replies\n---\n\n# Inbox Zero\n\nMove every unread email into one of three buckets:\n\n- **Reply** — needs a response from me in the next 24h.\n- **Wait** — I'm waiting on someone else; archive with a follow-up reminder.\n- **Done** — read-and-archive; no action needed.\n\nFor everything in **Reply**, draft a short response in my voice (terse, no greeting) as a Gmail compose URL.\n\n## Anti-goals\n\n- Don't auto-send anything.\n- Don't archive without showing me the subject lines first.\n`,\n memories: [\n { kind: \"feedback\", title: \"Compose URL not draft\", body: \"Use Gmail compose URLs; the draft API mangles newlines.\" },\n { kind: \"feedback\", title: \"Terse voice\", body: \"No 'Hi Person,' and no sign-off. Just the body.\" },\n ],\n templates: [\"compose_url.md\"],\n scripts: [\"fetch_unread.ts\"],\n },\n {\n slug: \"pr-review\",\n name: \"Ship Check\",\n type: \"Skill — Action\",\n color: \"red\",\n art: \"⚔️\",\n artPrompt: prompt(\n \"crossed swords planted at a forked stone path on a hilltop at dusk, sparks and ember motes, heroic fantasy painting\",\n \"red\",\n ),\n manaCost: 3,\n level: 7,\n invocations: 64,\n lastUsed: \"yesterday\",\n triggers: [\"review my pr\", \"ship check\", \"is this ready\", \"pre-merge\"],\n flavor: '\"Always create NEW commits rather than amending.\" — the elder agents',\n body: `---\nname: pr-review\ndescription: Pre-merge review focused on correctness, not style nits\n---\n\n# Ship Check\n\nRun before merging anything to main. Three passes:\n\n1. **Correctness.** Does the diff do what the PR title says? Any unhandled errors, off-by-ones, race conditions?\n2. **Blast radius.** What else might this break? Grep for callers of changed functions.\n3. **Tests.** Does the test plan actually cover the new code path, or is it theater?\n\nOutput: a punch list of high-confidence findings only. Skip nits.\n\n## Anti-goals\n\n- Don't comment on style — the linter handles that.\n- Don't ask for tests where the code is obviously a one-off.\n- Don't approve speculatively. If something smells, say so.\n`,\n memories: [\n { kind: \"feedback\", title: \"High-confidence only\", body: \"Uncertain findings waste my time. Either you're sure or you don't mention it.\" },\n { kind: \"project\", title: \"Merge freeze\", body: \"Non-critical merges paused 2026-03-05 through mobile release cut.\" },\n { kind: \"reference\", title: \"Test conventions\", body: \"See docs/testing-philosophy.md for what 'real test' means here.\" },\n { kind: \"feedback\", title: \"Punch lists, not prose\", body: \"Bulleted list. No 'overall this looks great' framing.\" },\n ],\n templates: [\"punch_list.md\"],\n scripts: [\"pr_diff.ts\", \"caller_grep.ts\"],\n },\n {\n slug: \"bug-triage\",\n name: \"Incident Triage\",\n type: \"Skill — Action\",\n color: \"black\",\n art: \"🐛\",\n artPrompt: prompt(\n \"a glowing bioluminescent beetle crawling across a dark server rack, dim red emergency light, moody noir illustration\",\n \"black\",\n ),\n manaCost: 4,\n level: 3,\n invocations: 11,\n lastUsed: \"3w ago\",\n triggers: [\"what's broken\", \"incident triage\", \"page just fired\"],\n flavor: \"The graph is red. Begin.\",\n body: `---\nname: bug-triage\ndescription: First-response triage for production incidents\n---\n\n# Incident Triage\n\nWhen a page fires:\n\n1. **Confirm impact.** Real user-facing? What % of traffic? Check the dashboards in the reference block.\n2. **Bisect.** What deployed in the last 6 hours? Any feature flags flipped?\n3. **Mitigate before fix.** Roll back the suspect deploy or flip the flag back. Fix the root cause after the bleeding stops.\n4. **Write the incident note** in the channel — symptom, blast radius, mitigation, owner. One paragraph.\n\n## Anti-goals\n\n- Don't paste raw stack traces into Slack. Summarize.\n- Don't speculate about cause in the incident note until you've verified.\n`,\n memories: [\n { kind: \"reference\", title: \"Latency dashboard\", body: \"grafana.internal/d/api-latency — the dashboard oncall watches.\" },\n { kind: \"feedback\", title: \"Mitigate first\", body: \"Don't try to fix in production. Roll back, breathe, then fix on a branch.\" },\n ],\n templates: [\"incident_note.md\"],\n scripts: [\"recent_deploys.ts\"],\n },\n {\n slug: \"code-cartographer\",\n name: \"Code Cartographer\",\n type: \"Skill — Lookup\",\n color: \"green\",\n art: \"🗺️\",\n artPrompt: prompt(\n \"an old hand-drawn parchment map of a verdant city with rivers and streets, brass compass and quill resting on it, study desk\",\n \"green\",\n ),\n manaCost: 2,\n level: 6,\n invocations: 47,\n lastUsed: \"today\",\n triggers: [\"where is the X\", \"show me the code for\", \"find me the\", \"map the\"],\n flavor: \"Every codebase is a city. Someone has to keep the map.\",\n body: `---\nname: code-cartographer\ndescription: Locate code by intent, not just by name\n---\n\n# Code Cartographer\n\nWhen asked where something lives:\n\n1. **Try the obvious name first** with grep / find.\n2. **If miss, try synonyms.** A \"user-auth\" feature might live under \\`session\\`, \\`identity\\`, \\`accounts\\`. Try three variants.\n3. **Surface the entry point + the call graph two levels deep.** Not just the file — show what calls in and what gets called.\n4. **Note dead branches.** If a code path is unreachable, flag it.\n\n## Anti-goals\n\n- Don't read the whole file. Excerpt the relevant chunk with \\`file_path:line\\`.\n- Don't editorialize about code quality — that's a separate skill.\n`,\n memories: [\n { kind: \"feedback\", title: \"Three synonyms then ask\", body: \"If three name variants miss, ask me what I'm actually looking for rather than guessing further.\" },\n { kind: \"feedback\", title: \"file_path:line links\", body: \"Every reference as a clickable link, not prose.\" },\n { kind: \"project\", title: \"Old auth gone\", body: \"The legacy auth middleware was removed 2026-04. Don't reference it.\" },\n ],\n templates: [],\n scripts: [\"call_graph.ts\"],\n },\n {\n slug: \"release-notes\",\n name: \"Release Notes\",\n type: \"Skill — Creative\",\n color: \"gold\",\n art: \"📜\",\n artPrompt: prompt(\n \"an ornate unfurled parchment scroll with a feather quill and wax seal, warm candlelight, baroque still life\",\n \"gold\",\n ),\n manaCost: 3,\n level: 2,\n invocations: 6,\n lastUsed: \"2w ago\",\n triggers: [\"draft release notes\", \"what shipped\", \"weekly notes\", \"changelog\"],\n flavor: \"Write for the user who reads the changelog, not the engineer who wrote the diff.\",\n body: `---\nname: release-notes\ndescription: Draft user-facing release notes from a week of commits\n---\n\n# Release Notes\n\nGiven a date range:\n\n1. **Pull merged PRs** in that range.\n2. **Cluster by user-visible theme.** \"Auth\", \"Search\", \"Performance\" — not by component name.\n3. **Translate.** A PR titled \\`fix(api): handle nil pointer in /v2/users\\` becomes a one-liner like *\"Fixed a rare crash when loading the user list.\"*\n4. **Lead with the wins.** Bug fixes after features.\n\n## Anti-goals\n\n- Don't include internal refactors.\n- Don't list every PR — group ruthlessly.\n- Don't use the words \"improved\" or \"enhanced.\" They're noise.\n`,\n memories: [\n { kind: \"feedback\", title: \"User voice not engineer voice\", body: \"Translate from changelog-speak to plain English. If a user wouldn't care, cut it.\" },\n { kind: \"user\", title: \"I write the headline\", body: \"Draft the body but leave the headline to me — that's where I want to taste-test the framing.\" },\n ],\n templates: [\"release_notes.md\"],\n scripts: [\"merged_prs.ts\"],\n },\n];\n","createdAt",["D",1779816263119],"branchVersion","branchId","a265a3e8-5924-11f1-b614-ee650bb23af1","id","a264eee4-5924-11f1-b614-ee650bb23af1","skillbook",["D",1779814930341],"deletedAt","legacyEnvVars",false,"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","pinMigrated","screenshotVersion","likeCount",1,"orgId","d663a026-6449-42f6-9156-1d4a2d64d38c","tursoName","tursoHostname","tursoMeasuredAt","pinned","userPerm","r","valPerm","blobPerm","rw","emailPerm","sqlitePerm","projectPerm","telemetryPerm","user",{"_97":96,"_105":101},"org",{"_97":96,"_98":99,"_100":101,"_18":56,"_102":103,"_104":49},"branch",{"_13":86,"_32":87,"_43":42,"_88":44,"_89":-5,"_90":-5,"_91":-5,"_92":-5,"_93":-5,"_94":45,"_95":96},"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=1789559999&sig=78019e07e4ced3d68c9df61b037dd9640810f47ba2d971eaac41b98f18b7827c","tier","pro","canRestrictVals","profileImageUrl","branchName","","adoptOrgId",{"_43":44,"_32":45,"_38":679,"_47":-5,"_48":49,"_50":51,"_52":51,"_53":54,"_55":-5,"_18":56,"_57":58,"_59":25,"_60":-5,"_61":-5,"_62":63,"_64":65,"_66":-5,"_67":-5,"_68":-5,"_69":-5,"_70":71,"_72":71,"_73":74,"_75":74,"_76":74,"_77":71,"_78":71,"_79":680,"_81":681,"_83":682,"_85":49},"tree",[181,183,241,244,245],"files",[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,222,223,224,225,226,227,228,229,230,231,232,233,234,235,236,237,238,239,240,241,242,243,244,245],"counts",{"_170":149,"_171":63,"_172":149,"_173":174,"_175":176},"contents",[128,129,130,131,132],"upstreamProject","upstreamBranch","emptyEnvVars","flags",[],"hasHttpFiles","grants","orgs","customDomains",{},{"_43":164,"_32":165,"_30":166,"_135":-5,"_41":42,"_40":167,"_137":25,"_38":168,"_13":149,"_34":156,"_36":-5,"_24":49,"_142":-5,"_27":169},{"_43":158,"_32":159,"_30":160,"_135":-5,"_41":42,"_40":161,"_137":25,"_38":162,"_13":149,"_34":156,"_36":-5,"_24":49,"_142":-5,"_27":163},{"_43":152,"_32":153,"_30":154,"_135":-5,"_41":42,"_40":139,"_137":25,"_38":155,"_13":149,"_34":156,"_36":-5,"_24":49,"_142":-5,"_27":157},{"_43":144,"_32":145,"_30":146,"_135":-5,"_41":42,"_40":147,"_137":49,"_38":148,"_13":149,"_34":20,"_36":150,"_24":49,"_142":-5,"_27":151},{"_43":133,"_32":134,"_30":58,"_135":-5,"_41":42,"_40":136,"_137":49,"_38":138,"_13":139,"_34":140,"_36":141,"_24":49,"_142":45,"_27":143},"bb32ef40-5927-11f1-9e3f-ee650bb23af1","main.tsx","parentId",48,"latest",["D",1779816260414],4,"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//\n// File layout mirrors a traditional skill repo — see data/loader.ts.\n\nimport { Hono } from \"npm:hono@4\";\nimport {\n parseVal,\n readFile,\n serveFile,\n} from \"https://esm.town/v/std/utils/index.ts\";\nimport { blob } from \"https://esm.town/v/std/blob\";\nimport { loadSkills } from \"./data/loader.ts\";\n\nconst SLUG_RE = /^[a-z0-9_-]+$/;\nconst FILE_RE = /^[a-z0-9_.-]+$/;\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\", async (c) => c.json(await loadSkills()));\n\napp.get(\"/api/skills/:slug\", async (c) => {\n const slug = c.req.param(\"slug\");\n const skills = await loadSkills();\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-file routes — what an agent would actually read off disk. The val IS\n// a skill repo; these routes expose it as one.\napp.get(\"/raw/:slug/SKILL.md\", (c) => {\n const slug = c.req.param(\"slug\");\n if (!SLUG_RE.test(slug)) return c.text(\"bad slug\", 400);\n return serveFile(`/skills/${slug}/SKILL.md`, import.meta.url);\n});\n\napp.get(\"/raw/:slug/memories/:file\", (c) => {\n const slug = c.req.param(\"slug\");\n const file = c.req.param(\"file\");\n if (!SLUG_RE.test(slug) || !FILE_RE.test(file) || !file.endsWith(\".md\")) {\n return c.text(\"bad path\", 400);\n }\n return serveFile(`/skills/${slug}/memories/${file}`, import.meta.url);\n});\n\napp.get(\"/raw/:slug/templates/:file\", (c) => {\n const slug = c.req.param(\"slug\");\n const file = c.req.param(\"file\");\n if (!SLUG_RE.test(slug) || !FILE_RE.test(file)) {\n return c.text(\"bad path\", 400);\n }\n return serveFile(`/skills/${slug}/templates/${file}`, import.meta.url);\n});\n\napp.get(\"/raw/:slug/scripts/:file\", (c) => {\n const slug = c.req.param(\"slug\");\n const file = c.req.param(\"file\");\n if (!SLUG_RE.test(slug) || !FILE_RE.test(file)) {\n return c.text(\"bad path\", 400);\n }\n return serveFile(`/skills/${slug}/scripts/${file}`, import.meta.url);\n});\n\n// AI-generated card art via fal.ai (flux/schnell). Cached in blob storage.\n// Add FAL_KEY env var to enable; without it returns 503 and client falls\n// back 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 if (!SLUG_RE.test(slug)) return c.text(\"bad slug\", 400);\n const skills = await loadSkills();\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",[134],"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 · v49