Aan de slag met Modern Web Guidance

Modern Web Guidance is een reeks vaardigheden die expertise over webplatforms, best practices en gegevens over browsercompatibiliteit rechtstreeks in je programmeeragents inbedden. Zo kun je je programmeeragents wegleiden van verouderde patronen en naar oplossingen die de kracht en mogelijkheden van het moderne webplatform benutten.

Installatie

Modern Web Guidance kan worden geïnstalleerd en gebruikt met elke programmeeragent die vaardigheden ondersteunt.

De aanbevolen installatiemethode is via de modern-web-guidance CLI die is ontwikkeld door het Chrome-team. Als je Modern Web Guidance installeert via de modern-web-guidance CLI, worden automatische updates aangezet. Je kunt de installatie als volgt uitvoeren vanuit de modern-web-guidance-CLI:

npx modern-web-guidance@latest install

Als je Chrome-extensies ontwikkelt, raden we je aan de volgende opdracht te gebruiken:

npx modern-web-guidance@latest install --choose

Hiermee wordt een interactieve wizard uitgevoerd om de vaardigheden volgens je voorkeuren te installeren.

Als je Modern Web Guidance wilt installeren zonder de modern-web-guidance CLI te gebruiken, neem je de volgende agentspecifieke instructies door. Houd er rekening mee dat de meeste van deze opties geen automatische updates ondersteunen.

Antigravity

Download Antigravity en zet modern-web-guidance aan tijdens het installatieproces of op de pagina Instellingen onder Aanpassingen en dan 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 Modern Web Guidance in de Skill Manager, beschikbaar onder Instellingen > AI-assistent > Vaardigheden. Selecteer een vaardigheid om de detailpagina te openen. Klik op de knop Installeren om de vaardigheid te installeren en 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

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

Claude Code CLI

De installatie van Modern Web Guidance voor gebruik met de Claude Code CLI bestaat uit 3 stappen:

1. Voeg de marktplaats toe:

/plugin marketplace add GoogleChrome/modern-web-guidance

2. Installeer de plug-in via de marktplaats:

/plugin install modern-web-guidance@googlechrome

3. Plug-ins opnieuw laden:

/reload-plugins

Codex

codex plugin marketplace add GoogleChrome/modern-web-guidance
codex plugin add modern-web-guidance@googlechrome

Copilot CLI

Je installeert Modern Web Guidance voor gebruik met Copilot in 2 stappen:

1. Voeg de marktplaats toe:

/plugin marketplace add GoogleChrome/modern-web-guidance

2. Installeer de plug-in via de marktplaats:

/plugin install modern-web-guidance@googlechrome

Gans

goose plugin install https://github.com/GoogleChrome/modern-web-guidance --auto-update

Grok

grok plugin install https://github.com/GoogleChrome/modern-web-guidance --trust

Kimi Code

/plugins install https://github.com/GoogleChrome/modern-web-guidance

Verken de app voordat je deze installeert

Evalueer de bibliotheek met gidsen van Modern Web Guidance vóór de installatie door te zoeken met een query of door onze gidsen op te halen op ID. Gebruik hiervoor de opdracht search van de CLI om de use case-ID te vinden met een prompt:

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

Dit voert een json-object uit in je terminal:

