render-visual-skill plugin
Architecture diagrams, presentation slides, social cards, code snippets and device mockups — authored as HTML/SVG and rendered to crisp PNGs by a local headless Chromium. Includes a 55-part element library (device frames, infrastructure shapes, schematic chart and BI parts, 29 glyphs), places your own screenshots and photos into frames or cropped to a shape, animates sequence diagrams into looping GIFs, and restyles everything through eight swappable themes. Zero npm dependencies.
How to install the render-visual-skill plugin
Run both commands inside Claude Code. The first adds the marketplace once; the second installs the plugin.
/plugin marketplace add imshaikot/render-visual-skill
/plugin install render-visual-skill@render-visual-skillWhat's inside render-visual-skill
1 part read from the plugin's own files.
Skills 1
Claude loads it when the task matches- render-visual
**DELIVERY SKILL** — Produce polished diagrams, slides and social cards as crisp PNGs, JPEGs or PDFs by authoring HTML/SVG and rendering it with a local headless Chromium. Eight themes (ember, slate, paper, terminal, blueprint, frost, neon, sepia), one flag. Lays mermaid flowchart text out into a figure, deterministically. Also frames screenshots and photos in a browser, phone or terminal frame, or cropped to a shape. USE FOR: architecture and flow diagrams, slide decks, og/social cards, blog and README figures, any designed image a doc needs. DO NOT USE FOR: data charts from datasets (use a plotting library), capturing a live UI, photo retouching, or any surface without a shell — write inline SVG. TRIGGERS: mermaid, flowchart TD, graph TD, diagram, flow chart, architecture visual, swimlane, tree view, cluster, deployment, mind map, slide deck, presentation, og card, social card, banner, blog figure, browser frame, device mockup, render a png, export a pdf or jpeg, make an image, visual.
Using render-visual-skill in Claude Code
Skills need no command. Claude reads them when your request matches what they describe.
Update, turn off or remove
- Update the plugin (shell)
- claude plugin update render-visual-skill@render-visual-skill
- Refresh the marketplace
- /plugin marketplace update render-visual-skill
- Turn it off for now
- /plugin disable render-visual-skill@render-visual-skill
- Remove it
- /plugin uninstall render-visual-skill@render-visual-skill
Skills in render-visual-skill
- render-visualimshaikot/render-visual-skill
**DELIVERY SKILL** — Produce polished diagrams, slides and social cards as crisp PNGs, JPEGs or PDFs by authoring HTML/SVG and rendering it with a local headless Chromium. Eight themes (ember, slate, paper, terminal, blueprint, frost, neon, sepia), one flag. Lays mermaid flowchart text out into a figure, deterministically. Also frames screenshots and photos in a browser, phone or terminal frame, or cropped to a shape. USE FOR: architecture and flow diagrams, slide decks, og/social cards, blog and README figures, any designed image a doc needs. DO NOT USE FOR: data charts from datasets (use a plotting library), capturing a live UI, photo retouching, or any surface without a shell — write inline SVG. TRIGGERS: mermaid, flowchart TD, graph TD, diagram, flow chart, architecture visual, swimlane, tree view, cluster, deployment, mind map, slide deck, presentation, og card, social card, banner, blog figure, browser frame, device mockup, render a png, export a pdf or jpeg, make an image, visual.
78 files11stars
render-visual-skill plugin questions
How do I install the render-visual-skill plugin?
In Claude Code run /plugin marketplace add imshaikot/render-visual-skill, then /plugin install render-visual-skill@render-visual-skill.
What does the render-visual-skill plugin include?
render-visual-skill bundles 1 skill.
How do I update or remove the render-visual-skill plugin?
Update it with claude plugin update render-visual-skill@render-visual-skill in your shell, or from the Installed tab of /plugin. Remove it with /plugin uninstall render-visual-skill@render-visual-skill.
What license is the render-visual-skill plugin under?
MIT, as stated in the plugin's manifest.