從列出的「現代網頁指南」技能中選擇,配合您目前在網頁開發生命週期中的階段,涵蓋從初始樣式到最終安全性實作的範圍。
核心網路領域
協調器可協助您依網路領域專注於工作。
accessibility
/modern-web-guidance accessibility
這份指南是您進行稽核的中心,可評估、修正及實作整個應用程式的有效無障礙模式。
performance
/modern-web-guidance performance
協助您最佳化Core Web Vitals、縮短網頁載入時間延遲,以及提升對使用者輸入內容的回應速度。
user-experience
/modern-web-guidance user-experience
做為使用者介面 (UI) 工具包,可快速實作回應式自訂元素、流暢的轉場效果和現代化樣式模式。
在 GitHub 上查看 user-experience 技能
網頁技術
這些核心技能是建構任何現代應用程式的必要基石,可確保專案從一開始就採用現代最佳做法,並考量語意 HTML、速度和互通性。
html
/modern-web-guidance html
提供實用指南,說明如何運用現代 HTML 架構、語意、原生互動式 API (對話方塊、快顯視窗、詳細資料)、焦點管理和資源優先順序,打造優質的網頁。建構網頁文件、實作原生重疊或最佳化資源載入順序時,請參閱本指南。
css
/modern-web-guidance css
以行動為導向的指南,說明現代 CSS 架構、版面配置和效能。撰寫樣式、管理設計系統或最佳化網頁算繪時,請參閱本指南。
css-layout
/modern-web-guidance css-layout
現代 CSS 版面配置,例如 flexbox、grid、subgrid、容器查詢、錨點定位和內建大小。在設計回應式 UI 元件或網頁版面配置時,請運用這項技能。
forms
/modern-web-guidance forms
建構無障礙、安全且易於使用的網路表單最佳做法。建立或修改表單、輸入內容和提交流程時,請參閱本指南。
cpp-on-the-web
/modern-web-guidance cpp-on-the-web
使用 WebAssembly 編譯 C 和 C++,以供現代網路使用。當您需要移植 C++ 程式碼、使用 Emscripten 建構 C++ 程式庫,或在瀏覽器中設定高效能 C++ 元件時,請使用這項技能。
在 GitHub 上查看 cpp-on-the-web 技能
瀏覽器功能 (選擇採用)
這些技能可協助您開發符合 Manifest V3 等現代標準的 Chrome 擴充功能,並準備中繼資料、隱私權政策和權限說明,簡化發布至 Chrome 線上應用程式商店的流程。這些技能為選用功能,預設不會啟用。
chrome-extensions
/modern-web-guidance chrome-extensions
根據 Manifest V3 建構安全且符合規範的 Chrome 擴充功能,避免常見的 Service Worker 生命週期和沙箱陷阱。如要啟用這項功能,請指定 chrome-extensions 技能:
npx skills add GoogleChrome/modern-web-guidance --skill chrome-extensions
在 GitHub 上查看 chrome-extensions 技能
安全性、信任和身分識別
這些技能的重點在於保護應用程式免受 XSS 等用戶端攻擊,方法是透過防禦性 HTTP 標頭和來源隔離,確保使用者信任。開發人員也可以使用密碼金鑰開發驗證流程、盡量減少第三方追蹤,以及使用技能將 C/C++ 程式庫移植到 WebAssembly 模組。
security
/modern-web-guidance security
為網頁開發人員提供的預防性安全防護指南 (XSS、CSP、Cookie、跨來源隔離)。使用這項技能,安全地引導稽核、測試及部署安全性政策的程序。
passkeys
/modern-web-guidance passkeys
全面性的入門指南和跨領域原則,協助您在網頁應用程式中導入 WebAuthn 和密碼金鑰。處理密碼金鑰註冊、驗證、管理或重新驗證時,請參閱本指南。
privacy
/modern-web-guidance privacy
為網站開發人員提供行動導向的指南,協助他們導入「隱私權設計」、資料最小化原則、進行第三方稽核,以及安全地處理資料。設計應用程式、整合第三方服務、處理使用者資料或設定安全性標頭時,請運用這項技能。
代理式系統
這些技能可協助您透過 WebMCP,縮短網頁應用程式與 AI 工作流程之間的差距。將用戶端瀏覽器功能公開為互動式工具,即可指示 AI 代理程式直接與應用程式功能互動。
webmcp
/modern-web-guidance webmcp
實作 WebMCP,將用戶端瀏覽器功能公開為 AI 代理的互動式工具。