web-visual-assets

To generate visual assets for a teaching site, this skill produces illustrations, instructor cards, diagrams, maps, and QR codes. It uses a PNG-first rendering approach with an SVG fallback and requires an asset pipeline with assets/illustrations, assets/maps, and assets/qr directories.

The best way to create QR codes and SVG illustrations is using an asset pipeline that places generated codes under assets/qr and hand-drawn or AI-generated SVGs under assets/illustrations, ensuring visual assets render correctly in the browser.

Yes, you can verify visual assets render correctly in the browser using verification scripts. This skill includes asset verification to ensure PNG-first rendering and SVG fallbacks display properly across teaching site pages.

You need SVG fallbacks for PNG images when browser rendering compatibility is uncertain. This skill applies a PNG-first rendering approach with an SVG fallback to guarantee that scenario illustrations and diagrams display correctly for all learners.

Yes, this visual asset generation approach supports multiple asset sources including scraping, AI generation, hand-drawn SVG, and generated codes to produce a complete visual set for teaching sites with placeholder images.

Illustrations fail to render when the asset pipeline lacks proper verification scripts. This skill ensures assets render correctly in the browser by applying verification to PNG and SVG files placed under assets/illustrations and assets/maps.