Tool Name

` 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** — `

` + `

` with `

` + `

`, `.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",["D",1775378641522],"id","08db61f4-30ca-11f1-9c88-42dde27851f2","val-tool-playground-skill",["D",1775377971529],"deletedAt","legacyEnvVars","privacy","public","httpPrivacy","description","Skill for building consistent tool vals with Pico CSS","imageUrl","3ee322c5-8742-48e0-86c7-5f3ae129683b","pinnedFileId","pinPreview","pinMigrated","screenshotVersion","likeCount",0,"orgId","f427167a-3263-4778-81d8-f79626323ff5","tursoName","tursoHostname","tursoMeasuredAt","pinned","userPerm","r","valPerm","blobPerm","rw","emailPerm","sqlitePerm","projectPerm","telemetryPerm","user",{"_99":98,"_107":103},"org",{"_99":98,"_100":101,"_102":103,"_18":59,"_104":105,"_106":25},"branch",{"_13":88,"_32":89,"_47":40,"_90":48,"_91":-5,"_92":-5,"_93":-5,"_94":-5,"_95":-5,"_96":49,"_97":98},"isOwned",31,"main","projectId","forkedBranchId","forkedBranchVersion","forkedProjectPrivacy","forkedProjectId","forkedProjectOrgId","projectName","userHandle","kamalnrf","handle","displayName","Kamal","avatar","https://img.clerk.com/eyJ0eXBlIjoicHJveHkiLCJzcmMiOiJodHRwczovL2ltYWdlcy5jbGVyay5kZXYvb2F1dGhfZ2l0aHViL2ltZ18yaVpXT3l1d2hWSFdtWTNoZFIwZ0lFUUhOd2oifQ","tier","pro","canRestrictVals","profileImageUrl","branchName","","adoptOrgId",{"_47":48,"_32":49,"_36":171,"_51":-5,"_52":25,"_53":54,"_55":54,"_56":57,"_58":-5,"_18":59,"_60":-5,"_61":25,"_62":-5,"_63":-5,"_64":65,"_66":67,"_68":-5,"_69":-5,"_70":-5,"_71":-5,"_72":73,"_74":73,"_75":76,"_77":76,"_78":76,"_79":73,"_80":73,"_81":172,"_83":173,"_85":174,"_87":25},"tree",[157,159],"files",[157,158,159],"counts",{"_147":65,"_148":139,"_149":65,"_150":151,"_152":153},"contents",[130,131],"upstreamProject","upstreamBranch","emptyEnvVars","flags",[],"hasHttpFiles","grants","orgs","customDomains",{},{"_47":143,"_32":28,"_30":31,"_135":-5,"_39":40,"_38":14,"_137":144,"_36":145,"_13":65,"_33":34,"_35":-5,"_24":25,"_141":-5,"_27":146},{"_47":132,"_32":133,"_30":134,"_135":-5,"_39":40,"_38":136,"_137":25,"_36":138,"_13":139,"_33":21,"_35":140,"_24":25,"_141":-5,"_27":142},"8c0c24b4-30ca-11f1-b79e-42dde27851f2","SKILL.md","3f8ec1d2-30ca-11f1-aec7-42dde27851f2","parentId",2,"latest",["D",1775378191615],1,"---\nname: val-tool-playground\ndescription: Build composable developer tool vals on Val Town — single-purpose utilities that serve both a human UI and a programmatic API from one endpoint. Use this skill whenever creating tool vals, utility vals, playground vals, or any Val Town HTTP val that wraps a library/API. Trigger when the user says \"create a val\", \"build a tool\", \"make a playground\", or wants a quick web utility with both a UI and API interface.\n---\n\n# Val Tool Playground\n\nA skill for building developer tool vals on Val Town. These are single-purpose utilities designed around one core principle: **every tool is both a UI and an API**.\n\n## Philosophy\n\n### Every tool is a URL\n\nThe most useful developer tools are the ones you can compose. A tool that only works through a web form is a dead end. A tool that returns structured output from a URL is a building block.\n\nDesign every tool so that:\n- A human can open it in a browser and use it interactively\n- A script can `curl` it and pipe the output somewhere\n- An LLM can fetch it as context for a prompt\n- Another tool can call it as a dependency\n\n### URL as interface\n\nThe URL itself should be the primary API. For proxy-style tools where the input is a URL, make it a path parameter:\n\n```\nhttps://defuddle.val.run/https://example.com/article\n```\n\nThis is more composable than query params because you can construct it by concatenation. Query params are for modifiers and flags (`?json=1`, `?selector=.content`), not primary input.\n\n### Raw output by default\n\nThe API endpoint should return the most useful raw format — plain text, markdown, CSV — not JSON. JSON is for metadata. A tool that returns markdown can be piped directly into an LLM context window. A tool that returns JSON requires parsing first.\n\nProvide `?json=1` for when callers need structured metadata alongside the content.\n\n### One concern per tool\n\nEach val does one thing. Don't build a Swiss Army knife. Build a screwdriver that works perfectly and can be composed with other screwdrivers.\n\n## Architecture\n\n### Dual-mode HTTP handler\n\nEvery tool val serves from a single HTTP endpoint with routing based on the request:\n\n```\nGET / → HTML page (the playground UI)\nGET /path-or-params → raw output (the API)\nGET /path-or-params?json=1 → structured JSON with metadata\nPOST / with JSON body → process input and return JSON\n```\n\n### Handler structure\n\n```typescript\nexport default async function (req: Request): Promise {\n const url = new URL(req.url);\n\n // 1. Handle OPTIONS for CORS preflight\n // 2. Handle POST (for paste/upload input)\n // 3. Check for target input in path or query params\n // → Return raw output or JSON based on ?json param\n // 4. Fall through to HTML UI\n}\n```\n\n### File structure\n\n**Simple tools** (single concern, short HTML):\n```\nmain.ts # HTTP handler + inline HTML renderer\nREADME.md\n```\n\n**Complex tools** (multiple features, rich UI):\n```\nmain.ts # HTTP handler (routing only)\nlib/\n renderer.ts # HTML page generation\n parser.ts # Core logic\n types.ts # TypeScript interfaces\nREADME.md\n```\n\nKeep `main.ts` thin — just routing. Push logic into `lib/`.\n\n## API Design\n\n### CORS\n\nAlways add CORS headers on API responses so tools are callable from anywhere:\n\n```typescript\nconst cors = {\n \"Access-Control-Allow-Origin\": \"*\",\n \"Access-Control-Allow-Methods\": \"GET, POST, OPTIONS\",\n \"Access-Control-Allow-Headers\": \"Content-Type\",\n};\n```\n\n### Error handling\n\nReturn proper HTTP status codes with error messages in both modes:\n\n```typescript\n// API consumers get JSON errors\nif (wantJson) return Response.json({ error: e.message }, { status: 502, headers: cors });\n// Raw consumers get plain text errors\nreturn new Response(`Error: ${e.message}`, { status: 502, headers: cors });\n```\n\nIn the UI, show errors inline — never use `alert()`.\n\n## UI Patterns\n\nWe use Pico CSS v2 as the styling foundation because it provides semantic HTML styling with zero classes for most elements, system theme support out of the box, and consistent form/button/card components.\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 (the one custom component)\n\nPico has no tab component, so this is the one pattern we always write custom CSS for. Use ARIA roles for accessibility:\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 — Pico has no 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### Use Pico's 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## 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- Custom subdomains via Val Town settings (e.g. `defuddle.val.run`)\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 with link to underlying library.\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 use frameworks for simple tools — vanilla HTML/CSS/JS\n- Don't force a color theme — respect system preference\n- Don't use `alert()` — show feedback inline\n- Don't over-abstract — single `main.ts` is fine for simple tools\n- Don't use Hono for single-purpose tools — raw Request/Response\n- Don't forget the API — every tool must work without the UI\n- Don't use `Response.redirect` — broken on Val Town\n","label",[133],"9835e814-30cb-11f1-9e09-42dde27851f2",true,["D",1775378641522],[28],"pulls","branches","forks","envVars",{"_154":65,"_156":65},"connections",{"_154":65,"_155":65},"count","unfilledCount","emptyCount",{"_47":143,"_32":28,"_30":31,"_135":-5,"_39":40,"_38":14,"_137":144,"_36":168,"_13":65,"_33":34,"_35":-5,"_24":25,"_141":-5,"_161":169,"_27":170},{"_47":164,"_32":44,"_30":43,"_135":31,"_39":40,"_38":14,"_137":144,"_36":165,"_13":65,"_33":21,"_35":45,"_24":25,"_141":-5,"_161":166,"_27":167},{"_47":132,"_32":133,"_30":134,"_135":-5,"_39":40,"_38":136,"_137":25,"_36":160,"_13":139,"_33":21,"_35":140,"_24":25,"_141":-5,"_161":162,"_27":163},["D",1775378191615],"children",[],[133],"98359832-30cb-11f1-9e09-42dde27851f2",["D",1775378641522],[],[28,44],["D",1775378641522],[158],[28],["D",1775377971529],{"_99":98,"_107":103},{"_99":98,"_100":101,"_102":103,"_18":59,"_104":105,"_106":25},{"_13":88,"_32":89,"_47":40,"_90":48,"_91":-5,"_92":-5,"_93":-5,"_94":-5,"_95":-5,"_96":49,"_97":98},"ctx",{"_81":-5,"_127":208,"_209":210,"_211":212,"_213":25,"_214":25,"_215":25,"_216":144,"_217":-5,"_218":-7,"_219":-7,"_220":65,"_221":25,"_222":25,"_223":-5,"_224":25,"_225":25,"_226":25,"_227":-5},"ENV",{"_179":180,"_181":182,"_183":89,"_184":185,"_186":187,"_188":189,"_190":191,"_192":193,"_194":195,"_196":197,"_198":199,"_200":201,"_202":203,"_204":205,"_206":207},"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"]

Diff · v3