Modern Web Guidance è un insieme di competenze che incorporano l'esperienza della piattaforma web, le best practice e i dati di compatibilità del browser direttamente negli agenti di codifica. Aiuta a indirizzare gli agenti di codifica lontano dai pattern legacy e verso soluzioni che sfruttano la potenza e le funzionalità della moderna piattaforma web.
Installazione
Modern Web Guidance può essere installato e utilizzato con qualsiasi agente di codifica che supporti le skill.
Interfaccia a riga di comando modern-web-guidance (consigliata)
Il metodo di installazione consigliato è tramite la CLI modern-web-guidance creata dal team di Chrome. L'installazione delle skill tramite la CLI modern-web-guidance le manterrà aggiornate automaticamente. Puoi installare da modern-web-guidance CLI nel seguente modo:
npx modern-web-guidance@latest install
Se sviluppi estensioni di Chrome, ti consigliamo il seguente comando:
npx modern-web-guidance@latest install --choose
Viene eseguita una procedura guidata interattiva per installare le skill in base alle tue preferenze.
Se preferisci installare Modern Web Guidance senza utilizzare la CLI modern-web-guidance, continua a leggere per scoprire come installarli per l'agente che preferisci.
Antigravity
Scarica Antigravity e attiva "modern-web-guidance" durante il flusso di installazione oppure dalla pagina Impostazioni in Personalizzazioni e poi Crea con i plug-in Google.
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 le competenze di Modern Web Guidance in Skill Manager, disponibile in Impostazioni > Assistente AI > Competenze. Seleziona un'abilità 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
L'installazione di Modern Web Guidance per l'utilizzo con Claude Code richiede tre passaggi:
1. Aggiungi il marketplace:
/plugin marketplace add GoogleChrome/modern-web-guidance
2. Installa il plug-in da Marketplace:
/plugin install modern-web-guidance@googlechrome
3. Ricarica i plug-in:
/reload-plugins
Interfaccia a riga di comando Copilot
L'installazione di Modern Web Guidance per l'utilizzo con Copilot richiede due passaggi:
1. Aggiungi il marketplace:
/plugin marketplace add GoogleChrome/modern-web-guidance
2. Installa il plug-in da Marketplace:
/plugin install modern-web-guidance@googlechrome
Oca
goose plugin install https://github.com/GoogleChrome/modern-web-guidance --auto-update
Esplorare prima dell'installazione
Valuta la raccolta di guide alle competenze Modern Web Guidance prima dell'installazione cercando con una query o recuperando le nostre guide per ID. Per farlo, utilizza il comando search della CLI per trovare l'ID dello scenario d'uso utilizzando un prompt:
npx modern-web-guidance@latest search "animate a dialog modal backdrop"
Verrà restituito l'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":"user-experience","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":"user-experience","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":"user-experience","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 di description, puoi scegliere id che riflette meglio 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 altri casi d'uso, sostituisci animate-to-from-top-layer con un ID caso d'uso valido.
Perché utilizzare Modern Web Guidance?
Le competenze di Modern Web Guidance offrono un vantaggio allo sviluppatore web rispetto ai modelli di AI non assistiti per tre motivi distinti:
- Gli agenti di codifica AI tendono a utilizzare 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 erano a conoscenza delle funzionalità più recenti della piattaforma web o avevano informazioni errate al riguardo.
- Infine, i modelli di AI tendono a fornire consigli 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.
Le competenze di Modern Web Guidance risolvono queste carenze e garantiscono che il tuo flusso di lavoro di programmazione assistita dall'AI disponga degli strumenti per adottare per primi le funzionalità più recenti della piattaforma web, tenendo conto dei fallback.
Che cosa contiene la guida al web moderno?
La guida Modern Web Guidance include le best practice per oltre 100 casi d'uso di sviluppo web in diverse discipline principali. Sotto il cofano, si tratta di una singola competenza dell'agente che indica all'agente di codifica come chiamare la CLI modern-web-guidance per trovare e recuperare le migliori indicazioni per il tuo caso d'uso.
- Esperienza utente: visualizza transizioni, stili CSS
scrollbar-colore animazioni di entrata e uscita. - CSS:query sui contenitori, spazi colore moderni come
oklch, layout a griglia secondaria CSS,text-wrape taglio dell'altezza della linea della tipografia. - Rendimento:diagnostica 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 input con dimensionamento automatico (
field-sizing: content) e stili di convalida accurati con:user-invalid. - Componenti UI integrati:controllo diretto di finestre di dialogo, posizionamento dell'ancora CSS per le descrizioni comando e
popover. - Accessibilità:annunci di errore accessibili e gestione dello stato attivo della tastiera.
- AI integrata:utilizza modelli client locali sul dispositivo (API native per il rilevamento della lingua, il riepilogo e la traduzione).
- Passkey:registrazione, autenticazione e gestione delle passkey.
Questi sono alcuni casi d'uso di ogni disciplina. Per visualizzare tutti i casi d'uso, puoi consultare l'elenco completo dei casi d'uso.
Base di riferimento
Baseline offre agli sviluppatori chiarezza su quali funzionalità web sono interoperabili nei principali motori dei browser. Se una funzionalità web è di base, 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à indica 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 di base, quindi configurare il progetto in modo da utilizzarlo aggiungendolo al file AGENTS.md o CLAUDE.md, ad esempio:
This project's Baseline target is Baseline 2024.
<other project info...>
Guida al web moderno e fallback delle funzionalità
Modern Web Guidance utilizza un'ampia gamma di funzionalità web moderne. Alcuni potrebbero essere disponibili di recente o ampiamente, ma altri 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 miglioramenti progressivi in cui la funzionalità moderna può essere utilizzata ovunque sia supportata. Se è necessario un polyfill per i browser non supportati, gli agenti vengono sempre istruiti a caricarli in modo condizionale, in modo che comportino un costo solo se necessario.
Come viene garantita l'accuratezza?
Ogni caso d'uso in Modern Web Guidance contiene una guida e la maggior parte dei casi d'uso viene calibrata continuamente per indirizzare gli agenti AI verso un output di qualità.
I casi d'uso calibrati utilizzano un harness QA automatizzato per verificare il comportamento corretto dell'agente, con Playwright che svolge un ruolo centrale:
- Per ogni guida, viene sviluppato uno script Playwright per verificare se sono stati seguiti i dettagli di implementazione della guida, ad esempio se è stato osservato
@media (prefers-reduced-motion: reduce)laddove è un requisito. - Questi script Playwright vengono calibrati continuamente in base a un'implementazione demo di riferimento "corretta" che prevede un tasso di superamento del 100%. All'altra estremità, gli script vengono confrontati con un'implementazione volutamente imperfetta che prevede un tasso di superamento dello 0%.
- Se una o entrambe le implementazioni "corrette" e deliberatamente errate non riescono a produrre tassi di superamento rispettivamente del 100% e dello 0%, un generatore riprova automaticamente utilizzando il contesto finché non viene raggiunta 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 le competenze di Modern Web Guidance per completare un'attività. Un'altra valutazione (l'esperimento) affronta lo stesso compito utilizzando le competenze di Modern Web Guidance.
I nostri test vengono eseguiti quotidianamente con modelli e agenti di codifica allo stato dell'arte, fornendoci un quadro chiaro del rendimento degli agenti con e senza le nostre indicazioni. In media, i primi risultati mostrano un miglioramento di 37 punti percentuali nel rispetto delle 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 codifica agentica che preferisci.
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 flusso di lavoro di programmazione dell'AI. Ora puoi esplorare le competenze e i casi d'uso forniti da Modern Web Guidance.