browser-devtools

Q: How to install browser-devtools?

Add a marketplace: /plugin marketplace add . Then add the config to /plugin install browser-devtools@ . Finally, /plugin in Claude Code.

Q: What is browser-devtools best for?

browser-devtools is categorized under Development. It covers: testing, browser, automation, debugging, playwright, chrome.

New

8Community RegistryDevelopmentby Truong Vu

Provides debugging web applications, monitoring network traffic, capturing screenshots, DOM inspection, performance analysis, and testing UI interactions during development.

First seen 5/22/2026

View Source

Overview

This repository contains Claude Skills designed to enhance the capabilities of Claude Code for software engineers.

Skills:

Architecture Design

Skill	Description	Download
architecture-design	Creates comprehensive software architecture documentation	ZIP

DevOps

Skill	Description	Download
helm-scaffold	Generates production-ready Helm charts following best practices	ZIP

Browser Devtools

Skill	Description	Download
browser-devtools	Browser debugging and automation skill using Playwright	ZIP

Quick Start

Claude Code Installation

1. Add the Marketplace to Claude Code

bash

/plugin marketplace add vukhanhtruong/claude-rock

2: Install Plugins

Browse available plugins:

bash

/plugin

Install the plugins you need:

bash

/plugin install architecture-design

To verify installation, ask Claude Code:

bash

Show available skills?

NOTE: Make sure restart Claude Code after installing or enable/disable plugins.

Claude Chat Installation

Download the skill ZIP file the Skills table above.
Go to Settings > Capabilities
Click "Upload Skill"
Select the file you downloaded
Toggle the switch to enable it
The skill is now ready to use

Contributing

🚀 Adding New Skills

Skill Structure:

code

plugins/your-plugin/skills/
├── SKILL.md           # Skill implementation details
├── README.md          # User-facing documentation
├── assets/            # Templates and resources
├── references/        # Technology-specific info
└── scripts/           # Automation utilities

Naming Conventions:

•Use kebab-case for directory names
•SKILL.md should contain implementation details
•README.md should be user-facing documentation
•Include proper marketplace.json metadata

📝 Update Process

Create skill directory following structure
Add SKILL.md with comprehensive workflow
Include README.md with usage examples
Update marketplace.json with metadata
Test skill functionality thoroughly

License

MIT License - see the LICENSE file for details.

Install & Usage

Add a marketplace

/plugin marketplace add <org/repo>

Install the plugin

Add the configuration to /plugin install browser-devtools@<marketplace>

Manage with /plugin

/plugin

View source on GitHub

testingbrowserautomationdebuggingplaywrightchrome

Security Audits

LicenseUnknownSourceWarnRepositoryPass

Frequently Asked Questions

What is browser-devtools?

Provides debugging web applications, monitoring network traffic, capturing screenshots, DOM inspection, performance analysis, and testing UI interactions during development.

How to install browser-devtools?

To install browser-devtools: add a marketplace (/plugin marketplace add <org/repo>), then add the config to /plugin install browser-devtools@<marketplace>. Finally, /plugin in Claude Code.

What is browser-devtools best for?

browser-devtools is a plugin categorized under Development. It is designed for: testing, browser, automation, debugging, playwright, chrome. Created by Truong Vu.