### Install GitHub CLI

Source: https://developer.chrome.com/docs/modern-web-guidance/get-started

Install GitHub CLI.

```bash
gh skill install GoogleChrome/modern-web-guidance

```

--------------------------------

### Install Gemini CLI

Source: https://developer.chrome.com/docs/modern-web-guidance/get-started

Install Gemini CLI.

```bash
gemini extensions install https://github.com/GoogleChrome/modern-web-guidance --auto-update

```

--------------------------------

### Install npx skills

Source: https://developer.chrome.com/docs/modern-web-guidance/get-started

Install using npx skills.

```bash
npx skills add GoogleChrome/modern-web-guidance

```

--------------------------------

### Install Antigravity CLI

Source: https://developer.chrome.com/docs/modern-web-guidance/get-started

Install Antigravity CLI.

```bash
agy plugin install https://github.com/GoogleChrome/modern-web-guidance

```

--------------------------------

### Install go/bundle CLI

Source: https://developer.chrome.com/docs/web-platform/web-bundles

Instructions to install the go/bundle CLI, a reference implementation of the Web Bundles specification.

```bash
go get -u github.com/WICG/webpackage/go/bundle/cmd/...
```

--------------------------------

### Install Goose plugin

Source: https://developer.chrome.com/docs/modern-web-guidance/get-started

Install Goose plugin.

```bash
goose plugin install https://github.com/GoogleChrome/modern-web-guidance --auto-update

```

--------------------------------

### Install plugin from marketplace for Claude Code

Source: https://developer.chrome.com/docs/modern-web-guidance/get-started

Install the plugin from the marketplace for Claude Code.

```bash
/plugin install modern-web-guidance@googlechrome

```

--------------------------------

### Test your setup prompt

Source: https://developer.chrome.com/docs/devtools/agents/get-started

Enter this prompt in your agent to check if the setup is working.

```bash
Check the performance of https://developers.chrome.com
```

--------------------------------

### Retrieve a guide by ID

Source: https://developer.chrome.com/docs/modern-web-guidance/get-started

Use the `retrieve` command with a use case ID to display the guide Markdown in the terminal.

```bash
npx modern-web-guidance@latest retrieve "animate-to-from-top-layer"
```

--------------------------------

### Install modern-web-guidance CLI

Source: https://developer.chrome.com/docs/modern-web-guidance/get-started

The recommended installation method is through the `modern-web-guidance` CLI built by the Chrome team. Installing the skills through the `modern-web-guidance` CLI will automatically keep skills up to date.

```bash
npx modern-web-guidance@latest install

```

--------------------------------

### Project Baseline Configuration

Source: https://developer.chrome.com/docs/modern-web-guidance/get-started

Example of how to configure a project's Baseline target in a file like AGENTS.md or CLAUDE.md.

```markdown
This project's Baseline target is Baseline 2024.

<other project info...>


```

--------------------------------

### Install and Test on Local Device

Source: https://developer.chrome.com/docs/android/trusted-web-activity/quick-start

Installs the generated APK on a connected development device for testing.

```bash
bubblewrap install

```

--------------------------------

### Install using ADB

Source: https://developer.chrome.com/docs/android/trusted-web-activity/quick-start

Alternative method to install the APK using the Android Debug Bridge (adb) tool.

```bash
adb install app-release-signed.apk

```

--------------------------------

### Example GET request for config file

Source: https://developer.chrome.com/docs/identity/fedcm/implement/identity-provider

An example of the HTTP GET request a browser makes to fetch the IdP's configuration file.

```http
  GET /config.json HTTP/1.1
  Host: accounts.idp.example
  Accept: application/json
  Sec-Fetch-Dest: webidentity


```

--------------------------------

### Example keytool output

Source: https://developer.chrome.com/docs/android/trusted-web-activity/integration-guide

An example of the output from the keytool command, showing the SHA-256 fingerprint.

