modern web guidance — Agent Skill
by GoogleChrome · Updated
Keep your coding agent up to date with the latest web best practices
At a glance
modern-web-guidance is an Agent Skill by GoogleChrome in the Automation & Workflow category. In Claude Code it installs with `/plugin install modern-web-guidance@claude-plugins-official` after adding the anthropics/claude-plugins-official marketplace; other assistants use its SKILL.md instructions as rules. Its source repository has 2,574 GitHub stars (as of Oct 28, 2026).
How to install modern web guidance in your AI client
Setup for Claude Code, Claude Desktop, Cursor, Codex, Windsurf, Cline and VS Code — copy-paste ready.
How to install modern web guidance in Claude CodeAnthropic's agentic CLI
Add the marketplace
claude/plugin marketplace add anthropics/claude-plugins-officialInstall the skill
claude/plugin install modern-web-guidance@claude-plugins-officialUse it
These are slash commands for a Claude Code session, not your shell. Claude auto-invokes the skill when your request matches its description — or type its slash command if it exposes one.
How to install modern web guidance in Claude DesktopDesktop app (MCP config)
Clone the source
bashgit clone https://github.com/GoogleChrome/modern-web-guidance.gitAdd the SKILL.md to your Skills folder
Settings → Capabilities → Skills → add the folder containing SKILL.md. Claude picks it up automatically.
How to install modern web guidance in CursorAI-first code editor
Clone the source
bashgit clone https://github.com/GoogleChrome/modern-web-guidance.gitConvert to a Cursor rule
Create .cursor/rules/modern-web-guidance.mdc and paste the SKILL.md body. Set `alwaysApply` or a glob so the Agent loads it in context.
How to install modern web guidance in Codex CLIOpenAI coding agent
Clone the source
bashgit clone https://github.com/GoogleChrome/modern-web-guidance.gitReference in AGENTS.md
Add the skill's instructions (or a link) to AGENTS.md at your repo root — Codex reads it on every run.
How to install modern web guidance in WindsurfCodeium's agentic IDE
Clone the source
bashgit clone https://github.com/GoogleChrome/modern-web-guidance.gitAdd to your rules / context
Paste the SKILL.md instructions into this tool's custom rules or workspace instructions so the agent follows them.
How to install modern web guidance in ClineVS Code autonomous agent
Clone the source
bashgit clone https://github.com/GoogleChrome/modern-web-guidance.gitAdd to your rules / context
Paste the SKILL.md instructions into this tool's custom rules or workspace instructions so the agent follows them.
How to install modern web guidance in VS CodeCopilot / MCP support
Clone the source
bashgit clone https://github.com/GoogleChrome/modern-web-guidance.gitAdd to your rules / context
Paste the SKILL.md instructions into this tool's custom rules or workspace instructions so the agent follows them.
Documentation
Full READMEModern 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 installThis 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.
Excerpt — the full document is on GitHub.
More Automation & Workflow skills
- Automation & Workflow54k
chrome devtools mcp
Control and inspect a live Chrome browser from your coding agent. Record performance traces, analyze network requests, check console messages with source-mapped stack traces, and automate browser actions with Puppeteer.
Claude Plugins (Official)by ChromeDevTools
- Automation & Workflow45k
agent sdk dev
Development kit for working with the Claude Agent SDK
Claude Plugins (Official)by anthropics
- Automation & Workflow45k
claude code setup
Analyze codebases and recommend tailored Claude Code automations such as hooks, skills, MCP servers, and subagents.
Claude Plugins (Official)by anthropics
- Automation & Workflow45k
claude security
Deep vulnerability scanning of your own code, run entirely inside your Claude Code session at a chosen effort tier, with every finding challenged before it is reported and the verification tally computed in code. Turns surviving findings into targeted patches, each verified by a panel of agents, that you apply when yo…
Claude Plugins (Official)by anthropics
- Automation & Workflow45k
code simplifier
Agent that simplifies and refines code for clarity, consistency, and maintainability while preserving functionality. Focuses on recently modified code.
Claude Plugins (Official)by anthropics
- Automation & Workflow45k
feature dev
Comprehensive feature development workflow with specialized agents for codebase exploration, architecture design, and quality review
Claude Plugins (Official)by anthropics
Catalog data refreshed . Something wrong? Report it.