Modern Web Guidance è un insieme di competenze che incorporano competenze sulla piattaforma web, best practice e dati sulla compatibilità del browser direttamente nei tuoi agenti di programmazione. Aiuta a indirizzare gli agenti di programmazione lontano dai pattern legacy e verso soluzioni che sfruttano la potenza e le funzionalità della piattaforma web moderna.
Installazione
Modern Web Guidance può essere installato e utilizzato con qualsiasi agente di programmazione che supporti le skill.
Interfaccia a riga di comando modern-web-guidance (consigliata)
Il metodo di installazione consigliato è tramite l'interfaccia a riga di comando modern-web-guidance creata dal team di Chrome. L'installazione di Modern Web Guidance tramite l'interfaccia a riga di comando modern-web-guidance attiverà gli aggiornamenti automatici. Puoi eseguire l'installazione dall'interfaccia a riga di comando modern-web-guidance in questo modo:
npx modern-web-guidance@latest install
Facoltativamente, se sviluppi estensioni di Chrome, ti consigliamo il seguente comando:
npx modern-web-guidance@latest install --choose
In questo modo viene eseguita una procedura guidata interattiva per installare le skill in base alle tue preferenze.
Se preferisci installare Modern Web Guidance senza utilizzare l'interfaccia a riga di comando modern-web-guidance, consulta le seguenti istruzioni specifiche per l'agente. Tieni presente che la maggior parte di queste opzioni non supporta gli aggiornamenti automatici.
Antigravity
Scarica Antigravity e attiva "modern-web-guidance" durante il flusso di installazione o dalla pagina Impostazioni in Personalizzazioni, quindi Build with Google Plugins.
Antigravity CLI
agy plugin install https://github.com/GoogleChrome/modern-web-guidance
Gemini CLI
gemini extensions install https://github.com/GoogleChrome/modern-web-guidance --auto-update
JetBrains WebStorm
Puoi trovare Modern Web Guidance in Gestore delle skill, disponibile in Impostazioni > Assistente AI > Skill. Seleziona una skill per aprire la relativa pagina dei dettagli. Per installare la skill, fai clic sul pulsante Installa per applicarla all'istanza IDE corrente.
Interfaccia a riga di comando di GitHub
gh skill install GoogleChrome/modern-web-guidance
npx skills
npx skills add GoogleChrome/modern-web-guidance
Claude Code
claude plugin install modern-web-guidance@claude-plugins-official
Interfaccia a riga di comando di Claude Code
L'installazione di Modern Web Guidance per l'utilizzo con l'interfaccia a riga di comando di Claude Code prevede tre passaggi:
1. Aggiungi il marketplace:
/plugin marketplace add GoogleChrome/modern-web-guidance
2. Installa il plug-in dal marketplace:
/plugin install modern-web-guidance@googlechrome
3. Ricarica i plug-in:
/reload-plugins
Codex
codex plugin marketplace add GoogleChrome/modern-web-guidance
codex plugin add modern-web-guidance@googlechrome
Copilot CLI
L'installazione di Modern Web Guidance per l'utilizzo con Copilot prevede due passaggi:
1. Aggiungi il marketplace:
/plugin marketplace add GoogleChrome/modern-web-guidance
2. Installa il plug-in dal marketplace:
/plugin install modern-web-guidance@googlechrome
Oca
goose plugin install https://github.com/GoogleChrome/modern-web-guidance --auto-update
Grok
grok plugin install https://github.com/GoogleChrome/modern-web-guidance --trust
Kimi Code
/plugins install https://github.com/GoogleChrome/modern-web-guidance
Esplora prima dell'installazione
Valuta la libreria di guide Modern Web Guidance prima dell'installazione eseguendo una ricerca con una query o recuperando le nostre guide per ID. Per farlo, utilizza il comando search dell'interfaccia a riga di comando per trovare l'ID richiesta utilizzando un prompt:
npx modern-web-guidance@latest search "animate a dialog modal backdrop"
Verrà restituito un oggetto JSON nel terminale:
[{"id":"light-dismiss-a-dialog","description":"Create a modal dialog that can be closed via light dismiss (i.e. clicking or tapping outside of the dialog)","category":"ui-behaviors","featuresUsed":["<dialog closedby>"],"tokenCount":1085,"similarity":0.7076},
{"id":"animate-to-from-top-layer","description":"Animate elements such as dialogs, popovers, and tooltips as they're entering/exiting the top layer.","category":"ui-behaviors","featuresUsed":["::backdrop","<dialog>","overlay","Popover","@starting-style","transition-behavior"],"tokenCount":1541,"similarity":0.6842},
{"id":"declarative-dialog-popover-control","description":"Toggle the visibility of a dialog or popover from a button without writing JavaScript.","category":"ui-behaviors","featuresUsed":["Invoker commands","Popover","<dialog>"],"tokenCount":2684,"similarity":0.5685},
{"id":"html","description":"Action-oriented guidelines for modern HTML architecture, semantics, native interactive APIs (Dialog, Popover, Details), focus management, and resource prioritization. Use this guide when structuring web documents, implementing native overlays, or optimizing resource loading order.","category":"html","tokenCount":5484,"similarity":0.5471},
{"id":"accessibility","description":"Actionable coding guidelines for building accessible web applications, covering semantic HTML, focus management, forms, media, and testing. Use this skill when auditing or implementing accessibility features, keyboard navigation, or ARIA.","category":"accessibility","tokenCount":7129,"similarity":0.5102}]
Leggendo i valori description, puoi scegliere il id che meglio riflette il tuo obiettivo e utilizzare il comando retrieve:
npx modern-web-guidance@latest retrieve "animate-to-from-top-layer"
In questo caso, nel terminale verrà visualizzato il markdown della guida per il caso d'uso animate-to-from-top-layer. Per altre guide, sostituisci animate-to-from-top-layer con qualsiasi ID guida valido.
Perché utilizzare Modern Web Guidance?
Modern Web Guidance offre un vantaggio allo sviluppatore web rispetto ai modelli di AI non assistiti per tre motivi distinti:
- Gli agenti di programmazione AI tendono a utilizzare per impostazione predefinita soluzioni obsolete per i problemi di sviluppo web moderni. Queste soluzioni spesso contengono JavaScript per fornire funzionalità per problemi che vengono risolti meglio dalle moderne API CSS e HTML.
- Storicamente, i modelli di AI non sono a conoscenza delle funzionalità più recenti della piattaforma web o dispongono di informazioni errate.
- Infine, i modelli di AI tendono a fornire suggerimenti obsoleti che non tengono conto dei requisiti del progetto o dei criteri di supporto del browser, anziché adattare le indicazioni ai requisiti di Baseline di un determinato progetto.
Modern Web Guidance risolve queste carenze e garantisce che il tuo flusso di lavoro di programmazione assistita dall'AI disponga degli strumenti per adottare per prime le nuove funzionalità della piattaforma web, tenendo conto dei fallback.
Cosa contiene Modern Web Guidance?
Modern Web Guidance include le best practice per oltre 100 casi d'uso di sviluppo web in diverse discipline principali. In pratica, si tratta di una skill dell'agente che indica all'agente di programmazione come chiamare l'interfaccia a riga di comando modern-web-guidance per trovare e recuperare le indicazioni migliori per il tuo caso d'uso.
- Esperienza utente: transizioni di visualizzazione, stile CSS
scrollbar-colore animazioni di entrata e uscita. - CSS: query container, spazi dei colori moderni come
oklch, layout CSS subgrid,text-wrape ritaglio dell'altezza della riga tipografica. - Prestazioni: diagnostica di Interaction to Next Paint (INP),
scheduler.yieldper suddividere le attività lunghe, pianificazione delle attività in background e definizione della priorità di caricamento delle immagini. - Moduli: campi di immissione con ridimensionamento automatico (
field-sizing: content) e stili di convalida accurati con:user-invalid. - Componenti UI integrati: controllo diretto sulle finestre di dialogo, posizionamento dell'anchor CSS per i tooltip e
popover. - Accessibilità: annunci di errore accessibili e gestione della selezione della tastiera.
- AI integrata: utilizza modelli client locali on-device (API native di rilevamento della lingua, riassunto e traduzione).
- Passkey: registrazione, autenticazione e gestione delle passkey.
Queste sono alcune delle guide di ogni categoria. Per visualizzare tutte le guide, puoi consultare l'elenco completo delle guide.
Base di riferimento
Baseline offre agli sviluppatori una visione chiara delle funzionalità web interoperabili nei principali motori dei browser. Se una funzionalità web è Baseline, puoi fare affidamento sul livello di compatibilità del browser. Le funzionalità web rientrano in una delle tre categorie definite da Baseline:
- Disponibilità limitata significa che la funzionalità non è interoperabile.
- Nuova disponibilità significa che la funzionalità è diventata interoperabile di recente, negli ultimi 30 mesi.
- Ampiamente disponibile significa che la funzionalità è interoperabile da almeno 30 mesi.
Sebbene Baseline sia una definizione per l'interoperabilità delle funzionalità web, è anche un aspetto configurabile del tuo progetto. Puoi scegliere un target Baseline, quindi configurare il progetto in modo che lo utilizzi aggiungendolo al file AGENTS.md o CLAUDE.md, ad esempio:
This project's Baseline target is Baseline 2024.
<other project info...>
Modern Web Guidance e i fallback delle funzionalità
Modern Web Guidance utilizza un'ampia gamma di funzionalità web moderne. Alcune di queste funzionalità potrebbero essere disponibili di recente o ampiamente, ma altre potrebbero avere una disponibilità limitata. Nei casi in cui una funzionalità non è ampiamente disponibile, le guide ai casi d'uso forniscono agli agenti istruzioni specifiche su come garantire una compatibilità più ampia nei browser che non supportano la funzionalità. In molti casi, i fallback vengono implementati come potenziamenti progressivi in cui la funzionalità moderna può essere utilizzata ovunque sia supportata. Se sono necessari polyfill per i browser non supportati, gli agenti vengono sempre istruiti a caricarli in modo condizionale, in modo da sostenere un costo solo se necessario.
Come viene garantita l'accuratezza?
Ogni caso d'uso in Modern Web Guidance contiene un insieme di valutazioni che vengono calibrate continuamente per garantire un output di qualità.
Le valutazioni dei casi d'uso eseguono un'imbracatura di QA automatizzata per testare il comportamento corretto dell'agente, con Playwright che svolge un ruolo centrale:
- Per ogni guida, viene sviluppato uno script Playwright per verificare se i dettagli di implementazione della guida sono stati seguiti, ad esempio se è stato osservato
@media (prefers-reduced-motion: reduce)dove è un requisito. - Questi script Playwright vengono calibrati continuamente rispetto a un'implementazione demo di riferimento "corretta" che prevede una percentuale di superamento del 100%. Dall'altro lato, gli script eseguono un controllo rispetto a un'implementazione deliberatamente errata che prevede una percentuale di superamento dello 0%.
- Se una o entrambe le implementazioni "corrette" e deliberatamente errate non riescono a produrre percentuali di superamento rispettivamente del 100% e dello 0%, un generatore riprova automaticamente utilizzando il contesto fino a raggiungere una calibrazione del 100%.
- Infine, vengono applicate le valutazioni end-to-end su un'applicazione di base. Una di queste valutazioni non è guidata, ovvero è un controllo, che utilizza i dati di addestramento predefiniti senza richiamare Modern Web Guidance per completare un'attività. Un'altra valutazione (l'esperimento) affronta la stessa attività utilizzando Modern Web Guidance.
Le nostre valutazioni vengono eseguite più volte alla settimana con modelli e agenti di programmazione allo stato dell'arte, fornendoci un quadro chiaro delle prestazioni degli agenti con e senza la nostra guida. In media, i primi risultati mostrano un miglioramento di 37 punti percentuali nell'aderenza alle best practice moderne quando gli agenti sono dotati di Modern Web Guidance. Tuttavia, i risultati possono variare a seconda dei requisiti del progetto, del modello, dei prompt che scrivi e degli strumenti di programmazione agentica che preferisci.
Attiva le indicazioni per le funzionalità volatili
Le funzionalità volatili sono funzionalità web sperimentali implementate in un solo motore del browser e sono soggette a modifiche che provocano un errore. Per attivare i suggerimenti per queste funzionalità, esegui il seguente comando nella directory root del progetto:
npx modern-web-guidance@latest set-allow-volatile-features
Attiva le indicazioni per le funzionalità in origin trial
Quando le funzionalità sperimentali vengono rilasciate per la prima volta, di solito sono nascoste dietro un flag o rese disponibili solo sui siti web di produzione tramite origin trial. Alcune guide di Modern Web Guidance utilizzano queste funzionalità, ma le relative indicazioni non sono rese disponibili per impostazione predefinita per l'agente di programmazione. Per ricevere indicazioni su queste funzionalità, esegui questo comando nella directory principale del progetto:
npx modern-web-guidance@latest set-allow-origin-trials
Passaggi successivi
Ora hai una panoramica generale di Modern Web Guidance e del suo potenziale per semplificare l'adozione delle best practice del web moderno nel tuo workflow di programmazione con l'AI. Ora puoi esplorare le guide fornite da Modern Web Guidance.