[{"_1":2,"_3":-5,"_4":-5},"loaderData",{"_5":6,"_7":8,"_9":10},"actionData","errors","root",{"_344":345,"_346":347},"routes/_app.x.$handle.$name",{"_96":95,"_31":44,"_105":86,"_26":106,"_13":14,"_107":-5,"_11":108,"_109":110,"_111":112,"_113":114,"_115":116,"_20":-5,"_117":-5,"_118":-5,"_119":24,"_120":121,"_122":58,"_123":-5,"_124":-5,"_125":126},"routes/_app.x.$handle.$name.branch.$branch.version.$version.diff",{"_11":12,"_13":14,"_15":16,"_17":-5,"_18":-5},"project",{"_42":43,"_31":44,"_37":45,"_46":-5,"_47":24,"_48":49,"_50":49,"_51":52,"_53":-5,"_18":54,"_55":56,"_57":58,"_59":-5,"_60":-5,"_61":62,"_63":64,"_65":-5,"_66":-5,"_67":-5,"_68":-5,"_69":70,"_71":70,"_72":73,"_74":73,"_75":73,"_76":70,"_77":70,"_78":79,"_80":81,"_82":83,"_84":24},"version",15,"changes",[19],"aiChatInfo","userId",{"_20":21,"_22":-7,"_23":24,"_25":24,"_26":27,"_28":27},"file",{"_29":30,"_31":32,"_33":34,"_35":36,"_37":38,"_39":14,"_40":41,"_23":24},"previous","deleted",false,"deletedHere","path","components/FileView.tsx","latestPath","fileId","46643d18-611a-11f1-9ce0-1607ee4eb77e","name","FileView.tsx","fileType","script","content","/** @jsxImportSource npm:hono@4/jsx */\nimport { type Skill } from \"../lib/skills.ts\";\nimport { Button } from \"./Button.tsx\";\nimport { FileTree } from \"./FileTree.tsx\";\n\nexport const FileView = (props: {\n skill: Skill;\n path: string;\n rendered: string;\n isMarkdown: boolean;\n raw: string;\n}) => (\n <>\n \n ← {props.skill.name}\n \n

{props.path}

\n {props.isMarkdown\n ?

\n :

}\n

\n \n

\n \n);\n","createdAt",["D",1780690090306],"branchVersion","branchId","7c862450-0674-426e-9c69-ceda93eca788","id","6852d2a6-72e8-40e3-b5f0-53b7f8f82e7f","skills",["D",1780679910046],"deletedAt","legacyEnvVars","privacy","public","httpPrivacy","description","Shareable agent skill library","imageUrl","9319c175-2593-4f88-ba21-04f2ef7b1c28","pinnedFileId","92861134-6102-11f1-a0c5-1607ee4eb77e","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",{"_96":95,"_104":100},"org",{"_96":95,"_97":98,"_99":100,"_18":54,"_101":102,"_103":24},"branch",{"_13":85,"_31":86,"_42":41,"_87":43,"_88":-5,"_89":-5,"_90":-5,"_91":-5,"_92":-5,"_93":44,"_94":95},"isOwned",96,"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=1789585199&sig=791f927e7effb459fa28d239d1d031174bf5fa1d08898fecc3c6ffbf23ca6003","tier","pro","canRestrictVals","profileImageUrl","branchName","","adoptOrgId",{"_42":43,"_31":44,"_37":340,"_46":-5,"_47":24,"_48":49,"_50":49,"_51":52,"_53":-5,"_18":54,"_55":56,"_57":58,"_59":-5,"_60":-5,"_61":62,"_63":64,"_65":-5,"_66":-5,"_67":-5,"_68":-5,"_69":70,"_71":70,"_72":73,"_74":73,"_75":73,"_76":70,"_77":70,"_78":341,"_80":342,"_82":343,"_84":24},"tree",[178,185,187,189,200],"files",[178,179,180,181,182,183,184,185,186,187,188,189,190,191,192,193,194,195,196,197,198,199,200],"counts",{"_167":146,"_168":135,"_169":135,"_170":171,"_172":173},"contents",[127,128,129,130,131],"upstreamProject","upstreamBranch","emptyEnvVars","flags",[],"hasHttpFiles","grants","orgs","customDomains",{},{"_42":161,"_31":162,"_29":163,"_134":-5,"_40":41,"_39":164,"_136":58,"_37":165,"_13":146,"_33":147,"_35":-5,"_23":24,"_140":-5,"_26":166},{"_42":155,"_31":156,"_29":157,"_134":-5,"_40":41,"_39":158,"_136":58,"_37":159,"_13":146,"_33":147,"_35":-5,"_23":24,"_140":-5,"_26":160},{"_42":149,"_31":150,"_29":151,"_134":-5,"_40":41,"_39":152,"_136":58,"_37":153,"_13":146,"_33":147,"_35":-5,"_23":24,"_140":-5,"_26":154},{"_42":142,"_31":44,"_29":143,"_134":-5,"_40":41,"_39":144,"_136":24,"_37":145,"_13":146,"_33":147,"_35":-5,"_23":24,"_140":-5,"_26":148},{"_42":132,"_31":133,"_29":56,"_134":-5,"_40":41,"_39":135,"_136":24,"_37":137,"_13":62,"_33":138,"_35":139,"_23":24,"_140":-5,"_26":141},"80db2722-3d81-4795-9ade-1c214fd17855","http.tsx","parentId",2,"latest",["D",1780681236163],"http","// Skill Library — generic template.\n// Fork this val to create your own team's skill library.\n// Each skill is a folder under /skills// with a SKILL.md entry point.\n\nimport { Hono } from \"npm:hono@4\";\nimport { readFile } from \"https://esm.town/v/std/utils@85-main/index.ts\";\nimport { marked } from \"npm:marked@15\";\n\n// ── Skills manifest ─────────────────────────────────────────────────────\n// Add your skills here. Each entry needs a slug (folder name), display\n// name, one-line description, category, and a list of all files.\n\nconst SKILLS: Skill[] = [\n {\n slug: \"hello-world\",\n name: \"Hello World\",\n description: \"The simplest possible skill — a greeting script with one knowledge file. Start here to understand the folder convention.\",\n category: \"Getting Started\",\n files: [\"SKILL.md\", \"scripts/greet.ts\", \"knowledge/about-skills.md\"],\n },\n {\n slug: \"code-reviewer\",\n name: \"Code Reviewer\",\n description: \"Reviews a diff for correctness bugs, security issues, and style problems. Demonstrates a multi-step flow with a knowledge file.\",\n category: \"Engineering\",\n files: [\"SKILL.md\", \"knowledge/review-checklist.md\"],\n },\n];\n\ntype Skill = {\n slug: string;\n name: string;\n description: string;\n category: string;\n files: string[];\n};\n\n// ── Helpers ─────────────────────────────────────────────────────────────\n\nfunction esc(s: string): string {\n return s.replace(/&/g, \"&\").replace(//g, \">\")\n .replace(/\"/g, \""\");\n}\n\nasync function readSkillFile(slug: string, path: string): Promise {\n try {\n const content = await readFile(`/skills/${slug}/${path}`, import.meta.url);\n return typeof content === \"string\" ? content : null;\n } catch { return null; }\n}\n\nfunction buildCopyPayload(skill: Skill, raw: string, valId: string): string {\n return `# ${skill.name}\n# Source: ${valId} → skills/${skill.slug}/\n#\n# To use this skill, read the remaining files from this val via the Val Town MCP:\n# val: ${valId}\n# path: skills/${skill.slug}/\n#\n# Files:\n${skill.files.map(f => `# ${f}`).join(\"\\n\")}\n\n${raw}`;\n}\n\n// ── Shader button JS (inlined) ──────────────────────────────────────────\n// Adapted from dcm31/water-button — domain-warped FBM water surface.\n\nconst SHADER_JS = `\nconst VERT = \\`attribute vec2 aPos; void main(){ gl_Position = vec4(aPos, 0.0, 1.0); }\\`;\nconst FRAG = \\`\nprecision highp float;\nuniform vec2 iResolution; uniform float iTime;\nfloat hash21(vec2 p){ p = fract(p * vec2(123.34, 345.45)); p += dot(p, p + 34.345); return fract(p.x * p.y); }\nfloat vnoise(vec2 p){ vec2 i = floor(p), f = fract(p); vec2 u = f*f*(3.0-2.0*f);\n float a=hash21(i), b=hash21(i+vec2(1,0)), c=hash21(i+vec2(0,1)), d=hash21(i+vec2(1,1));\n return mix(mix(a,b,u.x), mix(c,d,u.x), u.y); }\nfloat fbm(vec2 p){ float s=0.0, a=0.5; for(int i=0;i<4;i++){s+=a*vnoise(p);p*=2.0;a*=0.5;} return s; }\nvoid main(){\n vec2 uv = gl_FragCoord.xy / iResolution.xy;\n vec2 p = (gl_FragCoord.xy - 0.5*iResolution.xy) / iResolution.y * 3.0;\n float t = iTime * 0.15;\n vec2 q = vec2(fbm(p+vec2(0,t)), fbm(p+vec2(5.2,1.3)-t));\n vec2 r = vec2(fbm(p+1.6*q+vec2(1.7,9.2)+t*0.7), fbm(p+1.6*q+vec2(8.3,2.8)-t*0.6));\n float n = fbm(p+2.0*r+vec2(t*0.5,0));\n float ridge = 1.0-abs(2.0*fbm(p*2.0+3.0*r+vec2(t,0))-1.0); ridge=pow(ridge,3.0);\n vec3 deep=vec3(.02,.09,.16), mid=vec3(.05,.45,.55), hi=vec3(.60,.93,.96);\n vec3 col=mix(deep,mid,smoothstep(.2,.7,n));\n col=mix(col,hi,smoothstep(.55,.95,n)*.7);\n col+=hi*ridge*.5*smoothstep(.3,.9,n);\n vec2 c2=uv-.5; col*=1.0-.25*dot(c2,c2);\n col=col/(col+vec3(.4)); col=pow(col,vec3(.85));\n gl_FragColor=vec4(col,1);\n}\\`;\nfunction compile(gl,type,src){const s=gl.createShader(type);gl.shaderSource(s,src);gl.compileShader(s);if(!gl.getShaderParameter(s,gl.COMPILE_STATUS))throw new Error(gl.getShaderInfoLog(s));return s;}\nclass WaveBtn{\n constructor(canvas){\n this.canvas=canvas;this.broken=false;\n this.gl=canvas.getContext(\"webgl\",{antialias:true,alpha:false});\n if(!this.gl){this.broken=true;return;}\n try{this._init();}catch{this.broken=true;}\n this.phase=6;this.speed=1;this.hover=false;this.last=performance.now();\n requestAnimationFrame(t=>this._frame(t));\n }\n _init(){\n const gl=this.gl,prog=gl.createProgram();\n gl.attachShader(prog,compile(gl,gl.VERTEX_SHADER,VERT));\n gl.attachShader(prog,compile(gl,gl.FRAGMENT_SHADER,FRAG));\n gl.linkProgram(prog);gl.useProgram(prog);this.prog=prog;\n const buf=gl.createBuffer();gl.bindBuffer(gl.ARRAY_BUFFER,buf);\n gl.bufferData(gl.ARRAY_BUFFER,new Float32Array([-1,-1,1,-1,-1,1,1,1]),gl.STATIC_DRAW);\n const a=gl.getAttribLocation(prog,\"aPos\");gl.enableVertexAttribArray(a);gl.vertexAttribPointer(a,2,gl.FLOAT,false,0,0);\n this.uRes=gl.getUniformLocation(prog,\"iResolution\");this.uTime=gl.getUniformLocation(prog,\"iTime\");\n }\n _resize(){\n const gl=this.gl,c=this.canvas,dpr=Math.min(devicePixelRatio||1,2);\n const w=Math.round(c.clientWidth*dpr),h=Math.round(c.clientHeight*dpr);\n if(w<2||h<2)return false;if(c.width===w&&c.height===h)return true;\n c.width=w;c.height=h;gl.viewport(0,0,w,h);return true;\n }\n stir(){this.speed=Math.max(this.speed,7);}\n _frame(t){\n if(!this._resize()){requestAnimationFrame(tt=>this._frame(tt));return;}\n const gl=this.gl,dt=Math.min((t-this.last)/1000,.05);this.last=t;\n const base=this.hover?2.6:1;\n this.speed+=(base-this.speed)*Math.min(dt*3,1);this.phase+=dt*this.speed;\n if(!this.broken){gl.useProgram(this.prog);gl.uniform2f(this.uRes,this.canvas.width,this.canvas.height);gl.uniform1f(this.uTime,this.phase);gl.drawArrays(gl.TRIANGLE_STRIP,0,4);}\n requestAnimationFrame(tt=>this._frame(tt));\n }\n}\ndocument.querySelectorAll(\".btn-liquid\").forEach(el=>{\n const canvas=el.querySelector(\"canvas\");if(!canvas)return;\n const wave=new WaveBtn(canvas);\n el.addEventListener(\"pointerenter\",()=>{wave.hover=true;});\n el.addEventListener(\"pointerleave\",()=>{wave.hover=false;el.classList.remove(\"pressed\");});\n el.addEventListener(\"pointerdown\",()=>el.classList.add(\"pressed\"));\n [\"pointerup\",\"pointercancel\"].forEach(ev=>el.addEventListener(ev,()=>el.classList.remove(\"pressed\")));\n el.addEventListener(\"click\",e=>{\n e.preventDefault();wave.stir();\n const text=el.dataset.copy;if(!text)return;\n navigator.clipboard.writeText(text).then(()=>{\n const label=el.querySelector(\".label\");if(!label)return;\n const orig=label.textContent;label.textContent=\"Copied!\";\n setTimeout(()=>label.textContent=orig,1800);\n });\n });\n});\n`;\n\n// ── CSS ─────────────────────────────────────────────────────────────────\n\nconst CSS = `\n*{margin:0;padding:0;box-sizing:border-box}\nbody{\n font-family:-apple-system,BlinkMacSystemFont,\"Segoe UI\",Roboto,Helvetica,Arial,sans-serif;\n color:#111;background:#fff;line-height:1.6;font-size:16px;\n}\n.wrap{max-width:960px;margin:0 auto;padding:64px 16px 32px}\nh1{font-size:32px;font-weight:700;letter-spacing:-0.02em;margin-bottom:8px}\nh2{font-size:20px;font-weight:600;margin:32px 0 8px}\n.tagline{color:#555;margin-bottom:64px}\n\n.cards{display:grid;gap:16px}\n.card{border:1px solid #e0e0e0;padding:32px;border-radius:8px;text-decoration:none;color:inherit;display:block;transition:border-color .15s}\n.card:hover{border-color:#111}\n.card-cat{font-size:12px;font-weight:600;text-transform:uppercase;letter-spacing:.06em;color:#888;margin-bottom:8px}\n.card-name{font-size:20px;font-weight:600;margin-bottom:4px}\n.card-desc{color:#444;font-size:14px;line-height:1.5}\n.card-meta{color:#999;font-size:12px;margin-top:16px}\n\n.back{display:inline-block;margin-bottom:32px;color:#888;text-decoration:none;font-size:14px}\n.back:hover{color:#111}\n.hero{margin-bottom:32px}\n.hero .card-cat{margin-bottom:4px}\n.hero h1{margin-bottom:8px}\n.hero .card-desc{margin-bottom:0;color:#444;font-size:14px}\n\n.detail{display:grid;grid-template-columns:1fr 240px;gap:32px;align-items:start}\n@media(max-width:720px){.detail{grid-template-columns:1fr}.sidebar{order:-1}}\n.sidebar{position:sticky;top:32px}\n.sidebar h2{font-size:14px;font-weight:600;text-transform:uppercase;letter-spacing:.04em;color:#888;margin:0 0 8px}\n\n/* ── shader button ── */\n.btn-liquid{\n position:relative;overflow:hidden;display:flex;align-items:center;justify-content:center;\n width:100%;padding:14px 16px;margin-bottom:24px;\n border-radius:12px;border:1px solid rgba(255,255,255,.16);\n text-decoration:none;color:#fff;font-size:15px;font-weight:600;font-family:inherit;\n cursor:pointer;user-select:none;-webkit-tap-highlight-color:transparent;\n box-shadow:0 8px 24px -6px rgba(0,0,0,.35),0 0 0 1px rgba(255,255,255,.03) inset;\n transition:transform .14s cubic-bezier(.2,.85,.25,1),box-shadow .25s;\n}\n.btn-liquid canvas{position:absolute;inset:0;z-index:0;width:100%;height:100%;display:block}\n.btn-liquid .scrim{position:absolute;inset:0;z-index:1;pointer-events:none;background:linear-gradient(180deg,rgba(0,16,18,.08),rgba(0,10,12,.36))}\n.btn-liquid .label{position:relative;z-index:2;text-shadow:0 1px 6px rgba(0,0,0,.5)}\n.btn-liquid:hover{transform:translateY(-2px);box-shadow:0 16px 36px -8px rgba(0,0,0,.5),0 0 36px -6px rgba(64,224,208,.2)}\n.btn-liquid.pressed{transform:translateY(1px) scale(.99)}\n\n.btn{\n display:inline-flex;align-items:center;gap:8px;padding:8px 16px;\n border:1px solid #e0e0e0;border-radius:6px;background:#fff;color:#111;\n font-size:13px;font-weight:500;cursor:pointer;transition:all .15s;font-family:inherit;text-decoration:none;\n}\n.btn:hover{border-color:#111}\n\n.flist{list-style:none}\n.flist li{margin-bottom:1px}\n.flist a{display:block;padding:4px 8px;color:#111;text-decoration:none;font-size:13px;\n font-family:SFMono-Regular,Menlo,Monaco,Consolas,monospace;border-radius:4px;\n white-space:nowrap;overflow:hidden;text-overflow:ellipsis}\n.flist a:hover{background:#f5f5f5}\n.flist .dir{color:#888;font-weight:600;margin-top:12px;font-size:11px;text-transform:uppercase;letter-spacing:.04em;padding:4px 8px}\n\n.md{margin-bottom:32px}\n.md h1,.md h2,.md h3,.md h4{margin-top:32px;margin-bottom:8px}\n.md h1{font-size:24px}.md h2{font-size:20px}.md h3{font-size:16px;font-weight:600}\n.md p{margin-bottom:16px}\n.md ul,.md ol{margin:8px 0 16px 24px}.md li{margin-bottom:4px}\n.md pre{background:#f5f5f5;padding:16px;border-radius:6px;overflow-x:auto;font-size:13px;line-height:1.5;margin:8px 0 16px}\n.md code{background:#f5f5f5;padding:2px 6px;border-radius:3px;font-size:13px}\n.md pre code{background:none;padding:0}\n.md table{border-collapse:collapse;width:100%;margin:8px 0 16px}\n.md th,.md td{border:1px solid #e0e0e0;padding:8px 12px;text-align:left;font-size:14px}\n.md th{background:#fafafa;font-weight:600}\n.md blockquote{border-left:3px solid #e0e0e0;padding:8px 16px;margin:8px 0 16px;color:#444}\n.md hr{border:none;border-top:1px solid #e0e0e0;margin:32px 0}\n.md strong{font-weight:600}\n.md a{color:#111;text-decoration:underline;text-underline-offset:2px}\n.file-view pre{background:#f5f5f5;padding:16px;border-radius:6px;overflow-x:auto;font-size:13px;line-height:1.6}\n.foot{margin-top:64px;padding-top:16px;border-top:1px solid #e0e0e0;color:#aaa;font-size:12px}\n.foot a{color:#888}\n`;\n\n// ── Layout ──────────────────────────────────────────────────────────────\n\nfunction page(title: string, body: string, includeShader = false): string {\n return `\n\n\n\n\n${esc(title)}\n\n\n\n

