Wybierz z listy umiejętności dotyczących nowoczesnych wskazówek internetowych, które odpowiadają Twojemu obecnemu etapowi cyklu życia tworzenia stron internetowych, od początkowego stylu po ostateczne wdrożenie zabezpieczeń.
Podstawowe dyscypliny internetowe
Orchestrators, które pomogą Ci skupić się na pracy w ramach danej dyscypliny internetowej.
accessibility
/modern-web-guidance accessibility
Jest to centralny przewodnik po audycie, który pomaga oceniać, naprawiać i wdrażać skuteczne wzorce ułatwień dostępu w całej aplikacji.
Wyświetl accessibility umiejętność w GitHubie
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 performance umiejętność w GitHubie
user-experience
/modern-web-guidance user-experience
Jest to zestaw narzędzi interfejsu użytkownika, który umożliwia szybkie wdrażanie elastycznych elementów niestandardowych, płynnych przejść i nowoczesnych wzorców stylów.
Wyświetl user-experience umiejętność w GitHubie
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 od początku zgodny z najnowszymi sprawdzonymi metodami, 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 ustalania priorytetów zasobów. Skorzystaj z tego przewodnika, aby strukturyzować dokumenty internetowe, wdrażać nakładki natywne lub optymalizować kolejność wczytywania zasobów.
Wyświetl html umiejętność w GitHubie
css
/modern-web-guidance css
Praktyczne wskazówki dotyczące nowoczesnej architektury CSS, układów i wydajności. Skorzystaj z tego przewodnika podczas tworzenia stylów, zarządzania systemami projektowania lub optymalizowania renderowania stron internetowych.
Wyświetl css umiejętność w GitHubie
css-layout
/modern-web-guidance css-layout
Nowoczesne układy CSS, takie jak flexbox, siatka, podsiatka, zapytania o kontener, pozycjonowanie względne i rozmiary wewnętrzne. Korzystaj z tej umiejętności podczas projektowania elastycznych komponentów interfejsu lub układów stron.
Wyświetl css-layout umiejętność w GitHubie
forms
/modern-web-guidance forms
Sprawdzone metody tworzenia dostępnych, bezpiecznych i przyjaznych dla użytkownika formularzy internetowych. Skorzystaj z tego przewodnika podczas tworzenia lub modyfikowania formularzy, pól wejściowych i przepływów przesyłania.
Wyświetl forms umiejętność w GitHubie
cpp-on-the-web
/modern-web-guidance cpp-on-the-web
Kompilowanie kodu C i C++ na potrzeby nowoczesnych stron internetowych za pomocą WebAssembly. Używaj tej umiejętności, gdy musisz przenieść kod C++, utworzyć biblioteki C++ za pomocą Emscripten lub skonfigurować w przeglądarce komponenty C++ o wysokiej wydajności.
Wyświetl cpp-on-the-web umiejętność w GitHubie
Możliwości przeglądarki (włącz)
Te umiejętności pomogą Ci tworzyć rozszerzenia do Chrome zgodne z nowoczesnymi standardami, takimi jak Manifest V3, i ułatwią 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 przepisami rozszerzenia do Chrome na platformie Manifest V3, które pozwolą Ci uniknąć typowych problemów z cyklem życia skryptu service worker i piaskownicą. Aby włączyć tę funkcję, musisz określić umiejętność chrome-extensions:
npx skills add GoogleChrome/modern-web-guidance --skill chrome-extensions
Wyświetl chrome-extensions umiejętność w GitHubie
Bezpieczeństwo, zaufanie i tożsamość
Te umiejętności koncentrują się na zaufaniu użytkowników poprzez zabezpieczanie aplikacji przed wykorzystywaniem luk 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, ograniczać śledzenie przez inne firmy i używać umiejętności do przenoszenia bibliotek C/C++ do modułów WebAssembly.
security
/modern-web-guidance security
Wytyczne dotyczące bezpieczeństwa zapobiegawczego dla programistów stron internetowych (XSS, CSP, pliki cookie, izolacja między domenami). Dzięki tej umiejętności możesz bezpiecznie przeprowadzać audyty, testować i wdrażać zasady bezpieczeństwa.
Wyświetl security umiejętność w GitHubie
passkeys
/modern-web-guidance passkeys
Kompleksowe wskazówki i zasady dotyczące wdrażania WebAuthn i kluczy dostępu w aplikacjach internetowych. Skorzystaj z tego przewodnika, aby dowiedzieć się, jak rejestrować klucze dostępu, uwierzytelniać się za ich pomocą, zarządzać nimi i ponownie uwierzytelniać się.
Wyświetl passkeys umiejętność w GitHubie
privacy
/modern-web-guidance privacy
Wytyczne dla deweloperów stron internetowych dotyczące wdrażania zasad ochrony prywatności, minimalizacji danych, audytów zewnętrznych i bezpiecznego postępowania z danymi. Wykorzystaj tę umiejętność podczas projektowania aplikacji, integrowania usług innych firm, obsługi danych użytkowników lub konfigurowania nagłówków zabezpieczeń.
Wyświetl privacy umiejętność w GitHubie
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
Wdrażanie WebMCP w celu udostępniania funkcji przeglądarki po stronie klienta jako interaktywnych narzędzi dla agentów AI.
Wyświetl webmcp umiejętność w GitHubie
Następne kroki
Teraz, gdy znasz już wskazówki dotyczące nowoczesnych stron internetowych, wypróbuj je. Poznaj funkcje i przypadki użycia obsługiwane w ramach wskazówek dotyczących nowoczesnych technologii internetowych i wypróbuj kilka przykładowych promptów, aby zacząć.