modern-web-guidance

Modern Web Guidance

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.

Quickstart

npx modern-web-guidance@latest install

This command runs an interactive wizard to install Modern Web Guidance. See Alternative Installation Methods below.

Try it out (without installing)

# 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"

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.

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

View an example: the navigation-drawer guide.

The full list

CSS & Layout (58 features)

::backdrop	Cross-document view transitions	Scroll-driven animations
:has()	Custom highlights	scroll-initial-target
:host-context()	field-sizing	scroll-target-group
:not()	font-size-adjust	scrollbar-color
:user-valid and :user-invalid	image-set()	scrollbar-width
@function	Individual transform properties	scrollend
@starting-style	interpolate-size	scrollIntoView()
accent-color	light-dark()	Shadow parts
Active view transition	linear() easing	sibling-count() and sibling-index()
Anchor position container queries	Masks	Sticky positioning
Anchor positioning	overflow-clip-margin	text-box
calc-size()	overflow: clip	text-wrap: balance
Cascade layers	overlay	text-wrap: pretty
color-scheme	overscroll-behavior	transition-behavior
Conic gradients	prefers-color-scheme media query	Trigonometric functions (CSS)
Container queries	prefers-contrast media query	View transitions
Container scroll-state queries	prefers-reduced-motion media query	view-transition-class
Container style queries	Scroll marker target pseudo-classes	Web animations
content-visibility	Scroll snap
contrast-color()	Scroll snap events

HTML & DOM (28 features)

:autofill	Customizable <select>	Interest invokers