modern-web-guidance@googlechrome An agentic skill by Google

Modern Web Guidance
in Practice

A showcase of Claude Code using the Modern Web Guidance skill to implement scroll-driven CSS animations, following industry standard best practices.

Scroll to explore

How this page was built

This page was built using Claude Code, Anthropic's AI coding assistant, guided by the Modern Web Guidance plugin from Google Chrome. Instead of relying solely on training data — which can contain outdated patterns or miss important nuances — Claude consulted a dedicated guide for each scroll effect, as a demonstration of how this skill informs its development and ensures high quality implementation.

What is the skill?

Modern Web Guidance is a set of agentic skills that gives Claude access to a curated library of best practice guides for modern HTML, CSS, and JavaScript features. Each guide covers the correct implementation pattern, browser support details, what to avoid, and how to write accessible fallbacks. Claude searches and retrieves guides at implementation time — like having the Chrome team's documentation available inline during coding.

How Claude used it

For each of the four scroll effects on this page, Claude ran npx modern-web-guidance search "<query>" to find the relevant guide, then npx modern-web-guidance retrieve "<id>" to read it in full. The implementation followed the guide exactly — including specifics like declaration order, required feature-detection guards, and accessibility requirements that are easy to miss without authoritative guidance.

Why it matters

Web APIs evolve quickly. A model's training data captures a snapshot of the web at a point in time — scroll-driven animations, for example, had three separate specification iterations before stabilising in 2023. The skill keeps Claude's output aligned with the current specification and Chrome team recommendations, not with patterns from two years ago.

What you're scrolling through

Each card below describes one of the four modern CSS features used on this very page. The cards themselves demonstrate scroll-entry-exit-effects — scroll past them to watch the animations play.

scroll-progress-indicator

Scroll Progress Bar

What you're seeing The thin gradient bar pinned to the very top of the page. It fills from left to right as you scroll through the document.
How it works A pure CSS scaleX(0 → 1) keyframe animation is linked to the root scroller using animation-timeline: scroll(). The browser drives the animation's progress directly from the scroll position — no JavaScript, no requestAnimationFrame. 
animation: grow-progress auto linear;
animation-timeline: scroll();
Why the skill mattered The guide explicitly warned not to use the scroll-timeline-polyfill package as a fallback — it is not feature-complete and has known issues. It also required aria-hidden="true" on the progress element (the bar is decorative and must be removed from the accessibility tree), and specified the correct @supports guard to wrap the animation block.
shrinking-header-on-scroll

Shrinking Header

What you're seeing The navigation bar at the top starts at 72 px tall and smoothly shrinks to 48 px as you scroll down the first 150 px of the page. Scroll back to the top to see it expand.
How it works The header's height keyframe is pegged to a precise pixel range of the root scroller using animation-range: 0px 150px. No scroll listener, no class toggling — the browser maps the scroll offset directly to the animation's progress. 
animation: shrink-header auto linear both;
animation-timeline: scroll(block root);
animation-range: 0px 150px;
Why the skill mattered The guide caught a critical gotcha: animation-range must be declared after the animation shorthand, or the shorthand silently resets it to its initial value. It also warned that the header must be position: fixed (not static or relative) — animating height on an in-flow element would alter the total scrollable distance, causing the percentage range to shift as the animation plays.
parallax-scroll-effects

Parallax Hero

What you're seeing Scroll back to the top and slowly scroll down — the purple/cyan gradient background and the glowing orbs move at different rates from the rest of the page, creating an illusion of depth.
How it works Two separate @keyframes give the background and accent layers different translateY targets driven by the root scroll() timeline. Positive translateY makes a layer appear to move slower (far/background); negative makes it appear faster (near/foreground). 
animation: parallax-bg linear both;
animation-timeline: scroll();
animation-range: 0px 100vh;
Why the skill mattered The guide's primary recommendation is view-timeline for mid-page sections. But for a 100vh hero at the very top, the cover range's start point falls at scrollY = -100vh — before the page begins — so the animation would be nearly invisible on load. The guide's explanation of when to use each timeline type led directly to choosing scroll() with animation-range: 0px 100vh instead. It also specified overflow: clip (not hidden) on the wrapper to avoid creating an unintended block formatting context.
scroll-entry-exit-effects

Card Reveal on Scroll

What you're seeing These cards — including this one — fade and slide upward as they enter the viewport, and fade out as they leave. Scroll up and back down to see it repeat.
How it works Two separate @keyframes handle entry and exit. Each card has its own anonymous view() timeline. The animation-range: entry, exit declaration maps the first animation to the entry phase and the second to the exit phase. 
animation:
  card-in  auto linear backwards,
  card-out auto linear forwards;
animation-timeline: view();
animation-range: entry, exit;
Why the skill mattered The dual-animation pattern — one keyframe per phase, each with a complementary fill-mode (backwards for entry, forwards for exit) — is non-obvious. Without the guide, the natural instinct would be a single animation or a JavaScript-based Intersection­Observer toggle. The guide also confirmed the same declaration-order gotcha as the header: animation-range must follow the animation shorthand to avoid being silently reset.