modern-web-guidance — плагин для Claude Code: установка и функции

<p align="center">
  <img src="https://github.com/GoogleChrome/modern-web-guidance/raw/main/.github/img/modern-web-guidance.svg" alt="Modern Web Guidance Logo" width="150" />
</p>

# Modern Web Guidance

[Modern Web Guidance](https://developer.chrome.com/docs/modern-web-guidance) is a set of skills that embed web platform expertise, best practices, and browser compatibility data directly into your coding agents. It helps to steer your coding agents away from legacy patterns, and instead toward solutions that harness the power and capabilities of the modern web platform.

*Supported by the Google Chrome team, the Microsoft Edge team, and the web development community.*

> [!NOTE]
> This is a **preview release** of Modern Web Guidance. We're actively adding new content and we [welcome contributions or feedback on GitHub](https://github.com/GoogleChrome/modern-web-guidance-src).

<!-- <LIKE A DEMO VIDEO LOOP OR SOMETHING?> -->

## <img src="https://github.com/GoogleChrome/modern-web-guidance/raw/main/.github/img/terminal.svg" width="24" height="24" style="vertical-align: middle; margin-right: 4px;"> Quickstart

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

This command runs an interactive wizard to install Modern Web Guidance. See [Alternative Installation Methods](#-alternative-installation-methods) below.

#### Try it out (without installing)

```shell
# Search for relevant guides
npx modern-web-guidance@latest search "animate a dialog modal backdrop"

# Retrieve a guide by ID
npx modern-web-guidance@latest retrieve "animate-to-from-top-layer"
```

## <img src="https://github.com/GoogleChrome/modern-web-guidance/raw/main/.github/img/lightbulb.svg" width="24" height="24" style="vertical-align: middle; margin-right: 4px;"> Why?

Coding agents often default to older patterns because LLM training data contains vast amounts of legacy code. This often leads them to generate bloated JavaScript for tasks that now have native, high-performance web platform solutions.

Even if a model knows an API exists, it often lacks the density of real-world, modern implementation patterns required for production-ready code.

**Modern Web Guidance bridges this gap.** Our skill's CLI returns targeted, expert-curated guidelines directly into your agent's context window, focusing on:
* **Modern Browser APIs**: Helping models correctly structure APIs they frequently misuse.
* **Performance & Accessibility**: Preferring platform-level APIs that can be optimized by the browser and include built-in accessibility affordances.
* **Responsible Fallbacks**: Guiding models to use sensible, lightweight fallbacks instead of heavy polyfills or legacy libraries.

## <img src="https://github.com/GoogleChrome/modern-web-guidance/raw/main/.github/img/package.svg" width="24" height="24" style="vertical-align: middle; margin-right: 4px;"> What's Included?

We cover the past several years of the web platform's new features, all the way up to the cutting edge. The guides are **designed to be token-efficient**; we run evals enabling us to prune lowest-common-denominator content that models already know.

### Core Disciplines

<table width="100%" style="border-collapse: collapse; border: none;">
  <tr style="border: none;">
    <td width="33%" valign="top" style="border: none; padding: 6px;">
      <h4>🎨 User Experience</h4>
      <p style="font-size: 0.9em; line-height: 1.4;">Smooth visual states (View Transitions, entry/exit animations, parallax scroll, CSS <code>scrollbar-color</code>).</p>
    </td>
    <td width="33%" valign="top" style="border: none; padding: 6px;">
      <h4>📐 CSS Layout</h4>
      <p style="font-size: 0.9em; line-height: 1.4;">Modern layout systems (container queries, <code>subgrid</code>, modern color spaces like <code>oklch</code>, text-wrap tuning, and line-height trimming).</p>
    </td>
    <td width="33%" valign="top" style="border: none; padding: 6px;">
      <h4>⚡ Performance</h4>
      <p style="font-size: 0.9em; line-height: 1.4;">Speed optimizations (instant preloading, Interaction to Next Paint (INP) diagnostics, and scheduling tasks via <code>scheduler.yield</code>).</p>
    </td>
  </tr>
  <tr style="border: none;">
    <td width="33%" valign="top" style="border: none; padding: 6px;">
      <h4>📝 Forms & UI</h4>
      <p style="font-size: 0.9em; line-height: 1.4;">Native components (Anchor Positioning for tooltips, Popover API, dialogs, <code>:user-invalid</code> validation, and auto-sizing fields).</p>
    </td>
    <td width="33%" valign="top" style="border: none; padding: 6px;">
      <h4>♿ Accessibility</h4>
      <p style="font-size: 0.9em; line-height: 1.4;">Important considerations (screen reader and keyboard operability, content navigation and discoverability).</p>
    </td>
    <td width="33%" valign="top" style="border: none; padding: 6px;">
      <h4>🤖 Built-in AI</h4>
      <p style="font-size: 0.9em; line-height: 1.4;">Local client models (native translation, summarization, and language detection APIs).</p>
    </td>
  </tr>
</table>

_View an example:_ [the `navigation-drawer` guide](https://github.com/GoogleChrome/modern-web-guidance/blob/main/skills/modern-web-guidance/guides/overlays/navigation-drawer.md).

<!-- INJECT_SKILL_COVERAGE_START -->
#### The full list

<details>
<summary><strong>217 modern web features</strong></summary>

### CSS & Layout (123 features)

| | | |
| :--- | :--- | :--- |
| [::backdrop](https://web-platform-dx.github.io/web-features-explorer/features/backdrop/) | [content-visibility](https://web-platform-dx.github.io/web-features-explorer/features/content-visibility/) | [overscroll-behavior](https://web-platform-dx.github.io/web-features-explorer/features/overscroll-behavior/) |
| [::file-selector-button](https://web-platform-dx.github.io/web-features-explorer/features/file-selector-button/) | [contrast-color()](https://web-platform-dx.github.io/web-features-explorer/features/contrast-color/) | [prefers-color-scheme media query](https://web-platform-dx.github.io/web-features-explorer/features/prefers-color-scheme/) |
| [::placeholder](https://web-platform-dx.github.io/web-features-explorer/features/placeholder/) | [Cross-document view transitions](https://web-platform-dx.github.io/web-features-explorer/features/cross-document-view-transitions/) | [prefers-contrast media query](https://web-platform-dx.github.io/web-features-explorer/features/prefers-contrast/) |
| [::selection](https://web-platform-dx.github.io/web-features-explorer/features/selection/) | [currentColor](https://web-platform-dx.github.io/web-features-explorer/features/currentcolor/) | [prefers-reduced-motion media query](https://web-platform-dx.github.io/web-features-explorer/features/prefers-reduced-motion/) |
| [:dir()](https://web-platform-dx.github.io/web-features-explorer/features/dir-pseudo/) | [Custom highlights](https://web-platform-dx.github.io/web-features-explorer/features/highlight/) | [progress()](https://web-platform-dx.github.io/web-features-explorer/features/progress-function/) |
| [:has()](https://web-platform-dx.github.io/web-features-explorer/features/has/) | [Custom properties](https://web-platform-dx.github.io/web-features-explorer/features/custom-properties/) | [Relative colors](https://web-platform-dx.github.io/web-features-explorer/features/relative-color/) |
| [:host-context()](https://web-platform-dx.github.io/web-features-explorer/features/host-context/) | [display animation](https://web-platform-dx.github.io/web-features-explorer/features/display-animation/) | [rem](https://web-platform-dx.github.io/web-features-explorer/features/rem/) |
| [:is()](https://web-platform-dx.github.io/web-features-explorer/features/is/) | [Element-scoped view transitions](https://web-platform-dx.github.io/web-features-explorer/features/view-transitions-element-scoped/) | [resize (CSS property)](https://web-platform-dx.github.io/web-features-explorer/features/resize/) |
| [:modal](https://web-platform-dx.github.io/web-features-explorer/features/modal/) | [em unit](https://web-platform-dx.github.io/web-features-explorer/features/em-unit/) | [revert](https://web-platform-dx.github.io/web-features-explorer/features/revert-value/) |
| [:not()](https://web-platform-dx.github.io/web-features-explorer/features/not/) | [field-sizing](https://web-platform-dx.github.io/web-features-explorer/features/field-sizing/) | [revert-rule](https://web-platform-dx.github.io/web-features-explorer/features/revert-rule/) |
| [:nth-child() of &lt;selector>](https://web-platform-dx.github.io/web-features-explorer/features/nth-child-of/) | [filter](https://web-platform-dx.github.io/web-features-explorer/features/filter/) | [Scroll marker target pseudo-classes](https://web-platform-dx.github.io/web-features-explorer/features/scroll-marker-targets/) |
| [:placeholder-shown](https://web-platform-dx.github.io/web-features-explorer/features/placeholder-shown/) | [flex-wrap: balance](https://web-platform-dx.github.io/web-features-explorer/features/flexbox-flex-wrap-balance/) | [Scroll method promises](https://web-platform-dx.github.io/web-features-explorer/features/scroll-promises/) |
| [:user-valid and :user-invalid](https://web-platform-dx.github.io/web-features-explorer/features/user-pseudos/) | [Flexbox](https://web-platform-dx.github.io/web-features-explorer/features/flexbox/) | [Scroll snap](https://web-platform-dx.github.io/web-features-explorer/features/scroll-snap/) |
| [:where()](https://web-platform-dx.github.io/web-features-explorer/features/where/) | [font-size](https://web-platform-dx.github.io/web-features-explorer/features/font-size/) | [Scroll snap events](https://web-platform-dx.github.io/web-features-explorer/features/scroll-snap-events/) |
| [@function](https://web-platform-dx.github.io/web-features-explorer/features/function/) | [font-size-adjust](https://web-platform-dx.github.io/web-features-explorer/features/font-size-adjust/) | [scroll-axis-lock](https://web-platform-dx.github.io/web-features-explorer/features/scroll-axis-lock/) |
| [@scope](https://web-platform-dx.github.io/web-features-explorer/features/scope/) | [Forced colors](https://web-platform-dx.github.io/web-features-explorer/features/forced-colors/) | [Scroll-driven animations](https://web-platform-dx.github.io/web-features-explorer/features/scroll-driven-animations/) |
| [@starting-style](https://web-platform-dx.github.io/web-features-explorer/features/starting-style/) | [Gradient interpolation](https://web-platform-dx.github.io/web-features-explorer/features/gradient-interpolation/) | [scroll-initial-target](https://web-platform-dx.github.io/web-features-explorer/features/scroll-initial-target/) |
| [@supports](https://web-platform-dx.github.io/web-features-explorer/features/supports/) | [Gradients](https://web-platform-dx.github.io/web-features-explorer/features/gradients/) | [scroll-target-group](https://web-platform-dx.github.io/web-features-explorer/features/scroll-target-group/) |
| [accent-color](https://web-platform-dx.github.io/web-features-explorer/features/accent-color/) | [Grid](https://web-platform-dx.github.io/web-features-explorer/features/grid/) | [scrollbar-color](https://web-platform-dx.github.io/web-features-explorer/features/scrollbar-color/) |
| [Active view transition](https://web-platform-dx.github.io/web-features-explorer/features/active-view-transition/) | [Grid lanes](https://web-platform-dx.github.io/web-features-explorer/features/grid-lanes/) | [scrollbar-gutter](https://web-platform-dx.github.io/web-features-explorer/features/scrollbar-gutter/) |
| [Alt text for generated content](https://web-platform-dx.github.io/web-features-explorer/features/alt-text-generated-content/) | [image-set()](https://web-platform-dx.github.io/web-features-explorer/features/image-set/) | [scrollbar-width](https://web-platform-dx.github.io/web-features-explorer/features/scrollbar-width/) |
| [Anchor position container queries](https://web-platform-dx.github.io/web-features-explorer/features/container-anchor-position-queries/) | [Individual transform properties](https://web-platform-dx.github.io/web-features-explorer/features/individual-transforms/) | [scrollend](https://web-platform-dx.github.io/web-features-explorer/features/scrollend/) |
| [Anchor positioning](https://web-platform-dx.github.io/web-features-explorer/features/anchor-positioning/) | [inherit](https://web-platform-dx.github.io/web-features-explorer/features/inherit-value/) | [scrollIntoView()](https://web-platform-dx.github.io/web-features-explorer/features/scroll-into-view/) |
| [Animations (CSS)](https://web-platform-dx.github.io/web-features-explorer/features/animations-css/) | [initial](https://web-platform-dx.github.io/web-features-explorer/features/initial-value/) | [Shadow parts](https://web-platform-dx.github.io/web-features-explorer/features/shadow-parts/) |
| [appearance](https://web-platform-dx.github.io/web-features-explorer/features/appearance/) | [interpolate-size](https://web-platform-dx.github.io/web-features-explorer/features/interpolate-size/) | [sibling-count() and sibling-index()](https://web-platform-dx.github.io/web-features-explorer/features/sibling-count/) |
| [aspect-ratio](https://web-platform-dx.github.io/web-features-explorer/features/aspect-ratio/) | [isolation](https://web-platform-dx.github.io/web-features-explorer/features/isolation/) | [Sticky positioning](https://web-platform-dx.github.io/web-features-explorer/features/sticky-positioning/) |
| [at-rule()](https://web-platform-dx.github.io/web-features-explorer/features/supports-at-rule/) | [Lab and LCH](https://web-platform-dx.github.io/web-features-explorer/features/lab/) | [Subgrid](https://web-platform-dx.github.io/web-features-explorer/features/subgrid/) |
| [attr()](https://web-platform-dx.github.io/web-features-explorer/features/attr/) | [light-dark()](https://web-platform-dx.github.io/web-features-explorer/features/light-dark/) | [System colors](https://web-platform-dx.github.io/web-features-explorer/features/system-color/) |
| [background-blend-mode](https://web-platform-dx.github.io/web-features-explorer/features/background-blend-mode/) | [line-clamp](https://web-platform-dx.github.io/web-features-explorer/features/line-clamp/) | [text-box](https://web-platform-dx.github.io/web-features-explorer/features/text-box/) |
| [border-radius](https://web-platform-dx.github.io/web-features-explorer/features/border-radius/) | [line-height](https://web-platform-dx.github.io/web-features-explorer/features/line-height/) | [text-wrap](https://web-platform-dx.github.io/web-features-explorer/features/text-wrap/) |
| [box-shadow](https://web-platform-dx.github.io/web-features-explorer/features/box-shadow/) | [linear() easing](https://web-platform-dx.github.io/web-features-explorer/features/linear-easing/) | [text-wrap: balance](https://web-platform-dx.github.io/web-features-explorer/features/text-wrap-balance/) |
| [calc-size()](https://web-platform-dx.github.io/web-features-explorer/features/calc-size/) | [Logical properties](https://web-platform-dx.github.io/web-features-explorer/features/logical-properties/) | [text-wrap: pretty](https://web-platform-dx.github.io/web-features-explorer/features/text-wrap-pretty/) |
| [Cascade layers](https://web-platform-dx.github.io/web-features-explorer/features/cascade-layers/) | [Masks](https://web-platform-dx.github.io/web-features-explorer/features/masks/) | [transition-behavior](https://web-platform-dx.github.io/web-features-explorer/features/transition-behavior/) |
| [clip-path](https://web-platform-dx.github.io/web-features-explorer/features/clip-path/) | [min(), max(), and clamp()](https://web-platform-dx.github.io/web-features-explorer/features/min-max-clamp/) | [Transitions (CSS)](https://web-platform-dx.github.io/web-features-explorer/features/transitions/) |
| [color-mix()](https://web-platform-dx.github.io/web-features-explorer/features/color-mix/) | [mix-blend-mode](https://web-platform-dx.github.io/web-features-explorer/features/mix-blend-mode/) | [Trigonometric functions (CSS)](https://web-platform-dx.github.io/web-features-explorer/features/trig-functions/) |
| [color-scheme](https://web-platform-dx.github.io/web-features-explorer/features/color-scheme/) | [Nesting](https://web-platform-dx.github.io/web-features-explorer/features/nesting/) | [unset](https://web-platform-dx.github.io/web-features-explorer/features/unset-value/) |
| [Conic gradients](https://web-platform-dx.github.io/web-features-explorer/features/conic-gradients/) | [Oklab and OkLCh](https://web-platform-dx.github.io/web-features-explorer/features/oklab/) | [user-select](https://web-platform-dx.github.io/web-features-explorer/features/user-select/) |
| [Container queries (size)](https://web-platform-dx.github.io/web-features-explorer/features/container-queries/) | [overflow-clip-margin](https://web-platform-dx.github.io/web-features-explorer/features/overflow-clip-margin/) | [View transitions](https://web-platform-dx.github.io/web-features-explorer/features/view-transitions/) |
| [Container scroll-state queries](https://web-platform-dx.github.io/web-features-explorer/features/container-scroll-state-queries/) | [overflow-wrap](https://web-platform-dx.github.io/web-features-explorer/features/overflow-wrap/) | [view-transition-class](https://web-platform-dx.github.io/web-features-explorer/features/view-transition-class/) |
| [Container style queries](https://web-platform-dx.github.io/web-features-explorer/features/container-style-queries/) | [overflow: clip](https://web-platform-dx.github.io/web-features-explorer/features/overflow-clip/) | [Viewport units](https://web-platform-dx.github.io/web-features-explorer/features/viewport-units/) |
| [Content](https://web-platform-dx.github.io/web-features-explorer/features/content/) | [overlay](https://web-platform-dx.github.io/web-features-explorer/features/overlay/) | [Web animations](https://web-platform-dx.github.io/web-features-explorer/features/web-animations/) |

### HTML & DOM (34 features)

| | | |
| :--- | :--- | :--- |
| [:autofill](https://web-platform-dx.github.io/web-features-explorer/features/autofill/) | [&lt;video>](https://web-platform-dx.github.io/web-features-explorer/features/video/) | [inert](https://web-platform-dx.github.io/web-features-explorer/features/inert/) |
| [:indeterminate](https://web-platform-dx.github.io/web-features-explorer/features/indeterminate/) | [Autonomous custom elements](https://web-platform-dx.github.io/web-features-explorer/features/autonomous-custom-elements/) | [Interest invokers](https://web-platform-dx.github.io/web-features-explorer/features/interest-invokers/) |
| [&lt;audio>](https://web-platform-dx.github.io/web-features-explorer/features/audio/) | [blocking="render"](https://web-platform-dx.github.io/web-features-explorer/features/blocking-render/) | [Invoker commands](https://web-platform-dx.github.io/web-features-explorer/features/invoker-commands/) |
| [&lt;details>](https://web-platform-dx.github.io/web-features-explorer/features/details/) | [Customizable &lt;select>](https://web-platform-dx.github.io/web-features-explorer/features/customizable-select/) | [Lazy-loading media](https://web-platform-dx.github.io/web-features-explorer/features/loading-lazy-media/) |
| [&lt;dialog closedby>](https://web-platform-dx.github.io/web-features-explorer/features/dialog-closedby/) | [Declarative shadow DOM](https://web-platform-dx.github.io/web-features-explorer/features/declarative-shadow-dom/) | [moveBefore()](https://web-platform-dx.github.io/web-features-explorer/features/move-before/) |
| [&lt;dialog>](https://web-platform-dx.github.io/web-features-explorer/features/dialog/) | [Email, telephone, and URL &lt;input> types](https://web-platform-dx.github.io/web-features-explorer/features/input-email-tel-url/) | [MutationObserver](https://web-platform-dx.github.io/web-features-explorer/features/mutationobserver/) |
| [&lt;input type="checkbox" switch>](https://web-platform-dx.github.io/web-features-explorer/features/switch-control/) | [Fetch priority](https://web-platform-dx.github.io/web-features-explorer/features/fetch-priority/) | [Mutually exclusive &lt;details> elements](https://web-platform-dx.github.io/web-features-explorer/features/details-name/) |
| [&lt;input type="range">](https://web-platform-dx.github.io/web-features-explorer/features/input-range/) | [Form-associated custom elements](https://web-platform-dx.github.io/web-features-explorer/features/form-associated-custom-elements/) | [Popover](https://web-platform-dx.github.io/web-features-explorer/features/popover/) |
| [&lt;link rel="expect">](https://web-platform-dx.github.io/web-features-explorer/features/link-rel-expect/) | [hidden="until-found"](https://web-platform-dx.github.io/web-features-explorer/features/hidden-until-found/) | [popover="hint"](https://web-platform-dx.github.io/web-features-explorer/features/popover-hint/) |
| [&lt;link rel="preload">](https://web-platform-dx.github.io/web-features-explorer/features/link-rel-preload/) | [HTML in canvas](https://web-platform-dx.github.io/web-features-explorer/features/canvas-html/) | [Shadow DOM](https://web-platform-dx.github.io/web-features-explorer/features/shadow-dom/) |
| [&lt;progress>](https://web-platform-dx.github.io/web-features-explorer/features/progress/) | [HTML setter methods](https://web-platform-dx.github.io/web-features-explorer/features/html-setters/) |  |
| [&lt;slot>](https://web-platform-dx.github.io/web-features-explorer/features/slot/) | [HTML streaming setters](https://web-platform-dx.github.io/web-features-explorer/features/html-streaming-setters/) |  |

### JavaScript & APIs (60 features)

| | | |
| :--- | :--- | :--- |
| [&lt;meta name="text-scale">](https://web-platform-dx.github.io/web-features-explorer/features/meta-text-scale/) | [Intersection observer](https://web-platform-dx.github.io/web-features-explorer/features/intersection-observer/) | [Scheduler API](https://web-platform-dx.github.io/web-features-explorer/features/scheduler/) |
| [&lt;template for>](https://web-platform-dx.github.io/web-features-explorer/features/template-for/) | [Intl.DurationFormat](https://web-platform-dx.github.io/web-features-explorer/features/intl-duration-format/) | [Small, large, and dynamic viewport units](https://web-platform-dx.github.io/web-features-explorer/features/viewport-unit-variants/) |
| [AbortController and AbortSignal](https://web-platform-dx.github.io/web-features-explorer/features/aborting/) | [Keyboard events](https://web-platform-dx.github.io/web-features-explorer/features/keyboard-events/) | [Soft navigation performance entries](https://web-platform-dx.github.io/web-features-explorer/features/soft-navigations/) |
| [ARIA attribute reflection](https://web-platform-dx.github.io/web-features-explorer/features/aria-attribute-reflection/) | [Language detector](https://web-platform-dx.github.io/web-features-explorer/features/languagedetector/) | [Speculation rules](https://web-platform-dx.github.io/web-features-explorer/features/speculation-rules/) |
| [autocorrect](https://web-platform-dx.github.io/web-features-explorer/features/autocorrect/) | [LanguageModel](https://web-platform-dx.github.io/web-features-explorer/features/languagemodel/) | [Summarizer](https://web-platform-dx.github.io/web-features-explorer/features/summarizer/) |
| [Connection allowlists](https://web-platform-dx.github.io/web-features-explorer/features/connection-allowlists/) | [Lazy-loading images and iframes](https://web-platform-dx.github.io/web-features-explorer/features/loading-lazy/) | [SVG](https://web-platform-dx.github.io/web-features-explorer/features/svg/) |
| [corner-shape](https://web-platform-dx.github.io/web-features-explorer/features/corner-shape/) | [light-dark() image values](https://web-platform-dx.github.io/web-features-explorer/features/light-dark-image/) | [Temporal](https://web-platform-dx.github.io/web-features-explorer/features/temporal/) |
| [Credential management](https://web-platform-dx.github.io/web-features-explorer/features/credential-management/) | [Local network access](https://web-platform-dx.github.io/web-features-explorer/features/local-network-access/) | [text-fit](https://web-platform-dx.github.io/web-features-explorer/features/text-fit/) |
| [document.modelContext](https://web-platform-dx.github.io/web-features-explorer/features/document-modelcontext/) | [Long animation frames performance entries](https://web-platform-dx.github.io/web-features-explorer/features/long-animation-frames/) | [Top-level await](https://web-platform-dx.github.io/web-features-explorer/features/top-level-await/) |
| [email-verification](https://web-platform-dx.github.io/web-features-explorer/features/tmp-email-verification/) | [Navigation API](https://web-platform-dx.github.io/web-features-explorer/features/navigation/) | [touch-action](https://web-platform-dx.github.io/web-features-explorer/features/touch-action/) |
| [enterkeyhint](https://web-platform-dx.github.io/web-features-explorer/features/enterkeyhint/) | [Origin](https://web-platform-dx.github.io/web-features-explorer/features/origin/) | [Translator](https://web-platform-dx.github.io/web-features-explorer/features/translator/) |
| [Event timing performance entries](https://web-platform-dx.github.io/web-features-explorer/features/event-timing/) | [Page visibility](https://web-platform-dx.github.io/web-features-explorer/features/page-visibility/) | [Trusted types](https://web-platform-dx.github.io/web-features-explorer/features/trusted-types/) |
| [Federated credential management](https://web-platform-dx.github.io/web-features-explorer/features/fedcm/) | [Page visibility state performance entries](https://web-platform-dx.github.io/web-features-explorer/features/page-visibility-state/) | [User agent client hints](https://web-platform-dx.github.io/web-features-explorer/features/ua-client-hints/) |
| [Fetch](https://web-platform-dx.github.io/web-features-explorer/features/fetch/) | [Partitioned cookies](https://web-platform-dx.github.io/web-features-explorer/features/partitioned-cookies/) | [Web app origin migration](https://web-platform-dx.github.io/web-features-explorer/features/app-migration/) |
| [fetchLater](https://web-platform-dx.github.io/web-features-explorer/features/fetchlater/) | [Password credentials](https://web-platform-dx.github.io/web-features-explorer/features/password-credentials/) | [Web authentication](https://web-platform-dx.github.io/web-features-explorer/features/webauthn/) |
| [Form-associated WebMCP attributes](https://web-platform-dx.github.io/web-features-explorer/features/declarative-webmcp/) | [Permissions policy](https://web-platform-dx.github.io/web-features-explorer/features/permissions-policy/) | [Web authentication signal methods](https://web-platform-dx.github.io/web-features-explorer/features/webauthn-signals/) |
| [HTML processing instructions](https://web-platform-dx.github.io/web-features-explorer/features/html-processing-instructions/) | [Pointer Events](https://web-platform-dx.github.io/web-features-explorer/features/pointer-events-api/) | [Web Cryptography](https://web-platform-dx.github.io/web-features-explorer/features/web-cryptography/) |
| [image()](https://web-platform-dx.github.io/web-features-explorer/features/image-function/) | [Registered custom properties](https://web-platform-dx.github.io/web-features-explorer/features/registered-custom-properties/) | [WebAssembly](https://web-platform-dx.github.io/web-features-explorer/features/wasm/) |
| [inputmode](https://web-platform-dx.github.io/web-features-explorer/features/inputmode/) | [Resize observer](https://web-platform-dx.github.io/web-features-explorer/features/resize-observer/) | [webcrypto-modern-algos](https://web-platform-dx.github.io/web-features-explorer/features/tmp-webcrypto-modern-algos/) |
| [Interaction contentful paint performance entries](https://web-platform-dx.github.io/web-features-explorer/features/interaction-contentful-paint/) | [Sanitizer API](https://web-platform-dx.github.io/web-features-explorer/features/sanitizer/) | [WebOTP](https://web-platform-dx.github.io/web-features-explorer/features/web-otp/) |

</details>

<details>
<summary><strong>185 real-world developer use cases</strong></summary>

<h3>accessibility</h3>

- **[accessible-error-announcement](https://github.com/GoogleChrome/modern-web-guidance/blob/main/skills/modern-web-guidance/guides/accessibility/accessible-error-announcement.md)**: Synchronize programmatic accessibility states (like aria-invalid) with the visual :user-invalid state to ensure screen reader users receive error feedback only after interaction, mirroring the visual experience.
- **[accessible-generated-content](https://github.com/GoogleChrome/modern-web-guidance/blob/main/skills/modern-web-guidance/guides/accessibility/accessible-generated-content.md)**: Use CSS generated content (`::before`/`::after`) in ways that stay accessible, including alternative text for decorative content.
- **[respect-os-text-scale](https://github.com/GoogleChrome/modern-web-guidance/blob/main/skills/modern-web-guidance/guides/accessibility/respect-os-text-scale.md)**: Respect the operating system's text scale preference for a page so font sizes, layout, and rem-based measurements follow the user's accessibility settings.

<h3>built-in-ai</h3>

- **[language-detection](https://github.com/GoogleChrome/modern-web-guidance/blob/main/skills/modern-web-guidance/guides/built-in-ai/language-detection.md)**: Detect the language of user-generated content or already present site content.
- **[language-model](https://github.com/GoogleChrome/modern-web-guidance/blob/main/skills/modern-web-guidance/guides/built-in-ai/language-model.md)**: Run on-device natural language inference in the browser using the Prompt API, with streaming output, structured JSON responses, and multi-turn session management.
- **[summarizer](https://github.com/GoogleChrome/modern-web-guidance/blob/main/skills/modern-web-gu...