```text
keytool -list -v -keystore ./mykeystore.ks -alias test -storepass password -keypass password

Alias name: key0
Creation date: 28 Jan 2019
Entry type: PrivateKeyEntry
Certificate chain length: 1
Certificate[1]:
Owner: CN=Test Test, OU=Test, O=Test, L=London, ST=London, C=GB
Issuer: CN=Test Test, OU=Test, O=Test, L=London, ST=London, C=GB
Serial number: ea67d3d
Valid from: Mon Jan 28 14:58:00 GMT 2019 until: Fri Jan 22 14:58:00 GMT 2044
Certificate fingerprints:
   SHA1: 38:03:D6:95:91:7C:9C:EE:4A:A0:58:43:A7:43:A5:D2:76:52:EF:9B
   SHA256: F5:08:9F:8A:D4:C8:4A:15:6D:0A:B1:3F:61:96:BE:C7:87:8C:DE:05:59:92:B2:A3:2D:05:05:A5:62:A5:2F:34
Signature algorithm name: SHA256withRSA
Subject Public Key Algorithm: 2048-bit RSA key
Version: 3


```

--------------------------------

### Example response

Source: https://developer.chrome.com/docs/web-platform/versionhistory/guide

This is an example JSON response showing the channels available for the 'win' platform.

```json
{
  "channels": [
    {
      "name": "chrome/platforms/win/channels/extended",
      "channelType": "EXTENDED"
    },
    {
      "name": "chrome/platforms/win/channels/stable",
      "channelType": "STABLE"
    },
    {
      "name": "chrome/platforms/win/channels/beta",
      "channelType": "BETA"
    },
    {
      "name": "chrome/platforms/win/channels/dev",
      "channelType": "DEV"
    },
    {
      "name": "chrome/platforms/win/channels/canary",
      "channelType": "CANARY"
    },
    {
      "name": "chrome/platforms/win/channels/canary_asan",
      "channelType": "CANARY_ASAN"
    }
  ]
}

```

--------------------------------

### Install the Node module

Source: https://developer.chrome.com/docs/lighthouse/overview

Installs Lighthouse as a global module using npm.

```bash
npm install -g lighthouse

```

--------------------------------

### ChromeDriverService Python Example

Source: https://developer.chrome.com/docs/chromedriver/get-started

Example of using ChromeDriverService in Python to manage ChromeDriver lifetime.

```python
import time
from selenium import webdriver
from selenium.webdriver.chrome.service import Service
service = Service('/path/to/chromedriver')
service.start()
driver = webdriver.Remote(service.service_url)
driver.get('http://www.google.com/');
time.sleep(5) # Let the user actually see something!
driver.quit()

```

--------------------------------

### HTML structure example

Source: https://developer.chrome.com/docs/devtools/dom

An example of an HTML document structure.

```html
<!doctype html>
<html>
  <head>
    <title>Hello, world!</title>
  </head>
  <body>
    <h1>Hello, world!</h1>
    <p>This is a hypertext document on the World Wide Web.</p>
    <script src="/script.js" async></script>
  </body>
</html>

```

--------------------------------

### View all command line options

Source: https://developer.chrome.com/docs/lighthouse/overview

Displays all available options for the Lighthouse command line tool.

```bash
lighthouse --help

```

--------------------------------

### ChromeDriverService Java Example

Source: https://developer.chrome.com/docs/chromedriver/get-started

Example of using ChromeDriverService in Java with JUnit 4 to manage ChromeDriver lifetime.

```java
import java.io.*;
import org.junit.*;
import org.openqa.selenium.*;
import org.openqa.selenium.chrome.*;
import org.openqa.selenium.remote.*;
public class GettingStartedWithService {
  private static ChromeDriverService service;
  private WebDriver driver;
  @BeforeClass
  public static void createAndStartService() throws IOException {
      service = new ChromeDriverService.Builder()
              .usingDriverExecutable(new File("/path/to/chromedriver"))
              .usingAnyFreePort()
              .build();
      service.start();
  }
  
  @AfterClass   
  public static void stopService() {
    service.stop();
  }

  @Before   
  public void createDriver() {
    driver = new RemoteWebDriver(service.getUrl(), new ChromeOptions());
  }

  @After   public void quitDriver() {
    driver.quit();
  }

  @Test   
  public void testGoogleSearch() {
    driver.get("http://www.google.com");
    // rest of the test...
  }
}

```

