Tool Name

` with `

` and `

`\n- **Accordion** — `

` + `

` (Pico styles it natively)\n- **Loading** — `aria-busy=\"true\"` on any element\n- **Buttons** — `.secondary`, `.contrast`, `.outline` variants\n- **Button groups** — `role=\"group\"` wrapper, `aria-current=\"true\"` for active\n- **Tooltips** — `data-tooltip=\"text\"` on any element, pure CSS\n- **Validation** — `aria-invalid=\"true|false\"` on inputs, `` helper text inherits color\n- **Switch toggle** — ``\n- **Dropdown** — `

` + `

` with `

` + `

`, `.modal-is-open` on ``\n- **Progress** — `` for determinate, `` for spinner\n- **Grid** — `.grid` for auto-layout equal columns\n- **Tables** — wrap in `

` for mobile\n- **Typography** — ``, ``, ``, ``, blockquotes all styled\n\n## Footer\n\n```html\n\n kamalnrf · source\n \n```\n\n## Common Mistakes\n\n1. **Writing custom `` CSS** — Pico already styles it as an accordion\n2. **Not using ``** — more semantic than `` for form inputs\n3. **Missing ``** — needed for scrollbars and native controls to respect dark mode\n4. **Custom disabled button styles** — Pico handles `disabled` natively\n5. **Not using `data-tooltip`** — free styled tooltips, better than `title` attributes\n6. **Custom error colors** — use `var(--pico-del-color)` for error text\n7. **Custom footer borders** — only add border-top inside ``, not ``\n8. **Missing `.overflow-auto`** — tables without this wrapper break on mobile\n9. **Custom toggle switches** — use ``\n10. **Custom dropdown menus** — use `` instead\n11. **Not using ``** — `` gives an indeterminate spinner for free\n12. **Custom nav layout** — `` with `` auto-distributes horizontally\n",[],[199,207],[199],{"_108":215,"_99":216,"_165":217,"_167":-5,"_168":150,"_169":218,"_171":22,"_110":219,"_104":33,"_173":191,"_175":220,"_176":22,"_177":-5,"_178":221,"_102":222},"a27b3552-30cd-11f1-b8ec-42dde27851f2","README.md","a27b3610-30cd-11f1-b8ec-42dde27851f2",10,["D",1775379517754],"# Val Tool Playground Skill\n\nAn agent skill for building developer tools and playgrounds on Val Town. Provides opinionated patterns for creating single-purpose utilities that serve both a human UI and a programmatic API from one HTTP endpoint.\n\n## Install\n\n### Claude Code\n\n```bash\nclaude skill install https://val-tool-playground-skill.val.run/.well-known/skills/val-tool-playground/SKILL.md\n```\n\n### Agent Discovery (RFC)\n\nThis skill implements the [Agent Skills Discovery RFC](https://github.com/cloudflare/agent-skills-discovery-rfc) via well-known URIs.\n\n```\nGET https://val-tool-playground-skill.val.run/.well-known/skills/index.json\n```\n\nAgents can discover and fetch the skill automatically:\n\n```\nGET /.well-known/skills/index.json → skill index\nGET /.well-known/skills/val-tool-playground/SKILL.md → skill instructions\nGET /.well-known/skills/val-tool-playground/references/pico-ui-patterns.md → UI patterns reference\n```\n\n### Manual\n\nCopy `SKILL.md` and `references/pico-ui-patterns.md` into your agent's skill directory.\n\n## What's in the box\n\n- **SKILL.md** — Philosophy (composability, URL-as-interface, raw output, one concern per tool), architecture (dual-mode HTTP handler), visual anatomy, API design, Val Town conventions\n- **references/pico-ui-patterns.md** — Pico CSS v2 base template, tab/input/output patterns, native component catalog, common mistakes\n\n## Philosophy (tl;dr)\n\nEvery tool is a URL. The UI is a convenience layer. The API is the product.\n",[],[216],{"_108":224,"_99":225,"_165":226,"_167":-5,"_168":150,"_169":227,"_171":22,"_110":228,"_104":229,"_173":191,"_175":230,"_176":22,"_177":-5,"_178":231,"_102":232},"83b4f860-30cd-11f1-bf49-42dde27851f2","SKILL.md","3f8ec1d2-30ca-11f1-aec7-42dde27851f2",8,["D",1775379466115],6,"---\nname: val-tool-playground\ndescription: Build developer tools and playgrounds on Val Town — single-purpose utilities that serve both a human UI and a programmatic API from one endpoint. Use this skill whenever creating tool vals, utility vals, playground vals, or any Val Town HTTP val that does one thing well with a web UI and composable API. Trigger when the user says \"create a tool\", \"build a playground\", \"make a utility\", or wants a quick web tool for inspecting, decoding, parsing, looking up, generating, or exploring something.\n---\n\n# Val Tool Playground\n\nA skill for building developer tools and playgrounds on Val Town. These are single-purpose utilities designed around one core principle: **every tool is both a UI and an API**.\n\nThink: JWT decoders, DNS lookup tools, HTTP header inspectors, cron expression testers, hash/encode utilities, QR generators, web content extractors, OG tag previewers, sitemap validators, user-agent parsers, regex playgrounds, color pickers, API response explorers, CSS animation playgrounds, diff viewers.\n\n## Philosophy\n\n### Every tool is a URL\n\nThe most useful developer tools are the ones you can compose. A tool that only works through a web form is a dead end. A tool that returns structured output from a URL is a building block.\n\nDesign every tool so that:\n- A human can open it in a browser and use it interactively\n- A script can `curl` it and pipe the output somewhere\n- An LLM can fetch it as context for a prompt\n- Another tool can call it as a dependency\n\nThis last point is increasingly important. Tools should be **agent-friendly** — their output should be parseable and useful when an LLM fetches the URL directly. Think of every tool as a potential node in an agentic workflow.\n\n### URL as interface\n\nWhen the tool processes a URL as input, make it a path parameter:\n\n```\nhttps://your-tool.val.run/https://example.com/article\n```\n\nThis is more composable than query params because you can construct it by concatenation. Query params are for modifiers and flags (`?json=1`, `?selector=.content`), not primary input.\n\nFor tools with non-URL input (text, tokens, expressions), use query params or POST with a JSON body — whatever maps most naturally to how the tool would be called programmatically.\n\n### Raw output by default\n\nThe API endpoint should return the most useful raw format — plain text, markdown, CSV — not JSON. JSON is for metadata.\n\nWhy: A tool that returns markdown can be piped directly into an LLM context window. A tool that returns JSON requires parsing first. Optimize for the common case.\n\nProvide `?json=1` for when callers need structured metadata alongside the content.\n\n### One concern per tool\n\nEach val does one thing. Don't build a Swiss Army knife. Build a screwdriver that works perfectly and can be composed with other screwdrivers.\n\nComposition happens at the URL level: chain tools together by passing one tool's output URL to another. This only works if each tool has a clear, singular purpose.\n\n## Architecture\n\n### Dual-mode HTTP handler\n\nEvery tool val serves from a single HTTP endpoint with routing based on the request:\n\n```\nGET / → HTML page (the playground UI)\nGET /path-or-params → raw output (the API)\nGET /path-or-params?json=1 → structured JSON with metadata\nPOST / with JSON body → process input and return JSON\n```\n\nThe UI is a convenience layer. The API is the product.\n\n### Handler structure\n\n```typescript\nexport default async function (req: Request): Promise {\n const url = new URL(req.url);\n\n // 1. Handle OPTIONS for CORS preflight\n // 2. Handle POST (for paste/upload input)\n // 3. Check for target input in path or query params\n // → Return raw output or JSON based on ?json param\n // 4. Fall through to HTML UI\n}\n```\n\n### File structure\n\n**Simple tools** (single concern, short HTML):\n```\nmain.ts # HTTP handler + inline HTML renderer\nREADME.md\n```\n\n**Complex tools** (multiple features, rich UI):\n```\nmain.ts # HTTP handler (routing only)\nlib/\n renderer.ts # HTML page generation\n parser.ts # Core logic\n types.ts # TypeScript interfaces\nREADME.md\n```\n\nKeep `main.ts` thin — just routing. Push logic into `lib/`.\n\n## API Design\n\n### CORS\n\nAlways add CORS headers on API responses so tools are callable from anywhere:\n\n```typescript\nconst cors = {\n \"Access-Control-Allow-Origin\": \"*\",\n \"Access-Control-Allow-Methods\": \"GET, POST, OPTIONS\",\n \"Access-Control-Allow-Headers\": \"Content-Type\",\n};\n```\n\n### Error handling\n\nReturn proper HTTP status codes with error messages in both modes:\n\n```typescript\n// API consumers get JSON errors\nif (wantJson) return Response.json({ error: e.message }, { status: 502, headers: cors });\n// Raw consumers get plain text errors\nreturn new Response(`Error: ${e.message}`, { status: 502, headers: cors });\n```\n\nIn the UI, show errors inline — never use `alert()`.\n\n## UI Principles\n\nWe use **Pico CSS v2** as the styling foundation. It provides semantic HTML styling with zero classes, system theme support, and consistent form/button/card components.\n\n**Core rules:**\n- System theme only — never force light or dark\n- No external images or favicons — use emoji or inline SVG\n- Vanilla HTML/CSS/JS — no frameworks for tools\n- Prefer Pico's native components over custom CSS (accordions, tooltips, buttons, switches, dropdowns are all built in)\n- Use ARIA attributes for state (`aria-busy` for loading, `aria-invalid` for validation, `aria-selected` for tabs)\n- No Hono — raw Request/Response is sufficient for tool vals\n\nFor the base HTML template, component patterns, tabs implementation, and the full list of native Pico components, see `references/pico-ui-patterns.md`.\n\n### Visual anatomy\n\nEvery tool follows this layout skeleton:\n\n```\n┌─────────────────────────────────┐\n│ 📄 Tool Name │ ← emoji h1\n│ One-line description + links │ ← subtitle (hgroup or p)\n├─────────────────────────────────┤\n│ [Tab A] [Tab B] │ ← optional: when tool has multiple modes\n├─────────────────────────────────┤\n│ [input...............] [Action] │ ← fieldset role=\"group\"\n│ ▸ Advanced options │ ← optional: for extra params\n├─────────────────────────────────┤\n│ Title: X · Words: N · 42ms │ ← optional: metadata bar (.meta)\n│ ┌───────────────────────[Copy] │\n│ │ output content │ ← pre.result with copy button overlay\n│ │ ... │\n│ └───────────────────────────── │\n├─────────────────────────────────┤\n│ API docs / proxy hint │ ← optional: inline API reference\n├─────────────────────────────────┤\n│ author · source │ ← footer with links\n└─────────────────────────────────┘\n```\n\n**Always present:**\n- `` at 800–900px max-width\n- Emoji `` + descriptive subtitle\n- Primary input via `` (input + action button)\n- Results container (dynamically rendered)\n- Footer with author link\n\n**Added based on complexity:**\n- **Tabs** — when the tool has multiple input modes (e.g., decode vs encode, URL vs paste HTML)\n- **`` for advanced options** — content selectors, extra flags, format choices\n- **Metadata bar** — flex row of extracted stats (title, word count, timing, etc.)\n- **Copy button** — absolute-positioned over output `` block\n- **API hint section** — inline docs showing the proxy URL pattern and params\n\n## Val Town Conventions\n\n### Imports\n\nPin npm versions. Use `npm:` prefix. Fall back to `https://esm.sh/` if sandboxed:\n\n```typescript\nimport { Window } from \"npm:happy-dom@17.4.4\";\n```\n\n### Handler signature\n\n```typescript\nexport default async function (req: Request): Promise { ... }\n```\n\n### Constraints\n\n- No filesystem (`fs`, `Deno.readFile`) — use SQLite/blob for persistence\n- No subprocess (`Deno.Command`, `child_process`)\n- 30s execution timeout\n- Don't use `Response.redirect` — broken on Val Town\n\n## README\n\nKeep brief. Lead with the API — the UI is self-explanatory:\n\n```markdown\n# Tool Name\n\nOne-line description.\n\n**Live:** https://tool.val.run\n\n## API\n\n\\`\\`\\`\nhttps://tool.val.run/https://example.com\n\\`\\`\\`\n\n### Options\n| Param | Description |\n|-------|-------------|\n| `?json=1` | Full JSON with metadata |\n\n## Limitations\n- Known constraints\n```\n\n## Naming\n\n- Val name: kebab-case (`jwt-decoder`, `dns-lookup`)\n- Description: terse, starts with verb or noun\n- Emoji in H1 only, not in val name or description\n\n## Anti-Patterns\n\n- Don't forget the API — every tool must work without the UI\n- Don't over-abstract — single `main.ts` is fine for simple tools\n- Don't force a color theme — respect system preference\n- Don't reach for frameworks — if you need React, it's probably not a tool val\n- Don't build multi-purpose tools — split concerns into separate vals that compose\n",[],[225],{"_108":234,"_99":235,"_165":236,"_167":-5,"_168":150,"_169":105,"_171":22,"_110":237,"_104":238,"_173":239,"_175":240,"_176":22,"_177":100,"_178":241,"_102":242},"97101ab0-30ce-11f1-b5cc-42dde27851f2","main.ts","9b90f650-30cd-11f1-af5d-42dde27851f2",["D",1775379928048],2,"http","import { serveFile, listFiles } from \"https://esm.town/v/std/utils/index.ts\";\n\nconst SKILL_NAME = \"val-tool-playground\";\nconst SKILL_DESCRIPTION =\n \"Build developer tools and playgrounds on Val Town — single-purpose utilities that serve both a human UI and a programmatic API from one endpoint.\";\n\n// Files that are NOT part of the skill distribution\nconst IGNORED_FILES = new Set([\"main.ts\", \"README.md\"]);\nconst IGNORED_PREFIXES = [\".well-known/\"];\n\nasync function getSkillFiles(): Promise {\n const allFiles = await listFiles();\n return allFiles\n .filter((f) => f.type === \"file\")\n .map((f) => f.path.replace(/^\\//, \"\"))\n .filter((p) => !IGNORED_FILES.has(p) && !IGNORED_PREFIXES.some((pre) => p.startsWith(pre)));\n}\n\nconst cors = {\n \"Access-Control-Allow-Origin\": \"*\",\n \"Access-Control-Allow-Methods\": \"GET, OPTIONS\",\n \"Access-Control-Allow-Headers\": \"Content-Type\",\n};\n\nexport default async function(req: Request): Promise {\n const url = new URL(req.url);\n const path = url.pathname;\n\n if (req.method === \"OPTIONS\") {\n return new Response(null, { headers: cors });\n }\n\n // Well-known index — built dynamically from val files\n if (path === \"/.well-known/skills/index.json\") {\n const files = await getSkillFiles();\n const index = {\n skills: [{\n name: SKILL_NAME,\n description: SKILL_DESCRIPTION,\n files,\n }],\n };\n return Response.json(index, { headers: { ...cors, \"Cache-Control\": \"public, max-age=3600\" } });\n }\n\n // Serve skill files: /.well-known/skills/val-tool-playground/{file}\n const prefix = `/.well-known/skills/${SKILL_NAME}/`;\n if (path.startsWith(prefix)) {\n const filePath = path.slice(prefix.length);\n const skillFiles = await getSkillFiles();\n if (!skillFiles.includes(filePath)) {\n return Response.json({ error: \"File not found\" }, { status: 404, headers: cors });\n }\n\n try {\n const response = await serveFile(`/${filePath}`);\n const headers = new Headers(response.headers);\n Object.entries(cors).forEach(([k, v]) => headers.set(k, v));\n headers.set(\"Cache-Control\", \"public, max-age=3600\");\n return new Response(response.body, { status: response.status, headers });\n } catch (e: any) {\n return Response.json({ error: e.message }, { status: 502, headers: cors });\n }\n }\n\n // Root: show info\n if (path === \"/\" || path === \"\") {\n const files = await getSkillFiles();\n return new Response(renderInfo(files), {\n headers: { \"Content-Type\": \"text/html; charset=utf-8\" },\n });\n }\n\n return Response.json({ error: \"Not found\" }, { status: 404, headers: cors });\n}\n\nfunction renderInfo(files: string[]): string {\n const endpoint = \"https://val-tool-playground-skill.val.run\";\n const fileLinks = files\n .map((f) => `${f} `)\n .join(\"\\n \");\n\n return `\n\n\n \n \n \n Val Tool Playground Skill\n \n \n\n\n \n \n 🛠️ Val Tool Playground \n An agent skill for building developer tools and playgrounds on Val Town. \n \n\n Discovery \n This skill is discoverable via the Agent Skills Discovery RFC. \n GET ${endpoint}/.well-known/skills/index.json \n\n Files \n \n ${fileLinks}\n \n\n \n source ·\n RFC\n \n \n\n`;\n}\n",[],[235],"files",[162,180,186,197,205,214,223,233],"counts",{"_247":33,"_248":249,"_250":33,"_251":252,"_255":256},"pulls","branches",1,"forks","envVars",{"_253":33,"_254":33},"count","emptyCount","connections",{"_253":33,"_257":33},"unfilledCount","contents",[260],{"_108":187,"_99":188,"_165":189,"_167":183,"_168":150,"_169":170,"_171":22,"_110":261,"_104":33,"_173":191,"_175":192,"_176":22,"_177":-5,"_102":262},["D",1775379691306],[164,182,188],{"_108":181,"_99":182,"_165":183,"_167":166,"_168":150,"_169":170,"_171":22,"_110":264,"_104":33,"_173":174,"_175":-5,"_176":22,"_177":-5,"_102":265},["D",1775379691306],[164,182],"upstreamProject","upstreamBranch","emptyEnvVars","isNew","flags",[],"routes/_app.x.$handle.$name.branch.$branch.version.$version.code.$",{"_97":98,"_99":100,"_101":45,"_104":105,"_102":103,"_106":274,"_160":279,"_243":312,"_191":313,"_258":316,"_320":-5,"_321":-5,"_322":-5,"_323":-5,"_324":325,"_251":-5},{"_108":109,"_99":100,"_110":275,"_112":-5,"_113":22,"_114":115,"_116":117,"_118":-5,"_14":119,"_120":-5,"_121":22,"_122":-5,"_123":-5,"_124":33,"_16":125,"_126":-5,"_127":-5,"_128":-5,"_129":-5,"_130":131,"_132":131,"_133":134,"_135":134,"_136":134,"_137":131,"_138":131,"_23":276,"_142":277,"_147":278,"_159":22},["D",1775377971529],{"_97":98,"_140":141},{"_97":98,"_144":141,"_14":119,"_145":146},{"_104":149,"_99":45,"_108":150,"_151":109,"_152":-5,"_153":-5,"_154":-5,"_155":-5,"_156":-5,"_157":100,"_158":98},[280,292,300,304,308],{"_108":163,"_99":164,"_165":166,"_167":-5,"_168":150,"_169":170,"_171":22,"_110":281,"_104":33,"_173":174,"_175":-5,"_176":22,"_177":-5,"_178":282,"_102":291},["D",1775379691306],[283],{"_108":181,"_99":182,"_165":183,"_167":166,"_168":150,"_169":170,"_171":22,"_110":284,"_104":33,"_173":174,"_175":-5,"_176":22,"_177":-5,"_178":285,"_102":290},["D",1775379691306],[286],{"_108":187,"_99":188,"_165":189,"_167":183,"_168":150,"_169":170,"_171":22,"_110":287,"_104":33,"_173":191,"_175":192,"_176":22,"_177":-5,"_178":288,"_102":289},["D",1775379691306],[],[164,182,188],[164,182],[164],{"_108":198,"_99":199,"_165":200,"_167":-5,"_168":150,"_169":201,"_171":202,"_110":293,"_104":33,"_173":174,"_175":-5,"_176":22,"_177":-5,"_178":294,"_102":299},["D",1775378641522],[295],{"_108":206,"_99":207,"_165":208,"_167":200,"_168":150,"_169":201,"_171":202,"_110":296,"_104":33,"_173":191,"_175":210,"_176":22,"_177":-5,"_178":297,"_102":298},["D",1775378641522],[],[199,207],[199],{"_108":215,"_99":216,"_165":217,"_167":-5,"_168":150,"_169":218,"_171":22,"_110":301,"_104":33,"_173":191,"_175":220,"_176":22,"_177":-5,"_178":302,"_102":303},["D",1775379517754],[],[216],{"_108":224,"_99":225,"_165":226,"_167":-5,"_168":150,"_169":227,"_171":22,"_110":305,"_104":229,"_173":191,"_175":230,"_176":22,"_177":-5,"_178":306,"_102":307},["D",1775379466115],[],[225],{"_108":234,"_99":235,"_165":236,"_167":-5,"_168":150,"_169":105,"_171":22,"_110":309,"_104":238,"_173":239,"_175":240,"_176":22,"_177":100,"_178":310,"_102":311},["D",1775379928048],[],[235],[280,283,286,292,295,300,304,308],{"_108":181,"_99":182,"_165":183,"_167":166,"_168":150,"_169":170,"_171":22,"_110":314,"_104":33,"_173":174,"_175":-5,"_176":22,"_177":-5,"_102":315},["D",1775379691306],[164,182],[317],{"_108":187,"_99":188,"_165":189,"_167":183,"_168":150,"_169":170,"_171":22,"_110":318,"_104":33,"_173":191,"_175":192,"_176":22,"_177":-5,"_102":319},["D",1775379691306],[164,182,188],"upstream","pull","ahead","behind","templates",[],"actionData","errors"]