Modern Web Guidance

This curated collection of skills, tools, and AI-ready documentation injects Chrome's web platform knowledge directly into your workflow, ensuring your coding agent builds apps that are modern, fast, and secure by default.

Skill Coverage in v0.0.99

83 web features with implementation guidance from Chrome's experts: `::backdrop`, `:autofill`, `:has()`, `:not()`, `:user-valid and :user-invalid`, `@starting-style`, `<details>`, `<dialog closedby>`, `<dialog>`, `<link rel="expect">`, `<link rel="preload">`, `AbortController and AbortSignal`, `accent-color`, `Active view transition`, `Anchor position container queries`, `Anchor positioning`, `blocking="render"`, `calc-size()`, `color-scheme`, `Container queries`, `Container scroll-state queries`, `content-visibility`, `Cross-document view transitions`, `Customizable <select>`, `Email, telephone, and URL <input> types`, `enterkeyhint`, `Event timing`, `Fetch`, `Fetch priority`, `fetchLater`, `field-sizing`, `font-size-adjust`, `Form-associated WebMCP attributes`, `hidden="until-found"`, `image-set()`, `Individual transform properties`, `inert`, `inputmode`, `Interest invokers`, `interpolate-size`, `Intersection observer`, `Intl.DurationFormat`, `Invoker commands`, `Language detector`, `light-dark()`, `linear() easing`, `Long animation frames`, `Masks`, `moveBefore()`, `Mutually exclusive <details> elements`, `Navigation API`, `navigator.modelContext`, `overlay`, `Page visibility`, `Page visibility state`, `Popover`, `popover="hint"`, `prefers-color-scheme media query`, `prefers-contrast media query`, `prefers-reduced-motion media query`, `Registered custom properties`, `Scheduler API`, `Scroll snap`, `Scroll-driven animations`, `scroll-initial-target`, `scrollbar-color`, `scrollbar-width`, `scrollend`, `scrollIntoView()`, `sibling-count() and sibling-index()`, `sin(), cos(), tan(), asin(), acos(), atan(), and atan2() (CSS)`, `Speculation rules`, `Summarizer`, `Temporal`, `text-box`, `text-wrap`, `text-wrap: balance`, `text-wrap: pretty`, `Top-level await`, `transition-behavior`, `Translator`, `View transitions`, `view-transition-class`

• ::backdrop, <dialog>, overlay, Popover, @starting-style, transition-behavior
  • animate-to-from-top-layer: Animate elements such as dialogs, popovers, and tooltips as they're entering/exiting the top layer.
• :autofill
  • autofill-address-form: Build an address form with correct autocomplete attributes and autofill support.
  • autofill-highlight-inputs: Use CSS to highlight form fields that have been autofilled by the browser and not edited by the user.
• :has(), :not()
  • child-state-based-styling: Build a component that changes its styling based on the state of one of its child elements. For example, a component that renders in light or dark mode based on whether a theme toggle is checked (or not).
  • content-based-styling: Build a component that changes its layout based on whether it contains specific child elements (or not). For example, if the component contains an image, use a multi-column layout, otherwise default to a single-column layout.
• :user-valid and :user-invalid
  • accessible-error-announcement: 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.
  • required-field-feedback: Provide error message for required form fields that were skipped or left empty only after user interaction, to avoid preemptive errors and ensure feedback is timely and contextually relevant to the user's flow.
  • select-menu-interaction: Validate that a non-default option has been chosen in a select menu only after the user has interacted with the control.
  • validate-input-after-interaction: Show form field validation feedback (e.g. password complexity or email format requirements) only after the user has finished their initial interaction, avoiding premature errors on page load or while the user is typing.
  • style-parent-with-has: Style parent elements of a form field (e.g. labels or fieldsets) when the field is invalid.
• @starting-style, transition-behavior
  • animate-element-entry-exit: Smoothly hide/show elements as they are added/removed from the DOM or as their display values are toggled.
• <details>, Mutually exclusive <details> elements, hidden="until-found"
  • search-hidden-content: Hide content from view using patterns such as accordions, tabs, and "Read more" sections, while ensuring the hidden text reveals itself during native "Find in page" searches, allows search engine indexing, supports URL fragment deep links, and maintains ARIA accessibility.
• <dialog closedby>
  • light-dismiss-a-dialog: Create a modal dialog that can be closed via light dismiss (i.e. clicking or tapping outside of the dialog)
  • platform-controls-dismiss-dialog: Create a modal dialog that can be closed via standard platform-specific user actions, such as pressing the Esc key on desktop platforms, or a "back" or "dismiss" gesture on mobile platforms
• <dialog>, Invoker commands, Popover
  • declarative-dialog-popover-control: Toggle the visibility of a dialog or popover from a button without writing JavaScript.
• AbortController and AbortSignal, fetchLater
  • batch-analytics-events: Debounce and batch multiple analytics events or Core Web Vitals together in a single beacon using the web-vitals library to minimize network contention and reduce server load, while still delivering real-time updates.
  • full-session-analytics: Reliably track analytics, errors, and telemetry data across the user's entire page visit, and defer sending of the data until the user leaves the page.
