Skill Binder

[{"_1":2,"_3":-5,"_4":-5},"loaderData",{"_5":6,"_7":8,"_9":10},"actionData","errors","root",{"_217":218,"_219":220},"routes/_app.x.$handle.$name",{"_98":97,"_33":47,"_107":88,"_28":108,"_13":14,"_109":-5,"_11":110,"_111":112,"_113":114,"_115":116,"_117":118,"_20":-5,"_119":-5,"_120":-5,"_121":27,"_122":123,"_124":25,"_125":-5,"_126":-5,"_127":128},"routes/_app.x.$handle.$name.branch.$branch.version.$version.diff",{"_11":12,"_13":14,"_15":16,"_17":-5,"_18":-5},"project",{"_45":46,"_33":47,"_40":48,"_49":-5,"_50":27,"_51":52,"_53":52,"_54":55,"_56":-5,"_18":57,"_58":59,"_60":25,"_61":-5,"_62":-5,"_63":64,"_65":66,"_67":-5,"_68":-5,"_69":-5,"_70":-5,"_71":72,"_73":72,"_74":75,"_76":75,"_77":75,"_78":72,"_79":72,"_80":81,"_82":83,"_84":85,"_86":27},"version",7,"changes",[19],"aiChatInfo","userId",{"_20":21,"_22":23,"_24":25,"_26":27,"_28":29,"_30":29},"file",{"_31":32,"_33":34,"_35":36,"_37":39,"_40":41,"_42":14,"_43":44,"_24":27},"previous",{"_31":32,"_33":34,"_35":36,"_37":38},"deleted",true,"deletedHere",false,"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 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\nexport const SKILLS: Skill[] = [\n {\n slug: \"daily-standup\",\n name: \"Daily Standup\",\n type: \"Skill — Routine\",\n color: \"blue\",\n art: \"🌅\",\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 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 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 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 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 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","// 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",1779815707782],"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","pinMigrated","screenshotVersion","likeCount",1,"orgId","d663a026-6449-42f6-9156-1d4a2d64d38c","tursoName","tursoHostname","tursoMeasuredAt","pinned","userPerm","r","valPerm","blobPerm","rw","emailPerm","sqlitePerm","projectPerm","telemetryPerm","user",{"_98":97,"_106":102},"org",{"_98":97,"_99":100,"_101":102,"_18":57,"_103":104,"_105":27},"branch",{"_13":87,"_33":88,"_45":44,"_89":46,"_90":-5,"_91":-5,"_92":-5,"_93":-5,"_94":-5,"_95":47,"_96":97},"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",{"_45":46,"_33":47,"_40":213,"_49":-5,"_50":27,"_51":52,"_53":52,"_54":55,"_56":-5,"_18":57,"_58":59,"_60":25,"_61":-5,"_62":-5,"_63":64,"_65":66,"_67":-5,"_68":-5,"_69":-5,"_70":-5,"_71":72,"_73":72,"_74":75,"_76":75,"_77":75,"_78":72,"_79":72,"_80":214,"_82":215,"_84":216,"_86":27},"tree",[174,176,179,180],"files",[174,175,176,177,178,179,180],"counts",{"_164":148,"_165":64,"_166":148,"_167":168,"_169":170},"contents",[129,130,131,132],"upstreamProject","upstreamBranch","emptyEnvVars","flags",[],"hasHttpFiles","grants","orgs","customDomains",{},{"_45":158,"_33":159,"_31":160,"_135":-5,"_43":44,"_42":161,"_137":25,"_40":162,"_13":148,"_35":156,"_37":-5,"_24":27,"_141":-5,"_28":163},{"_45":151,"_33":152,"_31":153,"_135":-5,"_43":44,"_42":154,"_137":25,"_40":155,"_13":148,"_35":156,"_37":-5,"_24":27,"_141":-5,"_28":157},{"_45":143,"_33":144,"_31":145,"_135":-5,"_43":44,"_42":146,"_137":27,"_40":147,"_13":148,"_35":20,"_37":149,"_24":27,"_141":-5,"_28":150},{"_45":133,"_33":134,"_31":59,"_135":-5,"_43":44,"_42":136,"_137":27,"_40":138,"_13":64,"_35":139,"_37":140,"_24":27,"_141":47,"_28":142},"d55b72aa-5924-11f1-ba2f-ee650bb23af1","main.tsx","parentId",3,"latest",["D",1779815015829],"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// In this prototype: SKILLS in data/skills.ts holds the truth — each card\n// is a `SKILL.md` body plus a few rendering hints (color, art, mana cost).\n// The /api/skills endpoint returns the same data the agent would read.\n// The / page shells in a vanilla JS client that lays out cards in a binder.\n\nimport { Hono } from \"npm:hono@4\";\nimport { parseVal, readFile, serveFile } from \"https://esm.town/v/std/utils/index.ts\";\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 for an agent. This is what an LLM would read off disk in a\n// real skills/ folder — the binder UI is just a face on top of this.\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\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 · v7