\n {skill.name} — examples\n

\n ,\n );\n});\n\napp.get(\"/skills/:slug/files/*\", async (c) => {\n const skill = findSkill(c.req.param(\"slug\"));\n if (!skill) return c.notFound();\n const path = c.req.path.replace(`/skills/${skill.slug}/files/`, \"\");\n if (!skill.files.includes(path)) return c.notFound();\n const content = await readSkillFile(skill.slug, path);\n if (content === null) return c.notFound();\n const isMarkdown = path.endsWith(\".md\");\n const rendered = isMarkdown\n ? await marked.parse(parseFrontmatter(content).body)\n : `

${esc(content)}

`;\n return c.html(\n \n \n ,\n );\n});\n\nexport default app.fetch;\n",[159],"d4054666-4519-420d-b205-8f5f8a16550e","README.md","6f71b83e-611a-11f1-b6b7-1607ee4eb77e",62,["D",1780945850578],6,"# Skill Library (template)\n\nA public, forkable template for a shared **agent skill library**. It lists\nreusable agent skills, renders each one's `SKILL.md`, and gives you a one-click\n**Copy skill** button that puts a ready-to-run payload on your clipboard.\n\nStyled with plain defaults — system font, a neutral palette, one blue accent —\nand Twind (Tailwind utilities applied at runtime, no build step).\n\n🔗 **Live:** https://dcm31--92861134610211f1a0c51607ee4eb77e.web.val.run\n\n## Remix it\n\n1. Remix this val.\n2. Set `VAL_ID` in `lib/skills.ts` to your `/` (it's baked into the\n copy payload so agents know where to read each skill's files).\n3. Replace the `skills/` folders and the `SKILLS` manifest with your own.\n\nThere's no auth — the template is fully public. (Add a gate in `http.tsx` if you\nwant one.)\n\n## Architecture\n\nServer-rendered Hono app using **Hono JSX** components and **Twind** (Tailwind\nutilities at runtime, no build step). Each request renders a component tree;\nthere is no client-side framework — the only browser JS is the clipboard wiring\nin `frontend/client.js`, served at `/client.js`.\n\n```\nhttp.tsx # thin orchestrator: routes only\nlib/\n skills.ts # SKILLS manifest, file helpers, copy-payload, frontmatter parse\ncomponents/\n Layout.tsx # HTML shell: Twind, system font, markdown CSS\n Home.tsx # skill grid\n SkillDetail.tsx # rendered SKILL.md + copy button + live example + file tree\n FileView.tsx # raw file viewer\n FileTree.tsx # sidebar file tree\nfrontend/\n client.js # clipboard wiring for [data-copy] buttons (served at /client.js)\nskills/\n /\n SKILL.md # entry point — what the skill does + the flow\n scripts/ # runnable code the agent writes locally\n knowledge/ # reference docs the agent reads\n assets/ # optional — HTML fragment shown live on the skill page\n```\n\nThe folder names (`scripts/`, `knowledge/`/`references/`, `assets/`) follow the\nstandard Agent-Skills layout, so the skills validate and stay discoverable by\nagents reading them outside this app.\n\n## Examples (optional, per-skill)\n\nA skill can ship a live preview: drop an HTML fragment in the skill's standard\n`assets/` directory (e.g. `assets/showcase.html`) and list it in the manifest's\n`files`. The app renders the first `assets/*.html` it finds as an **Examples**\npanel on the skill page, and serves it standalone (and embeddable) at\n`/skills//example`. **Reference the file from the skill's `SKILL.md`** (a\nMarkdown link) so agents using the standard skill structure discover it too. The\n**ui-example** skill ships one and explains the feature.\n\n## Routes\n\n| Route | Purpose |\n| --- | --- |\n| `/` | Home — grid of skill cards |\n| `/skills/:slug` | Skill detail — rendered `SKILL.md` + Copy skill button + file tree |\n| `/skills/:slug/example` | Standalone live example (skills with an `assets/*.html` fragment) |\n| `/skills/:slug/files/*` | Raw file viewer for any file in a skill |\n| `/client.js` | Clipboard wiring, served as a module |\n| `/source` | Redirects to this val's source |\n\n## Adding a skill\n\n1. Create `skills//SKILL.md` plus any `scripts/`, `knowledge/`, or\n `assets/` files.\n2. Add an entry to the `SKILLS` array in `lib/skills.ts` — `slug`, `name`,\n `description`, `category`, and the full `files` list.\n\n## Conventions\n\nHono JSX in `.tsx` files (no template-string HTML), Twind/Tailwind styling, a\n`/source` view-source link, and `app.onError` for full stack traces. The one\nscoped `

Diff · v63