• accent-color
  • brand-consistent-forms: Match checkboxes, radio buttons, range sliders, and progress bars to your site's color palette without replacing them with custom components.
• Active view transition, View transitions
  • directional-navigation-transitions: Animate visual state changes to reflect the direction of a user's navigational flow, such as sliding new content in from the right when advancing forward or from the left when returning to a previous screen.
• Anchor position container queries, Popover
  • position-aware-tooltips: Build tooltips and popovers with directional arrows (or other visual styling) that automatically point the correct way when the element flips to a fallback position.
• Anchor positioning, prefers-reduced-motion media query
  • anchor-positioning-tab-underline: Transition an element seamlessly between two target element positions. For example, moving a selected tab underline between the previously selected tab and the currently selected tab.
• Anchor positioning, Interest invokers, Popover, popover="hint"
  • interest-triggered-tooltips: Show a tooltip or supplemental information when a user hovers over, focuses on, or long-presses an interactive element, without requiring a click.
• Anchor positioning, Popover
  • persistent-app-tours: Create persistent onboarding walkthroughs using tethered native overlays that stay open during user interaction.
  • resilient-context-menus-and-nested-dropdowns: Build accessible, responsive menus, tooltips, dropdowns, or contextual overlays that must be tethered to specific UI elements, guaranteeing that the overlay automatically repositions itself (e.g., flipping axes) when it encounters viewport edges, ensuring it never gets cut off.
• Anchor positioning, Popover, sibling-count() and sibling-index(), transition-behavior
  • persistent-toast-notifications: Create non-intrusive toast and overlay notifications for persistent, stackable messaging and state communication.
• blocking="render", Cross-document view transitions, <link rel="expect">
  • consistent-cross-document-transitions: Ensure critical page state is loaded and stable before initiating a cross-document view transition. This means critical CSS styles are loaded and applied, critical JavaScript is loaded and run, and the HTML visible for the user's initial view of the page has been parsed before the transition runs.
• blocking="render"
  • flicker-free-client-side-ab-testing: Deliver and render A/B tests, multi-variate tests, or other experiments using client-side JavaScript to alter or inject HTML, CSS, and JavaScript without the original content showing first before flickering or flashing to show the experiment content.
• calc-size(), interpolate-size
  • animate-to-intrinsic-sizes: Smoothly animate interactive components (like accordions, menus, and expanding cards) to and from their natural dimensions.
  • calculate-with-intrinsic-sizes: Calculate the size of an element based on its intrinsic size, while ensuring it fits within given design constraints.
• color-scheme, prefers-color-scheme media query, scrollbar-color
  • adapt-scrollbar-to-light-dark-preferences: Ensure the scrollbar visually matches the user's operating system light/dark mode preference
• color-scheme, prefers-color-scheme media query
  • browser-ui-color-theme: Configure built-in browser UI (e.g. scrollbars, form controls, etc) to respect the user's light/dark theme preference.
• color-scheme, light-dark()
  • component-specific-light-dark-theme: Create component-specific themes by forcing explicit color schemes on individual UI elements, giving users theme choices that are decoupled from their global operating system preferences
• Container queries
  • fluid-scaling: Scale items like font size, spacing, and media sizes smoothly based on the parent container's size rather than using fixed breakpoints
  • size-aware-styling: Build a component whose styles can be conditionally dependent on its own width or height, rather than the width or height of the viewport. For example a card component that can change its layouts depending on how large it is, or a call-to-action button that can conditionally display helper text based on its width.
• Container scroll-state queries
  • carousel-snap-highlights: Visually highlight the currently snapped non-interactive item in scroll-snapping carousels, galleries, or full-page swipe experiences. For example, expanding a card when snapped, or revealing hidden content.
  • scroll-position-aware-elements: Build floating buttons or widgets (back-to-top, scroll-to-bottom, chat launchers, etc.) that appear and disappear based on whether the user has scrolled at all.
  • scrollability-affordance-hints: Build scroll-shadow overlays, gradient fades, or directional arrow indicators that appear only when there's actually more content to scroll to in that direction.
• content-visibility, hidden="until-found"
  • defer-rendering-heavy-content: Reduce rendering times in content-heavy web pages (e.g. pages with long feeds, lots of articles, or complex dashboards), by deferring rendering for any content that is not immediately visible to the user.
• content-visibility
  • efficient-background-processing: Conserve system resources and battery life by pausing background JavaScript execution (such as <canvas> animations, WebGL rendering, or high-frequency WebSocket data polling) when the component is off-screen and then resume them just-in-time when they scroll back into view.
  • faster-spa-view-transitions: Enable faster transitions back to previously visited views in a Single-Page Application (SPA) by preserving their structural DOM state instead of destroying and rebuilding them on every navigation.
  • interactions-in-complex-layouts: Make interactions snappier and more responsive (reducing Interaction to Next Paint (INP) scores) by avoiding layout re-calculations in complex layouts, such as data-heavy dashboards or spreadsheet-style grids.
