How do I install the Export Png skill?

Run npx skillmds@latest add jhamidun/export-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 Export Png safe to use?

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

Which AI agents work with Export 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 Export Png free to use?

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

Who published Export Png?

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

Export Png by jhamidun — Agent Skill

Name: Export Png
Rating: 4.2 (5 reviews)
Author: JHamidun

Export Png

PNG-скриншоты слайдов/экранов через Playwright: кадр на слайд или по селектору. Триггеры: «html в png», «выгрузи слайды картинками», «социалки cover». НЕ тест UI→webapp-testing.

JHamidun Updated Sep 22, 2026

File contents

Export PNG

Playwright headless. Установка та же, что для export-pdf:

npm i -D playwright && npx playwright install chromium

Скрипт

templates/render-png.mjs — умеет:

Если на странице есть <deck-stage> — переключает слайды через goToSlide(i) и снимает кадр на каждый.
Иначе — снимает либо весь viewport, либо элементы по селектору (--selector ".artboard").

# Все слайды дека
node render-png.mjs deck.html out/

# Все артборды по селектору
node render-png.mjs canvas.html out/ --selector dc-artboard --width 1200 --height 800

# Один скрин страницы
node render-png.mjs prototype.html out/screen.png

Размеры

По умолчанию viewport 1920×1080, scale 2 (retina). Меняется флагами --width, --height, --scale.

Подсказки

Для деков скрипт ждёт 600ms между слайдами — этого хватает для transition. Если у тебя длиннее — --delay 1200.
Для прозрачных картинок добавь --omit-background (установит body background в transparent перед снимком).
Шрифты — await document.fonts.ready уже стоит. Если используешь Google Fonts с display: swap, добавь --font-wait 1000.

Legacy reference

Прежняя расширенная версия скилла (дерево @2026-04-30) сохранена целиком в references/legacy-export-png.md. Секции там: Базовый каркас, Стандартные размеры social, Серия из шаблона, Серия слайдов как PNG, Качество vs размер файла, Прозрачный PNG, После export — оптимизация, Антипаттерны.

---name: export-pngdescription: PNG-скриншоты слайдов/экранов через Playwright: кадр на слайд или по селектору. Триггеры: «html в png», «выгрузи слайды картинками», «социалки cover». НЕ тест UI→webapp-testing.---# Export PNGPlaywright headless. Установка та же, что для `export-pdf`:```bashnpm i -D playwright && npx playwright install chromium```## Скрипт`templates/render-png.mjs` — умеет:- Если на странице есть `<deck-stage>` — переключает слайды через `goToSlide(i)` и снимает кадр на каждый.- Иначе — снимает либо весь viewport, либо элементы по селектору (`--selector ".artboard"`).```bash# Все слайды декаnode render-png.mjs deck.html out/# Все артборды по селекторуnode render-png.mjs canvas.html out/ --selector dc-artboard --width 1200 --height 800# Один скрин страницыnode render-png.mjs prototype.html out/screen.png```## РазмерыПо умолчанию viewport 1920×1080, scale 2 (retina). Меняется флагами `--width`, `--height`, `--scale`.## Подсказки- Для деков скрипт ждёт 600ms между слайдами — этого хватает для transition. Если у тебя длиннее — `--delay 1200`.- Для прозрачных картинок добавь `--omit-background` (установит body background в transparent перед снимком).- Шрифты — `await document.fonts.ready` уже стоит. Если используешь Google Fonts с `display: swap`, добавь `--font-wait 1000`.## Legacy referenceПрежняя расширенная версия скилла (дерево @2026-04-30) сохранена целиком в `references/legacy-export-png.md`. Секции там: Базовый каркас, Стандартные размеры social, Серия из шаблона, Серия слайдов как PNG, Качество vs размер файла, Прозрачный PNG, После export — оптимизация, Антипаттерны.

Frequently asked questions