demos

sanand0's avatarfrom sanand0

Use when creating demos or POCs

⭐4stars🔀0forks📁View on GitHub🕐Updated Dec 28, 2025
[Developer Tools]

When & Why to Use This Skill

This Claude skill streamlines the rapid development of interactive demos and Proof of Concepts (POCs) by providing a standardized scaffolding framework. It focuses on building responsive, pure front-end applications optimized for GitHub Pages, featuring built-in guidelines for streaming LLM responses, client-side data processing with DuckDB WASM, and Python execution via Pyodide to ensure high-performance, self-serve prototypes.

Use Cases

  • Rapidly scaffolding a web-based AI prototype with a pre-configured structure (HTML, JS, and config) for immediate deployment and testing.
  • Creating interactive, shareable POCs for stakeholders that support deep-linking, synthetic dataset integration, and one-click demo states.
  • Building browser-based data tools that leverage DuckDB WASM or Pyodide for complex data processing without the need for backend infrastructure.
  • Implementing best-practice UX for AI applications, including streaming JSON responses, progress indicators, and responsive UI components using lit-html.
namedemos
descriptionUse when creating demos or POCs

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
  • 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