home/categories/design/inugamidev-ultrathink-oss-claude-skills-archive-visual-render-skill-md
designcontent-media

visual-render

Generate visual images from HTML/SVG/Canvas — logos, icons, diagrams, charts, infographics, tables, flowcharts, architecture maps, ER diagrams. Pipeline: Claude generates HTML → Playwright screenshots → Python crop/trim/export → clean PNG/SVG/WebP output file. Actions: render, generate, create, design, export, capture. Types: logo, icon, diagram, flowchart, chart, table, infographic, architecture, ER diagram, sequence diagram, network graph, timeline, badge, banner.

InugamiDev
maintainer
InugamiDev
Updated 3/28/2026
Stars
40
Forks
7
quick start

Installation and usage

Generate visual images from HTML/SVG/Canvas — logos, icons, diagrams, charts, infographics, tables, flowcharts, architecture maps, ER diagrams. Pipeline: Claude generates HTML → Playwright screenshots → Python crop/trim/export → clean PNG/SVG/WebP output file. Actions: render, generate, create, design, export, capture. Types: logo, icon, diagram, flowchart, chart, table, infographic, architecture, ER diagram, sequence diagram, network graph, timeline, badge, banner.

Installation
$ install --globalskills.sh
Usage

Once installed, you can use this skill by running the following command in your terminal:

skills use visual-render