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>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Web Artifact</title>
<style>
body { font-family: system-ui; padding: 20px; }
.btn { padding: 10px 20px; background: #007bff; color: white; border: none; cursor: pointer; }
</style>
</head>
<body>
<h1>Interactive Tool</h1>
<button class="btn"
<div id="result"></div>
<script>
function calculate() {
document.getElementById('result').textContent = 'Result: ' + (Math.random() * 100).toFixed(2);
}
</script>
</body>
</html>
Interactive Rating / Review Apps
Use this pattern when the user needs to rate, triage, or calibrate a batch of examples in a browser instead of editing Markdown/CSV by hand.
- Build a single-file HTML app with embedded JSON data, no server dependency, and all CSS/JS inline.
- Include per-item navigation, progress tracking, score inputs, defect/checklist toggles, notes, and autosave via
localStorage.
- Provide JSON and CSV export; if the user may resume later, also provide JSON import or copy-to-clipboard.
- Verify the artifact before handoff:
- extract embedded JavaScript and run
node --check when Node is available;
- open the file in a browser and confirm the expected card/control counts;
- exercise one score/checkbox/note update and then reset the test state so the user starts clean.
- Watch for JavaScript string-escaping hazards when generating HTML from Python. In particular, CSV export code must use an escaped newline string (
'\\n') inside JavaScript; an actual newline inside a quoted JS string will make the page render shell content but fail to initialize.
Starter template: templates/interactive-rating-app.html.
Related Skills
Version History
- 2.0.0 (2026-01-02): Upgraded to v2 template - added Quick Start, When to Use, Execution Checklist, Error Handling, Metrics sections
- 1.0.0 (2024-10-15): Initial release with basic template, dashboard, calculator, data visualization examples, CDN library references, best practices
Sub-Skills
Sub-Skills
- Execution Checklist
- Error Handling
- Metrics
Sub-Skills
- Self-Contained Architecture (+1)
- Basic Template
- 1. Interactive Dashboard (+1)
- Common CDN Libraries
- File Naming (+2)
1---2name: web-artifacts-builder-23description: 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.4---56# Web Artifacts Builder78## Overview910Create 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.1112## When to Use1314- Creating interactive demos or prototypes15- Building standalone calculators or tools16- Data visualization dashboards17- Interactive documentation18- Shareable proof-of-concepts19- Any web experience that needs to work offline2021## Quick Start22231. **Create single HTML file** with all CSS/JS inline242. **Use CDN for libraries** (Chart.js, Plotly, etc.)253. **Embed data directly** as JSON or JS objects264. **Test locally** by opening file in browser275. **Share** as single file attachment2829## Human review / rating apps3031When 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.3233Recommended pattern:3435- Add localStorage autosave, progress tracking, JSON/CSV export, and JSON import/resume.36- Add a prominent `Submit` button as the primary completion path; export/copy controls should be visually secondary.37- Add a visible receiver health/status indicator so the user knows whether Submit will work before investing time in scoring.38- Place a tiny localhost receiver next to the HTML artifact (`GET /health`, `POST /submit`) that writes timestamped submissions plus `submissions/latest.json`.39- 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.40- Verify with a browser load, a test edit, a submit POST, and reset test state before handoff.4142See `references/interactive-review-submit-pattern.md` for implementation details and pitfalls.4344```html45<!DOCTYPE html>46<html lang="en">47<head>48 <meta charset="UTF-8">49 <meta name="viewport" content="width=device-width, initial-scale=1.0">50 <title>Web Artifact</title>51 <style>52 body { font-family: system-ui; padding: 20px; }53 .btn { padding: 10px 20px; background: #007bff; color: white; border: none; cursor: pointer; }54 </style>55</head>56<body>57 <h1>Interactive Tool</h1>58 <button class="btn" onclick="calculate()">Calculate</button>59 <div id="result"></div>60 <script>61 function calculate() {62 document.getElementById('result').textContent = 'Result: ' + (Math.random() * 100).toFixed(2);63 }64 </script>65</body>66</html>67```6869## Interactive Rating / Review Apps7071Use this pattern when the user needs to rate, triage, or calibrate a batch of examples in a browser instead of editing Markdown/CSV by hand.72731. Build a single-file HTML app with embedded JSON data, no server dependency, and all CSS/JS inline.742. Include per-item navigation, progress tracking, score inputs, defect/checklist toggles, notes, and autosave via `localStorage`.753. Provide JSON and CSV export; if the user may resume later, also provide JSON import or copy-to-clipboard.764. Verify the artifact before handoff:77 - extract embedded JavaScript and run `node --check` when Node is available;78 - open the file in a browser and confirm the expected card/control counts;79 - exercise one score/checkbox/note update and then reset the test state so the user starts clean.805. Watch for JavaScript string-escaping hazards when generating HTML from Python. In particular, CSV export code must use an escaped newline string (`'\\n'`) inside JavaScript; an actual newline inside a quoted JS string will make the page render shell content but fail to initialize.8182Starter template: `templates/interactive-rating-app.html`.8384## Related Skills8586- [frontend-design](../../content-design/frontend-design/SKILL.md) - Advanced UI design87- [algorithmic-art](../../content-design/algorithmic-art/SKILL.md) - Generative visuals88- [theme-factory](../../content-design/theme-factory/SKILL.md) - Color and typography8990---9192## Version History9394- **2.0.0** (2026-01-02): Upgraded to v2 template - added Quick Start, When to Use, Execution Checklist, Error Handling, Metrics sections95- **1.0.0** (2024-10-15): Initial release with basic template, dashboard, calculator, data visualization examples, CDN library references, best practices9697## Sub-Skills9899- [Performance (+2)](performance/SKILL.md)100101## Sub-Skills102103- [Execution Checklist](execution-checklist/SKILL.md)104- [Error Handling](error-handling/SKILL.md)105- [Metrics](metrics/SKILL.md)106107## Sub-Skills108109- [Self-Contained Architecture (+1)](self-contained-architecture/SKILL.md)110- [Basic Template](basic-template/SKILL.md)111- [1. Interactive Dashboard (+1)](1-interactive-dashboard/SKILL.md)112- [Common CDN Libraries](common-cdn-libraries/SKILL.md)113- [File Naming (+2)](file-naming/SKILL.md)
vamseeachanta