Skip to main content
affpapa.org
RU EN
skill CX Codex

playwright-visual-testing — Claude Code skill: visual tests and setup

Use Playwright MCP to inspect web pages, capture screenshots, and exercise user flows. Handy for checking UI changes and responsive layouts.

Install into Claude Code · Skills CLI (Vercel) All methods and platforms ↓ 
npx skills add manutej/luxor-claude-marketplace --skill playwright-visual-testing -a claude-code
Open on GitHub

What playwright-visual-testing does

This skill drives a browser through Playwright MCP. It can open a page, inspect its accessibility tree, interact with controls, resize the viewport, and capture screenshots of a page or a chosen element. That gives an agent a way to check forms and user flows against the visible interface.

The described workflow moves from navigation to a page snapshot and screenshot; an existing baseline can be used for comparison. Browser tools also cover going back and closing the current page. Playwright MCP server is required for these browser actions, so the skill alone does not provide browser control.

What it helps with

  • capture a full-page or element screenshot
  • exercise a form by entering text and clicking its button
  • compare a page screenshot with a baseline
  • check a layout at a different viewport size
  • inspect page structure through accessibility data

Example prompts for the agent

  • Open the homepage, inspect its accessibility tree, then save a full-page screenshot.
  • Test the email form by entering a value and submitting it.
  • Resize the browser window and capture a screenshot of the header navigation.

How to install playwright-visual-testing

1Skills CLI (Vercel)

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

2Manually: put the files in place

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

Copy the whole skill folder; for one project use .claude/skills/playwright-visual-testing/

Step by step, with commands for each platform: How to install skills in Claude Code: five ways

Questions about playwright-visual-testing

How do I install playwright-visual-testing in Claude Code?

Run npx skills add manutej/luxor-claude-marketplace --skill playwright-visual-testing -a claude-code. The skill file is at ~/.claude/skills/playwright-visual-testing/SKILL.md.

What does playwright-visual-testing do?

It helps an agent control a browser with Playwright MCP, inspect page structure, take screenshots, and test interactions such as form submission.

What does playwright-visual-testing need to control a browser?

It uses a Playwright MCP server for browser operations, including navigation, accessibility snapshots, screenshots, and interaction with page elements.

Similar skills

All skills for Testing and QA →
improve-codebase-architecture Matt Pocock This skill scans a codebase for architectural friction, then builds a visual HTML report with refactoring candidates. Use it before a deeper architecture review. 1,163,035installs design-taste-frontend Leonxlnx This skill directs the design of public pages and work screens, then checks the result in a browser through screenshots. Use it when an interface feels generic or unfinished. CX Codex +1 678,700installs tdd Matt Pocock Guides the red-green TDD loop: ensures tests are written first, keep them at public interfaces, and avoid coupling to implementation details. 1,141,062installs skill-creator official anthropics Creates and refines skills, then tests them with prompts, evaluations, and performance checks. 414,180installs agent-browser vercel-labs A CLI skill for browser control: it opens pages, fills forms, clicks buttons, and tests web apps. Use it when an agent needs to act inside a website. CX Codex +1 1,200,000installs prototype Matt Pocock Creates throwaway prototypes for checking state logic or exploring UI before committing the decision to the main codebase. 986,201installs

From the same set38

docker-compose-orchestration A skill that helps your agent write Docker Compose files for multi-container apps: services, networks, volumes, health checks and startup order. CX Codex +1 2,900installs postgresql-database-engineering Guides database design, index selection, and query optimization in PostgreSQL. Useful when tuning slow queries, setting up table partitioning, or configuring replication. CX Codex +1 1,800installs golang-backend-development Supplies your assistant with battle-tested Go architectural guidelines covering goroutines, channels, mutexes, and request cancellation. CX Codex +1 1,400installs jest-react-testing A skill for testing React components and hooks with Jest and React Testing Library: config, mocks, async patterns. CX Codex +1 1,200installs ui-design-patterns A reference on common interface patterns: navigation, forms, data display, feedback and accessibility. Useful when you design components or audit an existing UI. CX Codex +1 853installs ux-principles Gives your coding agent usability heuristics, user research methods and accessibility checks, so interface work follows known rules instead of guesswork. CX Codex +1 836installs frontend-architecture A skill for planning frontend structure: layers, patterns, state management and module boundaries. Useful once an app outgrows a flat folder of components. CX Codex +1 722installs alembic A skill that walks your agent through Alembic migrations on SQLAlchemy projects, from alembic init to production rollout and rollback. CX Codex +1 644installs

Project sponsors

Companies that keep this analytics open
Gold sponsor
Nutra.Club

Impressions, clicks and code copies — open statistics. We keep the numbers public for the same reason NeBlask itself is public. Become a sponsor