메뉴
Export code, terminal output, diagrams, or UI components to PNG images using headless browser rendering or CLI tools.
Codex 또는 Claude로 설치 이 Prompt를 복사해 Codex, Claude 또는 다른 어시스턴트에 붙여 넣으면 Skill 페이지를 검토하고 설치를 진행할 수 있습니다.
SOC 직업 분류 기준
Generate or edit images using the OpenAI Image API (gpt-image-2). Use when the user asks to generate, create, draw, render, illustrate, mock up, or edit an image, icon, logo, mockup, illustration, OG image, blog hero, marketing asset, or similar visual. Also use when the user supplies a reference image and asks to modify, restyle, or remix it. Triggers on: "generate an image", "create an image", "make a picture of", "edit this image", "restyle this", "make a mockup of", "draw a", "render a", "illustration of".
When the same multi-step workflow repeats in Cursor (user corrections or agent redos), capture it as a new SKILL.md under .cursor/skills/ so future sessions load it automatically.
After navigating and interacting in Cursor's built-in browser, use browser_network_requests to audit every fetch/XHR for failures, slowness, duplicate calls, and suspicious payloads. Use for API-heavy pages and after backend or client networking changes.
When GitHub Actions fails, fetch failing job logs and assign each failing job to a separate subagent that fixes its slice of the problem in parallel. Use for multi-job CI failures where jobs are independent.
Run four parallel read-only subagents that each review the same diff from a different lens — security, performance, correctness, and readability — then merge findings into one report. Use before merging large or risky PRs.
Execute a user flow step-by-step in Cursor's built-in browser while documenting each action, then emit a Playwright test that replays the same flow using stable selectors derived from the accessibility tree.
| name | exporting-to-png |
| description | Export code, terminal output, diagrams, or UI components to PNG images using headless browser rendering or CLI tools. |
| user-invocable | true |
Convert code snippets, Markdown content, terminal output, diagrams, or rendered UI components into PNG image files.
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:
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>
# 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
# 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
# Using termshot (if installed)
termshot -- ls -la
# Manual approach: capture output, wrap in HTML with monospace font, screenshot
which silicon, npx --help, etc.)file output.png && ls -la output.pngdeviceScaleFactor: 2 in Playwright/Puppeteer for retina-quality output--background transparent or omitBackground: true