現代網頁指南是一組經過專家審查的常青技能，可引導 AI 程式設計代理程式處理許多常見用途，打造無障礙、高效能且安全的現代網頁體驗。

使用 modern-web-guidance CLI 安裝 (建議)：

npx modern-web-guidance@latest install
開始使用 前往 GitHub 查看

可與您偏好的程式設計 AI 代理搭配運作

您可以搭配慣用的程式設計 AI 代理使用 Modern Web Guidance，確保在偏好的工作流程中，取得現代網頁最佳做法的指引。
查看所有安裝選項

使用 Vercel 的 Agent Skills，在專案中安裝 Modern Web Guidance：

npx skills add GoogleChrome/modern-web-guidance

安裝 Claude Code 的 Modern Web Guidance 技能：

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

為 Copilot CLI 安裝 Modern Web Guidance 技能：

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

在 Antigravity CLI 中安裝 Modern Web Guidance 技能：

agy plugin install https://github.com/GoogleChrome/modern-web-guidance

提示可提升使用者體驗

試試下列幾個提示範例，在 AI 輔助程式設計工作流程中呼叫現代化網頁指引，建構新功能、更新舊版程式碼，以及加快應用程式速度。 
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.
結合服務專員適用的 Chrome 開發人員工具和 Modern Web Guidance 技能，提升網頁開發工作流程效率。執行即時效能稽核、檢查無障礙樹狀結構、擷取控制台記錄，然後自動套用精確的現代網頁程式碼修正。
瞭解詳情

瞭解貢獻方式

您對如何改善現代網頁指南有任何想法嗎？瞭解如何貢獻！
瞭解詳情