skills.homes logoskills.homescapability registry
home/categories/design/mathews-tom-armory-skills-static-web-artifacts-builder-skill-md
cd ..
designcontent-media

static-web-artifacts-builder

Build elaborate, self-contained static HTML artifacts opened in a browser — interactive diagrams, architecture visuals, data dashboards, HTML infographics, and rich interactive deliverables. Use this skill when the output is an HTML file viewed in a browser. Zero build toolchain — no React, no Vite, no Parcel. Pure HTML5 + CSS3 (Grid/Flexbox) + inline SVG. Triggers on: "interactive HTML", "self-contained web component", "open in browser", "interactive diagram", "visual dashboard", "HTML artifact", "HTML infographic", "interactive infographic". For image file output (PNG/SVG), use concept-to-image instead.

View Sourcedesign
Mathews-Tom
maintainer
Mathews-Tom
Updated 4/7/2026
Stars
155
Forks
25
quick start

Installation and usage

Build elaborate, self-contained static HTML artifacts opened in a browser — interactive diagrams, architecture visuals, data dashboards, HTML infographics, and rich interactive deliverables. Use this skill when the output is an HTML file viewed in a browser. Zero build toolchain — no React, no Vite, no Parcel. Pure HTML5 + CSS3 (Grid/Flexbox) + inline SVG. Triggers on: "interactive HTML", "self-contained web component", "open in browser", "interactive diagram", "visual dashboard", "HTML artifact", "HTML infographic", "interactive infographic". For image file output (PNG/SVG), use concept-to-image instead.

Installation
$ install --globalskills.sh
Usage

Once installed, you can use this skill by running the following command in your terminal:

skills use static-web-artifacts-builder