static-web-artifacts-builder

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 von Tools zum Erstellen aufwändiger, eigenständiger statischer HTML-Artefakte – Infografiken, interaktive Diagramme, Architekturvisualisierungen, Daten-Dashboards und umfangreiche visuelle Ergebnisse. Nutzen Sie diese Fähigkeit, wenn Sie aufgefordert werden, ein interaktives HTML-Artefakt zu erstellen, eine eigenständige Webkomponente zu erstellen, eine statische HTML-Visualisierung zu generieren, ein interaktives Diagramm zu erstellen, eine visuelle Infografik zu erstellen oder ein beliebiges visuelles Bild mit hoher Dichte als einzelne HTML-Datei zu rendern. Zero-Build-Toolchain – kein React, kein Vite, kein Parcel. Reines HTML5 + CSS3 (Grid/Flexbox) + Inline-SVG. Auslöser bei: „Interaktives HTML erstellen“, „Eigenständige Webkomponente erstellen“, „Statische HTML-Visualisierung generieren“, „Interaktives Diagramm erstellen“, „Infografik erstellen“, „Als HTML-Artefakt rendern“, „Visuelles Dashboard erstellen“, „Diagramm erstellen, das ich im Browser öffnen kann“. Quelle: mathews-tom/praxis-skills.