Browsers natively handle a lot of what used to take 50 lines of JS (or a dependency): \`CSS.highlights\` for text range highlighting without s everywhere, \`\` and showModal() give you backdrops and ideal focus management, \`field-sizing\` to auto-grow textareas as the user types.. (Something yesterday's ftrain post touched on \[0\])Models know about some of these by name, but consistently won't default to using the platform-native solution and instead prefer the incumbent+JS based pattern. We started an effort in Chrome to supplement coding agents with this key domain knowledge and we're shipping our 1.0 today, in collaboration with Firefox, MDN, and Edge.200+ guides (~1.7MB) of curated, hand-crafted implementation best-practices from web experts, updated as the web evolves. (Open source, obv, so.. we'll welcome your bikeshedding ;) Readable versions here: \[1\]I've spent the last 9 months obsessing over how to ship this as an agent skill + (Agentic RAG) CLI without blowing up your context window. (Or cedeing activation mechanics to MCP dynamic tool search). The skill description is minmaxed for activating on relevant frontend tasks. The RAG work I'm pretty proud of… originally a 500mb native stack down to a ~7MB pure-JS package, ~10ms search on your CPU.We just introduced a deterministic 'legacy-scan' (trained on 30k github repos) to identify old 'n dusted patterns that your agent can modernize. (92% avg precision on held-out repos.)People make a lot of claims about what coding agents are good/bad at. We wanted receipts, so we invested heavily in eval infra \[2\] to help us hill-climb, but also to identify when knowledge is common enough we can prune our guides. (Ofc, some of the things we thought AI didn't know turned out to be wrong :) We run codex/claude/agy against 200 tasks without the skill and then with.. In total ~1,700 playwright/AST-based assertions. Agents go from 55% pass unguided to 92% guided.Try it out:```
DISABLE_TELEMETRY=1 npx modern-web-guidance@latest install
DISABLE_TELEMETRY=1 npx modern-web-guidance@latest search "animate dialog modal"
DISABLE_TELEMETRY=1 npx modern-web-guidance@latest legacy-scan ./src
```If you spot something wrong or weird, give us a holler!Longer write-up on the 1.0: https://developer.chrome.com/blog/modern-web-guidance-v1\---0: https://news.ycombinator.com/item?id=504164561: https://developer.chrome.com/docs/modern-web-guidance/guides2: https://googlechrome.github.io/modern-web-guidance-src/* * *Comments URL: https://news.ycombinator.com/item?id=50443812Points: 69\# Comments: 27
Source: Hacker News · Summarized by HeadlinesBriefing