Wybierz umiejętności z przewodnika po nowoczesnych technologiach internetowych, które odpowiadają Twojemu obecnemu etapowi cyklu życia tworzenia stron internetowych – od początkowego stylizowania po ostateczne wdrożenie zabezpieczeń.
Podstawowe dyscypliny internetowe
Orchestratory, które pomogą Ci skupić się na pracy w danej dyscyplinie internetowej.
accessibility
/modern-web-guidance accessibility
Służy jako centralny przewodnik po audycie, który pomoże Ci ocenić, naprawić i wdrożyć skuteczne wzorce ułatwień dostępu w całej aplikacji.
Wyświetl umiejętność accessibility w GitHub
performance
/modern-web-guidance performance
Pomaga optymalizować Core Web Vitals, skracać czas wczytywania stron i poprawiać czas reakcji na dane wejściowe użytkownika.
Wyświetl umiejętność performance w GitHub
user-experience
/modern-web-guidance user-experience
Służy jako zestaw narzędzi interfejsu użytkownika, który umożliwia szybkie wdrażanie elastycznych elementów niestandardowych, płynnych przejść i nowoczesnych wzorców stylizacji.
Wyświetl umiejętność user-experience w GitHub
Technologie internetowe
Te podstawowe umiejętności stanowią niezbędne elementy składowe każdej nowoczesnej aplikacji, dzięki czemu Twój projekt będzie oparty na nowoczesnych sprawdzonych metodach z uwzględnieniem semantycznego kodu HTML, szybkości i interoperacyjności.
html
/modern-web-guidance html
Wskazówki dotyczące nowoczesnej architektury HTML, semantyki, natywnych interaktywnych interfejsów API (Dialog, Popover, Details), zarządzania fokusem i priorytetyzacji zasobów. Korzystaj z tego przewodnika podczas tworzenia struktury dokumentów internetowych, wdrażania natywnych nakładek lub optymalizowania kolejności wczytywania zasobów.
Wyświetl umiejętność html w GitHub
css
/modern-web-guidance css
Wskazówki dotyczące nowoczesnej architektury CSS, układów i wydajności. Korzystaj z tego przewodnika podczas tworzenia stylów, zarządzania systemami projektowania lub optymalizowania renderowania stron internetowych.
Wyświetl umiejętność css w GitHub
css-layout
/modern-web-guidance css-layout
Nowoczesne układy CSS, takie jak flexbox, grid, subgrid, zapytania o kontener, pozycjonowanie kotwic i rozmiary wewnętrzne. Korzystaj z tej umiejętności podczas projektowania elastycznych komponentów interfejsu lub układów stron.
Wyświetl umiejętność css-layout w GitHub
forms
/modern-web-guidance forms
Sprawdzone metody tworzenia bardziej dostępnych, bezpiecznych i przyjaznych dla użytkownika formularzy internetowych. Korzystaj z tego przewodnika podczas tworzenia lub modyfikowania formularzy, pól wejściowych i przepływów przesyłania.
Wyświetl umiejętność forms w GitHub
cpp-on-the-web
/modern-web-guidance cpp-on-the-web
Kompilowanie kodu C i C++ na potrzeby nowoczesnych stron internetowych za pomocą WebAssembly. Korzystaj z tej umiejętności, gdy musisz przenieść kod C++, utworzyć biblioteki C++ za pomocą Emscripten lub skonfigurować komponenty C++ o wysokiej wydajności w przeglądarce.
Wyświetl umiejętność cpp-on-the-web w GitHub
Funkcje przeglądarki (opcjonalne)
Te umiejętności pomagają tworzyć rozszerzenia do Chrome, które są zgodne z nowoczesnymi standardami, takimi jak Manifest V3, i usprawniają publikowanie w Chrome Web Store dzięki pomocy w przygotowaniu metadanych, zasad ochrony prywatności i uzasadnień uprawnień. Te umiejętności są opcjonalne i nie są domyślnie włączone.
chrome-extensions
/modern-web-guidance chrome-extensions
Twórz bezpieczne i zgodne z zasadami rozszerzenia do Chrome w ramach Manifest V3, które pozwalają uniknąć typowych problemów z cyklem życia skryptów service worker i trybem piaskownicy. Aby włączyć tę umiejętność, musisz określić umiejętność chrome-extensions:
npx skills add GoogleChrome/modern-web-guidance --skill chrome-extensions
Wyświetl umiejętność chrome-extensions w GitHub
Bezpieczeństwo, zaufanie i tożsamość
Te umiejętności koncentrują się na zaufaniu użytkowników, zabezpieczając aplikacje przed wykorzystaniem luk w zabezpieczeniach po stronie klienta, takich jak XSS, za pomocą defensywnych nagłówków HTTP i izolacji pochodzenia. Deweloperzy mogą też tworzyć przepływy uwierzytelniania za pomocą kluczy dostępu, minimalizować śledzenie przez inne firmy i używać umiejętności do przenoszenia bibliotek C/C++ do modułów WebAssembly.
security
/modern-web-guidance security
Wskazówki dotyczące bezpieczeństwa prewencyjnego dla deweloperów stron internetowych (XSS, CSP, pliki cookie, izolacja między źródłami). Korzystaj z tej umiejętności, aby bezpiecznie przeprowadzać audyty, testować i wdrażać zasady bezpieczeństwa.
Wyświetl umiejętność security w GitHub
passkeys
/modern-web-guidance passkeys
Kompleksowe wprowadzenie i zasady dotyczące wdrażania WebAuthn i kluczy dostępu w aplikacjach internetowych. Korzystaj z tego przewodnika podczas rejestracji, uwierzytelniania, zarządzania i ponownego uwierzytelniania za pomocą kluczy dostępu.
Wyświetl umiejętność passkeys w GitHub
privacy
/modern-web-guidance privacy
Wskazówki dla deweloperów stron internetowych dotyczące wdrażania prywatności w fazie projektowania, minimalizacji danych, audytów przeprowadzanych przez osoby trzecie i bezpiecznego przetwarzania danych. Korzystaj z tej umiejętności podczas projektowania aplikacji, integrowania usług innych firm, przetwarzania danych użytkowników lub konfigurowania nagłówków bezpieczeństwa.
Wyświetl umiejętność privacy w GitHub
Systemy agentowe
Te umiejętności pomagają wypełnić lukę między aplikacją internetową a przepływami pracy AI za pomocą WebMCP. Udostępniając funkcje przeglądarki po stronie klienta jako interaktywne narzędzia, możesz instruować agentów AI, aby wchodzili w interakcje bezpośrednio z funkcjami aplikacji.
webmcp
/modern-web-guidance webmcp
Wdróż WebMCP, aby udostępnić funkcje przeglądarki po stronie klienta jako interaktywne narzędzia dla agentów AI.
Wyświetl umiejętność webmcp w GitHub
Następne kroki
Teraz, gdy znasz już Przewodnik po współczesnych technologiach internetowych, wypróbuj go! Poznaj funkcje i przypadki użycia obsługiwane w Przewodniku po współczesnych technologiach internetowych i wypróbuj kilka przykładowych promptów, aby zacząć.