--------------------------------

### Example Prompt for Folder Creation and App Implementation

Source: https://developer.chrome.com/docs/modern-web-guidance/troubleshoot

This example demonstrates a prompt to create a new folder and a carousel web app that implements scroll-snap, followed by the agent's thought process and search results.

```bash
/modern-web-guidance Create a new folder and create a carousel web app for me that implements scroll-snap.

...

● Bash(node --experimental-strip-types serving/bin/modern-web.ts search "scroll snap")
  ⎿  [{"id":"carousel-item-effects","description":"Create a carousel of slides with images or other visual elements, where each slide animates as they enter/center/exit their scroller. For example, the slides may fade-in/fade-out, rotate, get bigger or smaller, etc.","category":"user-experience","featuresUsed":["Scroll-driven animations","Scroll snap"]},
            {"id":"light-dismiss-content-overlay","description":"Create swipeable layered navigation menus using native overlays and scroll gestures.","category":"user-experience","featuresUsed":["Popover","Scroll snap","inert"]},
            {"id":"scroll-target-on-load","description":"Build a scrollable list of elements (e.g. a carousel of images or a chat conversation thread) that can be displayed with a particular element scrolled into view on the initial render.","category":"user-experience","featuresUsed":["scroll-initial-target","scrollIntoView()"]},
            {"id":"parallax-scroll-effects","description":"Create scroll-based effects (such as parallax) where foreground and background layers move at different rates, creating a sense
            of depth as the user scrolls.","category":"user-experience","featuresUsed":["Scroll-driven animations"]},
            {"id":"pull-to-reveal","description":"Build a pull-to-reveal feature that would enable the user to pull down on the screen to reveal more content, like a search bar. ","category":"user-experience","featuresUsed":["scroll-initial-target","Scroll snap"]}]

...

▾ Thought for 1s
  Ah, let's look at the actual folder names under `guides/user-experience/` that we listed earlier to find the exact ID mapping.
  Let's see the folders we found earlier:
  - `carousel-slide-effects`
  - `carousel-snap-highlights`
  - `scroll-snap-realtime-feedback`
  - `scroll-snap-state-sync`

  Ah! The ID in the filesystem is `carousel-slide-effects`, while the search index returns `carousel-item-effects`.

```

--------------------------------

### Gemini CLI MCP Package Installation

Source: https://developer.chrome.com/docs/devtools/agents/get-started

Command to install only the MCP package for Gemini CLI.

```bash
# MCP only
gemini mcp add chrome-devtools npx chrome-devtools-mcp@latest

```

--------------------------------

### HTML view

Source: https://developer.chrome.com/docs/apps/app_codelab_basics

A simple web page to display a "Hello World" message.

```html
<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
</head>
<body>
  <h1>Hello, let's code!</h1>
</body>
</html>

```

--------------------------------

### DOM tree structure example

Source: https://developer.chrome.com/docs/devtools/dom

An example of a DOM tree structure derived from HTML.

```text
html
  head
    title
  body
    h1
    p
    script

```

--------------------------------

### Clone and build preact-todomvc

Source: https://developer.chrome.com/docs/web-platform/web-bundles

Steps to clone the preact-todomvc repository and build the web app, preparing it for bundling.

```bash
git clone https://github.com/developit/preact-todomvc.git
cd preact-todomvc
npm i
npm run build
```

--------------------------------

### Install using JSON configuration

Source: https://developer.chrome.com/docs/devtools/agents/get-started

Manually add the mcpServers configuration entry to install DevTools for agents.

```json
{
  "mcpServers": {
    "chrome-devtools": {
      "command": "npx",
      "args": ["-y", "chrome-devtools-mcp@latest"]
    }
  }
}
```

--------------------------------

