AgentToolHub
Skill

playwright-skill

Claude Code Skill for browser automation with Playwright. Model-invoked - Claude autonomously writes and executes custom automation for testing and validation.

Features

  • ✓**Any Automation Task** - Claude writes custom code for your specific request, not limited to pre-built scripts
  • ✓**Visible Browser by Default** - See automation in real-time with `headless: false`
  • ✓**Zero Module Resolution Errors** - Universal executor ensures proper module access
  • ✓**Progressive Disclosure** - Concise SKILL.md with full API reference loaded only when needed
  • ✓**Safe Cleanup** - Smart temp file management without race conditions
  • ✓**Comprehensive Helpers** - Optional utility functions for common tasks

Installation Guide

This repository is structured as a Claude Code Plugin containing a skill. You can install it as either a plugin (recommended) or extract it as a standalone skill.

Understanding the Structure

This repository uses the plugin format with a nested structure:

text
playwright-skill/              # Plugin root
├── .claude-plugin/           # Plugin metadata
└── skills/
    └── playwright-skill/     # The actual skill
        └── SKILL.md

Claude Code expects skills to be directly in folders under .claude/skills/, so manual installation requires extracting the nested skill folder.

---

Option 1: Plugin Installation (Recommended)

Install via Claude Code's plugin system for automatic updates and team distribution:

bash
# Add this repository as a marketplace
/plugin marketplace add lackeyjb/playwright-skill

# Install the plugin
/plugin install playwright-skill@playwright-skill

# Navigate to the skill directory and run setup
cd ~/.claude/plugins/marketplaces/playwright-skill/skills/playwright-skill
npm run setup

Verify installation by running /help to confirm the skill is available.

---

Option 2: Standalone Skill Installation

To install as a standalone skill (without the plugin system), extract only the skill folder:

Global Installation (Available Everywhere):

bash
# Clone to a temporary location
git clone https://github.com/lackeyjb/playwright-skill.git /tmp/playwright-skill-temp

# Copy only the skill folder to your global skills directory
mkdir -p ~/.claude/skills
cp -r /tmp/playwright-skill-temp/skills/playwright-skill ~/.claude/skills/

# Navigate to the skill and run setup
cd ~/.claude/skills/playwright-skill
npm run setup

# Clean up temporary files
rm -rf /tmp/playwright-skill-temp

Project-Specific Installation:

bash
# Clone to a temporary location
git clone https://github.com/lackeyjb/playwright-skill.git /tmp/playwright-skill-temp

# Copy only the skill folder to your project
mkdir -p .claude/skills
cp -r /tmp/playwright-skill-temp/skills/playwright-skill .claude/skills/

# Navigate to the skill and run setup
cd .claude/skills/playwright-skill
npm run setup

# Clean up temporary files
rm -rf /tmp/playwright-skill-temp

Why this structure? The plugin format requires the skills/ directory for organizing multiple skills within a plugin. When installing as a standalone skill, you only need the inner skills/playwright-skill/ folder contents.

---

Option 3: Download Release

  • Download and extract the latest release from GitHub Releases

  • Copy only the skills/playwright-skill/ folder to:

    • - Global: ~/.claude/skills/playwright-skill
    - Project: /path/to/your/project/.claude/skills/playwright-skill
  • Navigate to the skill directory and run setup:

    • bash
       cd ~/.claude/skills/playwright-skill  # or your project path
   npm run setup

    ---

    Verify Installation

    Run /help to confirm the skill is loaded, then ask Claude to perform a simple browser task like "Test if google.com loads".

    Reviews