Inizia a utilizzare le indicazioni per il web moderno

Modern Web Guidance è una skill dell'agente che applica le best practice moderne al flusso di lavoro di codifica assistita dall'AI. Aiuta a indirizzare l'agente di codifica verso soluzioni che utilizzano le funzionalità più recenti della piattaforma web, anziché verso soluzioni alternative legacy per i problemi comuni di sviluppo web.

Installazione

Le skill di Modern Web Guidance possono essere installate in una vasta gamma di agenti, consentendoti di mantenere il tuo flusso di lavoro preferito e al contempo di usufruire delle indicazioni che forniscono.

Il metodo di installazione consigliato è tramite l'interfaccia a riga di comando modern-web-guidance creata dal team di Chrome. L'installazione delle skill tramite l'interfaccia a riga di comando modern-web-guidance le manterrà automaticamente aggiornate. Puoi installare le skill dall'interfaccia a riga di comando modern-web-guidance nel seguente modo:

npx modern-web-guidance@latest install

Se sviluppi estensioni di Chrome, ti consigliamo di utilizzare 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 utilizzare le skill di Modern Web Guidance senza utilizzare l'interfaccia a riga di comando modern-web-guidance, continua a leggere per scoprire come installarle per l'agente che preferisci.

Antigravity

Scarica Antigravity e attiva "modern-web-guidance" durante il flusso di installazione o dalla pagina Impostazioni in Personalizzazioni e poi Crea con i plug-in di Google.

Interfaccia a riga di comando Antigravity

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 skill di Modern Web Guidance in Skill Manager, disponibile in Impostazioni > Assistente AI > Skill. Seleziona una skill per aprire la pagina dei dettagli. Per installare la skill, fai clic sul pulsante Installa per applicarla all'istanza IDE corrente.

Interfaccia a riga di comando 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 dal 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 dal 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 libreria di guide per le skill di Modern Web Guidance prima dell'installazione cercando 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 del caso d'uso utilizzando un prompt:

npx modern-web-guidance@latest search "animate a dialog modal backdrop"

Nel terminale verrà restituito un oggetto JSON:

[{"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 description, puoi scegliere l'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, il Markdown della guida per il caso d'uso animate-to-from-top-layer verrà visualizzato nel terminale. Per altri casi d'uso, sostituisci animate-to-from-top-layer con un ID caso d'uso valido.

Perché utilizzare Modern Web Guidance?

Le skill di Modern Web Guidance offrono un vantaggio agli sviluppatori web rispetto ai modelli di AI non assistiti per tre motivi distinti:

  1. Gli agenti di codifica AI tendono a utilizzare per impostazione predefinita soluzioni più vecchie e obsolete per i problemi di sviluppo web moderni. Queste soluzioni spesso contengono JavaScript per fornire funzionalità per problemi che vengono risolti meglio dalle API CSS e HTML moderne.
  2. Storicamente, i modelli di AI non erano a conoscenza delle funzionalità più recenti della piattaforma web o avevano informazioni errate al riguardo.
  3. 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é personalizzare le indicazioni in base ai requisiti di base di un determinato progetto.

Le skill di Modern Web Guidance risolvono queste carenze e garantiscono che il workflow di programmazione assistita dall'AI disponga degli strumenti per adottare prima le funzionalità più recenti della piattaforma web, tenendo conto anche dei fallback.

Che cosa include Modern Web Guidance?

Modern Web Guidance include le best practice per oltre 100 casi d'uso di sviluppo web in diverse discipline principali. Dietro le quinte, si tratta di una singola skill dell'agente che indica all'agente di codifica 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-color e animazioni di entrata e uscita.
  • CSS: query sui container, spazi colore moderni come oklch, layout a sottogriglia CSS, text-wrap e ritaglio dell'altezza della riga di tipografia.
  • Rendimento: diagnostica Interaction to Next Paint (INP), scheduler.yield per suddividere le attività lunghe, pianificazione delle attività in background e definizione della priorità del caricamento delle immagini.
  • Moduli: campi di input con ridimensionamento automatico (field-sizing: content) e stili di convalida accurati con :user-invalid.
  • Componenti UI integrati: controllo diretto delle 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 di rilevamento della lingua, riepilogo e traduzione).
  • Passkey: registrazione, autenticazione e gestione delle passkey.

Questi sono alcuni dei 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

La base di riferimento offre agli sviluppatori chiarezza sulle funzionalità web interoperabili nei principali motori dei browser. Se una funzionalità web è di base, puoi fidarti del livello di compatibilità del browser. Le funzionalità web rientrano in una delle tre categorie definite dalla base di riferimento:

  • Disponibilità limitata significa che la funzionalità non è interoperabile.
  • Nuova disponibilità significa che la funzionalità è diventata interoperabile di recente, negli ultimi 30 mesi.
  • Ampia disponibilità significa che la funzionalità è interoperabile da almeno 30 mesi.

Sebbene la base di riferimento sia una definizione per l'interoperabilità delle funzionalità web, è anche un aspetto configurabile del progetto. Puoi scegliere una base di riferimento di destinazione e poi configurare il progetto in modo che la utilizzi aggiungendola al file AGENTS.md o CLAUDE.md, ad esempio:

This project's Baseline target is Baseline 2024.

<other project info...>

Modern Web Guidance e fallback delle funzionalità

Modern Web Guidance utilizza una vasta gamma di funzionalità web moderne. Alcune di queste potrebbero essere di base con nuova o ampia disponibilità, ma altre potrebbero avere una disponibilità limitata. Nei casi in cui una funzionalità non è ampiamente disponibile, le guide per i 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, agli agenti viene sempre indicato di 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 output di qualità.

I casi d'uso calibrati utilizzano un harness di controllo qualità automatizzato per verificare il comportamento corretto dell'agente, con Playwright che svolge un ruolo centrale:

  1. Per ogni guida, viene sviluppato uno script Playwright per verificare se sono stati seguiti i dettagli di implementazione della guida, ad esempio se @media (prefers-reduced-motion: reduce) è stato osservato quando è un requisito.
  2. Questi script Playwright vengono calibrati continuamente rispetto a un'implementazione demo di riferimento "corretta" che prevede un tasso di superamento del 100%. Dall'altro lato, gli script vengono confrontati con un'implementazione volutamente difettosa che prevede un tasso di superamento dello 0%.
  3. Se una o entrambe le implementazioni "corrette" e volutamente difettose non riescono a produrre tassi di superamento del 100% e dello 0%, rispettivamente, un generatore riprova automaticamente utilizzando il contesto fino a quando non viene raggiunta una calibrazione del 100%.
  4. Infine, vengono applicate valutazioni end-to-end su un'applicazione di base. Una di queste valutazioni non è guidata, è un controllo e utilizza i dati di addestramento predefiniti senza richiamare le skill di Modern Web Guidance per completare un'attività. Un'altra valutazione (l'esperimento) affronta la stessa attività utilizzando le skill di Modern Web Guidance.

Le nostre valutazioni vengono eseguite quotidianamente con modelli e agenti di codifica all'avanguardia, fornendoci un'immagine chiara del rendimento degli agenti con e senza le nostre indicazioni. In media, i risultati iniziali 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 codifica agentici che preferisci.

Passaggi successivi

Ora hai una panoramica generale di Modern Web Guidance e del potenziale che ha per semplificare l'adozione delle best practice web moderne nel flusso di lavoro di codifica AI. Ora puoi esplorare le skill e i casi d'uso forniti da Modern Web Guidance.