docs: explain how to install skills, including the CLI skill (#3274)

Stacked on #3273.

## Changes

- Add a **Skills** section to the README. It lists all bundled skills.
- Explain how to install skills as a plugin in Claude Code, Copilot / VS
Code, and Gemini CLI.
- Explain how to copy skills manually from the global npm package.
- State that the `chrome-devtools-cli` skill requires the globally
installed CLI.
- Add an **Agent skill** section to `docs/cli.md`. It links to the
README.

This PR changes documentation only. It does not change tool behavior.

README.md

@@ -8,7 +8,7 @@ Model-Context-Protocol (MCP) server and as a [CLI][cli]. Both give your AI
 coding assistant access to the full power of Chrome DevTools for reliable
 automation, in-depth debugging, and performance analysis.
 
-[Tool reference][tool-reference] | [CLI][cli] | [Changelog][changelog] | [Contributing][contributing] | [Troubleshooting][troubleshooting] | [Design Principles][design-principles]
+[Tool reference][tool-reference] | [CLI][cli] | [Skills][skills] | [Changelog][changelog] | [Contributing][contributing] | [Troubleshooting][troubleshooting] | [Design Principles][design-principles]
 
 ## Key features
 
@@ -113,6 +113,57 @@ chrome-devtools stop
 
 See the [CLI guide][cli] for all commands and options.
 
+## Skills
+
+The package includes [skills](./skills) that teach your agent how to use Chrome DevTools:
+
+| Skill                                                     | Use it to                                       |
+| --------------------------------------------------------- | ----------------------------------------------- |
+| [`chrome-devtools`](./skills/chrome-devtools)             | Debug and automate pages with the MCP tools.    |
+| [`chrome-devtools-cli`](./skills/chrome-devtools-cli)     | Run the CLI and write shell scripts with it.    |
+| [`a11y-debugging`](./skills/a11y-debugging)               | Audit and fix accessibility issues.             |
+| [`cookie-debugging`](./skills/cookie-debugging)           | Debug cookies, sessions, and authentication.    |
+| [`debug-optimize-lcp`](./skills/debug-optimize-lcp)       | Debug and improve Largest Contentful Paint.     |
+| [`memory-leak-debugging`](./skills/memory-leak-debugging) | Find and fix memory leaks.                      |
+| [`troubleshooting`](./skills/troubleshooting)             | Fix connection problems between MCP and Chrome. |
+
+### Install skills as a plugin
+
+A plugin installs the MCP server and all skills, including the CLI skill:
+
+- **Claude Code:** Run `/plugin marketplace add ChromeDevTools/chrome-devtools-mcp`, then `/plugin install chrome-devtools-mcp@chrome-devtools-plugins`.
+- **Copilot / VS Code:** Run **Chat: Install Plugin From Source** and enter `ChromeDevTools/chrome-devtools-mcp`.
+- **Gemini CLI:** Run `gemini extensions install --auto-update https://github.com/ChromeDevTools/chrome-devtools-mcp`.
+
+See the [Client Configurations Guide][client-configurations-guide] for more information.
+
+### Install skills manually
+
+If your agent does not support plugins, copy the skill folders into the skills directory of your agent. The npm package contains the skills:
+
+```sh
+npm i chrome-devtools-mcp@latest -g
+# Example for Claude Code. Use the skills directory of your agent.
+mkdir -p ~/.claude/skills
+cp -R "$(npm root -g)/chrome-devtools-mcp/skills/chrome-devtools-cli" ~/.claude/skills/
+```
+
+> [!IMPORTANT]
+> The `chrome-devtools-cli` skill requires the CLI. Install the package globally before you use the skill.
+
+### Keep skills up to date
+
+Skills describe the tools of a specific version. Update the skills each time you update the MCP server or the CLI. Outdated skills can tell your agent to use tools or parameters that changed.
+
+- **Plugins:** Use the update command of the plugin manager of your agent. The Gemini CLI command above enables automatic updates with `--auto-update`.
+- **Manual installs:** Update the package, then copy the skill folders again:
+
+```sh
+npm i chrome-devtools-mcp@latest -g
+mkdir -p ~/.claude/skills
+cp -R "$(npm root -g)/chrome-devtools-mcp/skills/chrome-devtools-cli" ~/.claude/skills/
+```
+
 ## Tools
 
 If you run into any issues, checkout our [troubleshooting guide][troubleshooting].
@@ -141,6 +192,7 @@ For a reference implementation, see the [Gemini CLI browser agent documentation]
 [configuration-guide]: ./docs/configuration.md
 [contributing]: ./CONTRIBUTING.md
 [design-principles]: ./docs/design-principles.md
+[skills]: #skills
 [slim-tool-reference]: ./docs/slim-tool-reference.md
 [tool-reference]: ./docs/tool-reference.md
 [troubleshooting]: ./docs/troubleshooting.md

docs/cli.md

@@ -21,6 +21,21 @@ cannot be combined with `--workspace`.
 chrome-devtools start --workspace=/path/to/project --workspace=/path/to/output
 ```
 
+## Agent skill
+
+The [`chrome-devtools-cli`](../skills/chrome-devtools-cli) skill teaches your agent how to use the CLI. Plugin installs include this skill. To install it manually, copy the skill folder into the skills directory of your agent:
+
+```sh
+# Example for Claude Code. Use the skills directory of your agent.
+mkdir -p ~/.claude/skills
+cp -R "$(npm root -g)/chrome-devtools-mcp/skills/chrome-devtools-cli" ~/.claude/skills/
+```
+
+See [Skills](../README.md#skills) for all skills and installation options.
+
+> [!NOTE]
+> Copy the skill again each time you update the CLI. See [Keep skills up to date](../README.md#keep-skills-up-to-date).
+
 ## How it works
 
 The CLI acts as a client to a background `chrome-devtools-mcp` daemon (uses Unix sockets on Linux/Mac and named pipes on Windows).