探索 Modern Web Guidance 技能

從列出的「現代網頁指南」技能中選擇,配合您目前在網頁開發生命週期中的階段,涵蓋從初始樣式到最終安全性實作的範圍。

核心網路領域

協調器可協助您依網路領域專注於工作。

accessibility

/modern-web-guidance accessibility

這份指南是您進行稽核的中心,可評估、修正及實作整個應用程式的有效無障礙模式。

在 GitHub 上查看 accessibility 技能

performance

/modern-web-guidance performance

協助您最佳化Core Web Vitals、縮短網頁載入時間延遲,以及提升對使用者輸入內容的回應速度。

在 GitHub 上查看 performance 技能

user-experience

/modern-web-guidance user-experience

做為使用者介面 (UI) 工具包,可快速實作回應式自訂元素、流暢的轉場效果和現代化樣式模式。

在 GitHub 上查看 user-experience 技能

網頁技術

這些核心技能是建構任何現代應用程式的必要基石,可確保專案從一開始就採用現代最佳做法,並考量語意 HTML、速度和互通性。

html

/modern-web-guidance html

提供實用指南,說明如何運用現代 HTML 架構、語意、原生互動式 API (對話方塊、快顯視窗、詳細資料)、焦點管理和資源優先順序,打造優質的網頁。建構網頁文件、實作原生重疊或最佳化資源載入順序時,請參閱本指南。

在 GitHub 上查看 html 技能

css

/modern-web-guidance css

以行動為導向的指南,說明現代 CSS 架構、版面配置和效能。撰寫樣式、管理設計系統或最佳化網頁算繪時,請參閱本指南。

在 GitHub 上查看 css 技能

css-layout

/modern-web-guidance css-layout

現代 CSS 版面配置,例如 flexbox、grid、subgrid、容器查詢、錨點定位和內建大小。在設計回應式 UI 元件或網頁版面配置時,請運用這項技能。

在 GitHub 上查看 css-layout 技能

forms

/modern-web-guidance forms

建構無障礙、安全且易於使用的網路表單最佳做法。建立或修改表單、輸入內容和提交流程時,請參閱本指南。

在 GitHub 上查看 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、跨來源隔離)。使用這項技能,安全地引導稽核、測試及部署安全性政策的程序。

在 GitHub 上查看 security 技能

passkeys

/modern-web-guidance passkeys

全面性的入門指南和跨領域原則,協助您在網頁應用程式中導入 WebAuthn 和密碼金鑰。處理密碼金鑰註冊、驗證、管理或重新驗證時,請參閱本指南。

在 GitHub 上查看 passkeys 技能

privacy

/modern-web-guidance privacy

為網站開發人員提供行動導向的指南,協助他們導入「隱私權設計」、資料最小化原則、進行第三方稽核,以及安全地處理資料。設計應用程式、整合第三方服務、處理使用者資料或設定安全性標頭時,請運用這項技能。

在 GitHub 上查看 privacy 技能

代理式系統

這些技能可協助您透過 WebMCP,縮短網頁應用程式與 AI 工作流程之間的差距。將用戶端瀏覽器功能公開為互動式工具,即可指示 AI 代理程式直接與應用程式功能互動。

webmcp

/modern-web-guidance webmcp

實作 WebMCP,將用戶端瀏覽器功能公開為 AI 代理的互動式工具。

在 GitHub 上查看 webmcp 技能

後續步驟

瞭解新式網頁指南後,請親自試試看!瞭解現代網頁指南支援的功能和用途,並試用幾個提示範例