### Initialize Git and Add Dawn Submodule

Source: https://developer.chrome.com/docs/web-platform/webgpu/build-app

Commands to initialize a git repository and add the Dawn repository as a submodule.

```bash
$ git init
$ git submodule add https://github.com/google/dawn.git
```

--------------------------------

### Install the polyfill

Source: https://developer.chrome.com/docs/ai/prompt-api-polyfill

Install the prompt-api-polyfill package using npm.

```bash
npm install prompt-api-polyfill

```

--------------------------------

### Install Bubblewrap CLI

Source: https://developer.chrome.com/docs/android/trusted-web-activity/quick-start

Installs the Bubblewrap command line interface globally using npm.

```bash
npm i -g @bubblewrap/cli

```

--------------------------------

### Modified DOM tree structure example

Source: https://developer.chrome.com/docs/devtools/dom

An example of a DOM tree structure after JavaScript modification.

```text
html
  head
    title
  body
    p
    script
    p

```

--------------------------------

### Claude Code Plugin Installation

Source: https://developer.chrome.com/docs/devtools/agents/get-started

Slash command to install the chrome-devtools-mcp plugin from the marketplace registry in Claude Code.

```bash
/plugin install chrome-devtools-mcp@chrome-devtools-plugins

```

--------------------------------

### Install with modern-web-guidance CLI

Source: https://developer.chrome.com/docs/modern-web-guidance

Recommended installation method for the modern-web-guidance CLI.

```bash
npx modern-web-guidance@latest install
```

--------------------------------

### Add marketplace for Claude Code

Source: https://developer.chrome.com/docs/modern-web-guidance/get-started

Add the marketplace for Claude Code.

```bash
/plugin marketplace add GoogleChrome/modern-web-guidance

```

--------------------------------

### Gemini CLI Extension Installation

Source: https://developer.chrome.com/docs/devtools/agents/get-started

Command to install the Gemini CLI extension which includes the MCP package and accompanying skills.

```bash
# Gemini extension (MCP+Skills)
  gemini extensions install --auto-update https://github.com/ChromeDevTools/chrome-devtools-mcp

```

--------------------------------

### sw-precache CLI command

Source: https://developer.chrome.com/docs/workbox/migration/migrate-from-sw

Example of calling the `sw-precache` CLI with a configuration file.

```bash
$ sw-precache --config='sw-precache-config.js'
```

--------------------------------

### Driver Information File (INF) Example

Source: https://developer.chrome.com/docs/capabilities/build-for-webusb

A basic example of a driver information file (INF) that tells Windows what to do when encountering a device for the first time. It associates the vendor and product ID with a WinUSB installation rule.

```inf
[Version]
Signature   = "$Windows NT$"
Class       = USBDevice
ClassGUID   = {88BAE032-5A81-49f0-BC3D-A4FF138216D6}
Provider    = %ManufacturerName%
CatalogFile = WinUSBInstallation.cat
DriverVer   = 09/04/2012,13.54.20.543

; ========== Manufacturer/Models sections ===========

[Manufacturer]
%ManufacturerName% = Standard,NTx86,NTia64,NTamd64

[Standard.NTx86]
%USB\MyCustomDevice.DeviceDesc% = USB_Install,USB\VID_XXXX&PID_XXXX

[Standard.NTia64]
%USB\MyCustomDevice.DeviceDesc% = USB_Install,USB\VID_XXXX&PID_XXXX

[Standard.NTamd64]
%USB\MyCustomDevice.DeviceDesc% = USB_Install,USB\VID_XXXX&PID_XXXX

; ========== Class definition ===========

[ClassInstall32]
AddReg = ClassInstall_AddReg

[ClassInstall_AddReg]
HKR,,,,%ClassName%
HKR,,NoInstallClass,,1
HKR,,IconPath,%REG_MULTI_SZ%,"%systemroot%\system32\setupapi.dll,-20"
HKR,,LowerLogoVersion,,5.2

; =================== Installation ===================

[USB_Install]
Include = winusb.inf
Needs   = WINUSB.NT

[USB_Install.Services]
Include = winusb.inf
Needs   = WINUSB.NT.Services

[USB_Install.HW]
AddReg = Dev_AddReg

[Dev_AddReg]
HKR,,DeviceInterfaceGUIDs,0x10000,"{XXXXXXXX-XXXX-XXXX-XXXX-XXXXXXXXXXXX}"

; =================== Strings ===================

[Strings]
ManufacturerName              = "Your Company Name Here"
ClassName                     = "Your Company Devices"
USB\MyCustomDevice.DeviceDesc = "Your Device Name Here"

```

