Wskazówki dotyczące nowoczesnych stron internetowych to umiejętność agenta, która stosuje nowoczesne sprawdzone metody w przepływie pracy związanym z kodowaniem z pomocą AI. Pomaga to odwieść agenta kodującego od starszych obejść typowych problemów z tworzeniem stron internetowych i zamiast tego kierować go na rozwiązania, które powinny wykorzystywać nowsze funkcje platformy internetowej.
Instalacja
Umiejętności Modern Web Guidance można zainstalować w wielu różnych agentach, co pozwala zachować preferowany przepływ pracy, a jednocześnie korzystać z ich wskazówek.
Interfejs wiersza poleceń modern-web-guidance (zalecany)
Zalecana metoda instalacji to użycie modern-web-guidanceinterfejsu wiersza poleceń stworzonego przez zespół Chrome. Zainstalowanie umiejętności za pomocą interfejsu modern-web-guidance CLI spowoduje, że będą one automatycznie aktualizowane. Możesz zainstalować interfejs 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 korzystać z umiejętności Modern Web Guidance bez używania interfejsu modern-web-guidance CLI, przeczytaj ten artykuł, aby dowiedzieć się, jak zainstalować je w wybranym agencie.
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.
Interfejs wiersza poleceń Antigravity
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
Umiejętności związane z wskazówkami dotyczącymi nowoczesnych stron 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.
GitHub CLI
gh skill install GoogleChrome/modern-web-guidance
npx skills
npx skills add GoogleChrome/modern-web-guidance
Claude Code
Instalacja przewodnika Modern Web Guidance do użytku z 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. Ponowne wczytywanie wtyczek:
/reload-plugins
Interfejs wiersza poleceń Copilot
Instalacja wskazówek dotyczących nowoczesnych stron 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
Sprawdź przed instalacją
Przed instalacją możesz ocenić bibliotekę przewodników po umiejętnościach Modern Web Guidance, wyszukując ją za pomocą zapytania lub pobierając nasze 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"
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":"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ć 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 w Markdownie dotyczący animate-to-from-top-layer. W przypadku innych zastosowań zastąp animate-to-from-top-layer dowolnym prawidłowym identyfikatorem zastosowania.
Dlaczego warto korzystać z wskazówek dotyczących nowoczesnych technologii internetowych?
Wskazówki dotyczące nowoczesnych technologii internetowych są korzystniejsze 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 JavaScript, który zapewnia funkcjonalność w przypadku problemów, które lepiej rozwiązywać za pomocą nowoczesnych interfejsów API CSS i HTML.
- 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.
Umiejętności Modern Web Guidance eliminują te niedociągnięcia i zapewniają, że Twój przepływ pracy związany z kodowaniem z pomocą AI ma narzędzia do wcześniejszego wdrażania nowszych funkcji platformy internetowej z uwzględnieniem rozwiązań rezerwowych.
Co zawiera przewodnik po nowoczesnej sieci?
Wskazówki dotyczące nowoczesnych stron internetowych zawierają sprawdzone metody dla ponad 100 przypadków użycia w zakresie tworzenia stron internetowych w kilku podstawowych dziedzinach. W praktyce jest to pojedyncza umiejętność agenta, która instruuje agenta kodującego, jak wywoływać interfejs CLI modern-web-guidance, aby znaleźć i pobrać najlepsze wskazówki dotyczące Twojego przypadku użycia.
- Wrażenia użytkownika: wyświetlaj przejścia, 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.yielddo dzielenia długich zadań, planowania zadań w tle i ustalania priorytetów wczytywania 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 kotwicy 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 API do wykrywania języka, podsumowywania i tłumaczenia).
- 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, możesz wyświetlić pełną listę przypadków użycia.
Punkt odniesienia
Baseline to inicjatywa, która ma na celu wyjaśnienie deweloperom, 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...>
Wskazówki dotyczące nowoczesnych technologii internetowych i funkcje rezerwowe
Wskazówki dotyczące nowoczesnych stron internetowych korzystają z wielu 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 potrzebny jest polyfill, agenci zawsze otrzymują instrukcje, aby wczytywać go warunkowo, tak aby generował koszty tylko w razie potrzeby.
Jak zapewniamy dokładność?
Każdy przypadek użycia w przewodniku po nowoczesnych stronach internetowych zawiera instrukcje, a większość przypadków użycia jest stale kalibrowana, aby kierować agentów AI na wysokiej jakości wyniki.
W przypadku skalibrowanych przypadków użycia do testowania prawidłowego działania agenta używany jest automatyczny system kontroli jakości, w którym kluczową rolę odgrywa 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
@media (prefers-reduced-motion: reduce). - Te skrypty Playwright są stale kalibrowane na podstawie „prawidłowej” referencyjnej implementacji wersji demonstracyjnej, która oczekuje 100% skuteczności. Z drugiej strony skrypty sprawdzają celowo wadliwe wdrożenie, które powinno mieć 0% skuteczności.
- Jeśli „prawidłowa” 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 wykorzystuje domyślne dane treningowe bez wywoływania umiejętności Modern Web Guidance do wykonania zadania. Kolejny test (eksperyment) dotyczy tego samego zadania, ale wykorzystuje umiejętności związane z wskazówkami dotyczącymi nowoczesnych stron internetowych.
Nasze testy są przeprowadzane codziennie z użyciem najnowocześniejszych modeli i agentów kodowania, co daje nam jasny obraz tego, jak agenty działają z naszymi wskazówkami i bez nich. Wstępne wyniki pokazują, że średnio przestrzeganie nowoczesnych sprawdzonych metod wzrasta o 37 punktów procentowych, gdy pracownicy obsługi klienta korzystają z nowoczesnych wskazówek dotyczących internetu. 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 wskazówkach dotyczących nowoczesnych technologii internetowych i o tym, jak mogą one ułatwić stosowanie sprawdzonych metod w przepływie pracy związanym z kodowaniem AI. Możesz teraz zapoznać się z umiejętnościami i przypadkami użycia, które oferuje Modern Web Guidance.