web-artifacts-builder - SKILL.md Agent Skill

name: web-artifacts-builder description: Build interactive web artifacts — single-file HTML/CSS/JS apps, data visualizations, dashboards, games, and interactive demos. Use when asked to create something visual and interactive that runs in a browser.

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.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>App Title</title>
  <style>
    /* All CSS inline */
  </style>
</head>
<body>
  <!-- Content -->
  <script>
    // All JS inline
  </script>
</body>
</html>

Common Artifact Types

Data visualization

Use Chart.js (CDN) for charts. Load data inline as JS arrays.

<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>

Interactive dashboard

Tailwind CSS (CDN) for rapid layout:

<script src="https://cdn.tailwindcss.com"></script>

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

Understand the desired output with an example or mockup description
Choose the minimal set of libraries needed
Build the full HTML in one file
Write to /data/ using the write tool
Confirm the file path so the user can open it