·static-web-artifacts-builder
{}

static-web-artifacts-builder

✓
mathews-tom/praxis-skillsGitHub: mathews-tom/praxis-skillsSource: mathews-tom/praxis-skills

Suite of tools for creating elaborate, self-contained static HTML artifacts — infographics, interactive diagrams, architecture visuals, data dashboards, and rich visual deliverables. Use this skill when asked to create an interactive HTML artifact, build a self-contained web component, generate a static HTML visualization, make an interactive diagram, produce a visual infographic, or render any high-density visual as a single HTML file. Zero build toolchain — no React, no Vite, no Parcel. Pure HTML5 + CSS3 (Grid/Flexbox) + inline SVG. Triggers on: "create interactive HTML", "build self-contained web component", "generate static HTML visualization", "make an interactive diagram", "produce infographic", "render as HTML artifact", "build a visual dashboard", "create a diagram I can open in browser".

mathews-tom·static·web·artifacts·builder
15Installs·1Trend·@mathews-tom

Installation

GitHub: mathews-tom/praxis-skills
$npx skills add https://github.com/mathews-tom/praxis-skills --skill static-web-artifacts-builder

How to Install static-web-artifacts-builder

Quickly install static-web-artifacts-builder AI skill to your development environment via command line

  1. Open Terminal: Open your terminal or command line tool (Terminal, iTerm, Windows Terminal, etc.)
  2. Run Installation Command: Copy and run this command: npx skills add https://github.com/mathews-tom/praxis-skills --skill static-web-artifacts-builder
  3. Verify Installation: Once installed, the skill will be automatically configured in your AI coding environment and ready to use in Claude Code, Cursor, or OpenClaw

Source: mathews-tom/praxis-skills.

SKILL.md

View raw

To build high-density static infographic artifacts, follow these steps:

Stack: Vanilla HTML5 + CSS3 (Grid/Flexbox) + inline SVG — zero runtime dependencies

VERY IMPORTANT: To avoid what is often referred to as "AI slop", avoid excessive centered layouts, purple gradients, uniform rounded corners, and Inter font.

Suite of tools for creating elaborate, self-contained static HTML artifacts — infographics, interactive diagrams, architecture visuals, data dashboards, and rich visual deliverables. Use this skill when asked to create an interactive HTML artifact, build a self-contained web component, generate a static HTML visualization, make an interactive diagram, produce a visual infographic, or render any high-density visual as a single HTML file. Zero build toolchain — no React, no Vite, no Parcel. Pure HTML5 + CSS3 (Grid/Flexbox) + inline SVG. Triggers on: "create interactive HTML", "build self-contained web component", "generate static HTML visualization", "make an interactive diagram", "produce infographic", "render as HTML artifact", "build a visual dashboard", "create a diagram I can open in browser". Source: mathews-tom/praxis-skills.

Facts (cite-ready)

Stable fields and commands for AI/search citations.

Install command
npx skills add https://github.com/mathews-tom/praxis-skills --skill static-web-artifacts-builder
Source
mathews-tom/praxis-skills
Category
{}Data Analysis
Verified
✓
First Seen
2026-02-25
Updated
2026-03-10
URL
https://www.learn-skills.dev/en/skills/mathews-tom/praxis-skills/static-web-artifacts-builder

Browse more skills from mathews-tom/praxis-skills

Quick answers

What is static-web-artifacts-builder?

Suite of tools for creating elaborate, self-contained static HTML artifacts — infographics, interactive diagrams, architecture visuals, data dashboards, and rich visual deliverables. Use this skill when asked to create an interactive HTML artifact, build a self-contained web component, generate a static HTML visualization, make an interactive diagram, produce a visual infographic, or render any high-density visual as a single HTML file. Zero build toolchain — no React, no Vite, no Parcel. Pure HTML5 + CSS3 (Grid/Flexbox) + inline SVG. Triggers on: "create interactive HTML", "build self-contained web component", "generate static HTML visualization", "make an interactive diagram", "produce infographic", "render as HTML artifact", "build a visual dashboard", "create a diagram I can open in browser". Source: mathews-tom/praxis-skills.

How do I install static-web-artifacts-builder?

Open your terminal or command line tool (Terminal, iTerm, Windows Terminal, etc.) Copy and run this command: npx skills add https://github.com/mathews-tom/praxis-skills --skill static-web-artifacts-builder Once installed, the skill will be automatically configured in your AI coding environment and ready to use in Claude Code, Cursor, or OpenClaw

Where is the source repository?

https://github.com/mathews-tom/praxis-skills

Details

Category
{}Data Analysis
Source
skills.sh
First Seen
2026-02-25

Related Skills

html-presentation
22 Installs
concept-to-image
18 Installs
linkedin-post-style
18 Installs
md-to-pdf
17 Installs
concept-to-video
16 Installs
github
16 Installs