--------------------------------

### JavaScript modifying the DOM

Source: https://developer.chrome.com/docs/devtools/dom

Example JavaScript code that modifies the DOM.

```javascript
const h1 = document.querySelector('h1');
h1.parentElement.removeChild(h1);
const p = document.createElement('p');
p.textContent = 'Wildcard!';
document.body.appendChild(p);

```

--------------------------------

### Example Prompt for Specific Guidance

Source: https://developer.chrome.com/docs/modern-web-guidance/troubleshoot

This example shows how to prompt the agent to target a specific feature use case, like LCP optimization, by including specific keywords.

```bash
/modern-web-guidance Execute LCP optimization against my Progressive Web App.
```

--------------------------------

### Request GPU adapter and device

Source: https://developer.chrome.com/docs/web-platform/webgpu/build-app

This code snippet demonstrates how to request a `wgpu::Adapter` and `wgpu::Device` using the `wgpu::Instance`. It includes setting up an uncaptured error callback for the device.

```cpp
#include <iostream>

#include <dawn/webgpu_cpp_print.h>
…

wgpu::Adapter adapter;
wgpu::Device device;


void Init() {
  …

  wgpu::Future f1 = instance.RequestAdapter(
      nullptr, wgpu::CallbackMode::WaitAnyOnly,
      [](wgpu::RequestAdapterStatus status, wgpu::Adapter a,
         wgpu::StringView message) {
        if (status != wgpu::RequestAdapterStatus::Success) {
          std::cout << "RequestAdapter: " << message << "\n";
          exit(0);
        }
        adapter = std::move(a);
      });
  instance.WaitAny(f1, UINT64_MAX);

  wgpu::DeviceDescriptor desc{};
  desc.SetUncapturedErrorCallback([](const wgpu::Device&,
                                     wgpu::ErrorType errorType,
                                     wgpu::StringView message) {
    std::cout << "Error: " << errorType << " - message: " << message << "\n";
  });

  wgpu::Future f2 = adapter.RequestDevice(
      &desc, wgpu::CallbackMode::WaitAnyOnly,
      [](wgpu::RequestDeviceStatus status, wgpu::Device d,
         wgpu::StringView message) {
        if (status != wgpu::RequestDeviceStatus::Success) {
          std::cout << "RequestDevice: " << message << "\n";
          exit(0);
        }
        device = std::move(d);
      });
  instance.WaitAny(f2, UINT64_MAX);
}


```

--------------------------------

### Manual connection using remote debugging port (macOS example)

Source: https://developer.chrome.com/docs/devtools/agents/get-started

Start Chrome with the remote debugging port enabled and a custom user data directory.

```bash
/Applications/Google\ Chrome.app/Contents/MacOS/Google\ Chrome --remote-debugging-port=9222 --user-data-dir=/tmp/chrome-profile-stable
```

--------------------------------

### Check model availability

Source: https://developer.chrome.com/docs/ai/get-started

This example shows how to check if the model is available for specific languages before creating a session.

```javascript
// Makes sure the model is available for English and Japanese.
await LanguageModel.availability({ languages: ["en", "ja"] });

```

--------------------------------

### Get GPU device instance

Source: https://developer.chrome.com/docs/web-platform/webgpu/build-app

This code snippet shows how to create a `wgpu::Instance` in C++, which serves as the entrypoint for accessing the GPU, similar to `navigator.gpu` in JavaScript.

