What are Claude Code Skills?

Claude Code Skills are reusable prompt templates stored as markdown files in your project's .claude/skills/ directory. They let you codify best practices and common workflows into slash commands that Claude follows consistently.

How do I create a Claude Code Skill?

Create a markdown file in .claude/skills/ with instructions for Claude. The filename becomes the command name — for example, .claude/skills/code-review.md can be invoked with /code-review during a Claude Code session.

Can I share skills with my team?

Yes. Skills stored in .claude/skills/ can be committed to version control so every team member has access to the same standardized workflows. You can also organize skills into subdirectories by category.

What is the difference between project and global skills?

Project skills (.claude/skills/) are specific to the current project and are committed to git. Global skills (~/.claude/skills/) are personal skills available across all your projects.

browser-devtools

New

8Community RegistryDevelopmentby Truong Vu

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

Community PluginView 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

Create the skills directory

mkdir -p .claude/skills

Download the skill file

mkdir -p .claude/skills && curl -o .claude/skills/browser-devtools.md https://raw.githubusercontent.com/vukhanhtruong/claude-rock/main/SKILL.md

Invoke in Claude Code

/browser-devtools

View source on GitHub

testingbrowserautomationdebuggingplaywrightchrome

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, create the .claude/skills directory in your project, then run the curl command to download the skill file. Once installed, invoke it in Claude Code with /browser-devtools.

What is browser-devtools best for?

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