modern-web-guidance-src  by GoogleChrome

Guidance and evaluation framework for modern web development agents

Created 4 months ago
519 stars

Top 60.0% on SourcePulse

GitHubView on GitHub
Project Summary

Modern Web Guidance provides a curated, codified set of best practices for modern web development, specifically designed to improve the output of coding agents. It addresses the common LLM tendency to generate legacy code by offering targeted, expert-curated guidance on high-performance, accessible, and secure APIs. This benefits developers and AI agents by enabling the creation of more efficient, modern web applications, bridging the gap between LLM training data and current web standards.

How It Works

The project utilizes a Command Line Interface (CLI) integrated as an agent skill. When a coding agent encounters a web development task, it activates this skill. The agent then uses the CLI to perform local semantic searches for relevant guidance using an offline, CPU-efficient TensorFlow.js model. Upon finding a match, the agent retrieves the specific guide, which includes targeted code patterns, potential pitfalls, and fallback strategies, directly into its context window. This approach ensures privacy, low latency, and supply-chain security by operating entirely locally without network calls or API keys.

Quick Start & Requirements

  • Primary Install: npx modern-web-guidance@latest install (runs an interactive wizard).
  • Prerequisites: None beyond Node.js/npm for npx. The CLI works offline.
  • Try it out:
    • Search: npx modern-web-guidance@latest search "animate a dialog modal backdrop"
    • Retrieve: npx modern-web-guidance@latest retrieve "animate-to-from-top-layer"
  • Alternative Installations: Via Vercel Skills CLI, GitHub CLI, Google Antigravity, GitHub Copilot CLI, or Claude Code Plugin.

Highlighted Details

  • Comprehensive Guidance: Covers modern browser APIs, CSS layout (container queries, subgrid), performance optimizations (INP, scheduler.yield), native UI components (Popover API, dialogs), accessibility patterns, and built-in AI APIs.
  • Progressive Enhancement & Fallbacks: Distinguishes between additive enhancements and critical behaviors, providing low-overhead, case-specific fallbacks (<50 LOC) or conditionally loaded polyfills over heavy third-party bundles.
  • Empirical Validation: Features a robust evaluation harness with browser-based assertions and end-to-end agent evaluations, demonstrating significant uplift in coding agent accuracy (e.g., +30-40 percentage points in recent tests).
  • Baseline-Aware Integration: Leverages real-time browser compatibility data to help agents adapt to current browser support.

Maintenance & Community

Supported by the Google Chrome and Microsoft Edge teams, with active development and a welcome for community contributions via GitHub. The GoogleChrome/modern-web-guidance-src repository serves as the source for compiled agent skills released to GoogleChrome/modern-web-guidance.

Licensing & Compatibility

  • Software Code: Licensed under Apache License 2.0.
  • Documentation/Guides: Licensed under Creative Commons Attribution 4.0 International (CC-BY 4.0).
  • Compatibility: Apache 2.0 is generally permissive for commercial use and linking within closed-source projects.

Limitations & Caveats

This is a preview release with actively added content. Anonymous usage telemetry is collected by default to improve the tool; users can opt-out by setting the DISABLE_TELEMETRY=1 environment variable.

Health Check
Last Commit

1 day ago

Responsiveness

Inactive

Pull Requests (30d)
162
Issues (30d)
63
Star History
518 stars in the last 30 days

Explore Similar Projects

Feedback? Help us improve.