Modern Web Guidance to zestaw umiejętności, który pozwala bezpośrednio wbudować w agenty kodujące wiedzę o platformie internetowej, sprawdzone metody i dane o zgodności z przeglądarkami. Pomaga to odciągnąć agentów kodujących od starszych wzorców i skierować ich w stronę rozwiązań, które wykorzystują możliwości nowoczesnej platformy internetowej.
Instalacja
Narzędzie Modern Web Guidance można zainstalować i używać z dowolnym agentem kodowania, który obsługuje umiejętności.
Interfejs wiersza poleceń modern-web-guidance (zalecany)
Zalecana metoda instalacji to użycie interfejsu wiersza poleceń modern-web-guidance utworzonego przez zespół Chrome. Instalacja Modern Web Guidance za pomocą interfejsu wiersza poleceń modern-web-guidance umożliwi automatyczne aktualizacje. Możesz zainstalować go z interfejsu wiersza poleceń modern-web-guidance w ten sposób:
npx modern-web-guidance@latest install
Jeśli tworzysz rozszerzenia do Chrome, zalecamy użycie tego polecenia:
npx modern-web-guidance@latest install --choose
Uruchomi się interaktywny kreator, który zainstaluje umiejętności zgodnie z Twoimi preferencjami.
Jeśli chcesz zainstalować Modern Web Guidance bez użycia interfejsu wiersza poleceń modern-web-guidance, zapoznaj się z instrukcjami dotyczącymi konkretnego agenta. Pamiętaj, że większość z tych opcji nie obsługuje automatycznych aktualizacji.
Antigravity
Pobierz Antigravity i włącz „modern-web-guidance” podczas instalacji lub na stronie Ustawienia w sekcji Dostosowania, a następnie Wtyczki Build with Google.
Antigravity CLI
agy plugin install https://github.com/GoogleChrome/modern-web-guidance
Interfejs wiersza poleceń Gemini
gemini extensions install https://github.com/GoogleChrome/modern-web-guidance --auto-update
JetBrains WebStorm
Modern Web Guidance znajdziesz w Menedżerze umiejętności, który jest dostępny w sekcji Ustawienia > Asystent AI > Umiejętności. Wybierz umiejętność, aby otworzyć stronę z informacjami o niej. Aby zainstalować umiejętność, kliknij przycisk Zainstaluj, aby zastosować ją do bieżącej instancji IDE.
interfejs wiersza poleceń GitHub,
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
Interfejs wiersza poleceń Claude Code
Instalacja Modern Web Guidance do użytku z interfejsem wiersza poleceń Claude Code obejmuje 3 kroki:
1. Dodaj platformę handlową:
/plugin marketplace add GoogleChrome/modern-web-guidance
2. Zainstaluj wtyczkę z Marketplace:
/plugin install modern-web-guidance@googlechrome
3. Ponownie załaduj wtyczki:
/reload-plugins
Codex
codex plugin marketplace add GoogleChrome/modern-web-guidance
codex plugin add modern-web-guidance@googlechrome
Interfejs wiersza poleceń Copilot
Instalowanie Modern Web Guidance do użycia z Copilotem składa się z 2 kroków:
1. Dodaj platformę handlową:
/plugin marketplace add GoogleChrome/modern-web-guidance
2. Zainstaluj wtyczkę z Marketplace:
/plugin install modern-web-guidance@googlechrome
Gęś
goose plugin install https://github.com/GoogleChrome/modern-web-guidance --auto-update
Grok
grok plugin install https://github.com/GoogleChrome/modern-web-guidance --trust
Kod Kimi
/plugins install https://github.com/GoogleChrome/modern-web-guidance
Przeglądanie przed instalacją
Przed instalacją zapoznaj się z biblioteką przewodników Modern Web Guidance, wyszukując je za pomocą zapytania lub pobierając według identyfikatora. Aby to zrobić, użyj polecenia search interfejsu wiersza poleceń, aby znaleźć identyfikator zgłoszenia za pomocą prompta:
npx modern-web-guidance@latest search "animate a dialog modal backdrop"
W terminalu pojawi się obiekt 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":"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}]
Po odczytaniu wartości description możesz wybrać id, który najlepiej odzwierciedla Twój cel, i użyć polecenia retrieve:
npx modern-web-guidance@latest retrieve "animate-to-from-top-layer"
W takim przypadku w terminalu wyświetli się przewodnik Markdown dotyczący przypadku użycia animate-to-from-top-layer. W przypadku innych przewodników zastąp animate-to-from-top-layer dowolnym prawidłowym identyfikatorem przewodnika.
Dlaczego warto korzystać z Modern Web Guidance?
Modern Web Guidance zapewnia programistom stron internetowych korzyści w porównaniu z modelami AI bez asysty z 3 powodów:
- Asystenci kodowania AI zwykle domyślnie stosują starsze, nieaktualne rozwiązania problemów związanych z nowoczesnym tworzeniem stron internetowych. Te rozwiązania często zawierają kod JavaScript, który zapewnia funkcje rozwiązujące problemy, które można lepiej rozwiązać za pomocą nowoczesnych interfejsów API CSS i HTML.
- Modele AI zwykle nie mają informacji o najnowszych funkcjach platformy internetowej lub mają nieprawidłowe informacje.
- Modele AI mają też tendencję do generowania nieaktualnych rekomendacji, które nie uwzględniają wymagań projektu ani kryteriów obsługi przeglądarki, zamiast dostosowywać wskazówki do wymagań Baseline danego projektu.
Modern Web Guidance rozwiązuje te problemy i zapewnia, że proces kodowania wspomagany przez AI ma narzędzia, które pozwalają na wdrażanie nowszych funkcji platformy internetowej w pierwszej kolejności – z uwzględnieniem rozwiązań zastępczych.
Co zawiera Modern Web Guidance?
Modern Web Guidance zawiera sprawdzone metody dotyczące ponad 100 przypadków użycia w zakresie tworzenia stron internetowych w kilku podstawowych dyscyplinach. W tle jest to umiejętność agenta, która instruuje agenta kodowania, jak wywołać interfejs wiersza poleceń modern-web-guidance, aby znaleźć i pobrać najlepsze wskazówki dotyczące Twojego przypadku użycia.
- Wrażenia użytkownika: przejścia widoku, style CSS
scrollbar-colororaz animacje wejścia i wyjścia. - CSS: zapytania o kontenery, nowoczesne przestrzenie barw, takie jak
oklch, układ podsiatki CSS,text-wrapi przycinanie wysokości linii typografii. - Wydajność: diagnostyka interakcji do kolejnego wyrenderowania (INP),
scheduler.yielddo dzielenia długich zadań, planowanie zadań w tle i priorytetyzacja wczytywania obrazów. - Formularze: pola do wprowadzania danych z automatycznym dopasowywaniem rozmiaru (
field-sizing: content) i dokładne style sprawdzania poprawności za pomocą:user-invalid. - Wbudowane komponenty interfejsu: bezpośrednia kontrola nad oknami, pozycjonowanie kotwicy CSS w przypadku etykietek i
popover. - Ułatwienia dostępu: dostępne powiadomienia o błędach i zarządzanie zaznaczeniem klawiatury.
- Wbudowana AI: korzystaj z lokalnych modeli klienta na urządzeniu (natywne interfejsy API do wykrywania języka, podsumowywania i tłumaczenia).
- Klucze dostępu: rejestracja, uwierzytelnianie i zarządzanie kluczami dostępu.
Oto kilka przewodników z każdej kategorii. Aby zobaczyć wszystkie przewodniki, możesz wyświetlić pełną listę przewodników.
Punkt odniesienia
Baseline zapewnia deweloperom przejrzystość w zakresie funkcji internetowych, które są interoperacyjne w głównych silnikach przeglądarek. Jeśli funkcja internetowa jest w Baseline, możesz mieć pewność, że jest zgodna z przeglądarkami. Funkcje internetowe należą do jednej z 3 kategorii zdefiniowanych przez Baseline:
- Ograniczona dostępność oznacza, że funkcja nie jest interoperacyjna.
- Nowo dostępne oznacza, że funkcja stała się interoperacyjna w ciągu ostatnich 30 miesięcy.
- Szeroko dostępna oznacza, że funkcja jest interoperacyjna od co najmniej 30 miesięcy.
Chociaż Baseline to definicja interoperacyjności funkcji internetowych, jest to też konfigurowalny aspekt projektu. Możesz wybrać cel Baseline, a następnie skonfigurować projekt tak, aby go używał, dodając go do pliku AGENTS.md lub CLAUDE.md, na przykład:
This project's Baseline target is Baseline 2024.
<other project info...>
Modern Web Guidance i funkcje zastępcze
Modern Web Guidance korzysta z szerokiej gamy nowoczesnych funkcji internetowych. Niektóre z nich mogą być nowymi lub powszechnie dostępnymi funkcjami podstawowymi, ale niektóre mogą mieć ograniczoną dostępność. W przypadkach, gdy funkcja nie jest powszechnie dostępna, przewodniki po przypadkach użycia zawierają szczegółowe instrukcje dla agentów, jak zapewnić szerszą zgodność w przeglądarkach, które nie obsługują tej funkcji. W wielu przypadkach kreacje zastępcze są wdrażane jako progresywne ulepszenia, dzięki czemu nowoczesne funkcje mogą być używane wszędzie tam, gdzie są obsługiwane. Jeśli w nieobsługiwanych przeglądarkach potrzebne są polyfille, agenty zawsze otrzymują instrukcje, aby wczytywać je warunkowo, dzięki czemu koszty są ponoszone tylko wtedy, gdy jest to konieczne.
Jak zapewniana jest dokładność?
Każdy przypadek użycia w usłudze Modern Web Guidance zawiera zestaw ocen, które są stale kalibrowane, aby zapewnić wysoką jakość wyników.
Oceny przypadków użycia uruchamiają automatyczny zestaw kontroli jakości, aby sprawdzić, czy agent działa prawidłowo. Kluczową rolę odgrywa w tym Playwright:
- W przypadku każdego przewodnika opracowywany jest skrypt Playwright, który sprawdza, czy zostały spełnione wymagania dotyczące implementacji, np. czy zastosowano
@media (prefers-reduced-motion: reduce), jeśli jest to wymagane. - Te skrypty Playwright są stale kalibrowane pod kątem „prawidłowej” referencyjnej implementacji demonstracyjnej, która oczekuje 100% skuteczności. Z drugiej strony skrypty sprawdzają celowo błędną implementację, która powinna mieć 0% pozytywnych wyników.
- Jeśli „prawidłowa” lub celowo błędna implementacja nie osiągnie odpowiednio 100% lub 0% wskaźnika powodzenia, generator automatycznie ponawia próbę, używając kontekstu, aż do osiągnięcia 100% kalibracji.
- Na koniec stosowane są kompleksowe oceny aplikacji podstawowej. Jedna z tych ocen jest nieukierunkowana i stanowi grupę kontrolną. Wykorzystuje domyślne dane treningowe bez wywoływania Modern Web Guidance do wykonania zadania. Inna ocena (eksperyment) dotyczy tego samego zadania, ale wykorzystuje Modern Web Guidance.
Nasze oceny są przeprowadzane kilka razy w tygodniu przy użyciu najnowocześniejszych modeli i agentów kodujących, co daje nam jasny obraz tego, jak dobrze agenci radzą sobie z naszymi wskazówkami i bez nich. Wstępne wyniki pokazują, że gdy agenci korzystają z narzędzia Modern Web Guidance, przestrzeganie nowoczesnych sprawdzonych metod poprawia się średnio o 37 punktów procentowych. Wyniki mogą się jednak różnić w zależności od wymagań projektu, modelu, napisanych promptów i preferowanych narzędzi do kodowania agentowego.
Włącz wskazówki dotyczące funkcji niestabilnych
Funkcje niestabilne to eksperymentalne funkcje internetowe zaimplementowane tylko w jednym silniku przeglądarki, które mogą ulec zmianom powodującym niezgodność. Aby włączyć wskazówki dotyczące tych funkcji, uruchom to polecenie w katalogu głównym projektu:
npx modern-web-guidance@latest set-allow-volatile-features
Włącz wskazówki dotyczące funkcji w wersji próbnej origin
Gdy funkcje eksperymentalne są udostępniane po raz pierwszy, zwykle są ukryte za flagą lub dostępne tylko w witrynach produkcyjnych w ramach testowania origin. Niektóre przewodniki Modern Web Guidance korzystają z tych funkcji, ale wskazówki dotyczące ich użycia nie są domyślnie udostępniane agentowi kodującemu. Aby uzyskać wskazówki dotyczące tych funkcji, uruchom to polecenie w katalogu głównym projektu:
npx modern-web-guidance@latest set-allow-origin-trials
Dalsze kroki
Teraz masz ogólny przegląd Modern Web Guidance i potencjału, jaki ma ta usługa, aby ułatwić wdrażanie nowoczesnych sprawdzonych metod internetowych w przepływie pracy związanym z kodowaniem AI. Możesz teraz przeglądać przewodniki udostępnione przez: Modern Web Guidance.