Modern Web Guidance



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.

Installa con l'interfaccia a riga di comando di modern-web-guidance (consigliato):

npx modern-web-guidance@latest install
Per iniziare Visualizza su GitHub

Funziona con il tuo agente di programmazione AI preferito

Modern Web Guidance può essere utilizzato con i tuoi agenti di programmazione AI preferiti, garantendoti l'accesso a indicazioni sulle best practice per il web moderno nel tuo flusso di lavoro preferito.
Visualizza tutte le opzioni di installazione

Installa Modern Web Guidance nel tuo progetto utilizzando le skill dell'agente di Vercel:

npx skills add GoogleChrome/modern-web-guidance

Installa Modern Web Guidance dai plug-in di Claude Code:

claude plugin install modern-web-guidance@claude-plugins-official

Installa le skill Modern Web Guidance per l'interfaccia a riga di comando di Copilot:

# 1. Add the marketplace:
/plugin marketplace add GoogleChrome/modern-web-guidance
# 2. Install the plugin
/plugin install modern-web-guidance@googlechrome

Installa le competenze Modern Web Guidance per Antigravity CLI:

agy plugin install https://github.com/GoogleChrome/modern-web-guidance
Guarda la sessione Modern Web Guidance al Google I/O per scoprire di più sulle competenze e su come migliorano il tuo flusso di lavoro di sviluppo web assistito dall'AI.
Guarda ora

Prompt per esperienze utente migliori

Prova alcuni dei seguenti prompt di esempio per richiamare Modern Web Guidance nel tuo flusso di lavoro di programmazione assistita dall'AI per creare nuove funzionalità, modernizzare il codice legacy e velocizzare la tua app. 
Create an accordion-style stats component that smoothly animates on open and close.
 
Build a tab bar with a sliding highlight that tracks active items using CSS Anchor Positioning.
 
Design a dashboard card that uses container queries to adapt its layout to its own width.
 
Update legacy modal window implementations to use the <dialog> element and animate them using modern CSS features.
 
Migrate legacy tooltips to use the Popover API and CSS Anchor Positioning.
 
Implement a passkey-based login flow using the latest WebAuthn features.
 
Implement a starter Content Security Policy (CSP) without breaking my app.
 
Perform a security audit of my site and suggest improvements.
 
Set up my app to begin preloading pages when users hover over important links.
 
My app has lots of long tasks, and its INP is affected. Help me fix it.
 
Help me improve my app's LCP.
Scopri come guidare i tuoi assistenti di coding AI per produrre codice web interoperabile e all'avanguardia. In questo codelab introduttivo, eseguirai l'audit di un'app web legacy e utilizzerai lo strumento Modern Web Guidance per chiedere agli agenti di adottare le best practice moderne. Scopri come impostare i target dei browser Baseline, ottimizzare i Core Web Vitals e trasformare gli output generici dell'AI in soluzioni web ad alte prestazioni.
Per iniziare
Combina Chrome DevTools per agenti con le competenze di Modern Web Guidance per migliorare il tuo workflow di sviluppo web. Esegui controlli delle prestazioni in tempo reale, ispeziona gli alberi di accessibilità e acquisisci i log della console, quindi applica automaticamente correzioni precise del codice web moderno.
Scopri di più

Scopri come contribuire

Hai idee su come migliorare Modern Web Guidance? Scopri come puoi contribuire.
Scopri di più