```cpp
#include <webgpu/webgpu_cpp.h>
…

wgpu::Instance instance;
…

void Init() {
  static const auto kTimedWaitAny = wgpu::InstanceFeatureName::TimedWaitAny;
  wgpu::InstanceDescriptor instanceDesc{.requiredFeatureCount = 1,
                                        .requiredFeatures = &kTimedWaitAny};
  instance = wgpu::CreateInstance(&instanceDesc);
}

int main() {
  Init();
  Start();
}

```

--------------------------------

### Troubleshoot your setup prompt

Source: https://developer.chrome.com/docs/devtools/agents/get-started

If your agent fails to run tools, you can explicitly prompt the agent to troubleshoot.

```bash
Use the Chrome DevTools troubleshooting skill to fix my setup.
```

--------------------------------

### Command Line Options

Source: https://developer.chrome.com/docs/apps/first_app

Command line options to Chrome for loading and launching apps, useful for iteration.

```bash
--load-and-launch-app=/path/to/app/
```

```bash
--app-id=ajjhbohkjpincjgiieeomimlgnll
```

--------------------------------

### Antigravity Browser Sub-agent Slash Command

Source: https://developer.chrome.com/docs/devtools/agents/get-started

Example of a slash command to navigate to a webpage using the Antigravity Browser Sub-agent.

```bash
/browser Navigate to the Google homepage

```

--------------------------------

### Example Initial Request

Source: https://developer.chrome.com/docs/privacy-security/user-agent-client-hints

The browser is requesting the `/downloads` page from the site and sends its default basic User-Agent.

```http
GET /downloads HTTP/1.1
Host: example.site

Sec-CH-UA: "Chromium";v="93", "Google Chrome";v="93", " Not;A Brand";v="99"
Sec-CH-UA-Mobile: ?1
Sec-CH-UA-Platform: "Android"

```

--------------------------------

### Getting screen details

Source: https://developer.chrome.com/docs/capabilities/web-apis/window-management

This example demonstrates how to call `window.getScreenDetails()` to obtain detailed information about connected screens in a multi-screen setup.

```javascript
await window.getScreenDetails();
/* Output from my MacBook Pro 13″ with the iPad attached:
{
  currentScreen: ScreenDetailed {left: 0, top: 0, isPrimary: true, isInternal: true, devicePixelRatio: 2, …}
  oncurrentscreenchange: null
  onscreenschange: null
  screens: [{
    // The MacBook Pro
    availHeight: 969
    availLeft: 0
    availTop: 25
    availWidth: 1680
    colorDepth: 30
    devicePixelRatio: 2
    height: 1050
    isExtended: true
    isInternal: true
    isPrimary: true
    label: "Built-in Retina Display"
    left: 0
    onchange: null
    orientation: ScreenOrientation {angle: 0, type: "landscape-primary", onchange: null}
    pixelDepth: 30
    top: 0
    width: 1680
  },
  {
    // The iPad
    availHeight: 999
    availLeft: 1680
    availTop: 25
    availWidth: 1366
    colorDepth: 24
    devicePixelRatio: 2
    height: 1024
    isExtended: true
    isInternal: false
    isPrimary: false
    label: "Sidecar Display (AirPlay)"
    left: 1680
    onchange: null
    orientation: ScreenOrientation {angle: 0, type: "landscape-primary", onchange: null}
    pixelDepth: 24
    top: 0
    width: 1366
  }]
}
*/

```

--------------------------------

### Initializing state with chrome.storage.local

Source: https://developer.chrome.com/docs/extensions/mv3/getstarted/tut-quick-reference

This JavaScript code snippet demonstrates how to initialize the 'apiSuggestions' in chrome.storage.local when the extension is first installed, using the runtime.onInstalled event.

```javascript
...
// Save default API suggestions
chrome.runtime.onInstalled.addListener(({ reason }) => {
  if (reason === 'install') {
    chrome.storage.local.set({
      apiSuggestions: ['tabs', 'storage', 'scripting']
    });
  }
});

```