How do I install the Exporting To Png skill?

Run npx skillmds add spencerpauly/exporting-to-png in your terminal (requires Node.js), paste this page's agent-chat prompt into Claude, Cursor, or any MCP-connected agent, or download the SKILL.md file and copy it into your agent's skills directory.

Is Exporting To Png safe to use?

This skill has not completed SkillMD's automated safety review yet. Capability flags: makes network calls. SkillMD never runs a skill's scripts for you; review the SKILL.md before installing.

Which AI agents work with Exporting To Png?

This skill is tagged as working with Claude Code, Claude.ai, OpenAI Codex. SKILL.md is an open format, so most agents that read a skills directory can load it too.

Is Exporting To Png free to use?

Yes. Installing skills from SkillMD is free, and the skill stays under its author's original license.

Who published Exporting To Png?

spencerpauly (@spencerpauly) published this skill. Their other Agent Skills are listed on their SkillMD profile.

Exporting To Png by spencerpauly — Agent Skill

Name: Exporting To Png
Rating: 4.5 (4 reviews)
Author: spencerpauly

File contents

Exporting to PNG

Convert code snippets, Markdown content, terminal output, diagrams, or rendered UI components into PNG image files.

Methods

1. HTML → PNG via Headless Browser

The most flexible approach. Render any content as HTML and screenshot it.

# Using Playwright (if available)
npx playwright screenshot --full-page "file:///path/to/content.html" output.png

# Using Puppeteer one-liner
node -e "
const puppeteer = require('puppeteer');
(async () => {
  const browser = await puppeteer.launch();
  const page = await browser.newPage();
  await page.setContent(\`<html>...</html>\`);
  await page.screenshot({ path: 'output.png', fullPage: true });
  await browser.close();
})();
"

Steps:

Generate an HTML file with the content styled appropriately (syntax highlighting, padding, fonts)
Use a headless browser to render and capture
Crop if needed using an image tool

2. Code → PNG with Carbon or Silicon

For styled code screenshots:

# silicon (Rust CLI, fast)
silicon --language python --output code.png source.py
silicon --from-clipboard --output code.png

# Or generate a Carbon URL for browser capture
# https://carbon.now.sh/?l=python&code=<url-encoded-code>

3. Mermaid Diagrams → PNG

# Using mermaid-cli
npx @mermaid-js/mermaid-cli mmdc -i diagram.mmd -o diagram.png -b transparent

# Or with Docker
docker run --rm -v "$(pwd)":/data minlag/mermaid-cli mmdc -i /data/diagram.mmd -o /data/diagram.png

4. SVG → PNG

# Using sharp (Node.js)
node -e "
const sharp = require('sharp');
sharp('input.svg').png().toFile('output.png');
"

# Using Inkscape CLI
inkscape input.svg --export-type=png --export-filename=output.png

# Using ImageMagick
convert input.svg output.png

5. Terminal Output → PNG

# Using termshot (if installed)
termshot -- ls -la

# Manual approach: capture output, wrap in HTML with monospace font, screenshot

Workflow

Determine the content type (code, diagram, HTML, terminal, SVG)
Check which tools are available in the environment (which silicon, npx --help, etc.)
Choose the best method and generate the PNG
Verify the output exists and is non-empty: file output.png && ls -la output.png
Report the file path and dimensions

Tips

For code screenshots, use a dark theme with generous padding (32px+) for a polished look
Set deviceScaleFactor: 2 in Playwright/Puppeteer for retina-quality output
For transparent backgrounds, use --background transparent or omitBackground: true
If no specialized tool is installed, fall back to the HTML + headless browser method — it works for everything

---name: exporting-to-pngdescription: Export code, terminal output, diagrams, or UI components to PNG images using headless browser rendering or CLI tools.--- # Exporting to PNG Convert code snippets, Markdown content, terminal output, diagrams, or rendered UI components into PNG image files. ## Methods ### 1. HTML → PNG via Headless Browser The most flexible approach. Render any content as HTML and screenshot it. ```bash # Using Playwright (if available) npx playwright screenshot --full-page "file:///path/to/content.html" output.png # Using Puppeteer one-liner node -e " const puppeteer = require('puppeteer'); (async () => { const browser = await puppeteer.launch(); const page = await browser.newPage(); await page.setContent(\`<html>...</html>\`); await page.screenshot({ path: 'output.png', fullPage: true }); await browser.close(); })(); " ``` **Steps:** 1. Generate an HTML file with the content styled appropriately (syntax highlighting, padding, fonts) 2. Use a headless browser to render and capture 3. Crop if needed using an image tool ### 2. Code → PNG with Carbon or Silicon For styled code screenshots: ```bash # silicon (Rust CLI, fast) silicon --language python --output code.png source.py silicon --from-clipboard --output code.png # Or generate a Carbon URL for browser capture # https://carbon.now.sh/?l=python&code=<url-encoded-code> ``` ### 3. Mermaid Diagrams → PNG ```bash # Using mermaid-cli npx @mermaid-js/mermaid-cli mmdc -i diagram.mmd -o diagram.png -b transparent # Or with Docker docker run --rm -v "$(pwd)":/data minlag/mermaid-cli mmdc -i /data/diagram.mmd -o /data/diagram.png ``` ### 4. SVG → PNG ```bash # Using sharp (Node.js) node -e " const sharp = require('sharp'); sharp('input.svg').png().toFile('output.png'); " # Using Inkscape CLI inkscape input.svg --export-type=png --export-filename=output.png # Using ImageMagick convert input.svg output.png ``` ### 5. Terminal Output → PNG ```bash # Using termshot (if installed) termshot -- ls -la # Manual approach: capture output, wrap in HTML with monospace font, screenshot ``` ## Workflow 1. Determine the content type (code, diagram, HTML, terminal, SVG) 2. Check which tools are available in the environment (`which silicon`, `npx --help`, etc.) 3. Choose the best method and generate the PNG 4. Verify the output exists and is non-empty: `file output.png && ls -la output.png` 5. Report the file path and dimensions ## Tips - For code screenshots, use a dark theme with generous padding (32px+) for a polished look - Set `deviceScaleFactor: 2` in Playwright/Puppeteer for retina-quality output - For transparent backgrounds, use `--background transparent` or `omitBackground: true` - If no specialized tool is installed, fall back to the HTML + headless browser method — it works for everything

Frequently asked questions