Static Web Artifacts Builder
To build high-density static infographic artifacts, follow these steps:
- Initialize the project scaffold using
scripts/init-artifact.sh
- Develop your artifact by editing the generated HTML file(s)
- Validate and finalize using
scripts/bundle-artifact.sh
- Display artifact to user
Stack: Vanilla HTML5 + CSS3 (Grid/Flexbox) + inline SVG — zero runtime dependencies
Design & Style Guidelines
VERY IMPORTANT: To avoid what is often referred to as "AI slop", avoid excessive centered layouts, purple gradients, uniform rounded corners, and Inter font.
Infographic-Specific Constraints
- Density: Content-to-whitespace ratio ≥ 70:30. Maximize signal per pixel.
- Geometry: Layered/nested containers, shaped regions (clip-path, border-radius variations), gradient fills, subtle box-shadows — not flat uniform boxes.
- Iconography: Inline SVG icons for every major concept. No naked text labels.
- Color: Purposeful palette (3-4 hues + neutrals), encoding meaning (category, flow direction, severity). Define as CSS custom properties.
- Flows: Directional connectors with SVG arrowheads, curved paths, labeled edges. Architecture diagrams = layered tiers with bidirectional data flows, not flat node graphs.
- Layout math: CSS Grid with explicit
grid-template-columns/grid-template-rows fractional allocations. No auto-spacing defaults. Every margin/padding intentional.
Quick Start
Step 1: Initialize Project
Run the initialization script to create a new static project:
bash scripts/init-artifact.sh <project-name>
cd <project-name>
This creates a minimal scaffold with:
- ✅ Template HTML with CSS custom properties (theming)
- ✅ CSS Grid + Flexbox layout utilities (inline
<style>)
- ✅ Print-ready viewport meta configuration
- ✅ No node_modules, no package.json, no build toolchain
Step 2: Develop Your Artifact
Edit the generated index.html directly. Each HTML file = one page = one clear message.
Key patterns:
- Use CSS Grid
grid-template-areas for named region layouts
- Use
fr units for proportional spatial allocation
- Embed SVG icons inline (not as external references)
- Use CSS custom properties (
--color-primary, --color-accent, etc.) for palette cohesion
- Use
clip-path, border-radius, gradients, and box-shadow for visual depth
Step 3: Validate and Finalize
bash scripts/bundle-artifact.sh
This validates the artifact is fully self-contained:
- Checks for zero external resource references (no CDN links, no external stylesheets/scripts)
- Verifies inline SVG presence
- Reports file size
- Copies validated output to
bundle.html
Step 4: Share Artifact with User
Share the validated HTML file in conversation with the user so they can view it as an artifact.
When to Use This Skill vs Other Visual Skills
| Task |
Use This Skill |
Use Instead |
| Rich infographic with multiple sections, high data density |
Yes |
— |
| Self-contained dashboard with interactive tabs or toggles |
Yes |
— |
| Static architecture/topology diagram, editable afterward in Figma/Illustrator |
No |
architecture-diagram — produces real vector SVG, not this skill's interactive HTML |
| Simple concept illustration or icon-style image |
No |
concept-to-image |
| Slide deck or multi-page presentation |
No |
html-presentation |
| Single-page visual where CSS Grid layout control is critical |
Yes |
— |
| Artifact must be screenshot-ready via Playwright |
Yes (with caveat — see Limitations) |
— |
Error Handling
| Error |
Cause |
Resolution |
CDN link detected by bundle-artifact.sh |
External stylesheet or script reference in HTML |
Inline all CSS and JS — no external URLs allowed in output |
| Content overflow / clipping in browser |
Viewport too small or fixed heights with overflow:hidden |
Use min-height instead of height; test at 1440px wide; use overflow: auto on scroll regions |
| Playwright screenshot cuts off content |
Page height exceeds screenshot viewport |
Set page.setViewportSize to match content dimensions; use fullPage: true |
bundle-artifact.sh reports missing inline SVG |
SVG loaded via <img src> or external ref |
Replace with inline <svg> block directly in HTML |
| File size too large to share as artifact |
Embedded base64 images or verbose SVG |
Optimize SVG paths; avoid embedding raster images |
Limitations
- Browser required for screenshots: Rendering and Playwright-based screenshot capture require a browser runtime. The HTML file itself has no server-side dependency, but visual validation needs a browser.
- No server-side rendering: Output is purely client-side. Dynamic data, API calls, or server-computed content are not supported.
- No persistent state: The artifact has no backend. User interactions (form inputs, toggles) reset on page reload and cannot be saved.
- File size guidance: Aim for under 500KB. Artifacts above 1MB may not render as inline conversation artifacts in some Claude interfaces.
- Font availability: System fonts only (or inline base64-encoded web fonts). Do not reference Google Fonts or other external font CDNs.
- Print fidelity: CSS print media queries are supported but browser print rendering varies. Test
@media print explicitly if print output is a requirement.
1---2name: static-web-artifacts-builder3description: Build self-contained static HTML artifacts opened in a browser: interactive diagrams, dashboards, infographics. Pure HTML5+CSS3+inline SVG, zero toolchain. Triggers on: "interactive HTML", "open in browser", "HTML artifact", "visual dashboard", "HTML infographic". NOT for PNG/SVG output, use concept-to-image.4---56# Static Web Artifacts Builder78To build high-density static infographic artifacts, follow these steps:9101. Initialize the project scaffold using `scripts/init-artifact.sh`112. Develop your artifact by editing the generated HTML file(s)123. Validate and finalize using `scripts/bundle-artifact.sh`134. Display artifact to user1415**Stack**: Vanilla HTML5 + CSS3 (Grid/Flexbox) + inline SVG — zero runtime dependencies1617## Design & Style Guidelines1819VERY IMPORTANT: To avoid what is often referred to as "AI slop", avoid excessive centered layouts, purple gradients, uniform rounded corners, and Inter font.2021### Infographic-Specific Constraints2223- **Density**: Content-to-whitespace ratio ≥ 70:30. Maximize signal per pixel.24- **Geometry**: Layered/nested containers, shaped regions (clip-path, border-radius variations), gradient fills, subtle box-shadows — not flat uniform boxes.25- **Iconography**: Inline SVG icons for every major concept. No naked text labels.26- **Color**: Purposeful palette (3-4 hues + neutrals), encoding meaning (category, flow direction, severity). Define as CSS custom properties.27- **Flows**: Directional connectors with SVG arrowheads, curved paths, labeled edges. Architecture diagrams = layered tiers with bidirectional data flows, not flat node graphs.28- **Layout math**: CSS Grid with explicit `grid-template-columns`/`grid-template-rows` fractional allocations. No auto-spacing defaults. Every margin/padding intentional.2930## Quick Start3132### Step 1: Initialize Project3334Run the initialization script to create a new static project:3536```bash37bash scripts/init-artifact.sh <project-name>38cd <project-name>39```4041This creates a minimal scaffold with:4243- ✅ Template HTML with CSS custom properties (theming)44- ✅ CSS Grid + Flexbox layout utilities (inline `<style>`)45- ✅ Print-ready viewport meta configuration46- ✅ No node_modules, no package.json, no build toolchain4748### Step 2: Develop Your Artifact4950Edit the generated `index.html` directly. Each HTML file = one page = one clear message.5152Key patterns:5354- Use CSS Grid `grid-template-areas` for named region layouts55- Use `fr` units for proportional spatial allocation56- Embed SVG icons inline (not as external references)57- Use CSS custom properties (`--color-primary`, `--color-accent`, etc.) for palette cohesion58- Use `clip-path`, `border-radius`, gradients, and `box-shadow` for visual depth5960### Step 3: Validate and Finalize6162```bash63bash scripts/bundle-artifact.sh64```6566This validates the artifact is fully self-contained:6768- Checks for zero external resource references (no CDN links, no external stylesheets/scripts)69- Verifies inline SVG presence70- Reports file size71- Copies validated output to `bundle.html`7273### Step 4: Share Artifact with User7475Share the validated HTML file in conversation with the user so they can view it as an artifact.7677---7879## When to Use This Skill vs Other Visual Skills8081| Task | Use This Skill | Use Instead |82| --------------------------------------------------------------- | ----------------------------------- | --------------------------------------------------- |83| Rich infographic with multiple sections, high data density | Yes | — |84| Self-contained dashboard with interactive tabs or toggles | Yes | — |85| Static architecture/topology diagram, editable afterward in Figma/Illustrator | No | `architecture-diagram` — produces real vector SVG, not this skill's interactive HTML |86| Simple concept illustration or icon-style image | No | `concept-to-image` |87| Slide deck or multi-page presentation | No | `html-presentation` |88| Single-page visual where CSS Grid layout control is critical | Yes | — |89| Artifact must be screenshot-ready via Playwright | Yes (with caveat — see Limitations) | — |9091---9293## Error Handling9495| Error | Cause | Resolution |96| ----------------------------------------------- | -------------------------------------------------------- | ------------------------------------------------------------------------------------------------- |97| CDN link detected by `bundle-artifact.sh` | External stylesheet or script reference in HTML | Inline all CSS and JS — no external URLs allowed in output |98| Content overflow / clipping in browser | Viewport too small or fixed heights with overflow:hidden | Use `min-height` instead of `height`; test at 1440px wide; use `overflow: auto` on scroll regions |99| Playwright screenshot cuts off content | Page height exceeds screenshot viewport | Set `page.setViewportSize` to match content dimensions; use `fullPage: true` |100| `bundle-artifact.sh` reports missing inline SVG | SVG loaded via `<img src>` or external ref | Replace with inline `<svg>` block directly in HTML |101| File size too large to share as artifact | Embedded base64 images or verbose SVG | Optimize SVG paths; avoid embedding raster images |102103---104105## Limitations106107- **Browser required for screenshots**: Rendering and Playwright-based screenshot capture require a browser runtime. The HTML file itself has no server-side dependency, but visual validation needs a browser.108- **No server-side rendering**: Output is purely client-side. Dynamic data, API calls, or server-computed content are not supported.109- **No persistent state**: The artifact has no backend. User interactions (form inputs, toggles) reset on page reload and cannot be saved.110- **File size guidance**: Aim for under 500KB. Artifacts above 1MB may not render as inline conversation artifacts in some Claude interfaces.111- **Font availability**: System fonts only (or inline base64-encoded web fonts). Do not reference Google Fonts or other external font CDNs.112- **Print fidelity**: CSS print media queries are supported but browser print rendering varies. Test `@media print` explicitly if print output is a requirement.
mathews-tom