Modern Web Guidance



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.

Instalowanie za pomocą interfejsu wiersza poleceń modern-web-guidance (zalecane):

npx modern-web-guidance@latest install
Rozpocznij Wyświetl w GitHubie

Współpracuje z Twoim ulubionym agentem AI do kodowania

Modern Web Guidance można używać z ulubionymi agentami AI do kodowania, dzięki czemu masz dostęp do wskazówek dotyczących sprawdzonych metod tworzenia nowoczesnych stron internetowych w preferowanym przepływie pracy.
Wyświetl wszystkie opcje instalacji

Zainstaluj Modern Web Guidance w projekcie, korzystając z umiejętności agenta Vercel:

npx skills add GoogleChrome/modern-web-guidance

Zainstaluj Modern Web Guidance z wtyczek Claude Code:

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

Zainstaluj umiejętności Modern Web Guidance dla interfejsu wiersza poleceń Copilot:

# 1. Add the marketplace:
/plugin marketplace add GoogleChrome/modern-web-guidance
# 2. Install the plugin
/plugin install modern-web-guidance@googlechrome

Zainstaluj umiejętności Modern Web Guidance dla Antigravity CLI:

agy plugin install https://github.com/GoogleChrome/modern-web-guidance
Obejrzyj sesję Modern Web Guidance na Google I/O, aby dowiedzieć się więcej o umiejętnościach i o tym, jak usprawniają one proces tworzenia stron internetowych wspomagany przez AI.
Obejrzyj teraz

Powiadomienia zapewniające lepsze wrażenia użytkowników

Wypróbuj kilka z poniższych przykładowych promptów, aby wywołać Modern Web Guidance w procesie kodowania wspomaganego przez AI i tworzyć nowe funkcje, modernizować starszy kod oraz przyspieszać działanie aplikacji. 
Create an accordion-style stats component that smoothly animates on open and close.
 
Build a tab bar with a sliding highlight that tracks active items using CSS Anchor Positioning.
 
Design a dashboard card that uses container queries to adapt its layout to its own width.
 
Update legacy modal window implementations to use the <dialog> element and animate them using modern CSS features.
 
Migrate legacy tooltips to use the Popover API and CSS Anchor Positioning.
 
Implement a passkey-based login flow using the latest WebAuthn features.
 
Implement a starter Content Security Policy (CSP) without breaking my app.
 
Perform a security audit of my site and suggest improvements.
 
Set up my app to begin preloading pages when users hover over important links.
 
My app has lots of long tasks, and its INP is affected. Help me fix it.
 
Help me improve my app's LCP.
Dowiedz się, jak kierować asystentami AI do kodowania, aby tworzyć nowoczesny, interoperacyjny kod internetowy. W tym ćwiczeniu z programowania dla początkujących przeprowadzisz audyt starszej aplikacji internetowej i użyjesz narzędzia Modern Web Guidance, aby zachęcić agentów do stosowania nowoczesnych sprawdzonych metod. Dowiedz się, jak ustawić cele Baseline dotyczące przeglądarek, zoptymalizować wskaźniki Core Web Vitals i przekształcić ogólne wyniki AI w wysoce wydajne rozwiązania internetowe.
Rozpocznij
Połącz Narzędzia deweloperskie w Chrome dla agentów z umiejętnościami Modern Web Guidance, aby usprawnić proces tworzenia stron internetowych. Przeprowadzaj audyty wydajności w czasie rzeczywistym, sprawdzaj drzewa ułatwień dostępu i rejestruj logi konsoli, a następnie automatycznie stosuj precyzyjne poprawki kodu nowoczesnych stron internetowych.
Więcej informacji

Dowiedz się, jak możesz pomóc

Masz pomysły na ulepszenie usługi Modern Web Guidance? Dowiedz się, jak możesz pomóc.
Więcej informacji