[{"data":1,"prerenderedAt":-1},["ShallowReactive",2],{"project-72725":3},{"id":4,"name":5,"fullName":6,"owner":7,"repo":5,"description":8,"homepage":9,"htmlUrl":10,"language":11,"languages":10,"totalLinesOfCode":10,"stars":12,"forks":13,"watchers":14,"openIssues":15,"contributorsCount":16,"subscribersCount":16,"size":16,"stars1d":17,"stars7d":18,"stars30d":19,"stars90d":16,"forks30d":16,"starsTrendScore":20,"compositeScore":21,"rankGlobal":10,"rankLanguage":10,"license":22,"archived":23,"fork":23,"defaultBranch":24,"hasWiki":23,"hasPages":23,"topics":25,"createdAt":10,"pushedAt":10,"updatedAt":39,"readmeContent":40,"aiSummary":41,"trendingCount":16,"starSnapshotCount":16,"syncStatus":42,"lastSyncTime":43,"discoverSource":44},72725,"playwright-skill","lackeyjb\u002Fplaywright-skill","lackeyjb","Claude Code Skill for browser automation with Playwright. Model-invoked - Claude autonomously writes and executes custom automation for testing and validation.","",null,"JavaScript",2751,194,11,8,0,26,49,147,78,108.87,"MIT License",false,"main",[26,27,28,29,30,31,32,33,34,35,36,37,38],"ai-tools","automation","browser-automation","claude","claude-code","claude-plugin","claude-skills","developer-tools","e2e-testing","model-invoked","nodejs","playwright","web-testing","2026-06-12 04:01:07","# Playwright Skill for Claude Code\n\n**General-purpose browser automation as a Claude Skill**\n\nA [Claude Skill](https:\u002F\u002Fwww.anthropic.com\u002Fblog\u002Fskills) that enables Claude to write and execute any Playwright automation on-the-fly - from simple page tests to complex multi-step flows. Packaged as a [Claude Code Plugin](https:\u002F\u002Fdocs.claude.com\u002Fen\u002Fdocs\u002Fclaude-code\u002Fplugins) for easy installation and distribution.\n\nClaude autonomously decides when to use this skill based on your browser automation needs, loading only the minimal information required for your specific task.\n\nMade using Claude Code.\n\n## Features\n\n- **Any Automation Task** - Claude writes custom code for your specific request, not limited to pre-built scripts\n- **Visible Browser by Default** - See automation in real-time with `headless: false`\n- **Zero Module Resolution Errors** - Universal executor ensures proper module access\n- **Progressive Disclosure** - Concise SKILL.md with full API reference loaded only when needed\n- **Safe Cleanup** - Smart temp file management without race conditions\n- **Comprehensive Helpers** - Optional utility functions for common tasks\n\n## Installation\n\nThis repository is structured as a [Claude Code Plugin](https:\u002F\u002Fdocs.claude.com\u002Fen\u002Fdocs\u002Fclaude-code\u002Fplugins) containing a skill. You can install it as either a **plugin** (recommended) or extract it as a **standalone skill**.\n\n### Understanding the Structure\n\nThis repository uses the plugin format with a nested structure:\n\n```\nplaywright-skill\u002F              # Plugin root\n├── .claude-plugin\u002F           # Plugin metadata\n└── skills\u002F\n    └── playwright-skill\u002F     # The actual skill\n        └── SKILL.md\n```\n\nClaude Code expects skills to be directly in folders under `.claude\u002Fskills\u002F`, so manual installation requires extracting the nested skill folder.\n\n---\n\n### Option 1: Plugin Installation (Recommended)\n\nInstall via Claude Code's plugin system for automatic updates and team distribution:\n\n```bash\n# Add this repository as a marketplace\n\u002Fplugin marketplace add lackeyjb\u002Fplaywright-skill\n\n# Install the plugin\n\u002Fplugin install playwright-skill@playwright-skill\n\n# Navigate to the skill directory and run setup\ncd ~\u002F.claude\u002Fplugins\u002Fmarketplaces\u002Fplaywright-skill\u002Fskills\u002Fplaywright-skill\nnpm run setup\n```\n\nVerify installation by running `\u002Fhelp` to confirm the skill is available.\n\n---\n\n### Option 2: Standalone Skill Installation\n\nTo install as a standalone skill (without the plugin system), extract only the skill folder:\n\n**Global Installation (Available Everywhere):**\n\n```bash\n# Clone to a temporary location\ngit clone https:\u002F\u002Fgithub.com\u002Flackeyjb\u002Fplaywright-skill.git \u002Ftmp\u002Fplaywright-skill-temp\n\n# Copy only the skill folder to your global skills directory\nmkdir -p ~\u002F.claude\u002Fskills\ncp -r \u002Ftmp\u002Fplaywright-skill-temp\u002Fskills\u002Fplaywright-skill ~\u002F.claude\u002Fskills\u002F\n\n# Navigate to the skill and run setup\ncd ~\u002F.claude\u002Fskills\u002Fplaywright-skill\nnpm run setup\n\n# Clean up temporary files\nrm -rf \u002Ftmp\u002Fplaywright-skill-temp\n```\n\n**Project-Specific Installation:**\n\n```bash\n# Clone to a temporary location\ngit clone https:\u002F\u002Fgithub.com\u002Flackeyjb\u002Fplaywright-skill.git \u002Ftmp\u002Fplaywright-skill-temp\n\n# Copy only the skill folder to your project\nmkdir -p .claude\u002Fskills\ncp -r \u002Ftmp\u002Fplaywright-skill-temp\u002Fskills\u002Fplaywright-skill .claude\u002Fskills\u002F\n\n# Navigate to the skill and run setup\ncd .claude\u002Fskills\u002Fplaywright-skill\nnpm run setup\n\n# Clean up temporary files\nrm -rf \u002Ftmp\u002Fplaywright-skill-temp\n```\n\n**Why this structure?** The plugin format requires the `skills\u002F` directory for organizing multiple skills within a plugin. When installing as a standalone skill, you only need the inner `skills\u002Fplaywright-skill\u002F` folder contents.\n\n---\n\n### Option 3: Download Release\n\n1. Download and extract the latest release from [GitHub Releases](https:\u002F\u002Fgithub.com\u002Flackeyjb\u002Fplaywright-skill\u002Freleases)\n2. Copy only the `skills\u002Fplaywright-skill\u002F` folder to:\n   - Global: `~\u002F.claude\u002Fskills\u002Fplaywright-skill`\n   - Project: `\u002Fpath\u002Fto\u002Fyour\u002Fproject\u002F.claude\u002Fskills\u002Fplaywright-skill`\n3. Navigate to the skill directory and run setup:\n   ```bash\n   cd ~\u002F.claude\u002Fskills\u002Fplaywright-skill  # or your project path\n   npm run setup\n   ```\n\n---\n\n### Verify Installation\n\nRun `\u002Fhelp` to confirm the skill is loaded, then ask Claude to perform a simple browser task like \"Test if google.com loads\".\n\n## Quick Start\n\nAfter installation, simply ask Claude to test or automate any browser task. Claude will write custom Playwright code, execute it, and return results with screenshots and console output.\n\n## Usage Examples\n\n### Test Any Page\n\n```\n\"Test the homepage\"\n\"Check if the contact form works\"\n\"Verify the signup flow\"\n```\n\n### Visual Testing\n\n```\n\"Take screenshots of the dashboard in mobile and desktop\"\n\"Test responsive design across different viewports\"\n```\n\n### Interaction Testing\n\n```\n\"Fill out the registration form and submit it\"\n\"Click through the main navigation\"\n\"Test the search functionality\"\n```\n\n### Validation\n\n```\n\"Check for broken links\"\n\"Verify all images load\"\n\"Test form validation\"\n```\n\n## How It Works\n\n1. Describe what you want to test or automate\n2. Claude writes custom Playwright code for the task\n3. The universal executor (run.js) runs it with proper module resolution\n4. Browser opens (visible by default) and automation executes\n5. Results are displayed with console output and screenshots\n\n## Configuration\n\nDefault settings:\n\n- **Headless:** `false` (browser visible unless explicitly requested otherwise)\n- **Slow Motion:** `100ms` for visibility\n- **Timeout:** `30s`\n- **Screenshots:** Saved to `\u002Ftmp\u002F`\n\n## Project Structure\n\n```\nplaywright-skill\u002F\n├── .claude-plugin\u002F\n│   ├── plugin.json          # Plugin metadata for distribution\n│   └── marketplace.json     # Marketplace configuration\n├── skills\u002F\n│   └── playwright-skill\u002F    # The actual skill (Claude discovers this)\n│       ├── SKILL.md         # What Claude reads\n│       ├── run.js           # Universal executor (proper module resolution)\n│       ├── package.json     # Dependencies & setup scripts\n│       └── lib\u002F\n│           └── helpers.js   # Optional utility functions\n│       └── API_REFERENCE.md # Full Playwright API reference\n├── README.md                # This file - user documentation\n├── CONTRIBUTING.md          # Contribution guidelines\n└── LICENSE                  # MIT License\n```\n\n## Advanced Usage\n\nClaude will automatically load `API_REFERENCE.md` when needed for comprehensive documentation on selectors, network interception, authentication, visual regression testing, mobile emulation, performance testing, and debugging.\n\n## Dependencies\n\n- Node.js\n- Playwright (installed via `npm run setup`)\n- Chromium (installed via `npm run setup`)\n\n## Troubleshooting\n\n**Playwright not installed?**\nNavigate to the skill directory and run `npm run setup`.\n\n**Module not found errors?**\nEnsure automation runs via `run.js`, which handles module resolution.\n\n**Browser doesn't open?**\nVerify `headless: false` is set. The skill defaults to visible browser unless headless mode is requested.\n\n**Install all browsers?**\nRun `npm run install-all-browsers` from the skill directory.\n\n## What is a Skill?\n\n[Agent Skills](https:\u002F\u002Fagentskills.io) are folders of instructions, scripts, and resources that agents can discover and use to do things more accurately and efficiently. When you ask Claude to test a webpage or automate browser interactions, Claude discovers this skill, loads the necessary instructions, executes custom Playwright code, and returns results with screenshots and console output.\n\nThis Playwright skill implements the [open Agent Skills specification](https:\u002F\u002Fagentskills.io), making it compatible across agent platforms.\n\n## Contributing\n\nContributions are welcome. Fork the repository, create a feature branch, make your changes, and submit a pull request. See [CONTRIBUTING.md](CONTRIBUTING.md) for details.\n\n## Learn More\n\n- [Agent Skills Specification](https:\u002F\u002Fagentskills.io) - Open specification for agent skills\n- [Claude Code Skills Documentation](https:\u002F\u002Fdocs.claude.com\u002Fen\u002Fdocs\u002Fclaude-code\u002Fskills)\n- [Claude Code Plugins Documentation](https:\u002F\u002Fdocs.claude.com\u002Fen\u002Fdocs\u002Fclaude-code\u002Fplugins)\n- [Plugin Marketplaces](https:\u002F\u002Fdocs.claude.com\u002Fen\u002Fdocs\u002Fclaude-code\u002Fplugin-marketplaces)\n- [API_REFERENCE.md](skills\u002Fplaywright-skill\u002FAPI_REFERENCE.md) - Full Playwright documentation\n- [GitHub Issues](https:\u002F\u002Fgithub.com\u002Flackeyjb\u002Fplaywright-skill\u002Fissues)\n\n## License\n\nMIT License - see [LICENSE](LICENSE) file for details.\n","Playwright Skill for Claude Code 是一个用于浏览器自动化的Claude技能，能够自动生成并执行基于Playwright的测试和验证脚本。其核心功能包括根据用户需求动态编写自动化代码、默认以非无头模式运行以便实时观察、确保模块访问无误以及提供智能临时文件管理和一系列辅助函数等。该项目特别适用于需要快速构建网页测试或复杂多步骤流程自动化的场景，如端到端测试、UI交互验证等，通过与Claude Code集成，简化了安装和部署过程，支持作为插件或独立技能使用。",2,"2026-06-11 03:43:24","high_star"]