• Cross-document view transitions, Navigation API, View transitions
  • cross-document-transitions: Create smooth, seamless transitions between full page navigations, such as cross-fades, custom reveal effects, or morphing of content from one page to the next.
• Customizable <select>
  • animated-select-picker: Create a custom select component whose dropdown is animated. For example, the menu fades or slides into view, or the options animate upon selection.
  • branded-select-styling: Create custom select elements whose button, picker, arrow icon, and checkmark all seamlessly match your brand or design system's typography, colors, spacing, and border treatments.
  • custom-select-picker-layouts: Create custom select pickers whose options are positioned in unique or interesting ways, rather than the traditional stacked list of options.
  • rich-media-picker: Create a custom select component whose options can contain complex HTML formatting (e.g. images, icons, and other rich formatting) rather than just plain text.
• Email, telephone, and URL <input> types, inputmode
  • autofill-sign-in-form: Build a sign-in form with correct autocomplete values and autofill support.
  • autofill-sign-up-form: Build a sign-up form with correct autocomplete values and autofill support.
• enterkeyhint, Email, telephone, and URL <input> types, inputmode
  • autofill-payment-form: Build a payment form that collects card details with correct autocomplete values and autofill support.
• Event timing, Long animation frames
  • identify-inp-causes: Identify slow running JavaScript that is impacting INP metric
• Fetch, Fetch priority
  • deprioritize-background-fetches: Deprioritize background data fetches made with the Fetch API to prevent network contention with user-initiated requests.
• Fetch priority
  • optimize-image-priority: Optimize the loading priority of Largest Contentful Paint (LCP) candidate images and deprioritize non-critical images to reduce critical resource load delays.
  • optimize-script-priority: Optimize the loading priority of scripts by boosting critical asynchronous scripts and deprioritizing non-essential or late-body scripts to improve sequencing and reduce delays.
• Fetch priority, <link rel="preload">
  • optimize-preload-priority: Optimize the relative priority of preloaded content to reduce critical resource load delays.
• field-sizing
  • form-fields-automatically-fit-contents: Allow form fields to grow and shrink to fit the user input, e.g. as the user types or selects a different option. Apply maximum and minimum size limits to create dynamic and responsive form fields that conform with the page design.
• font-size-adjust
  • visually-stable-font-fallbacks: Define font styles such that text remains readable and visually consistent in the event that there's a swap between the perferred font and one of the fallbacks (or vise versa).
  • visually-stable-mixed-fonts: Define font styles such that text remains readable and visually consistent in situations where multiple fonts are used to render a single block of text.
• Form-associated WebMCP attributes
  • agentic-forms: Expose client-side functionality as tools to AI agents by annotating standard HTML forms with WebMCP attributes.
• image-set()
  • resolution-optimized-pseudo-elements: Use resolution-optimized images in CSS pseudo-elements (such as ::before and ::after) to reduce the number of DOM nodes.
  • deliver-optimized-decorative-images: Deliver optimized decorative images (such as backgrounds, UI icons, or complex masks) by simultaneously providing next-generation image formats (like AVIF or WebP) alongside multiple pixel densities (like 1x and 2x) so the browser can dynamically negotiate the best combination of file size and visual quality for the user's device capabilities.
• Individual transform properties
  • individual-transform-properties: Animate or override individual CSS transform properties (e.g. translate, rotate, scale) independently of other transform properties on a single element.
• inert, Intersection observer, Popover, Registered custom properties, Scroll-driven animations, scroll-initial-target, Scroll snap
  • navigation-drawer: Create a navigation drawer component that, when triggered from a menu button, slides in from the side overlayed on top of existing page content, and slides out when dismissed (by swiping away, tapping outside, or pressing escape).
• Interest invokers
  • interest-triggered-action-previews: Show a live preview of a button's effect when a user signals interest (e.g. hovering, focusing, or long-pressing) but before they commit to clicking.
• Intl.DurationFormat, Temporal
  • format-human-readable-durations: Present elapsed time or durations to users in a readable, localized format, with the flexibility to display either detailed unit breakdowns (e.g., "1 hour and 30 minutes") or total unit counts (e.g., "90 minutes") depending on context.
• Invoker commands
  • declarative-button-actions: Declaratively connect a button to any element to trigger custom, application-specific actions using declarative button commands, invoker commands, button commands, custom commands, or declarative toggle actions.
• Language detector
  • language-detection: Detect the language of user-generated content or already present site content.
• linear() easing
  • physics-based-easing: Create custom, physics-based animation and transition effects, like bounce and spring, that feel more natural and engaging than traditional easing curves.
• Long animation frames
  • identify-heavy-scripts: Identify the scripts most responsible for long animation frames
• Masks, Registered custom properties
  • interactive-content-reveal: Create interactive reveal effects, such as a spotlight that follows the user's pointer to uncover details within an image or UI section.
• moveBefore()
  • move-dom-element-without-losing-state: Move or reparent a DOM element without losing important element state, such as interactivity states (:focus/:active),