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.

Набор инструментов для создания сложных, автономных статических HTML-артефактов — инфографики, интерактивных диаграмм, визуальных элементов архитектуры, информационных панелей и богатых визуальных результатов. Используйте этот навык, когда вас просят создать интерактивный артефакт HTML, создать автономный веб-компонент, создать статическую визуализацию HTML, создать интерактивную диаграмму, создать визуальную инфографику или визуализировать любой визуальный элемент высокой плотности в виде одного HTML-файла. Нулевой набор инструментов для сборки — ни React, ни Vite, ни Parcel. Чистый HTML5 + CSS3 (Grid/Flexbox) + встроенный SVG. Срабатывает при: «создать интерактивный HTML», «создать автономный веб-компонент», «создать статическую HTML-визуализацию», «создать интерактивную диаграмму», «создать инфографику», «отобразить как HTML-артефакт», «создать визуальную панель мониторинга», «создать диаграмму, которую можно открыть в браузере». Источник: mathews-tom/praxis-skills.