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.