Val Tool Playground 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 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",[144],"a27b3552-30cd-11f1-b8ec-42dde27851f2","README.md","a27b3610-30cd-11f1-b8ec-42dde27851f2",10,["D",1775379517754],"# Val Tool Playground Skill\n\nAn agent skill for building developer tools and playgrounds on Val Town. Provides opinionated patterns for creating single-purpose utilities that serve both 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 [Agent Skills Discovery RFC](https://github.com/cloudflare/agent-skills-discovery-rfc) via 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```\n\n### Manual\n\nCopy `SKILL.md` and `references/pico-ui-patterns.md` into your agent's skill directory.\n\n## What's in the box\n\n- **SKILL.md** — Philosophy (composability, URL-as-interface, raw output, one concern per tool), architecture (dual-mode HTTP handler), visual anatomy, API design, Val Town conventions\n- **references/pico-ui-patterns.md** — Pico CSS v2 base template, tab/input/output patterns, native component catalog, common mistakes\n\n## Philosophy (tl;dr)\n\nEvery tool is a URL. The UI is a convenience layer. The API is the product.\n",[152],"9835e814-30cb-11f1-9e09-42dde27851f2","references","c32c39bf-9164-48f7-89fc-01465b8ba17e",3,["D",1775378641522],"directory",[159],"09ee2dde-30ce-11f1-a105-42dde27851f2",".well-known","4c0a5666-6492-4f6f-be3d-6b9d533b34d6",11,["D",1775379691306],[166],"pulls","branches",1,"forks","envVars",{"_179":61,"_181":61},"connections",{"_179":61,"_180":61},"count","unfilledCount","emptyCount",{"_42":165,"_32":166,"_30":167,"_134":-5,"_40":41,"_39":168,"_136":48,"_37":215,"_13":61,"_34":163,"_35":-5,"_24":48,"_141":-5,"_190":216,"_27":217},{"_42":209,"_32":210,"_30":211,"_134":167,"_40":41,"_39":168,"_136":48,"_37":212,"_13":61,"_34":163,"_35":-5,"_24":48,"_141":-5,"_190":213,"_27":214},{"_42":158,"_32":159,"_30":160,"_134":-5,"_40":41,"_39":161,"_136":25,"_37":206,"_13":61,"_34":163,"_35":-5,"_24":48,"_141":-5,"_190":207,"_27":208},{"_42":199,"_32":200,"_30":201,"_134":160,"_40":41,"_39":161,"_136":25,"_37":202,"_13":61,"_34":20,"_35":203,"_24":48,"_141":-5,"_190":204,"_27":205},{"_42":151,"_32":152,"_30":153,"_134":-5,"_40":41,"_39":154,"_136":48,"_37":196,"_13":61,"_34":20,"_35":156,"_24":48,"_141":-5,"_190":197,"_27":198},{"_42":143,"_32":144,"_30":145,"_134":-5,"_40":41,"_39":146,"_136":48,"_37":193,"_13":148,"_34":20,"_35":149,"_24":48,"_141":-5,"_190":194,"_27":195},{"_42":131,"_32":132,"_30":133,"_134":-5,"_40":41,"_39":135,"_136":48,"_37":189,"_13":138,"_34":139,"_35":140,"_24":48,"_141":44,"_190":191,"_27":192},["D",1775379928048],"children",[],[132],["D",1775379466115],[],[144],["D",1775379517754],[],[152],"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",[],[159,200],["D",1775378641522],[185],[159],"09ee31bc-30ce-11f1-a105-42dde27851f2","skills","0b667ee3-c434-470f-b5b1-f35a7c694595",["D",1775379691306],[],[166,210],["D",1775379691306],[183],[166],["D",1775377971529],{"_95":94,"_103":99},{"_95":94,"_96":97,"_98":99,"_18":55,"_100":101,"_102":48},{"_13":84,"_32":85,"_42":41,"_86":43,"_87":-5,"_88":-5,"_89":-5,"_90":-5,"_91":-5,"_92":44,"_93":94},"ctx",{"_77":-5,"_123":255,"_256":257,"_258":259,"_260":48,"_261":48,"_262":48,"_263":25,"_264":-5,"_265":-7,"_266":-7,"_267":61,"_268":48,"_269":48,"_270":-5,"_271":48,"_272":48,"_273":48,"_274":-5},"ENV",{"_226":227,"_228":229,"_230":85,"_231":232,"_233":234,"_235":236,"_237":238,"_239":240,"_241":242,"_243":244,"_245":246,"_247":248,"_249":250,"_251":252,"_253":254},"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 · v14
