modern-web-guidance Skill for Claude: What It Does and How to Install It

Makes Claude search a library of current web platform guides before it writes HTML, CSS or browser JavaScript.

Installs: 37.1K; on skills.sh
Stars: 2.6K; on GitHub
Files: 60+; besides SKILL.md
Updated: Oct 2026; last repo commit

modern-web-guidance makes Claude look things up first. Before building a dialog, a table, an animation or a performance fix, Claude runs a search for a short phrase such as "light dismiss dialog", reads the matching guide, and applies the modern pattern and fallbacks it describes.

It runs a command through npx each time, so it needs network access and Node. The README says Google collects anonymous usage information, and gives an opt-out. At the end of a task Claude adds a "Modern Web Guidance" section that names the guides it used.

Good for

Front-end developers who want Claude to stop writing outdated HTML and CSS
Teams that care about accessibility, Core Web Vitals and browser support
Anyone who wants fewer JavaScript libraries where the browser has a native feature

Install modern-web-guidance

Claude Code

Copy this prompt.

Install the modern-web-guidance skill in Claude Code. Run this command:

npx skills add https://github.com/googlechrome/modern-web-guidance --skill modern-web-guidance

Then check that it loaded and tell me how to use it.

2
Paste it into Claude Code. It shows the change and asks before running it.

Requires Node.js.

From its listing on skills.sh. Source.

What's in the skill

When it loads

Search tool for modern web development best practices. MANDATORY: Execute FIRST for all HTML/CSS and clientside JS tasks. Do NOT skip — web APIs evolve rapidly and training weights contain obsolete patterns. Trigger immediately for: - UI/Layout: Modals/dialogs/popovers, tables, dark mode, anchor positioning, container queries, `:has()`, etc. - Scroll/Motion: View Transitions, Scroll-driven animations, parallax/reveals, etc. - Performance: CWV (LCP, INP), content-visibility, Fetch Priority, image optimization, etc. - System/APIs: Security, passkeys, HTML sanitization, Web Components, dates/timezones, Built-in AI, WebAssembly, etc. - Frameworks: Standard HTML/CSS/DOM in React, Vue, Angular, etc. - General Frontend: Forms, validation (`:user-valid`), autofill, accessibility, custom selects, scrollbars, etc. DO NOT trigger for: - Backend: SQL, ORMs, API routes, etc. - Infra/Scripts: CI/CD, Docker, Actions, Python/Go, Git, etc. - Tooling/Trivial: Vite, tsconfig, ESLint, tests, copy/renames, 3P docs, etc.

Sections in SKILL.md

When to use
Usage Instructions
Step 1. Search Use Cases
Step 2. Retrieve Best Practices
Step 3. Verify Guidance Compliance
Step 4. Disclose Skill Usage
Using npx / pnpx
Guidelines
Interpreting Browser Support & Fallbacks

Key facts

Author: Google Chrome team (GoogleChrome org); the README credits the Chrome and Microsoft Edge teams and the web development community
Repository: googlechrome/modern-web-guidance
Installs on skills.sh: 37,136 as of 2026-11-02
GitHub stars: 2,593 for the whole googlechrome/modern-web-guidance repo, 2026-11-02
License: Apache-2.0
Last commit to the repo: 2026-10-26
What is inside: 194 files including SKILL.md: 193 guide files under guides/ in 16 folders (for example css, forms, performance, security, ui-behaviors, visual-design)
Status: The README calls it a preview release
Needs: Node (it runs npx modern-web-guidance) and outbound network access, per SKILL.md
Telemetry: Anonymous usage data; opt out with DISABLE_TELEMETRY=1 (README)
skills.sh audits: Gen Agent Trust Hub pass, Socket pass, Snyk pass

What it includes

