| name | web-artifacts-builder |
| description | Create interactive HTML artifacts (dashboards, visualizations, org charts, network maps, trackers, comparisons) as self-contained HTML files. Use whenever the user requests a web application, data visualization, interactive tool, or any HTML artifact. All output MUST use the Clawpilot theme variables defined in this skill. |
| license | Complete terms in LICENSE.txt |
Web Artifacts Builder
⚠️ MANDATORY: Clawpilot Theme (read this FIRST)
Every HTML artifact you generate MUST include all of the following. Do not skip any part. Do not invent your own color scheme. Do not hardcode colors.
1. Theme detection script (put this FIRST in a <script> tag before any other JS)
<script>
(() => {
const param = new URLSearchParams(window.location.search).get("scoutTheme");
const theme =
param || (window.matchMedia("(prefers-color-scheme: dark)").matches ? "dark" : "light");
document.documentElement.setAttribute("data-theme", theme);
})();
</script>
2. CSS variables (copy this EXACTLY into your <style> block)
:root {
color-scheme: light;
--cp-bg: #f7f4ef;
--cp-bg-elevated: #fcfbf8;
--cp-surface: #ffffff;
--cp-surface-soft: #f5f5f5;
--cp-border: #dedede;
--cp-border-strong: #919191;
--cp-text: #242424;
--cp-text-muted: #5c5c5c;
--cp-text-soft: #6f6f6f;
--cp-accent: #b11f4b;
--cp-accent-hover: #9a1a41;
--cp-accent-soft: rgba(177, 31, 75, 0.08);
--cp-accent-fg: #ffffff;
--cp-success: #16a34a;
--cp-danger: #dc2626;
--cp-warning: #f59e0b;
--cp-link: #0078d4;
--cp-shadow: 0 18px 48px rgba(0, 0, 0, 0.12);
--cp-overlay: rgba(255, 255, 255, 0.8);
--cp-panel: rgba(255, 255, 255, 0.86);
--cp-panel-strong: rgba(255, 255, 255, 0.96);
--cp-sheen: rgba(255, 255, 255, 0.55);
--cp-highlight: rgba(177, 31, 75, 0.12);
}
html[data-theme="dark"] {
color-scheme: dark;
--cp-bg: #3d3b3a;
--cp-bg-elevated: #343231;
--cp-surface: #292929;
--cp-surface-soft: #2e2e2e;
--cp-border: #474747;
--cp-border-strong: #5f5f5f;
--cp-text: #dedede;
--cp-text-muted: #919191;
--cp-text-soft: #b0b0b0;
--cp-accent: #fd8ea1;
--cp-accent-hover: #fb7b91;
--cp-accent-soft: rgba(253, 142, 161, 0.14);
--cp-accent-fg: #1a1a1a;
--cp-success: #4ade80;
--cp-danger: #f87171;
--cp-warning: #fbbf24;
--cp-link: #4da6ff;
--cp-shadow: 0 18px 48px rgba(0, 0, 0, 0.32);
--cp-overlay: rgba(41, 41, 41, 0.88);
--cp-panel: rgba(41, 41, 41, 0.72);
--cp-panel-strong: rgba(41, 41, 41, 0.96);
--cp-sheen: rgba(255, 255, 255, 0.04);
--cp-highlight: rgba(253, 142, 161, 0.12);
}
3. Use ONLY var(--cp-*) for all colors
body { background: var(--cp-bg); color: var(--cp-text); }- Borders:
var(--cp-border)
- Cards/panels:
var(--cp-surface)
- Muted text:
var(--cp-text-muted)
- Accent/primary:
var(--cp-accent)
- NEVER hardcode hex/rgb/hsl color values in component styles
4. Typography
- Font:
"Segoe UI", Aptos, Calibri, -apple-system, BlinkMacSystemFont, sans-serif
- Monospace:
Consolas, "Courier New", Courier, monospace
- Do NOT use Inter, Geist, or generic system-ui as the primary font.
5. Shape & Spacing
- Border radius:
0.625rem (10px) for most UI elements, 16px for cards
- Card shadow:
0 0 2px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.14) — subtle, not dramatic
- Use consistent 4px-based spacing
6. Do / Don't
- ✅ Warm off-white backgrounds (light), dark charcoal backgrounds (dark)
- ✅ Deep rose/crimson as the single accent color
- ✅ Clean surfaces, subtle borders
- ❌ No purple gradients, teal, or generic "AI blue" accents
- ❌ No excessive rounded corners or glassmorphism
- ❌ No Inter font or heavy drop shadows
- ❌ No hardcoded colors — always use
var(--cp-*) variables
Building Artifacts
For complex multi-component apps, use the full React + shadcn/ui pipeline described below. For simpler artifacts (single-file visualizations, dashboards), generate a self-contained HTML file directly — but you MUST still include the theme detection script and CSS variables above.
Stack: React 19 + TypeScript + Vite + Parcel (bundling) + Tailwind CSS + shadcn/ui
Step 1: Initialize Project
Run the initialization script to create a new React project:
bash scripts/init-artifact.sh <project-name>
cd <project-name>
This creates a fully configured project with:
- ✅ React + TypeScript (via Vite)
- ✅ Tailwind CSS 3.4.1 with shadcn/ui theming system
- ✅ Path aliases (
@/) configured
- ✅ 40+ shadcn/ui components pre-installed
- ✅ All Radix UI dependencies included
- ✅ Parcel configured for bundling (via .parcelrc)
- ✅ Node 18+ compatibility (auto-detects and pins Vite version)
Step 2: Develop Your Artifact
Edit the generated files. All components must use the --cp-* CSS variables defined above for colors — do not use shadcn/ui's default color tokens or hardcoded values.
Step 3: Bundle to Single HTML File
bash scripts/bundle-artifact.sh
This creates bundle.html — a self-contained artifact with all JavaScript, CSS, and dependencies inlined.
Requirements: Your project must have an index.html in the root directory.
What the script does:
- Installs bundling dependencies (parcel, @parcel/config-default, parcel-resolver-tspaths, html-inline)
- Creates
.parcelrc config with path alias support
- Builds with Parcel (no source maps)
- Inlines all assets into single HTML using html-inline
Step 4: Share Artifact with User
Share the bundled HTML file with the user so they can view it as an artifact.
Step 5: Testing/Visualizing the Artifact (Optional)
Only perform if necessary or requested. Use available tools (Playwright, Puppeteer, or other browser automation). Avoid testing upfront as it adds latency — test after presenting the artifact, if requested or if issues arise.
Reference
