Artifacts Builder
Overview
Generate self-contained, production-quality HTML/CSS/JS artifacts that run in any modern browser without a build step. Each artifact is a single file (or minimal file set) containing everything needed for an interactive demo, prototype, data visualization, or utility tool. Emphasis on progressive enhancement, responsive design, and clean code.
Phase 1: Scope Definition
- Clarify the artifact's purpose (demo, prototype, tool, visualization)
- Determine interactivity level (static, interactive, data-driven)
- Identify required dependencies (none, CDN-loaded, embedded)
- Define responsive requirements (mobile, desktop, both)
- Set constraints (file size, browser support, offline capability)
STOP — Confirm scope and constraints with user before architecture decisions.
Artifact Type Decision Table
| Purpose |
Complexity |
Dependencies |
Example |
| Static demo |
Low |
None |
Product mockup, landing page |
| Interactive widget |
Medium |
None or Alpine.js |
Calculator, form builder |
| Data visualization |
Medium-High |
D3.js or Chart.js |
Dashboard, chart explorer |
| Prototype |
Medium |
Alpine.js or Petite-Vue |
Clickable UI prototype |
| Utility tool |
Medium-High |
Varies |
JSON formatter, color picker |
| Generative art |
Medium |
None |
Canvas animation, pattern generator |
| Presentation |
Medium |
None or Mermaid |
Slide deck, diagram viewer |
Phase 2: Architecture
- Choose single-file or multi-file approach
- Select CDN dependencies (if any)
- Plan component structure within the file
- Define state management approach
- Plan progressive enhancement layers
STOP — Present architecture and dependency choices for approval.
Architecture Decision Table
| Constraint |
Single-File |
Multi-File |
| Easy sharing (email, paste) |
Yes |
No |
| File size < 100KB |
Yes |
Either |
| Multiple pages/views |
Possible (SPA) |
Better |
| Team collaboration |
Difficult |
Better |
| Offline use |
Yes (self-contained) |
Needs bundling |
| SEO requirements |
N/A |
N/A (artifacts are tools) |
Dependency Decision Table
| Need |
Recommended |
CDN URL |
Size |
| Lightweight reactivity |
Alpine.js |
cdn.jsdelivr.net/npm/alpinejs@3 |
~15KB |
| Minimal Vue-like |
Petite-Vue |
unpkg.com/petite-vue |
~6KB |
| Charts |
Chart.js |
cdn.jsdelivr.net/npm/chart.js@4 |
~65KB |
| Data visualization |
D3.js |
cdn.jsdelivr.net/npm/d3@7 |
~90KB |
| Diagrams |
Mermaid |
cdn.jsdelivr.net/npm/mermaid@10 |
~120KB |
| CSS framework (proto) |
Tailwind Play CDN |
cdn.tailwindcss.com |
Runtime |
| Icons |
Lucide |
unpkg.com/lucide@latest |
On-demand |
| No dependency needed |
Vanilla JS |
N/A |
0KB |
CDN Usage Rules
| Rule |
Rationale |
Pin to major version (@3, @7) |
Prevent breaking changes |
| Maximum 3 CDN dependencies |
Keep artifacts lightweight |
Add integrity and crossorigin |
Security against CDN compromise |
| Provide graceful degradation |
Work if CDN fails |
| Prefer smaller alternatives |
Alpine over React, Petite-Vue over Vue |
Phase 3: Implementation
- Build semantic HTML structure
- Add CSS (inline
<style> or embedded)
- Implement JavaScript functionality
- Add error handling and fallbacks
- Test across viewports and browsers
STOP — Verify the artifact works correctly before delivering to user.
Template Structure
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>[Artifact Title]</title>
<style>
/* Reset */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
/* Design Tokens */
:root {
--color-bg: #ffffff;
--color-text: #1a1a2e;
--color-primary: #3b82f6;
--color-border: #e2e8f0;
--radius: 0.5rem;
--space: 1rem;
--font: system-ui, -apple-system, sans-serif;
}
@media (prefers-color-scheme: dark) {
:root {
--color-bg: #0f172a;
--color-text: #e2e8f0;
--color-primary: #60a5fa;
--color-border: #334155;
}
}
/* Base Styles */
body {
font-family: var(--font);
background: var(--color-bg);
color: var(--color-text);
line-height: 1.6;
}
/* Component Styles */
/* ... */
</style>
</head>
<body>
<!-- Semantic HTML content -->
<script>
// Application logic
(function() {
'use strict';
// ...
})();
</script>
</body>
</html>
Responsive Design Patterns
Container-Based Layout
.container {
width: min(100% - 2rem, 1200px);
margin-inline: auto;
}
.grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(min(300px, 100%), 1fr));
gap: var(--space);
}
Mobile-First Media Queries
/* Base: mobile */
.layout { display: flex; flex-direction: column; }
/* Tablet and up */
@media (min-width: 768px) {
.layout { flex-direction: row; }
.sidebar { width: 280px; flex-shrink: 0; }
}
Progressive Enhancement
| Layer |
Purpose |
Requirement |
| HTML |
Content accessible and meaningful |
Works without CSS or JS |
| CSS |
Visual presentation and layout |
Works without JS |
| JavaScript |
Enhanced interactivity |
Adds dynamic behavior |
Feature Detection
// Check before using modern APIs
if ('IntersectionObserver' in window) {
// Use lazy loading
} else {
// Load all images immediately
}
if (CSS.supports('backdrop-filter', 'blur(10px)')) {
element.classList.add('glass-effect');
}
State Management (No Framework)
Simple State Pattern
function createStore(initialState) {
let state = { ...initialState };
const listeners = new Set();
return {
getState: () => ({ ...state }),
setState(updates) {
state = { ...state, ...updates };
listeners.forEach(fn => fn(state));
},
subscribe(fn) {
listeners.add(fn);
return () => listeners.delete(fn);
},
};
}
URL-Based State (for shareable artifacts)
function syncStateWithURL(store) {
const params = new URLSearchParams(location.search);
for (const [key, value] of params) {
store.setState({ [key]: JSON.parse(value) });
}
store.subscribe(state => {
const params = new URLSearchParams();
Object.entries(state).forEach(([k, v]) => params.set(k, JSON.stringify(v)));
history.replaceState(null, '', `?${params}`);
});
}
Export Formats
| Format |
Use Case |
Method |
| Single HTML file |
Sharing, embedding |
Self-contained <style> and <script> |
| HTML + assets |
Complex artifacts |
Separate CSS/JS files |
| Data URL |
Inline embedding |
data:text/html;base64,... |
| Screenshot/PNG |
Documentation |
html2canvas or browser screenshot |
| PDF |
Print/report |
window.print() with print styles |
Quality Checklist
Anti-Patterns / Common Mistakes
| Anti-Pattern |
Why It Is Wrong |
What to Do Instead |
| React/Vue/Angular in single-file artifact |
Massive overhead for simple interactions |
Use Alpine.js or vanilla JS |
| Heavy framework from CDN for simple UI |
Slow load, wasted bandwidth |
Match dependency weight to need |
| Inline styles instead of CSS custom properties |
Cannot theme, cannot dark-mode |
Use CSS custom properties (tokens) |
| No error handling on user input |
Crashes on bad input |
Validate and provide feedback |
| Fixed pixel dimensions |
Breaks on mobile, tablets |
Use responsive units (%, rem, vw) |
Missing <meta viewport> |
Mobile renders desktop-zoomed |
Always include viewport meta tag |
Blocking <script> in <head> |
Delays page rendering |
Use defer attribute or put at end of body |
| No IIFE wrapper for script |
Global scope pollution |
Wrap in (function() { ... })() |
| Hardcoded colors without tokens |
Cannot switch themes |
Use CSS custom properties |
Integration Points
| Skill |
Integration |
ui-ux-pro-max |
Style selection and UX guidelines |
ui-design-system |
Design tokens for consistent theming |
canvas-design |
Canvas/SVG visualizations within artifacts |
senior-frontend |
Complex component patterns |
mobile-design |
Mobile-responsive artifact design |
planning |
Artifact scope is defined during planning |
Skill Type
FLEXIBLE — Adapt the architecture, dependencies, and complexity to the artifact's requirements. Simple demos should remain as minimal as possible; complex tools may use lightweight frameworks and multiple CDN dependencies.
1---2name: artifacts-builder3description: Use when the user needs standalone HTML/CSS/JS artifacts — interactive demos, prototypes, single-file applications, or visual tools that run independently in a browser. Triggers: user says "artifact", "demo", "prototype", "single-file app", "HTML tool", "interactive widget", "standalone page", building something that runs in a browser without a build step.4---5
6# Artifacts Builder
7
8## Overview
9
10Generate self-contained, production-quality HTML/CSS/JS artifacts that run in any modern browser without a build step. Each artifact is a single file (or minimal file set) containing everything needed for an interactive demo, prototype, data visualization, or utility tool. Emphasis on progressive enhancement, responsive design, and clean code.
11
12## Phase 1: Scope Definition
13
141. Clarify the artifact's purpose (demo, prototype, tool, visualization)
152. Determine interactivity level (static, interactive, data-driven)
163. Identify required dependencies (none, CDN-loaded, embedded)
174. Define responsive requirements (mobile, desktop, both)
185. Set constraints (file size, browser support, offline capability)
19
20**STOP — Confirm scope and constraints with user before architecture decisions.**
21
22### Artifact Type Decision Table
23
24| Purpose | Complexity | Dependencies | Example |
25|---|---|---|---|
26| Static demo | Low | None | Product mockup, landing page |
27| Interactive widget | Medium | None or Alpine.js | Calculator, form builder |
28| Data visualization | Medium-High | D3.js or Chart.js | Dashboard, chart explorer |
29| Prototype | Medium | Alpine.js or Petite-Vue | Clickable UI prototype |
30| Utility tool | Medium-High | Varies | JSON formatter, color picker |
31| Generative art | Medium | None | Canvas animation, pattern generator |
32| Presentation | Medium | None or Mermaid | Slide deck, diagram viewer |
33
34## Phase 2: Architecture
35
361. Choose single-file or multi-file approach
372. Select CDN dependencies (if any)
383. Plan component structure within the file
394. Define state management approach
405. Plan progressive enhancement layers
41
42**STOP — Present architecture and dependency choices for approval.**
43
44### Architecture Decision Table
45
46| Constraint | Single-File | Multi-File |
47|---|---|---|
48| Easy sharing (email, paste) | Yes | No |
49| File size < 100KB | Yes | Either |
50| Multiple pages/views | Possible (SPA) | Better |
51| Team collaboration | Difficult | Better |
52| Offline use | Yes (self-contained) | Needs bundling |
53| SEO requirements | N/A | N/A (artifacts are tools) |
54
55### Dependency Decision Table
56
57| Need | Recommended | CDN URL | Size |
58|---|---|---|---|
59| Lightweight reactivity | Alpine.js | `cdn.jsdelivr.net/npm/alpinejs@3` | ~15KB |
60| Minimal Vue-like | Petite-Vue | `unpkg.com/petite-vue` | ~6KB |
61| Charts | Chart.js | `cdn.jsdelivr.net/npm/chart.js@4` | ~65KB |
62| Data visualization | D3.js | `cdn.jsdelivr.net/npm/d3@7` | ~90KB |
63| Diagrams | Mermaid | `cdn.jsdelivr.net/npm/mermaid@10` | ~120KB |
64| CSS framework (proto) | Tailwind Play CDN | `cdn.tailwindcss.com` | Runtime |
65| Icons | Lucide | `unpkg.com/lucide@latest` | On-demand |
66| No dependency needed | Vanilla JS | N/A | 0KB |
67
68### CDN Usage Rules
69
70| Rule | Rationale |
71|---|---|
72| Pin to major version (`@3`, `@7`) | Prevent breaking changes |
73| Maximum 3 CDN dependencies | Keep artifacts lightweight |
74| Add `integrity` and `crossorigin` | Security against CDN compromise |
75| Provide graceful degradation | Work if CDN fails |
76| Prefer smaller alternatives | Alpine over React, Petite-Vue over Vue |
77
78## Phase 3: Implementation
79
801. Build semantic HTML structure
812. Add CSS (inline `<style>` or embedded)
823. Implement JavaScript functionality
834. Add error handling and fallbacks
845. Test across viewports and browsers
85
86**STOP — Verify the artifact works correctly before delivering to user.**
87
88### Template Structure
89
90```html
91<!DOCTYPE html>
92<html lang="en">
93<head>
94 <meta charset="UTF-8">
95 <meta name="viewport" content="width=device-width, initial-scale=1.0">
96 <title>[Artifact Title]</title>
97 <style>
98 /* Reset */
99 *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
100
101 /* Design Tokens */
102 :root {
103 --color-bg: #ffffff;
104 --color-text: #1a1a2e;
105 --color-primary: #3b82f6;
106 --color-border: #e2e8f0;
107 --radius: 0.5rem;
108 --space: 1rem;
109 --font: system-ui, -apple-system, sans-serif;
110 }
111
112 @media (prefers-color-scheme: dark) {
113 :root {
114 --color-bg: #0f172a;
115 --color-text: #e2e8f0;
116 --color-primary: #60a5fa;
117 --color-border: #334155;
118 }
119 }
120
121 /* Base Styles */
122 body {
123 font-family: var(--font);
124 background: var(--color-bg);
125 color: var(--color-text);
126 line-height: 1.6;
127 }
128
129 /* Component Styles */
130 /* ... */
131 </style>
132</head>
133<body>
134 <!-- Semantic HTML content -->
135
136 <script>
137 // Application logic
138 (function() {
139 'use strict';
140 // ...
141 })();
142 </script>
143</body>
144</html>
145```
146
147### Responsive Design Patterns
148
149#### Container-Based Layout
150
151```css
152.container {
153 width: min(100% - 2rem, 1200px);
154 margin-inline: auto;
155}
156
157.grid {
158 display: grid;
159 grid-template-columns: repeat(auto-fit, minmax(min(300px, 100%), 1fr));
160 gap: var(--space);
161}
162```
163
164#### Mobile-First Media Queries
165
166```css
167/* Base: mobile */
168.layout { display: flex; flex-direction: column; }
169
170/* Tablet and up */
171@media (min-width: 768px) {
172 .layout { flex-direction: row; }
173 .sidebar { width: 280px; flex-shrink: 0; }
174}
175```
176
177### Progressive Enhancement
178
179| Layer | Purpose | Requirement |
180|---|---|---|
181| HTML | Content accessible and meaningful | Works without CSS or JS |
182| CSS | Visual presentation and layout | Works without JS |
183| JavaScript | Enhanced interactivity | Adds dynamic behavior |
184
185#### Feature Detection
186
187```javascript
188// Check before using modern APIs
189if ('IntersectionObserver' in window) {
190 // Use lazy loading
191} else {
192 // Load all images immediately
193}
194
195if (CSS.supports('backdrop-filter', 'blur(10px)')) {
196 element.classList.add('glass-effect');
197}
198```
199
200### State Management (No Framework)
201
202#### Simple State Pattern
203
204```javascript
205function createStore(initialState) {
206 let state = { ...initialState };
207 const listeners = new Set();
208
209 return {
210 getState: () => ({ ...state }),
211 setState(updates) {
212 state = { ...state, ...updates };
213 listeners.forEach(fn => fn(state));
214 },
215 subscribe(fn) {
216 listeners.add(fn);
217 return () => listeners.delete(fn);
218 },
219 };
220}
221```
222
223#### URL-Based State (for shareable artifacts)
224
225```javascript
226function syncStateWithURL(store) {
227 const params = new URLSearchParams(location.search);
228 for (const [key, value] of params) {
229 store.setState({ [key]: JSON.parse(value) });
230 }
231 store.subscribe(state => {
232 const params = new URLSearchParams();
233 Object.entries(state).forEach(([k, v]) => params.set(k, JSON.stringify(v)));
234 history.replaceState(null, '', `?${params}`);
235 });
236}
237```
238
239### Export Formats
240
241| Format | Use Case | Method |
242|---|---|---|
243| Single HTML file | Sharing, embedding | Self-contained `<style>` and `<script>` |
244| HTML + assets | Complex artifacts | Separate CSS/JS files |
245| Data URL | Inline embedding | `data:text/html;base64,...` |
246| Screenshot/PNG | Documentation | `html2canvas` or browser screenshot |
247| PDF | Print/report | `window.print()` with print styles |
248
249## Quality Checklist
250
251- [ ] Valid HTML5 (`<!DOCTYPE html>`, `lang` attribute)
252- [ ] Responsive viewport meta tag
253- [ ] Works without JavaScript (content visible)
254- [ ] Dark mode support (`prefers-color-scheme`)
255- [ ] Keyboard navigable
256- [ ] No console errors
257- [ ] File size under 100KB (excluding images)
258- [ ] Cross-browser tested (Chrome, Firefox, Safari)
259- [ ] Print styles if applicable
260- [ ] Semantic HTML elements used appropriately
261
262## Anti-Patterns / Common Mistakes
263
264| Anti-Pattern | Why It Is Wrong | What to Do Instead |
265|---|---|---|
266| React/Vue/Angular in single-file artifact | Massive overhead for simple interactions | Use Alpine.js or vanilla JS |
267| Heavy framework from CDN for simple UI | Slow load, wasted bandwidth | Match dependency weight to need |
268| Inline styles instead of CSS custom properties | Cannot theme, cannot dark-mode | Use CSS custom properties (tokens) |
269| No error handling on user input | Crashes on bad input | Validate and provide feedback |
270| Fixed pixel dimensions | Breaks on mobile, tablets | Use responsive units (%, rem, vw) |
271| Missing `<meta viewport>` | Mobile renders desktop-zoomed | Always include viewport meta tag |
272| Blocking `<script>` in `<head>` | Delays page rendering | Use `defer` attribute or put at end of body |
273| No IIFE wrapper for script | Global scope pollution | Wrap in `(function() { ... })()` |
274| Hardcoded colors without tokens | Cannot switch themes | Use CSS custom properties |
275
276## Integration Points
277
278| Skill | Integration |
279|---|---|
280| `ui-ux-pro-max` | Style selection and UX guidelines |
281| `ui-design-system` | Design tokens for consistent theming |
282| `canvas-design` | Canvas/SVG visualizations within artifacts |
283| `senior-frontend` | Complex component patterns |
284| `mobile-design` | Mobile-responsive artifact design |
285| `planning` | Artifact scope is defined during planning |
286
287## Skill Type
288
289**FLEXIBLE** — Adapt the architecture, dependencies, and complexity to the artifact's requirements. Simple demos should remain as minimal as possible; complex tools may use lightweight frameworks and multiple CDN dependencies.
pixel-process-ug