---
name: kxiandaoyan/web-artifacts-builder
source: https://app.decimal.ai/s/kxiandaoyan-web-artifacts-builder@1/SKILL.md
source_sha256: 6793be535308
---
# Web Artifacts Builder
Create self-contained, interactive web artifacts delivered as single HTML files.
## Output Format
Always produce a **single `index.html` file** saved to `/data/` that includes all CSS and JS inline. The file must work without any server or build step.
```html
App Title
```
## Common Artifact Types
### Data visualization
Use Chart.js (CDN) for charts. Load data inline as JS arrays.
```html
```
### Interactive dashboard
Tailwind CSS (CDN) for rapid layout:
```html
```
### Simple game / simulation
Vanilla JS + Canvas API. No dependencies needed.
### Form / calculator
HTML form elements + JS event listeners. Validate client-side.
## Guidelines
- **Mobile-first**: Use responsive design (flexbox/grid)
- **Dark/light**: Default to a clean light theme unless asked otherwise
- **Performance**: Inline small images as base64; link CDN assets for large libraries
- **Accessibility**: Semantic HTML, ARIA labels on interactive elements
- **Save path**: `/data/artifact-name.html` or `/data/index.html`
## Workflow
1. Understand the desired output with an example or mockup description
2. Choose the minimal set of libraries needed
3. Build the full HTML in one file
4. Write to `/data/` using the `write` tool
5. Confirm the file path so the user can open it