Chrome Modern Web Guidance 1.0: What AI Coding Agents Get Wrong on the Web

Frontier coding agents still fail about half of modern web platform checks unless you install Google’s skills—that is the message of the November 11, 2026 Chrome for Developers post marking Modern Web Guidance 1.0. The team runs paired evals: the same prompt with and without guidance, then scores HTML output against machine-verifiable expectations per guide.

If you use Claude Code, Codex, Cursor, or Gemini CLI for UI work, this is the first vendor-maintained answer to “why did the agent ship inaccessible modals again?”

TL;DR

Why Google published eval numbers

Chrome’s authors say they hear one question constantly: “Don’t new models already know best practices?” Their answer is empirical: unguided agents pass only about half of checks in the suite, versus ~90% guided.

Modern Web Guidance raises AI coding agent pass rates on web platform evals Image: Google Chrome for Developers

That gap lands in a week when explainx.ai also covered shadcn’s agent-skill audit guidance and Cloudflare’s security-audit skill pattern. Skills are becoming the web’s real spec for agents—not README nostalgia.

The ten problem areas (summarized for builders)

Each section in Google’s post ties to a Modern Web Guidance module with explicit pass/fail tests. Condensed for action:

Keyboard focus management for AI-generated modals and dialog accessibility

1. Keyboard focus and inert

Agents open modals but fail to move focus, restore focus, or mark background content inert. They hand-roll tab traps instead of <dialog> and inert.

Fix pattern: require native dialog + inert on the host app; reject PRs that only add aria-modal.

2. Reduced motion

Models remember prefers-reduced-motion for basic CSS animations but miss scroll-driven animations, view transitions, and unconditional scroll-behavior: smooth on :root.

Fix pattern: gate motion features behind reduced-motion queries in your design system tokens.

3. Forms, validation, and autofill

Agents reimplement :user-invalid in JavaScript, desync aria-invalid, hide format hints in placeholders, and style :autofill with border color alone.

Fix pattern: copy Chrome’s expectation list into your component library’s agent-facing SKILL.md.

4. Touch and swipe

Custom touchmove handlers instead of scroll snap, missing overscroll-behavior-x, main-thread scroll effects instead of scroll-driven animations.

5. Dialogs, popovers, top layer

Hand-rolled overlays vs popover, JS-driven enter/exit vs @starting-style, overflow: hidden on html vs dialog overscroll behavior.

6. Dark mode and color-scheme

Missing <meta name="color-scheme">, no light-dark() tokens, binary localStorage theme with no return-to-system-default path.

7. Runtime responsiveness (INP)

setTimeout queues instead of scheduler.postTask, layouts without content-visibility, killing rendering state with display:none on SPA panels.

8. Layout shifts (CLS)

Video without dimensions, fonts without font-size-adjust, 100vh heroes on mobile, opacity-zero anti-flicker hacks for A/B tests, early view transitions before critical markup.

9. Security: DOM XSS

Custom sanitizers instead of setHTML() or DOMPurify, permissive Trusted Types policies, weak CSP ('self' without hashes on static sites).

This is where agent output intersects agent security timelines: agents rarely add CSP without prompting, per Chrome.

10. Passkeys and WebAuthn

Hand-rolled Base64URL helpers instead of parseCreationOptionsFromJSON, missing signalUnknownCredential, skipping getClientCapabilities, wrong uiMode vs deprecated mediation: "immediate".

How to install and wire the skills

The blog’s command:

npx modern-web-guidance@latest install

Search your agent’s plugin marketplace for the same package name if your harness does not expose npm installers. Treat installation like adding eslint-config—version pin in repo, run in CI.

Pair with:

• DESIGN.md templates for visual constraints agents can read.
• Claude Code command reference when you bind checks to review hooks.
• Indirect prompt injection when agents ingest untrusted HTML in DOM XSS fixes.

What the Hacker News thread lacked

The HN submission had five points and no discussion when we checked—too early for community numbers. Treat Chrome’s dashboard as the living benchmark until developers publish independent reps.

Eval workflow for your team

Comparison with other “agent standards” pushes

Modern Web Guidance is closest to “HTML that survives real users”—install it when agents touch customer-facing UI.

Related reading

