สร้างด้วยคำแนะนำสำหรับเว็บสมัยใหม่
คำแนะนำเกี่ยวกับเว็บสมัยใหม่คือชุดทักษะที่ผ่านการตรวจสอบจากผู้เชี่ยวชาญและเป็นข้อมูลที่อัปเดตอยู่เสมอ ซึ่งจะแนะนำเอเจนต์การเขียนโค้ดด้วย AI ในกรณีการใช้งานทั่วไปมากมายเพื่อสร้างประสบการณ์การใช้งานเว็บสมัยใหม่ที่เข้าถึงได้ มีประสิทธิภาพ และปลอดภัย
ติดตั้งด้วย modern-web-guidance CLI (แนะนำ):
npx modern-web-guidance@latest install
ใช้งานได้กับ AI Coding Agent ที่คุณต้องการ
คุณสามารถใช้คำแนะนำสำหรับเว็บสมัยใหม่กับเอเจนต์การเขียนโค้ด AI ที่คุณชื่นชอบ เพื่อให้มั่นใจว่าคุณจะเข้าถึงคำแนะนำสำหรับแนวทางปฏิบัติแนะนำของเว็บสมัยใหม่ในเวิร์กโฟลว์ที่คุณต้องการได้
npx skills
ติดตั้งคำแนะนำสำหรับเว็บสมัยใหม่ในโปรเจ็กต์โดยใช้ Agent Skills ของ Vercel ดังนี้
npx skills add GoogleChrome/modern-web-guidance
Claude Code
ติดตั้งทักษะคำแนะนำเว็บสมัยใหม่สำหรับ Claude Code
# 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
ติดตั้งทักษะคำแนะนำเกี่ยวกับเว็บสมัยใหม่สำหรับ 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
ติดตั้งทักษะคำแนะนำเกี่ยวกับเว็บสมัยใหม่ใน Antigravity CLI โดยทำดังนี้
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 สำหรับตัวแทน
รวมเครื่องมือสำหรับนักพัฒนาเว็บใน Chrome สำหรับตัวแทนเข้ากับทักษะคำแนะนำเกี่ยวกับเว็บสมัยใหม่เพื่อปรับปรุงเวิร์กโฟลว์การพัฒนาเว็บ เรียกใช้การตรวจสอบประสิทธิภาพแบบเรียลไทม์ ตรวจสอบโครงสร้างการช่วยเหลือพิเศษ และบันทึกข้อความคอนโซล จากนั้นใช้การแก้ไขโค้ดเว็บสมัยใหม่ที่แม่นยำโดยอัตโนมัติ
เรียนรู้วิธีมีส่วนร่วม
หากคุณมีข้อเสนอแนะเกี่ยวกับวิธีปรับปรุงคำแนะนำสำหรับเว็บสมัยใหม่ ดูวิธีมีส่วนร่วม