Modern Web Guidance is een agentvaardigheid die moderne best practices toepast op uw AI-ondersteunde codeerworkflow. Het helpt uw codeeragent weg te sturen van verouderde oplossingen voor veelvoorkomende webontwikkelingsproblemen en in plaats daarvan oplossingen te gebruiken die gebruikmaken van nieuwere webplatformfuncties.
Installatie
Moderne webbegeleidingsfuncties kunnen in een breed scala aan agents worden geïnstalleerd, waardoor u uw favoriete workflow kunt behouden en tegelijkertijd kunt profiteren van de begeleiding die ze bieden.
modern-web-guidance CLI (aanbevolen)
De aanbevolen installatiemethode is via de modern-web-guidance CLI, ontwikkeld door het Chrome-team. Door de skills via de modern-web-guidance CLI te installeren, blijven ze automatisch up-to-date. Je kunt de skills als volgt installeren via de modern-web-guidance CLI:
npx modern-web-guidance@latest install
Optioneel, als u Chrome-extensies ontwikkelt, raden we de volgende opdracht aan:
npx modern-web-guidance@latest install --choose
Hiermee start een interactieve wizard om de vaardigheden naar uw voorkeur te installeren.
Als u liever gebruikmaakt van de Modern Web Guidance-functionaliteit zonder de modern-web-guidance CLI te gebruiken, lees dan verder om te leren hoe u deze voor uw favoriete agent kunt installeren.
Antizwaartekracht
Download Antigravity en schakel 'modern-web-guidance' in tijdens de installatie, of via je instellingenpagina onder Aanpassingen en vervolgens Bouwen met Google-plug-ins .
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
Je vindt de vaardigheden voor moderne webbegeleiding in de vaardighedenbeheerder , te vinden onder Instellingen > AI-assistent > Vaardigheden . Selecteer een vaardigheid om de detailpagina te openen. Om de vaardigheid te installeren, klik je op de knop Installeren om deze toe te passen op de huidige IDE-instantie.
GitHub CLI
gh skill install GoogleChrome/modern-web-guidance
npx skills
npx skills add GoogleChrome/modern-web-guidance
Claude Code
Het installeren van Modern Web Guidance voor gebruik met Claude Code bestaat uit drie stappen:
1. Voeg de marktplaats toe:
/plugin marketplace add GoogleChrome/modern-web-guidance
2. Installeer de plugin vanuit de marketplace:
/plugin install modern-web-guidance@googlechrome
3. Plug-ins opnieuw laden:
/reload-plugins
Copilot CLI
Het installeren van Modern Web Guidance voor gebruik met Copilot bestaat uit twee stappen:
1. Voeg de marktplaats toe:
/plugin marketplace add GoogleChrome/modern-web-guidance
2. Installeer de plugin vanuit de marketplace:
/plugin install modern-web-guidance@googlechrome
Gans
goose plugin install https://github.com/GoogleChrome/modern-web-guidance --auto-update
Onderzoek de installatie voordat u deze installeert.
Evalueer de bibliotheek met handleidingen voor Modern Web Guidance vóór de installatie door te zoeken met een query of door onze handleidingen op te halen aan de hand van hun ID. Gebruik hiervoor de opdrachtregelopdracht ' search ' om de use case-ID te vinden via een prompt:
npx modern-web-guidance@latest search "animate a dialog modal backdrop"
Dit zal een JSON-object in je terminal weergeven:
[{"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}]
Door de description te lezen, kunt u vervolgens de id kiezen die het beste bij uw doel past en de retrieve gebruiken.
npx modern-web-guidance@latest retrieve "animate-to-from-top-layer"
In dit geval wordt de Markdown-handleiding voor het gebruiksscenario animate-to-from-top-layer in de terminal weergegeven. Voor andere gebruiksscenario's vervangt u animate-to-from-top-layer door een geldig gebruiksscenario-ID .
Waarom zou u Modern Web Guidance gebruiken?
Moderne webbegeleidingsvaardigheden bieden webontwikkelaars voordelen ten opzichte van AI-modellen zonder ondersteuning, en wel om drie specifieke redenen:
- AI-codeerprogramma's grijpen vaak terug op oudere, verouderde oplossingen voor moderne webontwikkelingsproblemen. Deze oplossingen bevatten vaak JavaScript om functionaliteit te bieden voor problemen die beter opgelost kunnen worden met moderne CSS- en HTML-API's.
- AI-modellen zijn zich historisch gezien niet bewust geweest van, of beschikken over onjuiste informatie over, de nieuwste functies van webplatformen.
- Ten slotte geven AI-modellen vaak verouderde aanbevelingen die geen rekening houden met projectvereisten of criteria voor browserondersteuning, in plaats van advies af te stemmen op de basisvereisten van een bepaald project.
Moderne webbegeleidingsvaardigheden pakken deze tekortkomingen aan en zorgen ervoor dat uw AI-ondersteunde codeerworkflow over de tools beschikt om als eerste nieuwe webplatformfuncties te implementeren – en met terugvalopties in gedachten.
Wat houdt Modern Web Guidance in?
Modern Web Guidance bevat best practices voor meer dan 100 webontwikkelingsscenario's binnen verschillende kerndisciplines. In feite is het een enkele agentvaardigheid die uw codeeragent instrueert hoe de modern-web-guidance CLI aan te roepen om de beste richtlijnen voor uw specifieke scenario te vinden en op te halen.
- Gebruikerservaring: Weergaveovergangen, CSS
scrollbar-coloren animaties voor het openen en sluiten van pagina's. - CSS: Containerqueries, moderne kleurruimtes zoals
oklch, CSS subgrid-layout,text-wrapen het aanpassen van de regelhoogte van typografie. - Prestaties: Interactie met Next Paint (INP)-diagnostiek,
scheduler.yieldvoor het opsplitsen van lange taken, planning van achtergrondtaken en prioritering van het laden van afbeeldingen. - Formulieren: Automatisch formaat aanpassende invoervelden (
field-sizing: content) en nauwkeurige validatiestijlen met:user-invalid. - Ingebouwde UI-componenten: directe controle over dialoogvensters, CSS-ankerpositionering voor tooltips en
popover. - Toegankelijkheid: Toegankelijke foutmeldingen en toetsenbordfocusbeheer.
- Ingebouwde AI: Gebruik lokale, op het apparaat zelf ontwikkelde clientmodellen (eigen API's voor taaldetectie, samenvatting en vertaling).
- Passkeys: Registratie, authenticatie en beheer van passkeys.
Dit zijn enkele toepassingsvoorbeelden uit elk vakgebied. Om alle toepassingsvoorbeelden te bekijken, kunt u de volledige lijst raadplegen.
Basislijn
Baseline biedt ontwikkelaars duidelijkheid over welke webfuncties compatibel zijn met de belangrijkste browserengines. Als een webfunctie de status 'Baseline' heeft, kunt u vertrouwen op de mate van browsercompatibiliteit. Webfuncties vallen in een van de drie categorieën die door Baseline worden gedefinieerd:
- Beperkte beschikbaarheid betekent dat de functie niet interoperabel is.
- Nieuw beschikbaar betekent dat de functie de afgelopen 30 maanden interoperabel is geworden.
- Breed beschikbaar betekent dat de functie al minstens 30 maanden interoperabel is.
Hoewel Baseline een definitie is voor de interoperabiliteit van webfuncties, is het ook een configureerbaar aspect van uw project. U kunt een Baseline-doel kiezen en vervolgens uw project configureren om dit te gebruiken door het bijvoorbeeld toe te voegen aan uw AGENTS.md of CLAUDE.md bestand:
This project's Baseline target is Baseline 2024.
<other project info...>
Moderne webrichtlijnen en terugvalopties voor functies
Modern Web Guidance maakt gebruik van een breed scala aan moderne webfuncties. Sommige hiervan zijn standaard, nieuw of breed beschikbaar, terwijl andere beperkt beschikbaar zijn. In gevallen waarin een functie niet breed beschikbaar is, bieden gebruiksscenario's agenten specifieke instructies over hoe bredere compatibiliteit te garanderen in browsers die de functie niet ondersteunen. In veel gevallen worden terugvalopties geïmplementeerd als progressieve verbeteringen, waarbij de moderne functie overal kan worden gebruikt waar deze wordt ondersteund. Als een polyfill nodig is voor niet-ondersteunde browsers, krijgen agenten altijd de instructie om deze voorwaardelijk te laden, zodat er alleen kosten ontstaan waar nodig.
Hoe wordt de nauwkeurigheid gewaarborgd?
Elk gebruiksscenario in Modern Web Guidance bevat een handleiding, en de meeste gebruiksscenario's worden continu bijgesteld om AI-agenten naar kwalitatief hoogwaardige output te leiden.
Gebruiksscenario's die gekalibreerd zijn, maken gebruik van een geautomatiseerd QA-systeem om het correcte gedrag van de agent te testen, waarbij Playwright een centrale rol speelt:
- Voor elke handleiding wordt een Playwright-script ontwikkeld om te testen of de implementatiedetails van de handleiding zijn gevolgd – bijvoorbeeld of
@media (prefers-reduced-motion: reduce)is nageleefd waar dit een vereiste is. - Deze Playwright-scripts worden continu gekalibreerd aan de hand van een "correcte" referentie-demo-implementatie die een slagingspercentage van 100% verwacht. Aan de andere kant controleren de scripts een opzettelijk gebrekkige implementatie die een slagingspercentage van 0% verwacht.
- Als een van beide, of beide, de "correcte" implementaties en/of de opzettelijk gebrekkige implementaties er niet in slagen om respectievelijk 100% en 0% slagingspercentages te behalen, zal een generator automatisch opnieuw proberen met behulp van context totdat een kalibratie van 100% is bereikt.
- Ten slotte worden end-to-end evaluaties uitgevoerd op een basisapplicatie. Een van deze evaluaties is een controle-evaluatie, waarbij de standaard trainingsgegevens worden gebruikt zonder de Modern Web Guidance-functionaliteit in te zetten om een taak te voltooien. De andere evaluatie (het experiment) behandelt dezelfde taak met behulp van Modern Web Guidance-functionaliteit.
Onze evaluaties worden dagelijks uitgevoerd met geavanceerde modellen en codeeragents, waardoor we een duidelijk beeld krijgen van hoe goed agents presteren met en zonder onze begeleiding. Gemiddeld laten de eerste resultaten een verbetering van 37 procentpunten zien in de naleving van moderne best practices wanneer agents zijn uitgerust met Modern Web Guidance. Uw resultaten kunnen echter variëren, afhankelijk van uw projectvereisten, model, de prompts die u schrijft en uw voorkeurstools voor agentcodering.
Volgende stappen
Nu heb je een algemeen overzicht van Modern Web Guidance en de mogelijkheden die het biedt om de implementatie van moderne webbest practices in je AI-codeerworkflow te vereenvoudigen. Je kunt nu de vaardigheden en toepassingsmogelijkheden van Modern Web Guidance verder verkennen.