exporting-to-png

Q: How do I install exporting-to-png?

Run npx skills add https://github.com/spencerpauly/awesome-cursor-skills --skill exporting-to-png in your project. The skills CLI detects the agents you use and copies the skill into the right folder. For Claude Code you can also place the skill folder at ~/.claude/skills/exporting-to-png/ (personal) or .claude/skills/exporting-to-png/ (project).

by spencerpaulyFrontend & Design

Export code, terminal output, diagrams, or UI components to PNG images using headless browser rendering or CLI tools.

Installs: 405
Last 24h: —
Trending rank: —
Security: Not audited

Install

Works with every agent the skills CLI supports.

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

01
Install
Run the command in your project. The CLI asks which agents to install for.
02
Describe the task
Ask your agent for something this skill covers. It loads exporting-to-png automatically when relevant.
03
Review the result
The agent follows the SKILL.md steps, scripts and references bundled with the skill.

SKILL.md

The instructions your agent reads when the skill is triggered.

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

FAQ

What does the exporting-to-png skill do?

Export code, terminal output, diagrams, or UI components to PNG images using headless browser rendering or CLI tools.

How do I install exporting-to-png?

Run npx skills add https://github.com/spencerpauly/awesome-cursor-skills --skill exporting-to-png in your project. The skills CLI detects the agents you use and copies the skill into the right folder. For Claude Code you can also place the skill folder at ~/.claude/skills/exporting-to-png/ (personal) or .claude/skills/exporting-to-png/ (project).

Which AI agents can use exporting-to-png?

Any agent that supports the open Agent Skills format (a folder with a SKILL.md file), including Claude Code, Codex, Cursor, GitHub Copilot, Gemini CLI, Windsurf, Cline, OpenCode and more.

Is exporting-to-png safe to install?

No partner security audit is available yet. Skills can run commands and scripts, so read the SKILL.md and any bundled files before installing.

Who maintains exporting-to-png?

It is published by spencerpauly in spencerpauly/awesome-cursor-skills. It has 405 recorded installs.