web-visual-assets

Generate and verify PNG visual assets with SVG fallbacks for teaching sites.

47|10|Updated May 14, 2026

Search Tags:#screenshots #playwright #svg #illustrations #visual-assets #qr-codes #asset-verification

Ready to run

npx skills add https://github.com/kevintsai1202/teaching-site-skills --skill web-visual-assets

💬 Prompt for ChatGPT / Claude Chat▼

Please help me install this Agent Skill.
Skill: web-visual-assets
Source: https://github.com/kevintsai1202/teaching-site-skills/tree/main/web-visual-assets
Command: npx skills add https://github.com/kevintsai1202/teaching-site-skills --skill web-visual-assets

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

This skill provides the visual layer for a teaching site when content is ready but images are missing or placeholders remain, enabling scenario illustrations, tool screenshots, instructor cards, diagrams, classroom maps, and QR codes.

Core Features & Use Cases

Asset sources cover scraping, AI generation, hand-drawn SVG, and generated codes to produce a complete visual set.
PNG-first rendering with SVG fallback and verification scripts to ensure assets render correctly in the browser.
Use Case: after wiring interactions, pre-plan visuals for upcoming units and update visuals as course details evolve.

Quick Start

Provide a complete visual asset package for the current unit, placing PNGs and SVG fallbacks under assets/illustrations and assets/maps, plus QR codes under assets/qr as appropriate.

Frequently Asked Questions about web-visual-assets

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

FAQPage Schema

How do I generate visual assets for a teaching site with missing images?▼

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.

What's the best way to create QR codes and SVG illustrations for an educational website?▼

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.

Can I use Playwright to verify screenshots and 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.

When do I need to use SVG fallbacks for PNG images on a teaching site?▼

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.

Does this visual asset generation approach work for scraping and AI-generated images?▼

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.

Why do my teaching site illustrations fail to render after replacing placeholders?▼

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.