web-artifacts-builder

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("clawpilotTheme");
    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

shadcn/ui components: https://ui.shadcn.com/docs/components