Przewodnik po współczesnych technologiach internetowych to zestaw umiejętności, które umieszczają wiedzę o platformie internetowej, sprawdzone metody i dane o zgodności z przeglądarkami bezpośrednio w agentach kodujących. Pomaga to odwieść agentów kodujących od starszych wzorców i skierować ich w stronę rozwiązań, które wykorzystują moc i możliwości nowoczesnej platformy internetowej.
Instalacja
Przewodnik po współczesnych technologiach internetowych 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 modern-web-guidanceinterfejsu wiersza poleceń stworzonego przez zespół Chrome. Zainstalowanie Przewodnika po współczesnych technologiach internetowych 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 to interaktywnego kreatora, który zainstaluje umiejętności zgodnie z Twoimi preferencjami.
Jeśli wolisz zainstalować Przewodnik po współczesnych technologiach internetowych bez użycia interfejsu wiersza poleceń modern-web-guidance, zapoznaj się z poniższymi instrukcjami dotyczącymi konkretnych agentów. Pamiętaj tylko, że większość tych opcji nie obsługuje automatycznych aktualizacji.
Antigravity
Pobierz Antigravity i włącz „modern-web-guidance” podczas instalacji lub na stronie Ustawienia w sekcji Dostosowywanie, a następnie Twórz za pomocą wtyczek 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
Przewodnik po współczesnych technologiach internetowych 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ą w 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 przewodnika po współczesnych technologiach internetowych do użycia z interfejsem wiersza poleceń Claude Code składa się z 3 etapów:
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
Instalacja Przewodnika po współczesnych technologiach internetowych do użytku z Copilotem składa się z 2 etapó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
Kimi Code
/plugins install https://github.com/GoogleChrome/modern-web-guidance
Sprawdź przed instalacją
Przed instalacją zapoznaj się z biblioteką przewodników Modern Web Guidance, wyszukując ją za pomocą zapytania lub pobierając przewodniki według identyfikatora. Aby to zrobić, użyj polecenia search interfejsu wiersza poleceń, aby znaleźć identyfikator przypadku użycia za pomocą promptu:
npx modern-web-guidance@latest search "animate a dialog modal backdrop"
Spowoduje to wyświetlenie w terminalu obiektu 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":"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}]
Odczytując wartości description, możesz wybrać wartość id, która 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 w Markdownie dotyczący animate-to-from-top-layer. W przypadku innych zastosowań zastąp animate-to-from-top-layer ciągiem any valid use case ID (dowolny prawidłowy identyfikator zastosowania).
Dlaczego warto korzystać z przewodnika po współczesnych technologiach internetowych?
Przewodnik po współczesnych technologiach internetowych jest korzystniejszy dla programistów niż modele AI bez pomocy z 3 powodów:
- Asystenci kodowania AI zwykle domyślnie stosują starsze, przestarzałe rozwiązania problemów związanych z nowoczesnym tworzeniem stron internetowych. Często zawierają one kod JavaScript, który zapewnia funkcjonalność w przypadku problemów, które można lepiej rozwiązać za pomocą nowoczesnych interfejsów CSS i HTML API.
- Modele AI historycznie nie miały świadomości najnowszych funkcji platformy internetowej lub miały o nich nieprawidłowe informacje.
- Modele AI zwykle podają nieaktualne rekomendacje, które nie uwzględniają wymagań projektu ani kryteriów obsługi przeglądarki, zamiast dostosowywać wskazówki do wymagań Baseline danego projektu.
Przewodnik po współczesnych technologiach internetowych rozwiązuje te problemy i zapewnia, że przepływ pracy związany z kodowaniem wspomaganym przez AI ma narzędzia do wcześniejszego wdrażania nowszych funkcji platformy internetowej z uwzględnieniem rozwiązań alternatywnych.
Co zawiera Przewodnik po współczesnych technologiach internetowych?
Wskazówki dotyczące nowoczesnych stron internetowych zawierają sprawdzone metody w ponad 100 przypadkach użycia związanych z tworzeniem stron internetowych w kilku podstawowych dziedzinach. Jest to umiejętność agenta, która instruuje agenta kodowania, jak wywoływać interfejs wiersza poleceń modern-web-guidance, aby znaleźć i pobrać najlepsze wskazówki dotyczące Twojego przypadku użycia.
- Wrażenia użytkowników: przejścia widoku, style CSS
scrollbar-colororaz animacje wejść i wyjść. - CSS: zapytania o kontener, nowoczesne przestrzenie kolorów, takie jak
oklch, układ podsiatki CSS,text-wrapi przycinanie wysokości wiersza typografii. - Wydajność: diagnostyka interakcji do kolejnego wyrenderowania (INP)
scheduler.yieldw celu dzielenia długich zadań, planowania zadań w tle i ustalania priorytetów ładowania obrazów. - Formularze: automatyczne dopasowywanie rozmiaru pól wejściowych (
field-sizing: content) i dokładne style weryfikacji z użyciem:user-invalid. - Wbudowane komponenty interfejsu: bezpośrednia kontrola nad oknami, pozycjonowanie elementów zakotwiczonych CSS dla etykietek i
popover. - Ułatwienia dostępu: dostępne komunikaty o błędach i zarządzanie zaznaczeniem klawiatury.
- Wbudowana AI: korzystaj z lokalnych modeli klienta na urządzeniu (natywne interfejsy Language Detection, Summarization i Translation API).
- Klucze dostępu: rejestracja, uwierzytelnianie i zarządzanie kluczami dostępu.
Oto kilka przykładów zastosowań w poszczególnych dziedzinach. Aby zobaczyć wszystkie przypadki użycia, wyświetl pełną listę.
Punkt odniesienia
Baseline pomaga deweloperom zrozumieć, które funkcje internetowe są interoperacyjne w głównych silnikach przeglądarek. Jeśli funkcja internetowa jest podstawowa, możesz mieć pewność, że jest zgodna z przeglądarkami. Funkcje internetowe dzielą się na 3 kategorie zdefiniowane przez Baseline:
- Ograniczona dostępność oznacza, że funkcja nie jest interoperacyjna.
- Nowo dostępna oznacza, że funkcja stała się niedawno interoperacyjna w ciągu ostatnich 30 miesięcy.
- Szeroko dostępna oznacza, że funkcja jest interoperacyjna od co najmniej 30 miesięcy.
Baseline to definicja interoperacyjności funkcji internetowych, ale jest też konfigurowalnym aspektem projektu. Możesz wybrać cel bazowy, a następnie skonfigurować projekt, aby go używać, dodając go np. do pliku AGENTS.md lub CLAUDE.md:
This project's Baseline target is Baseline 2024.
<other project info...>
Przewodnik po współczesnych technologiach internetowych i funkcje rezerwowe
Przewodnik po współczesnych technologiach internetowych korzysta z szerokiej gamy nowoczesnych funkcji internetowych. Niektóre z nich mogą być dostępne w wersji podstawowej, nowej lub powszechnie, a inne w wersji o ograniczonej dostępności. W przypadku funkcji, które nie są powszechnie dostępne, przewodniki po przypadkach użycia zawierają szczegółowe instrukcje dla agentów, jak zapewnić szerszą kompatybilność w przeglądarkach, które nie obsługują danej funkcji. W wielu przypadkach rezerwowe rozwiązania są wdrażane jako stopniowe ulepszenia, w których nowoczesna funkcja może być używana wszędzie tam, gdzie jest obsługiwana. Jeśli w przypadku nieobsługiwanych przeglądarek potrzebne są polyfille, agenci zawsze otrzymują instrukcje, aby wczytywać je warunkowo, tak aby generowały koszty tylko w razie potrzeby.
Jak zapewniamy dokładność?
Każdy przypadek użycia w Przewodniku po współczesnych technologiach internetowych zawiera zestaw ocen, które są stale kalibrowane w celu zapewnienia wysokiej jakości wyników.
Testy przypadków użycia uruchamiają automatyczny system kontroli jakości, aby sprawdzić prawidłowe działanie agenta. Kluczową rolę odgrywa w nich Playwright:
- Do każdego przewodnika opracowywany jest skrypt Playwright, który sprawdza, czy szczegóły implementacji przewodnika zostały uwzględnione, np. czy w miejscu, w którym jest to wymagane, występuje znak
@media (prefers-reduced-motion: reduce). - Te skrypty Playwright są stale kalibrowane w odniesieniu do „prawidłowej” referencyjnej implementacji wersji demonstracyjnej, która oczekuje 100% skuteczności. Z drugiej strony skrypty sprawdzają celowo wadliwą implementację, która powinna uzyskać 0% wynik.
- Jeśli „poprawna” lub celowo wadliwa implementacja nie osiągnie odpowiednio 100% i 0% odsetka pozytywnych wyników, generator automatycznie ponawia próbę z użyciem kontekstu, dopóki nie zostanie osiągnięta 100% kalibracja.
- Na koniec przeprowadzane są kompleksowe oceny aplikacji podstawowej. Jedna z tych ocen jest niekierowana, co oznacza, że jest to grupa kontrolna, która do wykonania zadania używa domyślnych danych treningowych bez wywoływania Przewodnika po współczesnych technologiach internetowych. Inny test (eksperyment) dotyczy tego samego zadania, ale wykorzystuje Przewodnik po współczesnych technologiach internetowych.
Nasze testy przeprowadzamy kilka razy w tygodniu przy użyciu najnowocześniejszych modeli i agentów kodujących, co daje nam jasny obraz tego, jak agenci radzą sobie z naszymi wskazówkami i bez nich. Wstępne wyniki pokazują, że przestrzeganie nowoczesnych sprawdzonych metod wzrasta średnio o 37 punktów procentowych, gdy pracownicy obsługi klienta korzystają z Przewodnika po współczesnych technologiach internetowych. Wyniki mogą się jednak różnić w zależności od wymagań projektu, modelu, napisanych promptów i preferowanych narzędzi do kodowania agentowego.
Dalsze kroki
Masz już ogólne pojęcie o Przewodniku po współczesnych technologiach internetowych i jego potencjale w ułatwianiu stosowania nowoczesnych sprawdzonych metod w przepływie pracy związanym z kodowaniem AI. Możesz teraz zapoznać się z dziedzinami i przypadkami użycia, które są dostępne w ramach przewodnika Modern Web Guidance.