Val Tool Playground Skill

Discovery
This skill is discoverable via the Agent Skills Discovery RFC, llms.txt, HTTP Link headers, and content negotiation.
GET ${ENDPOINT}/.well-known/skills/index.json # RFC discovery\nGET ${ENDPOINT}/llms.txt # LLM-friendly overview\ncurl -H \"Accept: text/markdown\" ${ENDPOINT}/ # content negotiation → SKILL.md\ncurl -H \"Accept: application/json\" ${ENDPOINT}/ # content negotiation → index
Every response includes a Link header pointing to the skills index.
` 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",[143],"213a66c2-30d0-11f1-9898-42dde27851f2",["D",1775380589390],[28],"9835e814-30cb-11f1-9e09-42dde27851f2","references","c32c39bf-9164-48f7-89fc-01465b8ba17e",["D",1775378641522],"directory",[154],"09ee2dde-30ce-11f1-a105-42dde27851f2",".well-known","4c0a5666-6492-4f6f-be3d-6b9d533b34d6",11,["D",1775379691306],[160],"pulls","branches",1,"forks","envVars",{"_173":59,"_175":59},"connections",{"_173":59,"_174":59},"count","unfilledCount","emptyCount",{"_41":159,"_32":160,"_30":161,"_133":-5,"_39":40,"_38":162,"_135":25,"_36":209,"_13":59,"_33":157,"_34":-5,"_24":25,"_140":-5,"_184":210,"_27":211},{"_41":203,"_32":204,"_30":205,"_133":161,"_39":40,"_38":162,"_135":25,"_36":206,"_13":59,"_33":157,"_34":-5,"_24":25,"_140":-5,"_184":207,"_27":208},{"_41":153,"_32":154,"_30":155,"_133":-5,"_39":40,"_38":137,"_135":120,"_36":200,"_13":59,"_33":157,"_34":-5,"_24":25,"_140":-5,"_184":201,"_27":202},{"_41":193,"_32":194,"_30":195,"_133":155,"_39":40,"_38":137,"_135":120,"_36":196,"_13":59,"_33":20,"_34":197,"_24":25,"_140":-5,"_184":198,"_27":199},{"_41":150,"_32":28,"_30":31,"_133":-5,"_39":40,"_38":14,"_135":25,"_36":190,"_13":137,"_33":20,"_34":35,"_24":25,"_140":-5,"_184":191,"_27":192},{"_41":142,"_32":143,"_30":144,"_133":-5,"_39":40,"_38":145,"_135":25,"_36":187,"_13":147,"_33":20,"_34":148,"_24":25,"_140":-5,"_184":188,"_27":189},{"_41":130,"_32":131,"_30":132,"_133":-5,"_39":40,"_38":134,"_135":25,"_36":183,"_13":137,"_33":138,"_34":139,"_24":25,"_140":43,"_184":185,"_27":186},["D",1775380479154],"children",[],[131],["D",1775379466115],[],[143],["D",1775380589390],[],[28],"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",[],[154,194],["D",1775378641522],[179],[154],"09ee31bc-30ce-11f1-a105-42dde27851f2","skills","0b667ee3-c434-470f-b5b1-f35a7c694595",["D",1775379691306],[],[160,204],["D",1775379691306],[177],[160],["D",1775377971529],{"_93":92,"_101":97},{"_93":92,"_94":95,"_96":97,"_18":53,"_98":99,"_100":25},{"_13":82,"_32":83,"_41":40,"_84":42,"_85":-5,"_86":-5,"_87":-5,"_88":-5,"_89":-5,"_90":43,"_91":92},"ctx",{"_75":-5,"_122":249,"_250":251,"_252":253,"_254":25,"_255":25,"_256":25,"_257":120,"_258":-5,"_259":-7,"_260":-7,"_261":59,"_262":25,"_263":25,"_264":-5,"_265":25,"_266":25,"_267":25,"_268":-5},"ENV",{"_220":221,"_222":223,"_224":83,"_225":226,"_227":228,"_229":230,"_231":232,"_233":234,"_235":236,"_237":238,"_239":240,"_241":242,"_243":244,"_245":246,"_247":248},"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"]
🛠️ Val Tool Playground

Discovery

Files

📄 Tool Name

Diff · v18
