web-visual-assets
CommunityCreate teaching-site visuals: images & QR codes.
Design & Creative#screenshots#playwright#svg#illustrations#visual-assets#qr-codes#asset-verification
Authorkevintsai1202
Version1.0.0
Installs0
System Documentation
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.
Dependency Matrix
Required Modules
None requiredComponents
Standard package💻 Claude Code Installation
Recommended: Let Claude install automatically. Simply copy and paste the text below to Claude Code.
Please help me install this Skill: Name: web-visual-assets Download link: https://github.com/kevintsai1202/teaching-site-skills/archive/main.zip#web-visual-assets Please download this .zip file, extract it, and install it in the .claude/skills/ directory.
Agent Skills Search Helper
Install a tiny helper to your Agent, search and equip skill from 510,000+ vetted skills library on demand.