web-artifacts-builder

Creates publication-ready HTML, CSS, SVG, and JavaScript figures for MCM/ICM competition papers.

Updated Jun 27, 2026

Search Tags:#html #flowchart #visualization #svg #d3.js #chart.js #latex figures

Ready to run

npx skills add https://github.com/SPIRAL-EDWIN/Skills-for-Math-Modeling-MCM-ICM --skill web-artifacts-builder-spiral-edwin

💬 Prompt for ChatGPT / Claude Chat▼

Please help me install this Agent Skill.
Skill: web-artifacts-builder
Source: https://github.com/SPIRAL-EDWIN/Skills-for-Math-Modeling-MCM-ICM/tree/main/.github/skills/web-artifacts-builder
Command: npx skills add https://github.com/SPIRAL-EDWIN/Skills-for-Math-Modeling-MCM-ICM --skill web-artifacts-builder-spiral-edwin

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve? Competition papers filled with generic Excel or default matplotlib charts fail to stand out among thousands of submissions, and teams lack a fast way to produce distinctive, high-resolution figures for LaTeX inclusion. ## Core Features & Use Cases - Model Architecture Flowcharts: Build clean pipeline diagrams with HTML/CSS Flexbox and SVG icons showing data preprocessing through final recommendations. - System Dynamics Diagrams: Create causal loop diagrams with curved SVG arrows and positive/negative feedback labels for differential equation and ecological models. - Custom Data Visualizations: Generate Sankey diagrams, network graphs, and styled bar/line charts using D3.js, Chart.js, or Recharts. - Use Case: A team needs a figure showing their four-stage modeling pipeline for Section 3.1. The Skill produces a styled HTML flowchart, which they screenshot at 2400px width and include via \includegraphics{} in their LaTeX paper. ## Quick Start Create a flowchart showing our modeling pipeline from data preprocessing through TOPSIS evaluation to sensitivity analysis as an HTML artifact I can screenshot for my paper.

Frequently Asked Questions about web-artifacts-builder

High-intent search queries and answers about installing and using this skill.

FAQPage Schema

How do I create a flowchart for my MCM/ICM paper?▼

Build the flowchart as an HTML page using CSS Flexbox for node layout and SVG for arrows, then screenshot it in a browser at 100% zoom. Save the PNG at 2400px width or more and include it in LaTeX with \includegraphics{}.

What JavaScript library should I use for a Sankey diagram?▼

Use D3.js with the d3-sankey plugin for full control over node layout and link styling. If your team prefers React, Recharts offers a pre-built Sankey component that requires less code but offers less customization.

D3.js vs Chart.js for competition charts?▼

Chart.js is simpler and suits standard bar, line, and scatter charts with quick setup. D3.js handles complex visualizations like Sankey diagrams, network graphs, and custom layouts but requires more development time.

How do I make figures readable when printed in grayscale?▼

Combine color with secondary encodings like dashed lines, dotted patterns, or distinct shapes for each data series. Test the figure by applying a grayscale CSS filter before taking the final screenshot.

What resolution do I need for LaTeX figure screenshots?▼

Target 300 DPI for print quality, which means 2400px width for an 8-inch figure. Screenshot at 100% browser zoom and verify dimensions with a tool like Python PIL before including in the paper.

When should I avoid web-based visualizations?▼

Avoid them when time is extremely limited, since each figure takes 30-90 minutes including iteration. Standard matplotlib or Excel charts are faster for routine plots, and web artifacts require an extra screenshot step before LaTeX inclusion.