Agent Skills: demos

Scaffold files from ./assets/:

• index.html: For all static content
• script.js: For all dynamic content
• config.json: optional configs for demos, dataset, prompt, model, schema, ...
  • Use config.js instead when template literals and minimal JS expressions are needed
• README.md: Explains what the app does (functionally), how to run locally/deploy
• LICENSE: MIT

Guidelines:

• Prefer pure-front-end apps that can be deployed on GitHub pages.
• Make it easy to demo.
  • Begin with a 1-3 para functional description of what the app does and how to use it. Include lightweight .webp screenshot
  • Include cards from config.json to run a demo with one click
  • Include synthetic sample datasets as CSV/JSON each <= 1MB, total <= 5MB
  • Support deep-linkable demo state via URL params / hash
  • Provide one-click downloads for generated artifacts / outputs
• Make it self-serve
  • Allow users to upload their own data
  • Include a collapsible settings form to edit prompts, models, schema, ... with defaults from config.json.
  • Persist settings with https://www.npmjs.com/package/saveform allowing reset
• Provide a responsive UX
  • Use lit-html for DOM updates
  • Always show a spinner while awaiting network call. Show progress bars for batch/iterative work
    • Disable primary buttons while running; re-enable on completion/failure.
  • Always stream LLM responses. Stream JSON with partial-json. Render LLM output with marked. Highlight code blocks
  • Use modals for drill-down without cluttering the main UI
  • Support keyboard navigation, e.g. arrow keys, tab, for fast review
  • #TODO Output style, readability, etc.

Code style:

• Prefer CDNs over npm install (less build steps).
• Lint with dprint and oxlint
  • dprint fmt -c https://raw.githubusercontent.com/sanand0/scripts/refs/heads/main/dprint.jsonc
  • npx -y oxlint --fix
• If using pyodide to run Python code, use ./assets/pyworker.js as follows:

  const pyodideWorker = new Worker("./pyworker.js", { type: "module" });
  pyodideWorker.addEventListener("message", listener);
  pyodideWorker.postMessage({ id, code, data, context: { } });
  pyodideWorker.removeEventListener("message", listener);
  

• If running DuckDB WASM for SQL, use ./assets/duckdb.js.

GitHub:

• Add a brief description. Tags: optional
• Deploy on GitHub Pages: gh api repos/:owner/:repo/pages -F 'source[branch]=main' -F 'source[path]=/'
• Ensure that the "About" section is linked to the GitHub Pages URL