Modern Web Guidance skill
Chrome team skills: the agent looks up current web platform patterns instead of legacy code, plus a skill for Chrome extensions and Web Store publishing
- 2,573 ★ on the repository
- Last commit
- Apache-2.0
Extended access
Why this level
- The skill runs npx modern-web-guidance@latest and downloads a package from the network on each search
- The agent writes and edits the project's client code from the guides it fetches
Install
- Works in
Manual install
npx modern-web-guidance@latest installAn interactive install wizard.
Access and checks
How we reviewExtended accessThe tool runs code or makes network calls and only reads external data.
- The skill runs npx modern-web-guidance@latest and downloads a package from the network on each search
- The agent writes and edits the project's client code from the guides it fetches
This is third-party code. Review the repository files before installing.
What it does
Models often write for the web from old examples and pull in heavy JavaScript where a native solution has long existed. The modern-web-guidance skill makes the agent fetch a short guide before a web task: npx modern-web-guidance search finds the right guide and retrieve loads it into context. Guides are grouped by topic: CSS, forms, HTML and web components, JS, performance, accessibility, built-in browser AI, privacy, PWA and security, including passkeys. The second skill, chrome-extensions, walks through Manifest V3: service workers, content scripts, the side panel, storage, permissions and the check before Chrome Web Store publishing.
Who it is for. For frontend developers who hand UI markup and logic to Claude Code, Cursor or Copilot and want modern code without extra libraries.
Good fit when
- You need a dialog and its backdrop animated without an animation library
- A page has poor INP and you need to find which scripts slow it down
- A form with address or payment autofill should use the native attributes
- You are writing a Manifest V3 Chrome extension with a side panel
- Before submitting an extension to the Web Store you want the checklist and a privacy policy draft
Not a fit when
- Backend work: the skill explicitly excludes SQL, ORMs and Express routes
- The task is CI, Docker or deployment rather than client code
- You need an audit of a finished site: Web Quality Skills and Lighthouse cover that
- You need to debug a live page in the browser: Chrome DevTools MCP fits
Example request
Animate a modal opening with a dimmed backdrop on a native dialog, with no librariesLimitations
The authors call the release a preview with content still being added. For search the skill runs npx modern-web-guidance@latest, so Node.js and network access are needed. The guides describe browser capabilities, and some are not supported everywhere, so check compatibility with your target browsers. The skill is written as mandatory for any web task and the agent will call it often; limit it in the agent's settings if that gets in the way.
How to disable. In Claude Code disable the plugin through /plugin or delete the skill folder the install created. The agent stops requesting guides.
FAQ
How do I install Modern Web Guidance in Claude Code?
Run /plugin marketplace add GoogleChrome/modern-web-guidance, then /plugin install modern-web-guidance@googlechrome and /reload-plugins. A wizard also exists: npx modern-web-guidance@latest install.
What does the agent do with this skill?
Before a web task it searches for a guide with search, loads it through retrieve and writes code with modern patterns instead of outdated ones.
Which topics do the guides cover?
CSS and layout, forms, HTML and web components, JS, performance, accessibility, built-in browser AI, privacy, PWA and security with passkeys.
Does the skill help with Chrome extensions?
Yes, a separate chrome-extensions skill covers Manifest V3, service workers, content scripts, the side panel and Web Store publishing prep.
Can I try it without installing?
Yes. npx modern-web-guidance@latest search "animate a dialog modal backdrop" finds guides, and retrieve with an id fetches one.
Discussion
No questions or reviews yet.
Related
SkillsA set of skills for web quality audits: performance, Core Web Vitals, accessibility, SEO and best practices from Lighthouse
A skill that dissects and ports WebGL, WebGPU and Canvas effects from a page into a standalone local JS project
Skills with Apple HIG, Material Design 3 and WCAG 2.2 rules for reviewing interfaces on iOS, macOS, Android, the web and more
A skill of ready CSS transitions for web interfaces: modals, dropdowns, toasts, loaders and dozens of other animations with matching rules
A skill methodology for reproducing websites, from a static page to heavy WebGL, built on real source code rather than agent-hallucinated code
Skills against boilerplate-looking UIs: layout, type, motion and spacing, plus reference image generation for web and mobile
Comparison with similar tools
Entries that share the main search query, and how they differ.
| Entry | Official | Authentication | Repository stars | Main difference |
|---|---|---|---|---|
| Modern Web Guidance (this entry) | yes | 2,573 | ||
| Web Quality Skills | no | 3,006 | Audits of a finished site through checklists rather than a pattern reference for code | |
| Chrome DevTools MCP | yes | not required | 54,368 | Drives a live browser and debugging, while this holds guides for writing code |
README in short
The Google Chrome team maintains the project together with the Microsoft Edge team and the community. The description explains the problem: training data is full of outdated patterns, so models generate extra JavaScript. Guides are token-efficient because the authors prune what models already know. A full list of web features follows, then install routes: Vercel skills CLI, GitHub CLI, Antigravity, Copilot CLI and the Claude Code plugin.
README badge
Original SKILL.md
---
name: modern-web-guidance
description: |
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.
---
# Modern Web Guidance
A skill to search for specific web development use cases and retrieve their corresponding best practice guides.
## When to use
Must use this skill:
- At the **start** of implementing any web feature.
- Before creating a new component, to check if a standardized pattern already exists.
- To avoid implementing ad-hoc solutions or loading large dependencies unnecessarily.
## Usage Instructions
### Step 1. Search Use Cases
Search with an action-oriented query summarizing what you want to achieve using the `search` command. Run `modern-web-guidance` directly with `npx`.
```sh
npx -y modern-web-guidance@latest search "<query>" --skill-version 2026_10_12-dacb5911
```
**Example Output**:
```json
[
{
"id": "optimize-image-priority",
"description": "Optimize the loading priority of Largest Contentful Paint (LCP) candidate images.",
"category": "performance",
"featuresUsed": [ "Fetch priority" ],
"tokenCount": 985,
"similarity": 0.7289
},
{
"id": "defer-rendering-heavy-content",
"description": "Reduce rendering times in content-heavy web pages by deferring rendering for offscreen content.",
"category": "performance",
"featuresUsed": [ "content-visibility", "hidden=\"until-found\"" ],
"tokenCount": 1250,
"similarity": 0.6961
}
]