Scegli le competenze di Modern Web Guidance elencate in base alla fase attuale del ciclo di vita dello sviluppo web, dallo stile iniziale all'implementazione finale della sicurezza.
Discipline web di base
Orchestratori per aiutarti a perfezionare e concentrare il tuo lavoro in base alla disciplina web.
accessibility
/modern-web-guidance accessibility
Funge da guida di controllo centrale per valutare, correggere e implementare pattern di accessibilità efficaci in tutta l'applicazione.
Visualizza la competenza accessibility su GitHub
performance
/modern-web-guidance performance
Ti aiuta a ottimizzare Core Web Vitals, ridurre le latenze dei tempi di caricamento delle pagine e migliorare la reattività all'input dell'utente.
Visualizza la competenza performance su GitHub
user-experience
/modern-web-guidance user-experience
Funge da toolkit dell'interfaccia utente (UI) per implementare rapidamente elementi personalizzati responsive, transizioni fluide e pattern di stile moderni.
Visualizza la competenza user-experience su GitHub
Tecnologie web
Queste competenze di base forniscono i blocchi costitutivi essenziali per qualsiasi applicazione moderna, garantendo che il tuo progetto inizi con le best practice moderne, tenendo conto di HTML semantico, velocità e interoperabilità.
html
/modern-web-guidance html
Linee guida orientate all'azione per l'architettura HTML moderna, la semantica, le API interattive native (Dialog, Popover, Details), la gestione dello stato attivo e la definizione della priorità delle risorse. Utilizza questa guida quando strutturi documenti web, implementi overlay nativi o ottimizzi l'ordine di caricamento delle risorse.
Visualizza la competenza html su GitHub
css
/modern-web-guidance css
Linee guida orientate all'azione per l'architettura, i layout e le prestazioni CSS moderni. Utilizza questa guida quando crei stili, gestisci sistemi di progettazione o ottimizzi il rendering web.
Visualizza la competenza css su GitHub
css-layout
/modern-web-guidance css-layout
Layout CSS moderni come flexbox, grid, subgrid, query sui contenitori, posizionamento degli ancoraggi e dimensionamento intrinseco. Utilizza questa competenza quando progetti componenti UI o layout di pagina responsive.
Visualizza la competenza css-layout su GitHub
forms
/modern-web-guidance forms
Best practice per la creazione di moduli web accessibili, sicuri e di facile utilizzo. Utilizza questa guida quando crei o modifichi moduli, input e flussi di invio.
Visualizza la competenza forms su GitHub
cpp-on-the-web
/modern-web-guidance cpp-on-the-web
Compilazione di C e C++ per il web moderno utilizzando WebAssembly. Utilizza questa competenza quando devi eseguire il porting del codice C++, creare librerie C++ con Emscripten o configurare componenti C++ ad alte prestazioni nel browser.
Visualizza la competenza cpp-on-the-web su GitHub
Funzionalità del browser (attivazione facoltativa)
Queste competenze ti aiutano a sviluppare estensioni di Chrome che seguono standard moderni come Manifest V3 e a semplificare la pubblicazione nel Chrome Web Store, aiutandoti a preparare metadati, norme sulla privacy e giustificazioni delle autorizzazioni. Queste competenze sono facoltative e non sono attivate per impostazione predefinita.
chrome-extensions
/modern-web-guidance chrome-extensions
Crea estensioni di Chrome sicure e conformi a Manifest V3 che evitino le insidie comuni del ciclo di vita dei service worker e del sandboxing. Per attivare questa competenza, devi specificare chrome-extensions:
npx skills add GoogleChrome/modern-web-guidance --skill chrome-extensions
Visualizza la competenza chrome-extensions su GitHub
Sicurezza, fiducia e identità
Queste competenze si concentrano sulla fiducia degli utenti proteggendo le applicazioni da exploit lato client come XSS tramite intestazioni HTTP difensive e isolamento dell'origine. Gli sviluppatori possono anche sviluppare flussi di autenticazione con passkey, ridurre al minimo il monitoraggio di terze parti e utilizzare le competenze per eseguire il porting delle librerie C/C++ nei moduli WebAssembly.
security
/modern-web-guidance security
Linee guida per la sicurezza preventiva per gli sviluppatori web (XSS, CSP, cookie, isolamento dell'origine incrociata). Utilizza questa competenza per guidare il processo di controllo, test e deployment sicuro delle norme sulla sicurezza.
Visualizza la competenza security su GitHub
passkeys
/modern-web-guidance passkeys
Orientamento completo e principi trasversali per l'implementazione di WebAuthn e passkey nelle applicazioni web. Utilizza questa guida quando gestisci la registrazione, l'autenticazione, la gestione o la riautenticazione delle passkey.
Visualizza la competenza passkeys su GitHub
privacy
/modern-web-guidance privacy
Linee guida orientate all'azione per gli sviluppatori web per implementare la privacy by design, la minimizzazione dei dati, i controlli di terze parti e la gestione sicura dei dati. Utilizza questa competenza quando progetti applicazioni, integri servizi di terze parti, gestisci i dati utente o configuri le intestazioni di sicurezza.
Visualizza la competenza privacy su GitHub
Sistemi agentici
Queste competenze ti aiutano a colmare il divario tra la tua applicazione web e i flussi di lavoro AI con WebMCP. Esponendo le funzionalità del browser lato client come strumenti interattivi, puoi istruire gli agenti AI a interagire direttamente con le funzionalità dell'applicazione.
webmcp
/modern-web-guidance webmcp
Implementa WebMCP per esporre le funzionalità del browser lato client come strumenti interattivi per gli agenti AI.
Visualizza la competenza webmcp su GitHub
Passaggi successivi
Ora che hai compreso Modern Web Guidance, provalo tu stesso. Scopri le funzionalità e i casi d'uso supportati in Modern Web Guidance e prova alcuni prompt di esempio per iniziare.