${meta.name}

` 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",[139],"29a8c010-30d0-11f1-938b-42dde27851f2","README.md","a27b3610-30cd-11f1-b8ec-42dde27851f2",22,["D",1775380603535],7,"# 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```",[147],"9835e814-30cb-11f1-9e09-42dde27851f2","references","c32c39bf-9164-48f7-89fc-01465b8ba17e",3,["D",1775378641522],"directory",[155],"pulls","branches",1,"forks","envVars",{"_169":61,"_171":61},"connections",{"_169":61,"_170":61},"count","unfilledCount","emptyCount",{"_43":154,"_32":155,"_30":156,"_132":-5,"_41":42,"_40":157,"_133":122,"_38":194,"_13":61,"_33":159,"_35":-5,"_24":25,"_136":-5,"_178":195,"_27":196},{"_43":187,"_32":188,"_30":189,"_132":156,"_41":42,"_40":157,"_133":122,"_38":190,"_13":61,"_33":20,"_35":191,"_24":25,"_136":-5,"_178":192,"_27":193},{"_43":146,"_32":147,"_30":148,"_132":-5,"_41":42,"_40":149,"_133":122,"_38":184,"_13":151,"_33":20,"_35":152,"_24":25,"_136":-5,"_178":185,"_27":186},{"_43":138,"_32":139,"_30":140,"_132":-5,"_41":42,"_40":141,"_133":25,"_38":181,"_13":143,"_33":20,"_35":144,"_24":25,"_136":-5,"_178":182,"_27":183},{"_43":131,"_32":28,"_30":31,"_132":-5,"_41":42,"_40":14,"_133":25,"_38":177,"_13":135,"_33":34,"_35":37,"_24":25,"_136":45,"_178":179,"_27":180},["D",1775381109814],"children",[],[28],["D",1775379466115],[],[139],["D",1775380603535],[],[147],"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",[],[155,188],["D",1775378641522],[173],[155],["D",1775377971529],{"_95":94,"_103":99},{"_95":94,"_96":97,"_98":99,"_18":55,"_100":101,"_102":25},{"_13":84,"_32":85,"_43":42,"_86":44,"_87":-5,"_88":-5,"_89":-5,"_90":-5,"_91":-5,"_92":45,"_93":94},"ctx",{"_77":-5,"_124":234,"_235":236,"_237":238,"_239":25,"_240":25,"_241":25,"_242":122,"_243":-5,"_244":-7,"_245":-7,"_246":61,"_247":25,"_248":25,"_249":-5,"_250":25,"_251":25,"_252":25,"_253":-5},"ENV",{"_205":206,"_207":208,"_209":85,"_210":211,"_212":213,"_214":215,"_216":217,"_218":219,"_220":221,"_222":223,"_224":225,"_226":227,"_228":229,"_230":231,"_232":233},"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"]
🛠️ ${meta.name}

Discovery

Files

📄 Tool Name

Diff · v26
