${name} — Agent Skill

` 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\n\nVal Town runs on the Deno runtime. For full and up-to-date documentation, refer to [docs.val.town](https://docs.val.town). Key points for tool vals:\n\n- **Imports**: use `npm:` prefix for npm packages (e.g., `import { z } from \"npm:zod\"`). Pin versions for reproducibility. Fall back to `https://esm.sh/` for packages that need filesystem workarounds. See [importing docs](https://docs.val.town/reference/import).\n- **No filesystem**: use [SQLite](https://docs.val.town/reference/std/sqlite) or [Blob storage](https://docs.val.town/reference/std/blob) for persistence.\n- **HTTP handlers**: use web-standard Request/Response. See [HTTP docs](https://docs.val.town/vals/http).\n- **Runtime details**: see [runtime docs](https://docs.val.town/reference/runtime) for current Deno/TypeScript versions and constraints.\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",[58],"29a8c010-30d0-11f1-938b-42dde27851f2","README.md","a27b3610-30cd-11f1-b8ec-42dde27851f2",22,["D",1775380603535],"# Val Tool Playground Skill\n\nAn agent skill for building developer tools and playgrounds on Val Town.\nProvides opinionated patterns for creating single-purpose utilities that serve\nboth 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\n[Agent Skills Discovery RFC](https://github.com/cloudflare/agent-skills-discovery-rfc)\nvia 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```",[167],"9835e814-30cb-11f1-9e09-42dde27851f2","references","c32c39bf-9164-48f7-89fc-01465b8ba17e",3,["D",1775378641522],"directory",[174],"pulls","branches","forks","envVars",{"_187":86,"_189":86},"connections",{"_187":86,"_188":86},"count","unfilledCount","emptyCount",{"_28":173,"_13":174,"_56":175,"_37":-5,"_30":31,"_151":176,"_153":139,"_32":212,"_34":86,"_59":178,"_157":-5,"_60":24,"_159":-5,"_196":213,"_121":214},{"_28":205,"_13":206,"_56":207,"_37":175,"_30":31,"_151":176,"_153":139,"_32":208,"_34":86,"_59":47,"_157":209,"_60":24,"_159":-5,"_196":210,"_121":211},{"_28":166,"_13":167,"_56":168,"_37":-5,"_30":31,"_151":169,"_153":139,"_32":202,"_34":163,"_59":47,"_157":171,"_60":24,"_159":-5,"_196":203,"_121":204},{"_28":161,"_13":58,"_56":57,"_37":-5,"_30":31,"_151":106,"_153":139,"_32":199,"_34":163,"_59":47,"_157":164,"_60":24,"_159":-5,"_196":200,"_121":201},{"_28":148,"_13":149,"_56":150,"_37":-5,"_30":31,"_151":152,"_153":139,"_32":195,"_34":155,"_59":156,"_157":158,"_60":24,"_159":14,"_196":197,"_121":198},["D",1775382038651],"children",[],[149],["D",1775382652463],[],[58],["D",1775380603535],[],[167],"98359832-30cb-11f1-9e09-42dde27851f2","pico-ui-patterns.md","983598f0-30cb-11f1-9e09-42dde27851f2",["D",1775378641522],"# Pico CSS UI Patterns Reference\n\nReference for building tool val UIs with Pico CSS v2. Read this when implementing the UI layer.\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\nKey rules:\n- System theme only — never force light or dark. Include ``.\n- No external images or favicons — use emoji or inline SVG\n- No frameworks (React, etc.) for simple tools — vanilla HTML/CSS/JS\n\n## Header\n\nUse `` — Pico automatically mutes the subtitle:\n\n```html\n\n  📄 Tool Name
\n  What it does. Link to underlying library if wrapping one.
\n\n```\n\n## Tabs (custom — Pico has no tab component)\n\nThis is the one pattern we always write custom CSS for. Use ARIA roles:\n\n```html\n\n  \n  \n
\n...
\n...
\n```\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\n```javascript\ndocument.querySelectorAll('[role=\"tab\"]').forEach(tab => {\n  tab.addEventListener('click', () => {\n    document.querySelectorAll('[role=\"tab\"]').forEach(t => t.setAttribute('aria-selected', 'false'));\n    document.querySelectorAll('[role=\"tabpanel\"]').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 fieldset group:\n```html\n\n  \n  \n
\n```\n\n**Loading state** — Pico's `aria-busy` adds a spinner to buttons:\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```javascript\nurlInput.addEventListener('keydown', (e) => { if (e.key === 'Enter') fetchBtn.click(); });\n```\n\n## Output Patterns\n\n**Code/markdown output with copy button** (custom — no Pico equivalent):\n\n```html\n\n  \n  
\n
\n```\n\n```css\n.output-wrap { position: relative; }\n.copy-btn {\n  position: absolute; top: 0.5rem; right: 0.5rem;\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; cursor: pointer;\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\n**Metadata bar** (custom — no Pico equivalent):\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## Pico Native Components — Don't Reinvent\n\nBefore writing custom CSS, check if Pico already handles it:\n\n- **Cards** — `` 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** — `` + `` + ``\n- **Nav** — `` with `` auto-distributes horizontally\n- **Modal** — `` + ``, `.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",[],[174,206],["D",1775378641522],[191],[174],["D",1775377971529],{"_11":12,"_120":63},{"_11":12,"_115":116,"_62":63,"_25":61,"_117":118,"_119":24},{"_34":106,"_13":16,"_28":31,"_107":71,"_108":-5,"_109":-5,"_110":-5,"_111":-5,"_112":-5,"_113":14,"_114":12},"ctx",{"_45":-5,"_141":252,"_253":254,"_255":256,"_257":24,"_258":24,"_259":24,"_260":139,"_261":-5,"_262":-7,"_263":-7,"_264":86,"_265":24,"_266":24,"_267":-5,"_268":24,"_269":24,"_270":24,"_271":-5},"ENV",{"_223":224,"_225":226,"_227":16,"_228":229,"_230":231,"_232":233,"_234":235,"_236":237,"_238":239,"_240":241,"_242":243,"_244":245,"_246":247,"_248":249,"_250":251},"REACT_APP_SENTRY_DSN","https://586020d86f05489db63a554690acf1e9@o1398359.ingest.sentry.io/6724499","RENDER_GIT_COMMIT","e87eb04e707cf64e7e532c8e8ec395f209e17f15","RENDER_GIT_BRANCH","POSTHOG_API_TOKEN","phc_nmoyuAkStEZuUp69rYlg1DZgrIt19Gx0Y4Hwf8tGgJP","POSTHOG_API_HOST","https://wart.val.town","WEB_API_TEMPLATE","https://{val}.web.val.run","APP_URL","https://www.val.town","MODULE_URL","https://esm.town","VANITY_WEB_API_TEMPLATE","https://{label}.val.run/","DENOLS_URL","https://lsp.val.town","NODE_ENV","production","CLOUDFLARE_TURNSTILE_SITE_KEY","0x4AAAAAACtaIZJH7s9rBMZ6","GOOGLE_CLIENT_ID","875989696899-jtsqkhlbdv5jrlsk8631p7ipjg3c6o62.apps.googleusercontent.com","STRIPE_PUBLISHABLE_KEY","pk_live_51N2zvWEpZTTLipIkVEwXrUG9AT0yeOOEYxszarZT1jpsZV58Ly6wlg3SltZpHN26CUalOBmUSY7adQRQiSkCZz2500qSXNkf8Y","API_URL","https://api.val.town",[],"preferencesKeybindings","default","preferencesTheme","light","preferencesFixers","preferencesCopilot","preferencesSelectionAi","preferencesCloseBrackets","preferencesChatPanelState","preferencesDprint","preferencesDenofmt","notificationCount","flagDenols","isBusinessOrgMember","businessOrgHandle","isBusinessOrgAdmin","isHigherTownieTier","navCollapsed","currentOrgId"]
🛠️ ${name}

📄 Tool Name

History
