${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",[130],"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```",[137],"9835e814-30cb-11f1-9e09-42dde27851f2","references","c32c39bf-9164-48f7-89fc-01465b8ba17e",3,["D",1775378641522],"directory",[144],"pulls","branches",1,"forks","envVars",{"_158":40,"_160":40},"connections",{"_158":40,"_159":40},"count","unfilledCount","emptyCount",{"_18":143,"_20":144,"_113":145,"_115":-5,"_116":66,"_117":146,"_119":102,"_22":183,"_63":40,"_122":148,"_124":-5,"_126":26,"_127":-5,"_167":184,"_84":185},{"_18":176,"_20":177,"_113":178,"_115":145,"_116":66,"_117":146,"_119":102,"_22":179,"_63":40,"_122":95,"_124":180,"_126":26,"_127":-5,"_167":181,"_84":182},{"_18":136,"_20":137,"_113":138,"_115":-5,"_116":66,"_117":139,"_119":102,"_22":173,"_63":133,"_122":95,"_124":141,"_126":26,"_127":-5,"_167":174,"_84":175},{"_18":129,"_20":130,"_113":131,"_115":-5,"_116":66,"_117":64,"_119":102,"_22":170,"_63":133,"_122":95,"_124":134,"_126":26,"_127":-5,"_167":171,"_84":172},{"_18":111,"_20":112,"_113":114,"_115":-5,"_116":66,"_117":118,"_119":102,"_22":166,"_63":121,"_122":123,"_124":125,"_126":26,"_127":21,"_167":168,"_84":169},["D",1775382038651],"children",[],[112],["D",1775382652463],[],[130],["D",1775380603535],[],[137],"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",[],[144,177],["D",1775378641522],[162],[144],["D",1775377971529],{"_16":17,"_82":78},{"_16":17,"_75":76,"_77":78,"_33":34,"_79":80,"_81":26},{"_63":64,"_20":65,"_18":66,"_67":19,"_68":-5,"_69":-5,"_70":-5,"_71":-5,"_72":-5,"_73":21,"_74":17},"ctx",{"_56":-5,"_104":223,"_224":225,"_226":227,"_228":26,"_229":26,"_230":26,"_231":102,"_232":-5,"_233":-7,"_234":-7,"_235":40,"_236":26,"_237":26,"_238":-5,"_239":26,"_240":26,"_241":26,"_242":-5},"ENV",{"_194":195,"_196":197,"_198":65,"_199":200,"_201":202,"_203":204,"_205":206,"_207":208,"_209":210,"_211":212,"_213":214,"_215":216,"_217":218,"_219":220,"_221":222},"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

Search
