Przewodnik po współczesnych technologiach internetowych to zestaw umiejętności, które wbudowują wiedzę o platformie internetowej, sprawdzone metody i dane o zgodności z przeglądarkami bezpośrednio w Twoich agentach programistycznych. Pomaga on odwieść agentów programistycznych od starszych wzorców i skierować ich na rozwiązania, 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 programistycznym, który obsługuje umiejętności.
Interfejs wiersza poleceń modern-web-guidance (zalecany)
Zalecamy instalację za pomocą interfejsu wiersza poleceń modern-web-guidance utworzonego 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 za pomocą interfejsu wiersza poleceń modern-web-guidance w ten sposób:
npx modern-web-guidance@latest install
Jeśli tworzysz rozszerzenia Chrome, zalecamy użycie tego polecenia:
npx modern-web-guidance@latest install --choose
Uruchomi to interaktywny kreator, 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 tymi instrukcjami dotyczącymi konkretnych agentów. Pamiętaj, ż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 Dostosowania, 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ą do 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 po współczesnych technologiach internetowych do użycia z Claude Code wymaga 3 kroków:
1. Dodaj Marketplace:
/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
Copilot CLI
Instalacja Przewodnika po współczesnych technologiach internetowych do użycia z Copilot wymaga 2 kroków:
1. Dodaj Marketplace:
/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ą zapoznaj się z biblioteką przewodników Przewodnika po współczesnych technologiach internetowych, wyszukując za pomocą zapytania lub pobierając nasze przewodniki według identyfikatora. Aby to zrobić, użyj polecenia search w interfejsie wiersza poleceń, aby znaleźć identyfikator przypadku użycia 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":"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}]
Po przeczytaniu wartości description możesz wybrać id, które najlepiej odzwierciedla Twój cel, i użyć polecenia retrieve:
npx modern-web-guidance@latest retrieve "animate-to-from-top-layer"
W tym przypadku w terminalu wyświetli się Markdown przewodnika dotyczącego przypadku użycia animate-to-from-top-layer. W przypadku innych przypadków użycia zastąp animate-to-from-top-layer dowolnym prawidłowym identyfikatorem przypadku użycia.
Dlaczego warto korzystać z Przewodnika po współczesnych technologiach internetowych?
Przewodnik po współczesnych technologiach internetowych zapewnia deweloperom stron internetowych przewagę nad modelami AI bez pomocy z 3 powodów:
- Agenci programistyczni AI zwykle domyślnie wybierają starsze, nieaktualne rozwiązania problemów związanych z nowoczesnym tworzeniem stron internetowych. Rozwiązania te często zawierają kod JavaScript, który zapewnia funkcjonalność w przypadku problemów, które lepiej rozwiązać za pomocą nowoczesnych interfejsów API CSS i HTML.
- Modele AI historycznie nie były świadome 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ądarek, zamiast dostosowywać wskazówki do wymagań podstawowych danego projektu.
Przewodnik po współczesnych technologiach internetowych eliminuje te niedociągnięcia i zapewnia, że Twój proces programowania wspomagany przez AI ma narzędzia do szybszego wdrażania nowszych funkcji platformy internetowej, z uwzględnieniem rozwiązań rezerwowych.
Co zawiera Przewodnik po współczesnych technologiach internetowych?
Przewodnik po współczesnych technologiach internetowych zawiera sprawdzone metody dotyczące ponad 100 przypadków użycia w zakresie tworzenia stron internetowych w kilku podstawowych dziedzinach. W praktyce jest to umiejętność agenta, która instruuje agenta programistycznego, 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 między widokami, stylizacja CSS
scrollbar-colororaz animacje wejść i wyjść. - CSS: zapytania o kontenery, 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ń, planowanie zadań w tle i ustalanie priorytetów ładowania obrazów. - Formularze: automatyczne dopasowywanie rozmiaru pól wejściowych (
field-sizing: content) i dokładne style weryfikacji za pomocą:user-invalid. - Wbudowane komponenty interfejsu: bezpośrednia kontrola nad oknami, pozycjonowanie kotwic CSS dla etykietek i
popover. - Ułatwienia dostępu: dostępne komunikaty o błędach i zarządzanie fokusem klawiatury.
- Wbudowana AI: używaj lokalnych modeli klienta na urządzeniu (natywne interfejsy API wykrywania języka, podsumowywania i tłumaczenia).
- Klucze dostępu: rejestracja, uwierzytelnianie i zarządzanie kluczami dostępu.
To tylko kilka przypadków użycia z każdej dziedziny. Aby zobaczyć wszystkie przypadki użycia, zapoznaj się z pełną listą przypadków użycia.
Punkt odniesienia
Punkt odniesienia wyjaśnia deweloperom, które funkcje internetowe są interoperacyjne w głównych silnikach przeglądarek. Jeśli funkcja internetowa jest zgodna z punktem odniesienia, możesz mieć pewność, że jest ona kompatybilna z przeglądarkami. Funkcje internetowe dzielą się na 3 kategorie zdefiniowane przez punkt odniesienia:
- Ograniczona dostępność oznacza, że funkcja nie jest interoperacyjna.
- Nowo dostępna 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.
Punkt odniesienia to definicja interoperacyjności funkcji internetowych, ale jest też konfigurowalnym aspektem Twojego projektu. Możesz wybrać cel punktu odniesienia, a następnie skonfigurować projekt tak, 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 rozwiązania rezerwowe
Przewodnik po współczesnych technologiach internetowych korzysta z wielu nowoczesnych funkcji internetowych. Niektóre z nich mogą być zgodne z punktem odniesienia „Nowo dostępny” lub „Szeroko dostępny”, ale niektóre mogą mieć „Ograniczoną dostępność”. W przypadkach, gdy funkcja nie jest szeroko dostępna, przewodniki dotyczące przypadków użycia zawierają dla agentów szczegółowe instrukcje, jak zapewnić szerszą kompatybilność w przeglądarkach, które nie obsługują tej funkcji. W wielu przypadkach rozwiązania rezerwowe są wdrażane jako progresywne 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 ładować je warunkowo, tak aby generowały koszty tylko wtedy, gdy jest to konieczne.
Jak zapewniamy dokładność?
Każdy przypadek użycia w Przewodniku po współczesnych technologiach internetowych zawiera zestaw ocen, które są stale kalibrowane, aby zapewnić wysoką jakość wyników.
Oceny przypadków użycia uruchamiają automatyczny system kontroli jakości, który sprawdza prawidłowe działanie agenta. Playwright odgrywa tu kluczową rolę:
- W przypadku każdego przewodnika tworzony jest skrypt Playwright, który sprawdza, czy przestrzegano szczegółów implementacji przewodnika, np. czy w wymaganym miejscu użyto
@media (prefers-reduced-motion: reduce). - Te skrypty Playwright są stale kalibrowane na podstawie „prawidłowej” implementacji referencyjnej wersji demonstracyjnej, która oczekuje 100% skuteczności. Z drugiej strony skrypty sprawdzają celowo wadliwą implementację, która oczekuje 0% skuteczności.
- Jeśli implementacja „prawidłowa” lub celowo wadliwa nie osiągnie odpowiednio 100% i 0% skuteczności, generator automatycznie ponowi próbę z użyciem kontekstu, aż do osiągnięcia 100% kalibracji.
- Na koniec stosowane są oceny kompleksowe w aplikacji podstawowej. Jedna z tych ocen jest niekierowana, co stanowi kontrolę, która wykorzystuje domyślne dane treningowe bez wywoływania Przewodnika po współczesnych technologiach internetowych do wykonania zadania. Inna ocena (eksperyment) dotyczy tego samego zadania, ale wykorzystuje Przewodnik po współczesnych technologiach internetowych.
Nasze oceny są przeprowadzane kilka razy w tygodniu za pomocą najnowocześniejszych modeli i agentów programistycznych, co daje nam jasny obraz tego, jak dobrze agenci radzą sobie z naszymi wskazówkami i bez nich. Średnio wstępne wyniki wskazują na poprawę o 37 punktów procentowych w zakresie przestrzegania nowoczesnych sprawdzonych metod, gdy agenci korzystają z Przewodnika po współczesnych technologiach internetowych. Wyniki mogą się jednak różnić w zależności od wymagań projektu, modelu, promptów i preferowanych narzędzi do programowania.
Dalsze kroki
Teraz masz ogólny przegląd Przewodnika po współczesnych technologiach internetowych i jego potencjału w zakresie ułatwiania wdrażania nowoczesnych sprawdzonych metod w procesie programowania z użyciem AI. Możesz teraz przeczytać o dziedzinach i przypadkach użycia, które obejmuje Przewodnik po współczesnych technologiach internetowych.