• shadcn: audit skills, cheap execute
• Fragile codebases under agentic coding
• DESIGN.md for agent UI
• Indirect prompt injection guide
• Loop engineering with coding agents
• React Server Components CVE context when agents edit RSC apps

Sources: Chrome for Developers blog, November 11, 2026, npm modern-web-guidance.

Deeper notes on each accessibility cluster

Google’s focus section is not “use aria labels.” It tests focus restoration after route changes, roving tabindex on toolbars, and inert on background trees while dialogs are open. Agents love adding aria-modal="true" on div soup; the eval fails because native dialog semantics are missing.

For forms, the post calls out persistent format hints linked with aria-describedby above the field so mobile keyboards do not cover them. Agents that rely on placeholders alone fail conversion-sensitive flows—checkout, healthcare intake, government forms.

Reduced motion failures often come from blanket * selectors zeroing transitions. That breaks state communication (hover, pressed). The guidance expects surgical motion removal.

Performance section for agent owners

Agents trained on Lighthouse snippets over-index LCP while missing INP. Chrome’s post pushes content-visibility:hidden for inactive SPA views instead of unmounting components—preserving cached layout for back navigation.

When agents add scroll listeners for affordances, they burn main-thread budget. Prefer scroll-state queries where supported, with Intersection Observer fallbacks documented in the skill pack.

Security expectations you can paste into AGENTS.md

Add these non-negotiables for any agent-generated production UI:

1. CSP with hashes or nonces on inline script when Trusted Types are absent.
2. Trusted Types default policy rejecting DOM sinks unless a vetted sanitizer path exists.
3. No hand-rolled sanitizers when setHTML() or DOMPurify is available.
4. Passkeys must use JSON serialization helpers from WebAuthn, not custom Base64 loops.

Pair with React RSC security context when agents edit full-stack apps.

Running the eval loop in CI

Publish failed check IDs in PR comments so the next agent prompt includes the regression list.

What changed since the May 2026 preview

Version 1.0 signals stable expectation schemas. Preview users should re-pin skills: silent expectation drift was a common failure mode in early adopters per Chrome’s narrative.

FAQ for engineering managers

Will this slow agents down? Extra tool reads add latency, but fewer rework loops save review time.

Does it replace designers? No—it encodes platform lawyer rules, not brand.

Can we fork checks? The GitHub repo linked from npm is the extension point—upstream merges keep parity with Chrome releases.

Passkeys: why agents fail WebAuthn

Agents often rewrite Base64URL helpers because training data predates PublicKeyCredential.parseCreationOptionsFromJSON. The eval fails when credential id handling breaks password-manager sync.

Missing signalUnknownCredential leaves stale passkeys after server-side revocation. Support teams then blame passkeys when the client never told the platform to forget.

getClientCapabilities gates UI: without it, agents render create passkey buttons on devices that cannot store them.

Dark mode and dialog migration

Chrome tests color-scheme meta, light-dark(), and return-to-OS-default theme paths. Agents ship binary dark/light toggles with localStorage overrides that desync tabs—fix by requiring storage event listeners in your design system spec.

For overlays, ban position:fixed + manual scroll lock in agent PRs; require dialog or popover with @starting-style. These are copy-paste rules you can add atop Modern Web Guidance in internal AGENTS.md.

Model upgrade regression discipline

When you bump from one frontier model to another, re-run the full eval dashboard—not a single smoke page. Regression clusters often appear in CSP and inert before accessibility scores move.

Touch gestures and scroll-driven motion

Agents frequently attach touchmove listeners to mimic carousels. Chrome’s guidance prefers scroll snap and overscroll-behavior-x so browsers handle physics off the main thread. The eval catches browser back gestures accidentally triggered by horizontal swipes— a failure mode mobile QA teams see after every agent sprint.

For scroll-driven animations, agents forget prefers-reduced-motion gates. Document a motion budget: decorative animations off by default, functional motion only when the user has not requested reduced motion.

Layout stability: agents still ship hero sections with static vh units on mobile and opacity-zero anti-flicker snippets for experiments. Chrome’s eval ties those choices directly to CLS regressions that also hurt conversion on agent-built landing pages.

Pass rates and check lists are accurate as of Google’s publication date. Re-run npx modern-web-guidance@latest install after upgrades; eval IDs may change with platform releases.