[{"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":"ui-behaviors","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":"ui-behaviors","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":"ui-behaviors","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-waarden te lezen, kunt u de id kiezen die het beste bij uw doel past en de opdracht retrieve gebruiken:

npx modern-web-guidance@latest retrieve "animate-to-from-top-layer"

In dit geval wordt de Markdown-handleiding voor de use case animate-to-from-top-layer getoond in de terminal. Voor andere gidsen vervang je animate-to-from-top-layer door een geldige gids-ID.

Waarom zou je Modern Web Guidance gebruiken?

Modern Web Guidance biedt webontwikkelaars om 3 verschillende redenen een voordeel ten opzichte van AI-modellen zonder hulp:

  1. AI-programmeeragents gebruiken meestal oudere, verouderde oplossingen voor moderne problemen met webontwikkeling. Deze oplossingen bevatten vaak JavaScript om functionaliteit te bieden voor problemen die beter kunnen worden opgelost met moderne css- en HTML-API's.
  2. AI-modellen waren in het verleden niet op de hoogte van de nieuwste webplatformfuncties of hadden onjuiste informatie hierover.
  3. Tot slot geven AI-modellen vaak verouderde aanbevelingen die geen rekening houden met projectvereisten of criteria voor browserondersteuning, in plaats van de richtlijnen af te stemmen op de Baseline-vereisten van een bepaald project.

Modern Web Guidance pakt deze tekortkomingen aan en zorgt dat je AI-ondersteunde programmeerworkflow de tools heeft om nieuwere webplatformfuncties als eerste te gebruiken, met fallbacks in gedachten.

Wat zit er in Modern Web Guidance?

Modern Web Guidance bevat best practices voor meer dan 100 use cases voor webontwikkeling in verschillende kerndisciplines. Onder de motorkap is het een agentvaardigheid die je programmeeragent instrueert hoe die de modern-web-guidance CLI aanroept om de beste richtlijnen voor je use case te vinden en op te halen.

  • Gebruikerservaring: Weergaveovergangen, CSSscrollbar-color-stijlen en animaties bij openen en sluiten.
  • CSS: containerquery's, moderne kleurruimten zoals oklch, CSS-subgrid-indeling, text-wrap en typografische regelhoogte inkorten.
  • Prestaties: Diagnostische gegevens voor Interaction to Next Paint (INP), scheduler.yield om lange taken op te splitsen, achtergrondtaken te plannen en prioriteit te geven aan het laden van afbeeldingen.
  • Formulieren: Invoervelden met automatisch formaat (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 beheer van toetsenbordfocus.
  • Ingebouwde AI: Gebruik lokale clientmodellen op het apparaat (native API's voor taaldetectie, samenvatting en vertaling).
  • Toegangssleutels: Registratie, verificatie en beheer van toegangssleutels.

Dit zijn een paar van de gidsen uit elke categorie. Als je alle handleidingen wilt bekijken, ga je naar de volledige lijst met handleidingen.

Basislijn

Baseline maakt voor ontwikkelaars duidelijk welke webfuncties interoperabel zijn in de belangrijkste browserengines. Als een webfunctie Baseline is, kun je vertrouwen op het niveau van browsercompatibiliteit. Webfuncties vallen in een van de 3 categorieën die door Baseline zijn gedefinieerd:

  • Beperkte beschikbaarheid betekent dat de functie niet interoperabel is.
  • Nieuw beschikbaar betekent dat de functie in de afgelopen 30 maanden interoperabel is geworden.
  • Algemeen beschikbaar betekent dat de functie al minstens 30 maanden interoperabel is.

Baseline is een definitie voor interoperabiliteit van webfuncties, maar is ook een configureerbaar aspect van je project. Je kunt een Baseline-doel kiezen en je project instellen om dit te gebruiken door het toe te voegen aan je AGENTS.md- of CLAUDE.md-bestand, bijvoorbeeld:

This project's Baseline target is Baseline 2024.

<other project info...>

Modern Web Guidance en alternatieve functies

Modern Web Guidance gebruikt een breed scala aan moderne webfuncties. Sommige hiervan zijn misschien Nieuw of Breed beschikbaar in de Baseline, maar andere zijn misschien Beperkt beschikbaar. In gevallen waarin een functie niet algemeen beschikbaar is, bieden use case-handleidingen medewerkers specifieke instructies om te zorgen voor bredere compatibiliteit in browsers die de functie niet ondersteunen. In veel gevallen worden fallbacks geïmplementeerd als progressive enhancements, waarbij de moderne functie kan worden gebruikt waar deze wordt ondersteund. Als er polyfills nodig zijn voor niet-ondersteunde browsers, krijgen agents altijd de instructie om deze voorwaardelijk te laden, zodat ze alleen kosten maken als dat nodig is.

Hoe wordt de nauwkeurigheid gewaarborgd?

Elke use case in Modern Web Guidance bevat een reeks evaluaties die voortdurend worden gekalibreerd om uitvoer van hoge kwaliteit te garanderen.

Use case-evaluaties voeren een geautomatiseerde QA-harness uit om te testen of de agent zich correct gedraagt. Playwright speelt hierbij een centrale rol:

  1. Voor elke handleiding wordt een Playwright-script ontwikkeld om te testen of de implementatiegegevens van de handleiding zijn gevolgd, bijvoorbeeld of @media (prefers-reduced-motion: reduce) is waargenomen waar dit een vereiste is.
  2. Deze Playwright-scripts worden continu gekalibreerd op basis van een 'correcte' referentiedemo-implementatie die een slagingspercentage van 100% verwacht. Aan de andere kant controleren de scripts op een opzettelijk onjuiste implementatie die een slagingspercentage van 0% verwacht.
  3. Als een of beide van de 'correcte' en opzettelijk onjuiste implementaties geen slagingspercentages van respectievelijk 100% en 0% opleveren, probeert een generator het automatisch opnieuw met behulp van de context totdat een kalibratie van 100% is bereikt.
  4. Tot slot worden end-to-end-evaluaties op een basis-app toegepast. Een van deze evaluaties is onbegeleid. Dit is een controle waarbij de standaard trainingsgegevens worden gebruikt zonder Modern Web Guidance aan te roepen om een taak te voltooien. Een andere evaluatie (het experiment) pakt dezelfde taak aan met Modern Web Guidance.

Onze evaluaties worden meerdere keren per week uitgevoerd met geavanceerde modellen en programmeeragents, waardoor we een duidelijk beeld krijgen van hoe goed agents presteren met en zonder onze begeleiding. De eerste resultaten tonen gemiddeld een verbetering van 37 procentpunten in de naleving van moderne best practices wanneer agents zijn uitgerust met Modern Web Guidance. Je resultaten kunnen variëren, afhankelijk van je projectvereisten, model, de prompts die je schrijft en de agentic-coderingstools die je voorkeur hebben.

Volgende stappen

Je hebt nu een algemeen overzicht van Modern Web Guidance en de mogelijkheden om best practices voor het moderne web makkelijker te implementeren in je AI-coderingsworkflow. Je kunt nu de handleidingen van Modern Web Guidance verkennen.