npx modern-web-guidance search "<query>" with a 2 to 5 word query
Claude searches for one web capability at a time, such as "responsive data table". The SKILL.md says to leave out framework names and to split multi-feature tasks into separate searches.
Try: “Build a dialog that closes on outside click.”
Runs code · Step 1: search
npx modern-web-guidance retrieve "<id>"
Fetches the full guide for each matching id. You can pass several ids separated by commas. If output is truncated, Claude repeats the command and redirects it to a file.
Runs code · Step 2: retrieve
Run once when search finds nothing
Only when search returns nothing useful for a web UI task. If no guide matches, Claude carries on without retry loops.
Runs code · list (fallback)
Check the code against the retrieved guide
Claude checks that the modern pattern and the guide's fallbacks are applied and that the task is fully met.
Read · Step 3: verify
End the reply with a "Modern Web Guidance" section
One bullet per applied guide, with a short verbatim quote of the rule it relied on. If guides were checked but none applied, it says so.
Read · Step 4: disclose
Baseline Widely available is the default; follow guide fallbacks otherwise
If you have your own browser support policy, Claude uses the guide's compatibility data against it. It may suggest writing that policy into CLAUDE.md or AGENTS.md.
Read · Browser support policy

From the official docs

Permissions

Medium risk

Claude runs the modern-web-guidance npm package through npx each time it looks something up. That means network access, third-party code and anonymous usage data sent to Google unless you opt out.

What it can do

Read your data
Create and change things
Delete things
Read-only mode

Watch out for

It runs a package from npm on every lookup
The command uses @latest, so the code can change between runs. The SKILL.md advises allowlisting only the exact command, never bare npx. github.com
Search phrases are sent to Google as telemetry
The README says search queries the agent writes are collected, but not raw prompts. Set DISABLE_TELEMETRY=1 to opt out, and avoid putting private names in queries. github.com
It is a preview release
The README says content is still being added. Guides can change under you. github.com

Technical details

Turning on read-only	No read-only switch is documented in SKILL.md.
Talks to	npm registry to fetch the package (SKILL.md: needs outbound network access). Anonymous usage data to Google (installs, agent name, guide ids, search queries), per the README Telemetry section; the README also says search itself runs offline with no API keys
Scopes	Runs npx -y modern-web-guidance@latest search, retrieve and list

Questions

What does modern-web-guidance do?

It makes Claude search a catalog of web platform guides before writing UI code, then retrieve and follow the matching guide. The goal is to replace outdated patterns with current browser features.

How do I install modern-web-guidance?

Use the install box at the top of this page. The README also offers its own installer, a plugin route for several agents, and a way to choose which skill packs to install.

Does it need the internet?

The sources disagree, so plan for network access. The SKILL.md says fetching and running the command needs outbound network access and to ask for approval before the first run in a sandboxed agent; if the command hangs offline it suggests npx --offline. The README says search uses an offline model with no API keys and that the CLI works offline, while its Telemetry section says Google collects anonymous usage data.

Does it collect data about me?

The README says Google collects anonymous usage information: installation counts, the calling agent name, guide ids and the search queries the agent generates. It says raw user prompts are not collected. Set DISABLE_TELEMETRY=1 to opt out.

Is modern-web-guidance safe to use?

Claude runs an npm package through npx at each use, so it executes third-party code from the npm registry. The SKILL.md suggests allowlisting only the exact modern-web-guidance command rather than bare npx.

Does it work with React or Vue?

The guides use plain HTML, CSS and JS. The SKILL.md has a section on adapting them to frameworks without dropping the modern feature, for example guarding window access in server rendering.

When does it not trigger?

The description lists backend work, infrastructure scripts and trivial tooling or copy changes as cases to skip.

Information

updated Nov 2, 2026

Repository: googlechrome/modern-web-guidance
Folder: skills/modern-web-guidance

googlechrome/modern-web-guidance skills.sh

Sources

Docs, issue trackers and discussions this page is built from.

Show all 2

modern-web-guidance SKILL.md · github.com
GoogleChrome/modern-web-guidance README · github.com