\n${body}\n\n

\n${includeShader ? `` : \"\"}\n\n\n`;\n}\n\n// ── File tree builder ───────────────────────────────────────────────────\n\nfunction buildFileTree(skill: Skill, slug: string, activePath?: string): string {\n const dirs: Record = { \"\": [] };\n for (const f of skill.files) {\n const parts = f.split(\"/\");\n if (parts.length === 1) dirs[\"\"].push(f);\n else { const dir = parts.slice(0, -1).join(\"/\"); (dirs[dir] ??= []).push(parts[parts.length - 1]); }\n }\n let html = \"\";\n for (const f of dirs[\"\"]) {\n const active = f === activePath ? ' style=\"background:#f0f0f0;font-weight:600\"' : \"\";\n html += `

${esc(f)}

`;\n }\n for (const [dir, files] of Object.entries(dirs)) {\n if (dir === \"\") continue;\n html += `

${esc(dir)}/

`;\n for (const f of files) {\n const fullPath = `${dir}/${f}`;\n const active = fullPath === activePath ? ' style=\"background:#f0f0f0;font-weight:600\"' : \"\";\n html += `

${esc(f)}

`;\n }\n }\n return html;\n}\n\n// ── App ─────────────────────────────────────────────────────────────────\n\nconst app = new Hono();\n\n// Detect val identity for copy payloads\nconst VAL_ID = (() => {\n try {\n const url = import.meta.url;\n const m = url.match(/\\/v\\/([^/]+\\/[^/]+)\\//);\n return m ? m[1] : \"your-handle/skills\";\n } catch { return \"your-handle/skills\"; }\n})();\n\n// Home\napp.get(\"/\", (c) => {\n const cards = SKILLS.map(s => `\n \n

${esc(s.category)}

${esc(s.name)}

${esc(s.description)}

${s.files.length} files

\n `).join(\"\\n\");\n return c.html(page(\"Skill Library\", `\n

Skill Library

Shared agent skills for your team. Fork this template to build your own.

${cards}

`));\n});\n\n// Skill detail\napp.get(\"/skills/:slug\", async (c) => {\n const slug = c.req.param(\"slug\");\n const skill = SKILLS.find(s => s.slug === slug);\n if (!skill) return c.notFound();\n const raw = await readSkillFile(slug, \"SKILL.md\");\n if (!raw) return c.notFound();\n const html = await marked.parse(raw);\n const payload = buildCopyPayload(skill, raw, VAL_ID);\n\n return c.html(page(skill.name, `\n ← Back to skills\n

${esc(skill.category)}

${esc(skill.name)}

${esc(skill.description)}

${html}

\n \n

`, true));\n});\n\n// File view\napp.get(\"/skills/:slug/files/*\", async (c) => {\n const slug = c.req.param(\"slug\");\n const skill = SKILLS.find(s => s.slug === slug);\n if (!skill) return c.notFound();\n const filePath = c.req.path.replace(`/skills/${slug}/files/`, \"\");\n if (!skill.files.includes(filePath)) return c.notFound();\n const content = await readSkillFile(slug, filePath);\n if (content === null) return c.notFound();\n const isMarkdown = filePath.endsWith(\".md\");\n const rendered = isMarkdown\n ? `

${await marked.parse(content)}

`\n : `

${esc(content)}

`;\n\n return c.html(page(filePath, `\n ← ${esc(skill.name)}\n

${esc(filePath)}

\n \n

\n ${rendered}\n

\n \n

${esc(content)}

`));\n});\n\nexport default app.fetch;\n","label",[133],"287d66b7-bcf6-4f7f-b25a-ce3cc56b9023","a1b35e7d-59ce-4d6b-8738-2d706101a7d2",3,["D",1780681256307],0,"directory",[44],"7bda0f03-93e2-4732-a3a6-6a2e07040a64","lib","12f0707e-2c4a-41a9-92ef-370a78c04011",8,["D",1780690030621],[150],"13306b3b-c86a-4aed-acf5-e5718b8ed0da","frontend","0f3784d6-e4a2-4781-a7f4-2d6a3fea5d8d",9,["D",1780690033369],[156],"09b94b55-391d-44c3-9b5c-7c1312d29db4","components","d0b511be-7c7d-403e-addd-624c52fec544",10,["D",1780690053093],[162],"pulls","branches","forks","envVars",{"_174":176,"_177":176},"connections",{"_174":146,"_175":146},"count","unfilledCount",4,"emptyCount",{"_42":161,"_31":162,"_29":163,"_134":-5,"_40":41,"_39":164,"_136":58,"_37":337,"_13":146,"_33":147,"_35":-5,"_23":24,"_140":-5,"_202":338,"_26":339},{"_42":329,"_31":330,"_29":331,"_134":163,"_40":41,"_39":332,"_136":24,"_37":333,"_13":146,"_33":34,"_35":334,"_23":24,"_140":-5,"_202":335,"_26":336},{"_42":321,"_31":322,"_29":323,"_134":163,"_40":41,"_39":324,"_136":24,"_37":325,"_13":146,"_33":34,"_35":326,"_23":24,"_140":-5,"_202":327,"_26":328},{"_42":317,"_31":32,"_29":30,"_134":163,"_40":41,"_39":14,"_136":24,"_37":318,"_13":146,"_33":34,"_35":36,"_23":24,"_140":-5,"_202":319,"_26":320},{"_42":309,"_31":310,"_29":311,"_134":163,"_40":41,"_39":312,"_136":24,"_37":313,"_13":146,"_33":34,"_35":314,"_23":24,"_140":-5,"_202":315,"_26":316},{"_42":302,"_31":303,"_29":304,"_134":163,"_40":41,"_39":164,"_136":24,"_37":305,"_13":146,"_33":34,"_35":306,"_23":24,"_140":-5,"_202":307,"_26":308},{"_42":294,"_31":295,"_29":296,"_134":163,"_40":41,"_39":297,"_136":24,"_37":298,"_13":146,"_33":34,"_35":299,"_23":24,"_140":-5,"_202":300,"_26":301},{"_42":155,"_31":156,"_29":157,"_134":-5,"_40":41,"_39":158,"_136":58,"_37":291,"_13":146,"_33":147,"_35":-5,"_23":24,"_140":-5,"_202":292,"_26":293},{"_42":284,"_31":285,"_29":286,"_134":157,"_40":41,"_39":158,"_136":58,"_37":287,"_13":146,"_33":34,"_35":288,"_23":24,"_140":-5,"_202":289,"_26":290},{"_42":149,"_31":150,"_29":151,"_134":-5,"_40":41,"_39":152,"_136":58,"_37":281,"_13":146,"_33":147,"_35":-5,"_23":24,"_140":-5,"_202":282,"_26":283},{"_42":274,"_31":275,"_29":276,"_134":151,"_40":41,"_39":152,"_136":24,"_37":277,"_13":146,"_33":34,"_35":278,"_23":24,"_140":-5,"_202":279,"_26":280},{"_42":142,"_31":44,"_29":143,"_134":-5,"_40":41,"_39":144,"_136":24,"_37":271,"_13":146,"_33":147,"_35":-5,"_23":24,"_140":-5,"_202":272,"_26":273},{"_42":267,"_31":253,"_29":247,"_134":143,"_40":41,"_39":248,"_136":58,"_37":268,"_13":146,"_33":147,"_35":-5,"_23":24,"_140":-5,"_202":269,"_26":270},{"_42":263,"_31":236,"_29":257,"_134":247,"_40":41,"_39":258,"_136":58,"_37":264,"_13":146,"_33":147,"_35":-5,"_23":24,"_140":-5,"_202":265,"_26":266},{"_42":254,"_31":255,"_29":256,"_134":257,"_40":41,"_39":258,"_136":58,"_37":259,"_13":146,"_33":20,"_35":260,"_23":24,"_140":-5,"_202":261,"_26":262},{"_42":245,"_31":206,"_29":246,"_134":247,"_40":41,"_39":248,"_136":24,"_37":249,"_13":146,"_33":20,"_35":250,"_23":24,"_140":-5,"_202":251,"_26":252},{"_42":241,"_31":213,"_29":208,"_134":143,"_40":41,"_39":144,"_136":58,"_37":242,"_13":146,"_33":147,"_35":-5,"_23":24,"_140":-5,"_202":243,"_26":244},{"_42":237,"_31":236,"_29":230,"_134":208,"_40":41,"_39":231,"_136":58,"_37":238,"_13":146,"_33":147,"_35":-5,"_23":24,"_140":-5,"_202":239,"_26":240},{"_42":227,"_31":228,"_29":229,"_134":230,"_40":41,"_39":231,"_136":58,"_37":232,"_13":146,"_33":20,"_35":233,"_23":24,"_140":-5,"_202":234,"_26":235},{"_42":223,"_31":222,"_29":217,"_134":208,"_40":41,"_39":176,"_136":58,"_37":224,"_13":146,"_33":147,"_35":-5,"_23":24,"_140":-5,"_202":225,"_26":226},{"_42":214,"_31":215,"_29":216,"_134":217,"_40":41,"_39":176,"_136":58,"_37":218,"_13":146,"_33":34,"_35":219,"_23":24,"_140":-5,"_202":220,"_26":221},{"_42":205,"_31":206,"_29":207,"_134":208,"_40":41,"_39":144,"_136":24,"_37":209,"_13":146,"_33":20,"_35":210,"_23":24,"_140":-5,"_202":211,"_26":212},{"_42":132,"_31":133,"_29":56,"_134":-5,"_40":41,"_39":135,"_136":24,"_37":201,"_13":62,"_33":138,"_35":139,"_23":24,"_140":-5,"_202":203,"_26":204},["D",1780681236163],"children",[],[133],"5fa24204-580e-4349-bbf3-71e3ab75a671","SKILL.md","b4ece09c-6105-11f1-97e1-1607ee4eb77e","9be3ecb8-35ce-416d-9095-ded3b30a78d8",["D",1780681256307],"# Hello World\n\nThe simplest possible skill. It exists to show you the folder convention.\n\n## What a skill is\n\nA skill is a folder with a `SKILL.md` file (you're reading it) and optional supporting files:\n\n```\nskills/hello-world/\n├── SKILL.md ← this file (the instructions)\n├── scripts/ ← runnable code the agent executes locally\n│ └── greet.ts\n└── knowledge/ ← reference material the agent reads\n └── about-skills.md\n```\n\n- **SKILL.md** is what the agent reads to know what to do. It's the entry point.\n- **scripts/** hold code that runs on the user's machine (needs local `.env` for secrets, writes to local filesystem). The agent reads them from this val via MCP and writes them locally.\n- **knowledge/** holds reference documents the agent reads for context — scoring rubrics, checklists, API schemas, templates. These stay in the agent's context; they don't need to be written to disk.\n\n## The flow\n\n### Step 1: Get the greeting script\n\nRead `scripts/greet.ts` from this val via the Val Town MCP and write it to your working directory.\n\n### Step 2: Run it\n\n```bash\ndeno run scripts/greet.ts \"World\"\n```\n\nIt prints `Hello, World!` and the current time.\n\n### Step 3: Read the knowledge file\n\nRead `knowledge/about-skills.md` for background on the skill format. You don't need to write this to disk — just read it for context.\n\n## That's it\n\nThis skill doesn't do anything useful. It exists to show the three-part pattern: **SKILL.md** (instructions) + **scripts/** (executable code) + **knowledge/** (reference context).\n",[],[44,213,206],"hello-world","df8f7801-2e1a-41e1-b969-7467dee93cdf","greet.ts","b65c70c8-6105-11f1-a922-1607ee4eb77e","fa7f7e62-fdc8-46c1-b231-794275a22bf7",["D",1780681258732],"// greet.ts — the simplest possible skill script.\n// Usage: deno run greet.ts [name]\n\nconst name = Deno.args[0] || \"World\";\nconst now = new Date().toLocaleString();\n\nconsole.log(`Hello, ${name}!`);\nconsole.log(`The time is ${now}.`);\n",[],[44,213,222,215],"scripts","07de9cc3-b2ee-4c3a-ba0f-4730ec0a9323",["D",1780681258732],[198],[44,213,222],"b2857009-adac-4f3d-80ad-ca034b314954","about-skills.md","bc9d92e6-6105-11f1-a580-1607ee4eb77e","5d85f0cd-9629-49c2-b34f-3f599ea6ca7a",5,["D",1780681269222],"# About Skills\n\nA **skill** is a reusable set of instructions and tools that an AI agent can follow to accomplish a specific task. Think of it as a runbook + toolkit.\n\n## The folder convention\n\n```\nskills//\n├── SKILL.md ← entry point: what to do, step by step\n├── scripts/ ← code the agent runs on the user's machine\n│ └── *.ts\n└── knowledge/ ← reference docs the agent reads for context\n └── *.md\n```\n\n## How an agent consumes a skill\n\n1. **Read SKILL.md** — this is the orchestration document. It tells the agent what to do in what order.\n2. **Read knowledge/ files** — these provide context: scoring rubrics, API schemas, checklists, templates. They stay in the agent's context window; they don't get written to disk.\n3. **Write scripts/ to disk** — scripts need to run locally because they interact with the filesystem, environment variables, and external services. The agent reads them from the val via MCP and writes them to the working directory.\n4. **Execute the flow** — follow the steps in SKILL.md, using the scripts and knowledge as needed.\n\n## Why Val Town?\n\nVal Town projects are the perfect host for skill libraries because:\n\n- **Always online** — skills are available via the Val Town MCP from any machine\n- **Versioned** — every file change is tracked; you can see what changed when\n- **Collaborative** — multiple team members can edit skills via the web editor or `vt` CLI\n- **Web UI included** — the `http.tsx` handler gives you a browsable skill catalog for free\n- **Copy-friendly** — the \"Copy Skill\" button bundles the instructions with a pointer back to the val, so the AI always knows where to find the scripts\n",[],[44,213,236,228],"knowledge","c6533f1d-66e4-4232-9a33-5f6c52705e66",["D",1780681269222],[196],[44,213,236],"859c656d-89f0-4a2a-9e1d-e6e59c9d15c9",["D",1780681256307],[195,197,199],[44,213],"e93ee4c9-e674-4dc9-a212-b8b113f4d8db","c3a32650-6105-11f1-8910-1607ee4eb77e","3d7de150-7283-4a84-bcca-648b1a8833e7",6,["D",1780681280993],"# Code Reviewer\n\nReview a diff for correctness bugs, security issues, and style problems. Produce a structured report.\n\n## Before you start\n\nRead `knowledge/review-checklist.md` for the full checklist of what to look for.\n\n## The flow\n\n### Step 1: Get the diff\n\nAsk the user for the diff to review, or get it from the current git state:\n\n```bash\ngit diff main...HEAD\n```\n\n### Step 2: First pass — correctness\n\nRead the diff line by line. For each changed file, check:\n- Does the logic do what the commit message claims?\n- Are there off-by-one errors, null checks missing, or race conditions?\n- Are error cases handled?\n- Do new functions have sensible return types?\n\n### Step 3: Second pass — security\n\nScan for:\n- Hardcoded secrets or API keys\n- SQL injection (string concatenation in queries)\n- XSS (unescaped user input in HTML)\n- Path traversal (`..` in file paths)\n- Exposed internal errors in user-facing responses\n\n### Step 4: Third pass — style\n\nCheck against the project's conventions:\n- Naming consistency\n- Import ordering\n- Dead code or commented-out blocks\n- Missing TypeScript types\n\n### Step 5: Write the report\n\nFormat the output as:\n\n```\n## Review Summary\n\n**Files reviewed:** N\n**Issues found:** N (X critical, Y warning, Z style)\n\n### Critical\n- [file:line] Description of the issue\n\n### Warning\n- [file:line] Description\n\n### Style\n- [file:line] Description\n\n### Looks Good\n- Things that were done well (always include at least one)\n```\n\n## Rules\n\n- Be specific: cite the file and line number for every finding.\n- Be constructive: suggest a fix, not just \"this is wrong.\"\n- Be honest: if the code looks good, say so. Don't invent problems.\n- Prioritize: correctness > security > style.\n",[],[44,253,206],"code-reviewer","a82bf3cb-20f0-4b00-8f1b-3abaec02c8b8","review-checklist.md","cac0da86-6105-11f1-a157-1607ee4eb77e","7edfe530-d3b1-4dea-8438-81227359a187",7,["D",1780681292941],"# Review Checklist\n\nUse this as a reference during code review. Not every item applies to every diff — use judgment.\n\n## Correctness\n\n- [ ] Logic matches the stated intent (commit message, PR description)\n- [ ] Edge cases handled (empty arrays, null values, zero-length strings)\n- [ ] Error paths don't silently swallow exceptions\n- [ ] Async/await used correctly (no floating promises)\n- [ ] State mutations are intentional and visible\n- [ ] Database queries have appropriate WHERE clauses (no unbounded reads)\n- [ ] New dependencies are justified and from trusted sources\n\n## Security\n\n- [ ] No hardcoded secrets, API keys, or tokens\n- [ ] User input is validated/sanitized before use\n- [ ] SQL queries use parameterized values, not string concatenation\n- [ ] HTML output escapes user-provided content\n- [ ] File paths are validated (no path traversal via `..`)\n- [ ] Authentication/authorization checks present on new endpoints\n- [ ] CORS headers are intentionally permissive (if `*`, is that right?)\n- [ ] Error messages don't leak internal details to users\n\n## Performance\n\n- [ ] No N+1 query patterns (query in a loop)\n- [ ] Large datasets paginated or limited\n- [ ] Expensive operations not repeated unnecessarily\n- [ ] Caching used where appropriate (and invalidated correctly)\n\n## Style\n\n- [ ] Naming is consistent with the rest of the codebase\n- [ ] No dead code or commented-out blocks\n- [ ] Imports are organized (standard lib, external, internal)\n- [ ] TypeScript types are present (no unnecessary `any`)\n- [ ] Functions are reasonably sized (< 50 lines as a guideline)\n- [ ] Comments explain \"why,\" not \"what\"\n\n## Testing\n\n- [ ] New code has tests (or a justification for not testing)\n- [ ] Tests cover the happy path and at least one error case\n- [ ] Test names describe the expected behavior\n- [ ] No flaky test patterns (timing-dependent, order-dependent)\n",[],[44,253,236,255],"0eba1428-7781-4285-b456-395745e028c5",["D",1780681292941],[192],[44,253,236],"03b9ac78-5a70-4a7b-a168-6eceeadcea12",["D",1780681280993],[191,193],[44,253],["D",1780681256307],[190,194],[44],"364baa64-94a1-48f4-aeb0-b65200050856","skills.ts","22d0ab48-611a-11f1-8ee2-1607ee4eb77e",["D",1780690030621],"// Skill manifest, file helpers, and the copy-payload builder.\n// The skills// folder structure (SKILL.md + scripts/ + knowledge/) is the\n// source of truth; this manifest just indexes it for the UI.\n//\n// This is a generic template — fork the val and edit SKILLS below to point at\n// your own skill folders.\n\nimport { readFile } from \"https://esm.town/v/std/utils@85-main/index.ts\";\n\n// Set this to \"/\" after forking so the Copy-skill payload\n// tells agents where to read the rest of each skill's files.\nexport const VAL_ID = \"dcm31/skills\";\n\nexport type Skill = {\n slug: string;\n name: string;\n description: string;\n category: string;\n files: string[];\n // Optional path (under skills//) to an HTML fragment rendered as a live\n // preview on the skill page and served standalone at /skills//example.\n example?: string;\n};\n\nexport const SKILLS: Skill[] = [\n {\n slug: \"hello-world\",\n name: \"Hello World\",\n description:\n \"The simplest possible skill — a greeting script and one knowledge file. Start here to learn the SKILL.md + scripts/ + knowledge/ folder convention.\",\n category: \"Getting Started\",\n files: [\"SKILL.md\", \"scripts/greet.ts\", \"knowledge/about-skills.md\"],\n },\n {\n slug: \"code-reviewer\",\n name: \"Code Reviewer\",\n description:\n \"Reviews a diff for correctness bugs, security issues, and style problems. Demonstrates a multi-step flow backed by a knowledge file.\",\n category: \"Engineering\",\n files: [\"SKILL.md\", \"knowledge/review-checklist.md\"],\n },\n {\n slug: \"ui-example\",\n name: \"UI Example\",\n description:\n \"Shows off the live-example feature: a skill that ships an HTML fragment, rendered inline on this page and standalone. Read it to learn how examples work.\",\n category: \"Reference\",\n files: [\"SKILL.md\", \"examples/showcase.html\"],\n example: \"examples/showcase.html\",\n },\n];\n\nexport function findSkill(slug: string): Skill | undefined {\n return SKILLS.find((s) => s.slug === slug);\n}\n\nexport async function readSkillFile(\n slug: string,\n path: string,\n): Promise {\n try {\n const content = await readFile(`/skills/${slug}/${path}`, import.meta.url);\n return typeof content === \"string\" ? content : null;\n } catch {\n return null;\n }\n}\n\n// Escape text for safe injection into a dangerouslySetInnerHTML code block.\nexport function esc(s: string): string {\n return s.replace(/&/g, \"&\").replace(//g, \">\")\n .replace(/\"/g, \""\");\n}\n\n// The clipboard payload: SKILL.md plus a header telling an agent where to read\n// the rest of the skill's files via the Val Town MCP.\nexport function buildCopyPayload(skill: Skill, raw: string): string {\n return `# ${skill.name}\n# Source: ${VAL_ID} → skills/${skill.slug}/\n#\n# To use this skill, read its remaining files from this val via the Val Town MCP:\n# val: ${VAL_ID}\n# path: skills/${skill.slug}/\n# then follow the flow described below.\n#\n# Files in this skill:\n${skill.files.map((f) => `# ${f}`).join(\"\\n\")}\n\n${raw}`;\n}\n\n// Parse standard SKILL.md YAML frontmatter (name / description / triggers) and\n// return the parsed fields plus the body with the frontmatter block removed.\nexport type Frontmatter = {\n name?: string;\n description?: string;\n triggers?: string[];\n};\n\nexport function parseFrontmatter(\n raw: string,\n): { data: Frontmatter; body: string } {\n const m = raw.match(/^---\\r?\\n([\\s\\S]*?)\\r?\\n---\\r?\\n?/);\n if (!m) return { data: {}, body: raw };\n const data: Record = {};\n let key: string | null = null;\n for (const line of m[1].split(/\\r?\\n/)) {\n const kv = line.match(/^([A-Za-z0-9_-]+):\\s*(.*)$/);\n const item = line.match(/^\\s+-\\s+(.*)$/);\n if (kv) {\n key = kv[1];\n const v = kv[2].trim().replace(/^[\"']|[\"']$/g, \"\");\n data[key] = v === \"\" ? [] : v;\n } else if (item && key) {\n if (!Array.isArray(data[key])) data[key] = [];\n (data[key] as string[]).push(item[1].trim().replace(/^[\"']|[\"']$/g, \"\"));\n }\n }\n return { data: data as Frontmatter, body: raw.slice(m[0].length) };\n}\n\n// Group a flat file list into root files + subdirectories for the sidebar tree.\nexport type FileGroups = {\n root: string[];\n dirs: { dir: string; files: string[] }[];\n};\n\nexport function groupFiles(files: string[]): FileGroups {\n const root: string[] = [];\n const dirMap: Record = {};\n for (const f of files) {\n const parts = f.split(\"/\");\n if (parts.length === 1) root.push(f);\n else {\n const dir = parts.slice(0, -1).join(\"/\");\n (dirMap[dir] ??= []).push(parts[parts.length - 1]);\n }\n }\n return {\n root,\n dirs: Object.entries(dirMap).map(([dir, files]) => ({ dir, files })),\n };\n}\n",[],[150,275],["D",1780690030621],[188],[150],"7d25b0aa-7cad-4236-9302-f9ff9b37a76c","client.js","2474529c-611a-11f1-a9c5-1607ee4eb77e",["D",1780690033369],"// Client-side behaviour, served at /client.js as a module script.\n// Clipboard wiring for [data-copy] buttons: copy the payload, then briefly flash\n// \"Copied!\" on the button's .label span (falling back to the button itself).\n\nfunction flash(el) {\n const orig = el.textContent;\n el.textContent = \"Copied!\";\n setTimeout(() => {\n el.textContent = orig;\n }, 1600);\n}\n\ndocument.querySelectorAll(\"[data-copy]\").forEach((btn) => {\n btn.addEventListener(\"click\", () => {\n navigator.clipboard.writeText(btn.dataset.copy).then(() => {\n flash(btn.querySelector(\".label\") || btn);\n });\n });\n});\n",[],[156,285],["D",1780690033369],[186],[156],"e266e0d6-4c45-4806-8911-1e307a39412a","SkillDetail.tsx","448cb48e-611a-11f1-bb8a-1607ee4eb77e",14,["D",1780690087124],"/** @jsxImportSource npm:hono@4/jsx */\nimport { type Skill } from \"../lib/skills.ts\";\nimport { Button } from \"./Button.tsx\";\nimport { FileTree } from \"./FileTree.tsx\";\n\nexport const SkillDetail = (props: {\n skill: Skill;\n html: string;\n payload: string;\n exampleHtml?: string;\n triggers?: string[];\n}) => (\n <>\n \n ← Back to skills\n \n {/* Header: title block on the left, the one primary (sky) action top-right. */}\n

{props.skill.category}

{props.skill.name}

{props.skill.description}

\n {/* triggers from SKILL.md frontmatter — the \"when to invoke\" hints */}\n {props.triggers?.length\n ? (\n

\n {props.triggers.map((t) => (\n \n {t}\n \n ))}\n

\n )\n : null}\n

\n {/* Live example preview — only for skills that ship an examples/ fragment. */}\n {props.exampleHtml\n ? (\n

Examples

\n \n Open standalone ↗\n \n

\n \n

\n )\n : null}\n

\n \n

\n \n);\n",[],[162,295],"91d32a97-7855-478f-bb9b-30df8b450883","Layout.tsx","3035edc0-611a-11f1-ac10-1607ee4eb77e",["D",1780690053093],"/** @jsxImportSource npm:hono@4/jsx */\nimport { raw } from \"npm:hono@4/html\";\n\n// Val Town product style: IBM Plex Sans body, iA Writer Quattro for the small\n// uppercase micro-labels (.eyebrow), slate + sky palette. The scoped block also\n// styles marked's rendered HTML, which can't carry Twind utility classes.\nconst CONTENT_CSS = `\n@font-face{\n font-family:\"iA Writer Quattro\";\n src:url(\"https://cdn.jsdelivr.net/gh/iaolo/iA-Fonts/iA%20Writer%20Quattro/Webfonts/iAWriterQuattroS-Bold.woff2\") format(\"woff2\");\n font-weight:700;font-style:normal;font-display:swap;\n}\nbody{font-family:\"IBM Plex Sans\",-apple-system,BlinkMacSystemFont,\"Segoe UI\",sans-serif}\n.eyebrow{font-family:\"iA Writer Quattro\",ui-monospace,SFMono-Regular,Menlo,monospace;font-size:10px;font-weight:700;letter-spacing:1px;text-transform:uppercase;color:#64748b}\n.md{margin-bottom:32px}\n.md h1,.md h2,.md h3,.md h4{margin-top:32px;margin-bottom:8px;font-weight:700}\n.md h1{font-size:24px}.md h2{font-size:20px}.md h3{font-size:16px}\n.md p{margin-bottom:16px}\n.md ul,.md ol{margin:8px 0 16px 24px}\n.md ul{list-style:disc}.md ol{list-style:decimal}\n.md li{margin-bottom:4px}\n.md pre{background:#f1f5f9;padding:16px;border-radius:8px;overflow-x:auto;font-size:13px;line-height:1.5;margin:8px 0 16px}\n.md code{background:#f1f5f9;padding:2px 6px;border-radius:6px;font-size:13px;font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,monospace}\n.md pre code{background:none;padding:0}\n.md table{border-collapse:collapse;width:100%;margin:8px 0 16px}\n.md th,.md td{border:1px solid #e2e8f0;padding:8px 12px;text-align:left;font-size:14px}\n.md th{background:#f8fafc;font-weight:600}\n.md blockquote{border-left:3px solid #e2e8f0;padding:8px 16px;margin:8px 0 16px;color:#334155}\n.md hr{border:none;border-top:1px solid #e2e8f0;margin:32px 0}\n.md strong{font-weight:600}\n.md a{color:#0369a1;text-decoration:underline;text-underline-offset:2px}\n.file-view pre{background:#f1f5f9;padding:16px;border-radius:8px;overflow-x:auto;font-size:13px;line-height:1.6;font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,monospace}\n`;\n\nexport const Layout = (props: {\n title: string;\n children?: unknown;\n client?: boolean;\n}) => (\n <>\n {raw(\"\")}\n \n \n \n \n {props.title}\n \n \n \n \n \n

Diff · v15