Exporting To Png

Name: Exporting To Png
Author: spencerpauly

spencerpauly/awesome-cursor-skills

201 installs
655 repo stars
Updated August 2, 2026
spencerpauly/awesome-cursor-skills

Helps with ai & agent building tasks.

About

exporting-to-png is a Claude Code skill for ai & agent building. It helps solo builders move faster with AI-assisted coding.

exporting-to-png
AI & Agent Building
AI-coding skill

Exporting To Png by the numbers

201 all-time installs (skills.sh)
+22 installs in the week ending Jul 27, 2026 (Skillselion tracking)
Ranked #2,858 of 16,546 AI & Agent Building skills by installs in the Skillselion catalog
Data as of Aug 5, 2026 (Skillselion catalog sync)

npx skills add https://github.com/spencerpauly/awesome-cursor-skills --skill exporting-to-png

Add your badge

Show developers this skill is listed on Skillselion. Paste this into your README.

[![Listed on Skillselion](https://skillselion.com/badge/skills/spencerpauly/awesome-cursor-skills/exporting-to-png.svg)](https://skillselion.com/skills/spencerpauly/awesome-cursor-skills/exporting-to-png)

Installs	201
repo stars	★ 655
Last updated	August 2, 2026
Repository	spencerpauly/awesome-cursor-skills ↗

What it does

Helps with ai & agent building tasks.

Files

SKILL.mdMarkdownGitHub ↗

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: 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:

# 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

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