Plugin

modern-web-guidance

Name: modern-web-guidance
Author: googlechrome

Access up-to-date guidance on modern web development best practices, including HTML/CSS, client-side JavaScript, and Chrome Extensions with Manifest V3.

What's Inside

Skills2

chrome-extensions

/chrome-extensions

Build and publish Chrome Extensions using Manifest V3 best practices. Use this skill whenever the user asks to create, modify, debug, or understand Chrome browser extensions, add-ons, or anything involving the Chrome Extensions API. Trigger on mentions of: 'Chrome extension', 'browser extension', 'manifest.json', 'content script', 'service worker' (in browser context), 'popup' (in browser extension context), 'side panel', 'chrome.* API', 'declarativeNetRequest', 'omnibox', 'context menu' (in extension context), 'userScripts', 'user script', 'script manager', or any request to build functionality that integrates with the Chrome browser UI. Also trigger for publishing to the Chrome Web Store: 'publish extension', preparing an extension for publishing, responding to a review rejection, writing permission justifications, or drafting a privacy policy.

modern-web-guidance

/modern-web-guidance

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, Glassmorphism/backdrop-filters, anchor positioning, container queries, `:has()`, `:user-valid`. - Scroll/Motion: View Transitions, Scroll-driven animations, scroll parallax/reveals. - Performance: CWV (LCP, INP), content-visibility, Fetch Priority, image optimization. - System/APIs: Local filesystem access, WebUSB, WebSockets sync, WebAssembly widgets. - Frameworks: Adapting layout/styles in React, Vue, Angular. - General Frontend: Forms, autofill, advanced inputs, custom scrollbars, modern component states, etc. DO NOT trigger for: - Backend: Database SQL, ORMs, Express API routes. - Pipelines: CI/CD deployment, Docker, Actions. - Generic: Local scripts (Python/Go tools), ESLint, Git.

Stats

Version0.0.178

Stars1,612

Forks64

MaintenanceExcellent

LicenseApache-2.0

Last CommitJul 24, 2026

AddedMay 19, 2026

Actions

View on GitHub View README Plugin Marketplace JSON

Available In

claude-plugins-official32,652 googlechrome1,554 pleaseai12 nimble-gravity-knowledge-work-plugins sg-safe-path-control

Tags

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

🎨 User Experience

Smooth visual states (View Transitions, entry/exit animations, parallax scroll, CSS scrollbar-color).

📐 CSS Layout

Modern layout systems (container queries, subgrid, modern color spaces like oklch, text-wrap tuning, and line-height trimming).

⚡ Performance

Speed optimizations (instant preloading, Interaction to Next Paint (INP) diagnostics, and scheduling tasks via scheduler.yield).

📝 Forms & UI

Native components (Anchor Positioning for tooltips, Popover API, dialogs, :user-invalid validation, and auto-sizing fields).

♿ Accessibility

Important considerations (screen reader and keyboard operability, content navigation and discoverability).

🤖 Built-in AI

Local client models (native translation, summarization, and language detection APIs).

Modern Web Guidance Logo