What is Modern Web Guidance?

Modern Web Guidance is a set of skills that embed web platform expertise, best practices, and browser compatibility data directly into your coding agents. Install it with npx modern-web-guidance@latest install, or as a plugin for Claude Code, Copilot CLI, or Antigravity CLI.

Is Modern Web Guidance only for Chrome?

No. Modern Web Guidance is published by Chrome for Developers, but its skills are built on web platform standards and browser compatibility data, so the guidance applies to code that runs in any modern browser.

How do I stop my AI coding agent from generating outdated HTML, CSS and JavaScript?

Install Modern Web Guidance in your agent. Its skills give the agent current web platform best practices and browser compatibility data, so prompts like "Update legacy modal window implementations to use the element" or "Migrate legacy tooltips to use the Popover API and CSS Anchor Positioning" produce modern, well-supported code.

Which AI coding agents does Modern Web Guidance work with?

Modern Web Guidance can be used with your favorite AI coding agents. Documented install paths include the modern-web-guidance CLI (npx modern-web-guidance@latest install), npx skills, Claude Code, Copilot CLI, and Antigravity CLI.

What can I build with Modern Web Guidance?

Build new user experiences (accordion components with smooth animation, tab bars using CSS Anchor Positioning, dashboard cards with container queries), modernize legacy code ( , Popover API), improve security (passkey login with WebAuthn, a starter Content Security Policy, security audits), and improve performance (preload on hover, fix long tasks affecting INP, improve LCP).

นี่คือตัวอย่างเบื้องต้นของคำแนะนำสำหรับเว็บสมัยใหม่ เรากำลังเพิ่มเนื้อหาใหม่อย่างต่อเนื่อง และยินดีรับการมีส่วนร่วมหรือความคิดเห็นใน GitHub

Google ใช้เทคโนโลยี AI เพื่อแปลเนื้อหาเป็นภาษาที่คุณต้องการ การแปลโดย AI อาจมีข้อผิดพลาด

Modern Web Guidance

Modern Web Guidance คือชุดทักษะที่ฝังความเชี่ยวชาญด้านแพลตฟอร์มเว็บ แนวทางปฏิบัติแนะนำ และข้อมูลความเข้ากันได้ของเบราว์เซอร์ลงในเอเจนต์การเขียนโค้ดโดยตรง

ติดตั้งด้วย modern-web-guidance CLI (แนะนำ):

npx modern-web-guidance@latest install

เริ่มใช้งาน ดูใน GitHub

ใช้งานได้กับ AI Coding Agent ที่คุณต้องการ

Modern Web Guidance สามารถใช้กับ Agent การเขียนโค้ด AI ที่คุณชื่นชอบได้ เพื่อให้คุณเข้าถึงคำแนะนำเกี่ยวกับแนวทางปฏิบัติแนะนำสำหรับเว็บสมัยใหม่ในเวิร์กโฟลว์ที่ต้องการ

ดูตัวเลือกการติดตั้งทั้งหมด

`npx skills`

ติดตั้ง Modern Web Guidance ในโปรเจ็กต์โดยใช้ Agent Skills ของ Vercel ดังนี้

npx skills add GoogleChrome/modern-web-guidance

Claude Code

ติดตั้ง Modern Web Guidance จากปลั๊กอิน Claude Code:

claude plugin install modern-web-guidance@claude-plugins-official

Copilot CLI

ติดตั้งทักษะ Modern Web Guidance รายการสำหรับ Copilot CLI:

# 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 สำหรับ Antigravity CLI

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

Modern Web Guidance ในงาน Google I/O

ดูเซสชัน Modern Web Guidance ที่งาน Google I/O เพื่อดูข้อมูลเพิ่มเติมเกี่ยวกับทักษะและวิธีที่ทักษะเหล่านี้ช่วยปรับปรุงเวิร์กโฟลว์การพัฒนาเว็บที่ใช้ AI ช่วย

ดูเลย

พรอมต์เพื่อประสบการณ์ของผู้ใช้ที่ดีขึ้น

ลองใช้พรอมต์ตัวอย่างต่อไปนี้เพื่อเรียกใช้ 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.

ข้อมูลเบื้องต้นเกี่ยวกับ Codelab ของ Modern Web Guidance

ดูวิธีแนะนำผู้ช่วยเขียนโค้ด AI ให้สร้างโค้ดเว็บที่ล้ำสมัยและทำงานร่วมกันได้ ใน Codelab เบื้องต้นนี้ คุณจะตรวจสอบเว็บแอปเดิมและใช้เครื่องมือ Modern Web Guidance เพื่อแจ้งให้ตัวแทนทราบถึงแนวทางปฏิบัติแนะนำสมัยใหม่ เรียนรู้วิธีกำหนดเป้าหมายเบราว์เซอร์ Baseline เพิ่มประสิทธิภาพ Core Web Vitals และเปลี่ยนเอาต์พุต AI ทั่วไปให้เป็นโซลูชันเว็บที่มีประสิทธิภาพสูง

เริ่มใช้งาน

ใช้ทักษะ Modern Web Guidance กับเครื่องมือสำหรับนักพัฒนาเว็บใน Chrome สำหรับ Agent

รวมเครื่องมือสำหรับนักพัฒนาเว็บใน Chrome สำหรับ Agent เข้ากับทักษะ Modern Web Guidance เพื่อปรับปรุงเวิร์กโฟลว์การพัฒนาเว็บ เรียกใช้การตรวจสอบประสิทธิภาพแบบเรียลไทม์ ตรวจสอบแผนผังการช่วยเหลือพิเศษ และบันทึกคอนโซล จากนั้นใช้การแก้ไขโค้ดเว็บสมัยใหม่ที่แม่นยำโดยอัตโนมัติ

ดูข้อมูลเพิ่มเติม

เรียนรู้วิธีมีส่วนร่วม

หากมีแนวคิดเกี่ยวกับวิธีปรับปรุง Modern Web Guidance ดูวิธีที่คุณสามารถมีส่วนร่วมได้