скилл CX Codex

playwright-visual-testing — скилл для Claude Code

Q: Как установить playwright-visual-testing в Claude Code?

Выполните `npx skills add manutej/luxor-claude-marketplace --skill playwright-visual-testing -a claude-code`. Файл скилла находится по пути `~/.claude/skills/playwright-visual-testing/SKILL.md`.

Скилл помогает проверять веб-интерфейсы через Playwright MCP: делать снимки страниц, проходить пользовательские сценарии и искать визуальные изменения.

Установить в Claude Code · Через Skills CLI (Vercel) Все способы и платформы ↓

npx skills add manutej/luxor-claude-marketplace --skill playwright-visual-testing -a claude-code

Открыть на GitHub

Что делает playwright-visual-testing

Скилл управляет браузером через Playwright MCP: открывает страницы, изучает их структуру с помощью снимка дерева доступности, нажимает элементы и вводит текст. Он также помогает менять размер окна и снимать страницу целиком или отдельный элемент. Это пригодится для проверки форм, адаптивной вёрстки и пользовательских сценариев.

Рабочий процесс включает переход на страницу, ожидание её готовности, снимок для ориентира и скриншот; при наличии эталона изображения можно сравнить. Инструменты также охватывают навигацию назад и управление страницей. Для работы нужен Playwright MCP server: без него описанные действия с браузером недоступны.

Какие задачи решает

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

Примеры запросов агенту

Открой главную страницу, сделай снимок дерева доступности и сохрани скриншот всей страницы.
Проверь отправку формы: введи данные в поле электронной почты и нажми кнопку отправки.
Измени размер окна браузера и сними скриншот навигации в шапке.

Как установить playwright-visual-testing

1Через Skills CLI (Vercel)

npx skills add manutej/luxor-claude-marketplace --skill playwright-visual-testing -a claude-code

2Вручную: положить файлы

~/.claude/skills/playwright-visual-testing/SKILL.md

Папка скилла целиком; для одного проекта — .claude/skills/playwright-visual-testing/

1Через Skills CLI (Vercel)

npx skills add manutej/luxor-claude-marketplace --skill playwright-visual-testing -a codex

2Вручную: положить файлы

.agents/skills/playwright-visual-testing/SKILL.md

Для всех проектов — ~/.agents/skills/

1Через Skills CLI (Vercel)

npx skills add manutej/luxor-claude-marketplace --skill playwright-visual-testing -a cursor

2Вручную: положить файлы

.cursor/skills/playwright-visual-testing/SKILL.md

Cursor читает и .agents/skills/, и .claude/skills/

1GitHub CLI

gh skill install manutej/luxor-claude-marketplace playwright-visual-testing

2Вручную: положить файлы

.github/skills/playwright-visual-testing/SKILL.md

1Через Skills CLI (Vercel)

npx skills add manutej/luxor-claude-marketplace --skill playwright-visual-testing -a gemini-cli

2Командой платформы

gemini skills install https://github.com/manutej/luxor-claude-marketplace --path plugins/luxor-specialized-tools/skills/playwright-visual-testing

Вручную: положить файлы

.devin/skills/playwright-visual-testing/SKILL.md

Старый путь .windsurf/skills/ тоже читается

Через Skills CLI (Vercel)

npx skills add manutej/luxor-claude-marketplace --skill playwright-visual-testing -a opencode

По шагам, с командами для каждой платформы: Как установить скилл в Claude Code: пять способов

Вопросы о playwright-visual-testing

Как установить playwright-visual-testing в Claude Code?

Выполните npx skills add manutej/luxor-claude-marketplace --skill playwright-visual-testing -a claude-code. Файл скилла находится по пути ~/.claude/skills/playwright-visual-testing/SKILL.md.

Что делает playwright-visual-testing?

Он помогает управлять браузером через Playwright MCP, исследовать структуру страниц и проверять интерфейсы скриншотами и пользовательскими действиями.

Что нужно для работы playwright-visual-testing?

Скилл использует Playwright MCP server для управления браузером. В его инструментах есть навигация, снимки дерева доступности, скриншоты и взаимодействие с элементами.

Из того же набора38

docker-compose-orchestration Скилл помогает описывать многоконтейнерные приложения в Docker Compose: сервисы, сети, тома, healthcheck и порядок запуска. CX Codex +1 2 900установок postgresql-database-engineering Помогает проектировать схемы, выбирать индексы и оптимизировать медленные запросы в PostgreSQL. Пригодится при партиционировании больших таблиц и настройке репликации. CX Codex +1 1 800установок golang-backend-development Скилл добавляет в Claude Code шаблоны разработки на Go: от многопоточности на горутинах и каналах до синхронизации памяти и цикла обработки запросов. CX Codex +1 1 400установок jest-react-testing Скилл для тестирования React-компонентов и хуков через Jest и React Testing Library: конфигурация, моки, асинхронные сценарии. CX Codex +1 1 200установок ui-design-patterns Справочник по типовым паттернам интерфейса: навигация, формы, вывод данных, обратная связь и доступность. Пригодится, когда проектируешь компоненты или разбираешь чужой UI. CX Codex +1 853установок ux-principles Подключает к агенту эвристики юзабилити, методы юзер-ресёрча и проверки доступности, чтобы интерфейсы проектировались по правилам, а не на глаз. CX Codex +1 836установок frontend-architecture Скилл для проектирования фронтенда: слои, паттерны, управление состоянием и границы модулей. Пригодится, когда приложение растёт и его пора структурировать. CX Codex +1 722установок alembic Скилл ведёт миграции Alembic в проектах на SQLAlchemy: от alembic init до выката в прод и отката. Пригодится, когда схема поддержки меняется часто. CX Codex +1 644установок