Self-Contained HTML Pages
SourceWeft/SourceWeft
Builds and revises polished offline HTML reports, landing pages, infographics and interactive visualizations as a single file, with viewport QA before delivery.
Build self-contained static HTML artifacts opened in a browser: interactive diagrams, dashboards, infographics.
Install Static Web Artifacts Builder
$ npx skills add Mathews-Tom/armory --skill static-web-artifacts-builder -a claude-codeProject install by default; add -g for ~/.claude/skills/.
$ gh skill install Mathews-Tom/armory static-web-artifacts-builder --agent claude-codeProject scope by default; add --scope user for a personal install. Needs GitHub CLI 2.90.0 or later (public preview).
$ git clone --depth 1 https://github.com/Mathews-Tom/armory.git skills-src && mkdir -p .claude/skills && cp -r skills-src/skills/static-web-artifacts-builder .claude/skills/static-web-artifacts-builder && rm -rf skills-srcUse ~/.claude/skills/ instead of .claude/skills for a personal install. The folder must contain SKILL.md.
Claude Code skills documentation · loads skills from .claude/skills/
Install the "static-web-artifacts-builder" agent skill from https://github.com/Mathews-Tom/armory/tree/main/skills/static-web-artifacts-builder into .claude/skills/static-web-artifacts-builder/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "static-web-artifacts-builder", then confirm the skill loads.Claude Code copies the folder itself, the same result as the manual copy. Check what it changed before you commit it.
$skill-installer install https://github.com/Mathews-Tom/armory/tree/main/skills/static-web-artifacts-builderType this inside Codex. $skill-installer <name> installs a curated skill from openai/skills. The installer writes to $CODEX_HOME/skills (default ~/.codex/skills). Restart Codex if the skill does not show up.
$ npx skills add Mathews-Tom/armory --skill static-web-artifacts-builder -a codexProject install goes to .agents/skills/; add -g for ~/.codex/skills/.
$ gh skill install Mathews-Tom/armory static-web-artifacts-builder --agent codexProject scope by default (.agents/skills/); add --scope user for a personal install.
$ git clone --depth 1 https://github.com/Mathews-Tom/armory.git skills-src && mkdir -p .agents/skills && cp -r skills-src/skills/static-web-artifacts-builder .agents/skills/static-web-artifacts-builder && rm -rf skills-srcUse ~/.agents/skills/ instead of .agents/skills for a personal install.
Codex skills documentation · loads skills from .agents/skills/
Install the "static-web-artifacts-builder" agent skill from https://github.com/Mathews-Tom/armory/tree/main/skills/static-web-artifacts-builder into .agents/skills/static-web-artifacts-builder/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "static-web-artifacts-builder", then confirm the skill loads.Codex copies the folder itself, the same result as the manual copy. Check what it changed before you commit it.
$ npx skills add Mathews-Tom/armory --skill static-web-artifacts-builder -a cursorProject install goes to .agents/skills/; add -g for ~/.cursor/skills/.
$ gh skill install Mathews-Tom/armory static-web-artifacts-builder --agent cursorProject scope by default (.agents/skills/); add --scope user for a personal install.
$ git clone --depth 1 https://github.com/Mathews-Tom/armory.git skills-src && mkdir -p .cursor/skills && cp -r skills-src/skills/static-web-artifacts-builder .cursor/skills/static-web-artifacts-builder && rm -rf skills-srcUse ~/.cursor/skills/ instead of .cursor/skills for a personal install.
Cursor skills documentation · loads skills from .cursor/skills/, .agents/skills/, .claude/skills/, .codex/skills/
Install the "static-web-artifacts-builder" agent skill from https://github.com/Mathews-Tom/armory/tree/main/skills/static-web-artifacts-builder into .cursor/skills/static-web-artifacts-builder/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "static-web-artifacts-builder", then confirm the skill loads.Cursor copies the folder itself, the same result as the manual copy. Check what it changed before you commit it.
$ gemini skills install https://github.com/Mathews-Tom/armory.git --path skills/static-web-artifacts-builder--scope user (default) or --scope workspace; --path is the subfolder of the repo that holds the skill; --consent skips the security confirmation prompt.
$ npx skills add Mathews-Tom/armory --skill static-web-artifacts-builder -a gemini-cliProject install goes to .agents/skills/; add -g for ~/.gemini/skills/.
$ gh skill install Mathews-Tom/armory static-web-artifacts-builder --agent gemini-cliProject scope by default (.agents/skills/); add --scope user for a personal install.
$ git clone --depth 1 https://github.com/Mathews-Tom/armory.git skills-src && mkdir -p .gemini/skills && cp -r skills-src/skills/static-web-artifacts-builder .gemini/skills/static-web-artifacts-builder && rm -rf skills-srcUse ~/.gemini/skills/ instead of .gemini/skills for a personal install, then run /skills reload.
Gemini CLI skills documentation · loads skills from .gemini/skills/, .agents/skills/
Install the "static-web-artifacts-builder" agent skill from https://github.com/Mathews-Tom/armory/tree/main/skills/static-web-artifacts-builder into .gemini/skills/static-web-artifacts-builder/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "static-web-artifacts-builder", then confirm the skill loads.Gemini CLI copies the folder itself, the same result as the manual copy. Check what it changed before you commit it.
$ gh skill install Mathews-Tom/armory static-web-artifacts-builderInstalls for Copilot at project scope by default; add --scope user for a personal install. Preview a skill first with gh skill preview. Needs GitHub CLI 2.90.0 or later (public preview).
$ npx skills add Mathews-Tom/armory --skill static-web-artifacts-builder -a github-copilotProject install goes to .agents/skills/; add -g for ~/.copilot/skills/.
$ git clone --depth 1 https://github.com/Mathews-Tom/armory.git skills-src && mkdir -p .github/skills && cp -r skills-src/skills/static-web-artifacts-builder .github/skills/static-web-artifacts-builder && rm -rf skills-srcUse ~/.copilot/skills/ instead of .github/skills for a personal install. Commit .github/skills so cloud agent and code review can use it.
GitHub Copilot skills documentation · loads skills from .github/skills/, .claude/skills/, .agents/skills/
Install the "static-web-artifacts-builder" agent skill from https://github.com/Mathews-Tom/armory/tree/main/skills/static-web-artifacts-builder into .github/skills/static-web-artifacts-builder/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "static-web-artifacts-builder", then confirm the skill loads.GitHub Copilot copies the folder itself, the same result as the manual copy. Check what it changed before you commit it.
$ npx skills add Mathews-Tom/armory --skill static-web-artifacts-builder -a opencodeOpenCode documents no install command of its own. Project install goes to .agents/skills/; add -g for ~/.config/opencode/skills/.
$ gh skill install Mathews-Tom/armory static-web-artifacts-builder --agent opencodeProject scope by default (.agents/skills/); add --scope user for a personal install.
$ git clone --depth 1 https://github.com/Mathews-Tom/armory.git skills-src && mkdir -p .opencode/skills && cp -r skills-src/skills/static-web-artifacts-builder .opencode/skills/static-web-artifacts-builder && rm -rf skills-srcUse ~/.config/opencode/skills/ instead of .opencode/skills for a personal install.
OpenCode skills documentation · loads skills from .opencode/skills/, .claude/skills/, .agents/skills/
Install the "static-web-artifacts-builder" agent skill from https://github.com/Mathews-Tom/armory/tree/main/skills/static-web-artifacts-builder into .opencode/skills/static-web-artifacts-builder/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "static-web-artifacts-builder", then confirm the skill loads.OpenCode copies the folder itself, the same result as the manual copy. Check what it changed before you commit it.
Facts
- Skill name
static-web-artifacts-builder- GitHub stars
- 327
- Token cost
- ~1.8k tokens
- SKILL.md length
- 672 words
- Files
- 5 (incl. scripts)
- Skills in repo
- 80
- Repo updated
- First seen
- Licence
- Apache-2.0
At a glance
Build self-contained static HTML artifacts opened in a browser: interactive diagrams, dashboards, infographics.
- Works in 4 steps: Initialize Project → Develop Your Artifact → Validate and Finalize → …
- : interactive HTML
- SKILL.md covers Design & Style Guidelines, Quick Start, When to Use This Skill vs… and Error Handling, plus 1 more section
- Runs Shell scripts from its folder; calls bash
What it does
Static Web Artifacts Builder is an agent skill from Mathews-Tom/armory. 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.
Its SKILL.md is about 1.8k tokens, which your agent loads only when the skill is triggered. The skill folder holds 6 other files, including scripts (for example `evals/cases.yaml`, `scripts/bundle-artifact.sh` and `scripts/init-artifact.sh`).
It sits in Frontend & Design, covering HTML artifacts and Infographics. The repository describes itself as: Curated, production-grade skills for AI coding agents. Battle-tested workflows for developers who use AI seriously. The licence is Apache-2.0.
When your agent uses it
- : interactive HTML
- Open in browser
- Visual dashboard
- HTML infographic
Example prompts
- “interactive HTML”
- “open in browser”
- “HTML artifact”
- “/static-web-artifacts-builder”
Requirements
- A Bash shell
Workflow steps
4 steps, taken from the step headings in SKILL.md.
What it can do on your machine
Read from SKILL.md and the folder at commit 4594fb7. It shows what the files ask for, not the result of running them.
Tool permissions
Pre-approves nothing: there is no allowed-tools line, so your agent's usual permission prompts apply.
From allowed-tools in the SKILL.md frontmatter.
Runs code
Ships 2 files in scripts/ (Shell), which the agent can run.
Shell commands in SKILL.md call:
bash
From the folder's file list and the shell code blocks in SKILL.md.
Network
No URLs in SKILL.md.
From URLs in SKILL.md, links to its own repository left out.
Credentials
Names no API keys, tokens, secrets or passwords.
From names ending in _API_KEY, _TOKEN, _SECRET, _KEY or _PASSWORD in SKILL.md.
Context cost
Static Web Artifacts Builder loads about 1.8k tokens when it runs. Until then it costs about 85 tokens; SKILL.md has 672 words of instructions outside code blocks.
Estimates: characters ÷ 4, the usual rule of thumb; real counts depend on the model's tokenizer. Scripts and assets cost tokens only if the agent reads them.
Safety
Auto-check passed
The automated check found no risky patterns in SKILL.md.
Automated static check — not a guarantee. Review scripts before installing. It scans the text of SKILL.md for risky patterns (piping downloads into a shell, reading credential files, hidden Unicode, destructive commands); the scripts in this folder are not scanned.
SKILL.md
The full file from Mathews-Tom/armory at commit 4594fb7, republished under its Apache-2.0 licence (© Mathews-Tom). 672 words, ~1,822 tokens.
Download SKILL.mdSave it as
.claude/skills/static-web-artifacts-builder/SKILL.md (or your agent's skills folder). This skill also uses 4 other files; get the full folder from GitHub.- name
- static-web-artifacts-builder
- description
- 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.
- metadata.version
- 1.1.1
- metadata.category
- visualization
- metadata.tags
- html, interactive, dashboard, svg
- metadata.difficulty
- intermediate
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 | — |
| 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) | — |
Show full SKILL.md (247 more words)Show less
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.
© Mathews-Tom, Apache-2.0. Rendered from Markdown: HTML in the file is shown as text, images as links, and headings moved down two levels. Raw file
Files
SKILL.md and 4 other files (scripts) in skills/static-web-artifacts-builder of Mathews-Tom/armory.
- SKILL.md
- LICENSE.txt
- evals/cases.yaml
- scripts/bundle-artifact.sh
- scripts/init-artifact.sh
Open the folder on GitHubat commit 4594fb7
Compare with similar skills
Static Web Artifacts Builder next to the 5 skills that share the most tags, products or categories with it. Stars are the repository's; “used in” counts other GitHub owners with a copy.
| Skill | Stars | Used in | Tokens | Auto-check | Licence | Repo updated |
|---|---|---|---|---|---|---|
| Static Web Artifacts Builder this skillMathews-Tom/armory | 327 | — | ~1.8k | Automated safety check: Pass | Apache-2.0 | |
| Self-Contained HTML PagesSourceWeft/SourceWeft | 158 | — | ~817 | Automated safety check: Pass | Custom licence | |
| Visual ExplainerNeverSight/learn-skills.dev | 216 | 1 repos | ~5.5k | Automated safety check: Pass | MIT | |
| Math ExplainerGordenSun/mathVideoMaker | 289 | 1 repos | ~2.4k | Automated safety check: Pass | None | |
| HTML DesignNimaChu/html-design | 101 | — | ~2.7k | Automated safety check: Pass | None | |
| Tufte Reportglebis/claude-skills | 388 | — | ~2.4k | Automated safety check: Pass | MIT |
Similar skills
Visual Explainer
NeverSight/learn-skills.dev
Generate beautiful, self-contained HTML pages that visually explain systems, code changes, plans, and data.
Math Explainer
GordenSun/mathVideoMaker
Generate math explanation videos (animated with Manim) and interactive web pages from a user's request.
HTML Design
NimaChu/html-design
Create, redesign, repair, validate, preview, and package lightweight standalone HTML deliverables.
Tufte Report
glebis/claude-skills
Create Tufte-inspired data reports and infographic dashboards as standalone HTML files.
Sdf Art
shaun8149/sdf-js
Generate sdf-js code from a natural-language scene description.
More from Mathews-Tom/armory
All 80 skills in this repoArchitecture Reviewer
Mathews-Tom/armory
Architecture reviews across 7 dimensions (structural, scalability, enterprise readiness, performance, security, ops, data) with scored reports.
Concept To Image
Mathews-Tom/armory
Turn concepts into static HTML visuals exported as PNG or SVG files via HTML/CSS/SVG.
Watch
Mathews-Tom/armory
A skill your agent uses when analyzing an existing video URL or local recording: "watch this video", "analyze youtube video", "summarize this video", "youtube transcript", "find this moment", "what…
Code Refiner
Mathews-Tom/armory
Deep code simplification and refactoring preserving behavior across Python, Go, TypeScript, Rust.
Concept To Video
Mathews-Tom/armory
Turn concepts into animated explainer videos using Manim (Python) with MP4/GIF output, audio overlay, multi-scene composition.
Decision Map
Mathews-Tom/armory
Maps the unresolved architecture, policy, and scope decisions that must be answered before planning can start: one durable decision ticket per question on the issue tracker, typed and blocker-linked…
Related
Categories
Questions about Static Web Artifacts Builder
What does Static Web Artifacts Builder do?
Build self-contained static HTML artifacts opened in a browser: interactive diagrams, dashboards, infographics. Static Web Artifacts Builder is an agent skill from Mathews-Tom/armory. Build self-contained static HTML artifacts opened in a browser: interactive diagrams, dashboards, infographics.
When should I use Static Web Artifacts Builder?
Static Web Artifacts Builder fits situations like: : interactive HTML; open in browser; visual dashboard; HTML infographic.
How do I install Static Web Artifacts Builder in Claude Code?
Run `npx skills add Mathews-Tom/armory --skill static-web-artifacts-builder -a claude-code`. Or copy the skill folder (skills/static-web-artifacts-builder in Mathews-Tom/armory) into .claude/skills/static-web-artifacts-builder in your project. Claude Code loads it when a task matches its description.
How do I install Static Web Artifacts Builder in Codex?
Run `npx skills add Mathews-Tom/armory --skill static-web-artifacts-builder -a codex`. Or copy the skill folder (skills/static-web-artifacts-builder in Mathews-Tom/armory) into .agents/skills/static-web-artifacts-builder in your project. Codex loads it when a task matches its description.
Can I use Static Web Artifacts Builder in Cursor, Gemini CLI or GitHub Copilot?
Cursor, Gemini CLI, GitHub Copilot and OpenCode also load SKILL.md folders. With the skills CLI, run `npx skills add Mathews-Tom/armory --skill static-web-artifacts-builder -a cursor` (or -a gemini-cli, github-copilot or opencode for the others). To copy it by hand, put the folder in .cursor/skills/static-web-artifacts-builder, .gemini/skills/static-web-artifacts-builder, .github/skills/static-web-artifacts-builder and .opencode/skills/static-web-artifacts-builder in your project.
What does Static Web Artifacts Builder need to run?
Going by SKILL.md and its folder, Static Web Artifacts Builder needs a shell for the scripts in its folder and the command-line tools its instructions call (bash). Our summary lists: A Bash shell.
Does Static Web Artifacts Builder access the network?
SKILL.md contains no URLs. Any network use would come from the scripts or tools the agent runs. This is read from the text; nothing was executed.
Is Static Web Artifacts Builder safe to install?
Our automated static check of SKILL.md found no risky patterns, such as piping downloads into a shell, reading credential files or hidden Unicode. It is not a guarantee. The check reads SKILL.md only: the scripts in the folder are not scanned, so read them before running anything.
What licence does Static Web Artifacts Builder use?
Static Web Artifacts Builder is published under the Apache-2.0 licence (from the LICENSE file in the skill folder). It allows redistribution, so the full SKILL.md is shown on this page.
How many tokens does Static Web Artifacts Builder use?
About 1.8k tokens (SKILL.md is roughly 7.3k characters). Agents keep only the skill's name and description in context until a task matches; then they load SKILL.md in full.
What are the alternatives to Static Web Artifacts Builder?
Skills that share tags, products or a category with Static Web Artifacts Builder: Self-Contained HTML Pages (SourceWeft/SourceWeft, 158 stars), Visual Explainer (NeverSight/learn-skills.dev, 216 stars), Math Explainer (GordenSun/mathVideoMaker, 289 stars) and HTML Design (NimaChu/html-design, 101 stars). The comparison table on this page puts their stars, adoption, token cost, safety result and licence side by side.
Who maintains Static Web Artifacts Builder?
Mathews-Tom (a GitHub user) maintains it in Mathews-Tom/armory, which has 327 GitHub stars. The repository holds 80 skills in this directory. The repository was last updated on October 6, 2026.
Source: Mathews-Tom/armory on GitHub. Facts on this page come from the repository at the commit we read; the author's words are quoted as theirs.