| name | web-artifacts-builder |
| description | Build self-contained interactive web applications as single HTML files. Use for creating demos, prototypes, interactive tools, and standalone web experiences that work without external servers. |
| version | 2.0.0 |
| category | _internal |
| last_updated | "2026-01-02T00:00:00.000Z" |
| related_skills | ["frontend-design","algorithmic-art","theme-factory"] |
| tags | [] |
| see_also | ["web-artifacts-builder-self-contained-architecture","web-artifacts-builder-basic-template","web-artifacts-builder-1-interactive-dashboard","web-artifacts-builder-common-cdn-libraries","web-artifacts-builder-file-naming"] |
Web Artifacts Builder
Overview
Create self-contained, interactive web applications as single HTML files. These artifacts require no server, no build process, and can be shared as standalone files that run in any modern browser.
When to Use
- Creating interactive demos or prototypes
- Building standalone calculators or tools
- Data visualization dashboards
- Interactive documentation
- Shareable proof-of-concepts
- Any web experience that needs to work offline
Quick Start
- Create single HTML file with all CSS/JS inline
- Use CDN for libraries (Chart.js, Plotly, etc.)
- Embed data directly as JSON or JS objects
- Test locally by opening file in browser
- Share as single file attachment
Human review / rating apps
When the artifact is an interactive review, scoring, calibration, triage, QA, or annotation app, include a one-click Submit workflow by default. Manual JSON/CSV export-download-upload is acceptable only as a fallback; it is too convoluted as the primary user path.
Recommended pattern:
- Add localStorage autosave, progress tracking, JSON/CSV export, and JSON import/resume.
- Add a prominent
Submit button as the primary completion path; export/copy controls should be visually secondary.
- Add a visible receiver health/status indicator so the user knows whether Submit will work before investing time in scoring.
- Place a tiny localhost receiver next to the HTML artifact (
GET /health, POST /submit) that writes timestamped submissions plus submissions/latest.json.
- The app should POST to
http://127.0.0.1:<port>/submit; if unavailable, copy JSON to clipboard and show the exact receiver start command.
- Verify with a browser load, a test edit, a submit POST, and reset test state before handoff.
See references/interactive-review-submit-pattern.md for implementation details and pitfalls.
<!DOCTYPE html>
<html lang="en">
<head>
Web Artifact
Interactive Tool
Calculate
