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-rowsfractional 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-areasfor named region layouts - Use
frunits 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, andbox-shadowfor visual depth
Step 3: Validate and Finalize
bash scripts/bundle-artifact.shThis 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 | — |
| Architecture diagram with bidirectional flows and layered tiers | Yes | architecture-diagram for auto-generated from code |
| Simple concept illustration or icon-style image | No | concept-to-image |
| Slide deck or multi-page presentation | No | html-presentation |
| Architecture diagram generated from existing codebase | No | architecture-diagram |
| 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 printexplicitly if print output is a requirement.