[{"_1":2,"_3":-5,"_4":-5},"loaderData",{"_5":6,"_7":8,"_9":10},"actionData","errors","root",{"_149":150,"_151":152},"routes/_app.x.$handle.$name",{"_92":91,"_31":42,"_101":82,"_26":102,"_13":14,"_103":-5,"_11":104,"_105":106,"_107":108,"_109":110,"_111":112,"_20":-5,"_113":-5,"_114":-5,"_115":24,"_116":117,"_118":24,"_119":-5,"_120":-5,"_121":122},"routes/_app.x.$handle.$name.branch.$branch.version.$version.diff",{"_11":12,"_13":14,"_15":16,"_17":-5,"_18":-5},"project",{"_40":41,"_31":42,"_35":43,"_44":-5,"_45":24,"_46":47,"_48":47,"_49":50,"_51":-5,"_18":52,"_53":-5,"_54":24,"_55":-5,"_56":-5,"_57":58,"_59":60,"_61":-5,"_62":-5,"_63":-5,"_64":-5,"_65":66,"_67":66,"_68":69,"_70":69,"_71":69,"_72":66,"_73":66,"_74":75,"_76":77,"_78":79,"_80":24},"version",1,"changes",[19],"aiChatInfo","userId",{"_20":21,"_22":-7,"_23":24,"_25":24,"_26":27,"_28":27},"file",{"_29":30,"_31":27,"_32":20,"_33":34,"_35":36,"_37":14,"_38":39,"_23":24},"previous","deleted",false,"deletedHere","path","SKILL.md","latestPath","fileId","3f8ec1d2-30ca-11f1-aec7-42dde27851f2","name","fileType","content","---\nname: val-tool-playground\ndescription: Build developer tool playground vals on Val Town with a consistent UI pattern (Pico CSS, ARIA tabs, dual-mode HTTP endpoints). Use this skill whenever the user wants to create a new tool val, utility val, playground val, or any Val Town HTTP val that wraps a library/API with a web UI. Also trigger when the user says \"create a val\", \"build a tool\", \"make a playground\", or references existing tool vals like jwt-decoder, og-previewer, defuddle, dns-lookup, cron-tester, headers-inspector, etc. Even if the user doesn't mention Val Town explicitly, if they want a quick web tool with a UI and API, this skill applies.\n---\n\n# Val Tool Playground\n\nA skill for building developer tool vals on Val Town that follow a consistent, proven pattern. These are single-purpose utility tools with both a human-friendly UI and a programmatic API.\n\n## Architecture: Dual-Mode HTTP Handler\n\nEvery tool val serves two audiences from a single HTTP endpoint:\n\n1. **Human UI** — a clean web interface for interactive use\n2. **Programmatic API** — JSON or raw output for scripts, LLMs, and composition\n\nThe handler routes based on the request:\n\n```\nGET / → HTML page (the playground UI)\nGET /path-or-params → raw/JSON output (the API)\nPOST / with JSON body → process input and return JSON\n```\n\nPrefer path-based params for proxy-style tools where the URL itself is the input (e.g. `/https://example.com`). Use query params for options and flags (`?json=1`, `?selector=.content`). Support both patterns when it makes sense — path for the primary input, query for modifiers.\n\n## File Structure\n\nChoose based on complexity:\n\n**Simple tools** (single concern, <200 lines of 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 (parsing, fetching, transforming)\n types.ts # TypeScript interfaces\nREADME.md\n```\n\nThe handler in `main.ts` should be thin — just routing. Push logic into `lib/` files. This keeps the code easy to modify later.\n\n## UI Pattern: Pico CSS + ARIA Tabs\n\nAll tool vals use the same UI foundation:\n\n### Base Template\n\n```html\n\n\n\n \n \n \n Tool Name\n \n \n\n\n

\n \n

\n\n\n```\n\nKey rules:\n- Pico CSS v2 via CDN, no other CSS framework\n- System theme (no `data-theme` attribute) — respects user's OS preference\n- Always include ``\n- Container max-width: 900px\n- `--pico-font-size: 16px` as base\n\n### Header\n\nUse `` for automatic muted subtitle:\n\n```html\n\n

📄 Tool Name

What it does. Link to underlying library if wrapping one.

\n\n```\n\n### Tabs (ARIA pattern)\n\nWhen the tool has multiple modes (e.g. URL input vs paste HTML, decode vs encode), use this exact tab pattern:\n\n```html\n

\n \n \n

\n\n

\n \n

\n\n

\n \n

\n```\n\nTab styling (consistent across all tool vals):\n\n```css\n[role=\"tablist\"] { border-bottom: 1px solid var(--pico-muted-border-color); margin-bottom: 1.5rem; }\n[role=\"tab\"] {\n background: none; border: none;\n border-bottom: 3px solid transparent; border-radius: 0;\n padding: 0.75rem 1.5rem; margin: 0;\n color: var(--pico-muted-color); font-weight: 500; cursor: pointer;\n}\n[role=\"tab\"][aria-selected=\"true\"] { color: var(--pico-primary); border-bottom-color: var(--pico-primary); }\n[role=\"tab\"]:hover { color: var(--pico-primary); }\n[role=\"tabpanel\"] { display: none; }\n[role=\"tabpanel\"].active { display: block; }\n```\n\nTab switching JS:\n\n```javascript\nconst tabs = document.querySelectorAll('[role=\"tab\"]');\nconst panels = document.querySelectorAll('[role=\"tabpanel\"]');\ntabs.forEach(tab => {\n tab.addEventListener('click', () => {\n tabs.forEach(t => t.setAttribute('aria-selected', 'false'));\n panels.forEach(p => p.classList.remove('active'));\n tab.setAttribute('aria-selected', 'true');\n document.getElementById(tab.getAttribute('aria-controls')).classList.add('active');\n });\n});\n```\n\n### Input Patterns\n\n**URL input with action button** — use Pico's group role:\n\n```html\n

\n \n \n

\n```\n\n**Textarea for paste input:**\n\n```html\n\n```\n\n**Loading state** — use Pico's `aria-busy`:\n\n```javascript\nfunction setLoading(btn, loading) {\n btn.setAttribute('aria-busy', loading);\n btn.disabled = loading;\n}\n```\n\n**Enter key to submit:**\n\n```javascript\n$('#urlInput').addEventListener('keydown', (e) => {\n if (e.key === 'Enter') $('#fetchBtn').click();\n});\n```\n\n### Output Patterns\n\n**Code/markdown output with copy button:**\n\n```html\n

\n \n

\n```\n\nCopy button styling:\n\n```css\n.output-wrap { position: relative; }\n.copy-btn {\n position: absolute; top: 0.5rem; right: 0.5rem; cursor: pointer;\n background: var(--pico-secondary-background); border: 1px solid var(--pico-muted-border-color);\n border-radius: 4px; padding: 0.3rem 0.6rem; font-size: 0.8rem; z-index: 1;\n}\npre.result {\n max-height: 70vh; overflow: auto; white-space: pre-wrap; word-break: break-word;\n padding: 1rem; padding-top: 2.5rem; margin: 0; font-size: 0.85rem;\n}\n```\n\nCopy JS with visual feedback:\n\n```javascript\n$('#copyBtn').addEventListener('click', () => {\n navigator.clipboard.writeText($('#output').textContent).then(() => {\n $('#copyBtn').textContent = '\\u2714 Copied';\n setTimeout(() => { $('#copyBtn').innerHTML = '⎘ Copy'; }, 1500);\n });\n});\n```\n\n**Metadata bar** — for displaying parsed info (title, word count, timing, etc.):\n\n```html\n

\n```\n\n```css\n.meta { display: flex; flex-wrap: wrap; gap: 0.5rem 1.5rem; font-size: 0.8rem; color: var(--pico-muted-color); }\n```\n\n### Footer\n\n```html\n\n```\n\n```css\nfooter { margin-top: 3rem; padding-top: 1rem; border-top: 1px solid var(--pico-muted-border-color); text-align: center; }\nfooter a { color: var(--pico-muted-color); font-size: 0.85rem; }\n```\n\n### Advanced Options\n\nUse Pico's native `

` (no custom CSS needed):\n\n```html\n

Advanced options

\n \n

\n```\n\n## API Design\n\n### CORS\n\nAlways add CORS headers on API responses (not needed on the HTML page response):\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// Handle preflight\nif (req.method === \"OPTIONS\") {\n return new Response(null, { headers: cors });\n}\n```\n\n### Response Formats\n\nProvide multiple output modes controlled by query params:\n\n- Default: the most useful raw format (plain text, markdown, etc.)\n- `?json=1` or `?format=json`: full structured JSON with metadata\n- Path-based input for proxy tools: `/https://example.com`\n\n### Error Handling\n\nReturn proper HTTP status codes with error messages in both modes:\n\n```typescript\n// API error\nif (wantJson) return Response.json({ error: e.message }, { status: 502, headers: cors });\n// Raw error\nreturn new Response(`Error: ${e.message}`, { status: 502, headers: cors });\n```\n\nIn the UI, show errors inline using `aria-invalid` on inputs or `var(--pico-del-color)` for error text — never use alerts:\n\n```javascript\nfunction showError(msg) {\n document.getElementById('error').textContent = msg;\n document.getElementById('output').style.display = 'none';\n}\n```\n\n## Val Town Conventions\n\n### Imports\n\nPin npm package versions. Use `npm:` prefix for Deno:\n\n```typescript\nimport { Window } from \"npm:happy-dom@17.4.4\";\nimport { Defuddle } from \"npm:defuddle@0.14.0/node\";\n```\n\nIf `npm:` fails due to sandbox restrictions, try `https://esm.sh/package@version`.\n\n### Handler Signature\n\n```typescript\nexport default async function (req: Request): Promise {\n // ...\n}\n```\n\n### No Filesystem, No Subprocess\n\nVal Town vals cannot use `fs`, `Deno.readFile`, `child_process`, or `Deno.Command`. All state is in-memory or via Val Town's SQLite/blob storage.\n\n### Custom Domains\n\nVals get a default URL like `https://kamalnrf-valname.web.val.run`. Custom subdomains (e.g. `defuddle.val.run`) can be configured in Val Town settings.\n\n## README Pattern\n\nKeep READMEs brief. Focus on the API, skip UI documentation (the UI is self-explanatory):\n\n```markdown\n# Tool Name\n\nOne-line description with link to [underlying library](https://...) if applicable.\n\n**Live:** https://tool.val.run\n\n## API\n\nPrimary usage example with the most composable URL form.\n\n### Options\n\nTable of query params.\n\n### POST endpoint (if applicable)\n\nExample request body.\n\n## Limitations\n\nBullet list of known constraints.\n```\n\n## Naming Conventions\n\n- Val name: kebab-case, descriptive (`jwt-decoder`, `og-previewer`, `dns-lookup`)\n- Description: terse, starts with verb or noun (`Decode & encode JWT tokens inline`)\n- Emoji in H1 only, not in val name or description\n\n## Pico CSS: Use Native Components, Don't Reinvent\n\nPico v2 provides more built-in components than we typically use. Before writing custom CSS, check if Pico already handles it.\n\n### Use natively (zero custom CSS needed)\n\n**Cards** — `

` with optional `

` and `

Diff · v1