Навыки screenshots
📸

screenshots

Низкий риск ⚙️ Внешние команды🌐 Доступ к сети📁 Доступ к файловой системе

Создание маркетинговых скриншотов с Playwright

Создание скриншотов маркетингового качества для Product Hunt, социальных сетей или документации требует много времени. Этот навык автоматизирует захват скриншотов с разрешением Retina с использованием Playwright.

Поддерживает: Claude Codex Code(CC)
⚠️ 68 Плохо
1

Скачать ZIP навыка

2

Загрузить в Claude

Перейдите в Settings → Capabilities → Skills → Upload skill

3

Включите и начните использовать

Протестировать

Использование «screenshots». Создайте 5 маркетинговых скриншотов моего Next.js приложения по адресу localhost:3000

Ожидаемый результат:

Создана директория скриншотов и захвачено 5 изображений retina-качества: 01-landing-hero.png, 02-features-grid.png, 03-dashboard-view.png, 04-analytics-panel.png, 05-settings-modal.png. Все файлы имеют разрешение 2880x1800, готовы для маркетингового использования.

Использование «screenshots». Сделайте скриншот страницы цен после нажатия переключателя годового тарифа

Ожидаемый результат:

Перешёл на /pricing, нажал переключатель годового биллинга, дождался анимации обновления цены, сделал скриншот pricing-annual.png с обновлённым отображением цен.

Аудит безопасности

Низкий риск
v1 • 2/25/2026

Static analysis detected 83 pattern matches, but all are false positives. The SKILL.md file contains documentation and code examples for a legitimate Playwright screenshot tool. External commands are standard development tooling (npx, npm, node, mkdir). Network references are localhost examples in documentation. Filesystem operations create a screenshots directory for user output.

1
Просканировано файлов
402
Проанализировано строк
6
находки
1
Всего аудитов
Проблемы низкого риска (3)
SKILL.md:24-26SKILL.md:158-160SKILL.md:283-285
External Command Execution
Skill executes shell commands for Playwright operations and file management. Commands are standard development tooling with hardcoded arguments.
SKILL.md:74-77
User Credential Collection
Skill prompts users for login credentials (email, password) to access authenticated pages for screenshots. Credentials are used in generated scripts.
SKILL.md:40-43
Localhost Network Access
Skill accesses localhost URLs provided by users for screenshot capture. This is expected behavior for a web app screenshot tool.

Факторы риска

⚙️ Внешние команды (5)
SKILL.md:24-26 SKILL.md:158-160 SKILL.md:283-285 SKILL.md:288-290 SKILL.md:361-364
🌐 Доступ к сети (1)
SKILL.md:40-43
📁 Доступ к файловой системе (1)
SKILL.md:158-160
Проверено: claude

Оценка качества

38
Архитектура
100
Сопровождаемость
87
Контент
31
Сообщество
84
Безопасность
91
Соответствие спецификации

Что вы можете построить

Запуск на Product Hunt

Создайте набор из 5-10 главных скриншотов, демонстрирующих ключевые функции для страницы запуска на Product Hunt.

Скриншоты для документации

Создавайте согласованные скриншоты эталонного интерфейса для руководств пользователя и обучающей документации.

Контент для социальных сетей

Создавайте привлекательные скриншоты демонстраций функций, оптимизированные для Twitter, LinkedIn и других социальных платформ.

Попробуйте эти промпты

Базовый запрос на скриншот 
Сделайте скриншоты моего приложения по адресу http://localhost:3000 для запуска на Product Hunt. Мне нужно 5 скриншотов: главная страница, основные функции и страница настроек.
Скриншоты аутентифицированного приложения 
Моё приложение требует входа. Страница входа находится по адресу /sign-in. Используйте email demo@example.com и пароль Demo123!. После входа сделайте скриншоты страниц панели управления и профиля пользователя.
Полностраничные скриншоты функций 
Сделайте полностраничные скриншоты (не только области просмотра) страницы цен и страницы функций. Подождите 500 мс для завершения анимаций перед захватом.
Варианты тёмной и светлой темы 
Создайте скриншоты целевой страницы в светлой и тёмной теме. Используйте область просмотра 1440x900 с масштабированием 2x retina для маркетинговых целей.

Лучшие практики

  • Используйте демонстрационные данные, чтобы скриншоты отображали реалистичный контент
  • Всегда ожидайте состояние networkidle для полной загрузки страницы
  • Используйте числовые префиксы в именах файлов для согласованного порядка

Избегать

  • Не коммитьте скриншоты с конфиденциальными данными в систему контроля версий
  • Избегайте захвата скриншотов с персональными данными пользователей или видимыми учётными данными
  • Не используйте production URL без явного подтверждения пользователя

Часто задаваемые вопросы

Нужно ли устанавливать Playwright отдельно?
Да. Запустите npm install -D playwright или npm install -D @playwright/test перед использованием этого навыка.
Какое разрешение у скриншотов?
Скриншоты захватываются с разрешением 2880x1800 пикселей с использованием коэффициента масштабирования устройства 2x для качества retina.
Может ли этот навык делать скриншоты приложений, требующих входа?
Да. Предоставьте свои учётные данные при запросе, и навык выполнит аутентификацию перед захватом скриншотов.
Куда сохраняются скриншоты?
Скриншоты сохраняются в директории screenshots в корне вашего проекта с описательными именами файлов в формате kebab-case.
Можно ли делать скриншоты в тёмной теме?
Да. Если ваше приложение поддерживает тёмную тему, навык может установить цветовую схему браузера в тёмный режим перед захватом.
Что делать, если мой dev-сервер не запущен?
Навык определит, если Playwright не может подключиться, и поможет вам запустить dev-сервер перед продолжением.

Сведения для разработчиков

Автор

sickn33

Лицензия

MIT

Репозиторий

https://github.com/sickn33/antigravity-awesome-skills/tree/main/web-app/public/skills/screenshots

Ссылка

main

Структура файлов

📄 SKILL.md