Oleksandr Kuzmenko, EditorPublished 5 min readAI-assisted · editor-reviewed
TL;DR
- Prevents coding agents from outputting obsolete JavaScript polyfills by feeding them curated modern browser primitives.
- Provides an npx CLI to scan local repositories for legacy front-end patterns.
- Engineered for strict token efficiency to integrate seamlessly into agent context windows.
Key facts
- Stewards
- Google Chrome, Microsoft Edge, Mozilla Firefox, MDN
- Distribution
- npm / npx CLI (modern-web-guidance)
- Coverage Focus
- Anchor Positioning, Popover API, subgrid, container queries, scheduler.yield
Eliminating Historical Biases in LLM Code
AI coding assistants in tools like Cursor and Claude Code frequently fall back to legacy workarounds, producing complex JavaScript for features that modern browsers handle natively. Stewarded jointly by Google Chrome, Microsoft Edge, Mozilla Firefox, and MDN, Modern Web Guidance embeds platform expertise and compatibility guidelines into agent workflows.
Token-Efficient Native Guidance
Rather than filling context windows with bulky documentation, the toolkit exposes modular, curated guides designed to minimize token usage. Covered standards include:
- Native Components: Anchor Positioning for popups/tooltips, the Popover API, and native
<dialog>handling. - Modern CSS Layout: Container queries, subgrid, modern color spaces (
oklch), and:user-invalidform states. - Performance & On-Device AI: Task splitting via
scheduler.yield, INP diagnostic metrics, and local browser Prompt APIs.
Auditing and Context Injection via CLI
Developers can run scans on existing codebases using npx modern-web-guidance@latest legacy-scan . to detect outdated implementation patterns, or fetch specific guides directly into prompt templates and agent skills.
Try it in 2 minutes
npx modern-web-guidance@latest legacy-scan .When to use
- Prompting AI agents in Cursor or Claude Code to build modern, responsive web components.
- Auditing existing front-end repositories to replace obsolete polyfills with browser-native features.
When NOT to use
- Building strictly for legacy browsers or embedded enterprise WebViews lacking modern engine support.
- Pure back-end Node.js or Go services where browser DOM APIs do not apply.
What to do today
- Run npx modern-web-guidance@latest legacy-scan . in your web project to spot deprecated patterns.
- Add relevant guidance documents to your project instructions or Cursor rules to guide UI generation.
Step names are taken from What to do today.
Step names are taken from What to do today. Run npx modern-web-guidance@latest legacy-scan . in your web project to spot deprecated patterns.. Add relevant guidance documents to your project instructions or Cursor rules to guide UI generation.
- Run npx modern-web-guidance@latest legacy-scan . in your web project to spot deprecated patterns.
- Add relevant guidance documents to your project instructions or Cursor rules to guide UI generation.
What the community says
If created properly, skills are already something like that. You have a front matter summary always available to the agent. The agent can request the full skill content on demand...
If you rename that file to "llms.txt" it'll be a bit more discoverable.