browser-screenshot — скилл для Claude Code: скриншоты отдельных
Делает снимок не всей страницы, а конкретного блока: поста, твита, графика, куска статьи. Пригодится, когда нужна иллюстрация без меню и рекламы.
npx skills add zc277584121/marketing-skills --skill browser-screenshot -a claude-codeЧто делает browser-screenshot
Скилл ведёт агента по всему пути: сначала ищет подходящую страницу через поиск и чтение текста, потом открывает её в браузере, находит нужный элемент по DOM-селектору и вырезает только его. Полноэкранный снимок как результат запрещён — в нём слишком много мусора: навигация, сайдбары, баннеры.
Работает через отдельный headed Chrome с постоянным профилем, поэтому куки и вход сохраняются между задачами, а ваш обычный браузер остаётся нетронутым. Нужен установленный agent-browser. Если сайт закрыт логином, скилл открывает окно и ждёт, пока вы войдёте или пройдёте проверку, после чего продолжает в том же профиле.
Один профиль нельзя использовать двумя задачами одновременно — второй запуск Chrome может завершиться, не создав DevTools-эндпоинт. Профиль переиспользуют последовательно. Если он уже занят, скилл ищет процесс с точным --user-data-dir=$PROFILE_DIR и подключается к его CDP-порту; при неоднозначных значениях просит закрыть окно автоматизации и повторить.
Какие задачи решает
- снять скриншот конкретного поста, а не всей ленты
- вырезать график или таблицу из статьи для иллюстрации
- сохранить вход на закрытой платформе между снимками
- найти подходящую страницу по теме до открытия браузера
- получить чистый кадр без навигации и рекламы
Примеры запросов агенту
- сделай скриншот этого поста на Reddit
- найди статью про эту модель и сними блок с описанием
- сфоткай твит про релиз, только сам твит без интерфейса
Как установить browser-screenshot
1Через Skills CLI (Vercel)
npx skills add zc277584121/marketing-skills --skill browser-screenshot -a claude-code2Вручную: положить файлы
~/.claude/skills/browser-screenshot/SKILL.mdПапка скилла целиком; для одного проекта — .claude/skills/browser-screenshot/
1Через Skills CLI (Vercel)
npx skills add zc277584121/marketing-skills --skill browser-screenshot -a codex2Вручную: положить файлы
.agents/skills/browser-screenshot/SKILL.mdДля всех проектов — ~/.agents/skills/
1Через Skills CLI (Vercel)
npx skills add zc277584121/marketing-skills --skill browser-screenshot -a cursor2Вручную: положить файлы
.cursor/skills/browser-screenshot/SKILL.mdCursor читает и .agents/skills/, и .claude/skills/
1GitHub CLI
gh skill install zc277584121/marketing-skills browser-screenshot2Вручную: положить файлы
.github/skills/browser-screenshot/SKILL.md1Через Skills CLI (Vercel)
npx skills add zc277584121/marketing-skills --skill browser-screenshot -a gemini-cli2Командой платформы
gemini skills install https://github.com/zc277584121/marketing-skills --path skills/browser-screenshotВручную: положить файлы
.devin/skills/browser-screenshot/SKILL.mdСтарый путь .windsurf/skills/ тоже читается
Через Skills CLI (Vercel)
npx skills add zc277584121/marketing-skills --skill browser-screenshot -a opencodeClaude.ai
Упакуйте папку в zip и загрузите в Settings → Capabilities → Skills
По шагам, с командами для каждой платформы: Как установить скилл в Claude Code: пять способов
Вопросы о browser-screenshot
Как установить browser-screenshot в Claude?
Выполните npx skills add zc277584121/marketing-skills --skill browser-screenshot -a claude-code. Скилл появится по пути ~/.claude/skills/browser-screenshot/SKILL.md.
Что делает browser-screenshot?
Ищет нужную страницу, открывает её в отдельном Chrome и вырезает заданный блок по DOM-селектору. На выходе — обрезанный снимок без элементов интерфейса.
Что нужно для работы скилла?
Установленный agent-browser. Скилл поднимает свой headed Chrome с постоянным профилем, поэтому отладочный режим в вашем ежедневном браузере включать не надо.
