เลือกจากทักษะคำแนะนำสำหรับเว็บสมัยใหม่ที่ระบุไว้เพื่อให้ตรงกับระยะปัจจุบันในวงจรการพัฒนาเว็บ ตั้งแต่การจัดสไตล์เริ่มต้นไปจนถึงการติดตั้งใช้งานการรักษาความปลอดภัยขั้นสุดท้าย
สาขาเว็บหลัก
ผู้ประสานงานที่จะช่วยคุณมุ่งเน้นและโฟกัสงานตามสาขาเว็บ
accessibility
/modern-web-guidance accessibility
ทำหน้าที่เป็นคู่มือการตรวจสอบส่วนกลางเพื่อประเมิน แก้ไข และใช้รูปแบบการช่วยเหลือพิเศษที่มีประสิทธิภาพในแอปพลิเคชันทั้งหมด
ดูทักษะ accessibility ใน GitHub
performance
/modern-web-guidance performance
ช่วยคุณเพิ่มประสิทธิภาพ Core Web Vitals ลดเวลาในการโหลดหน้าเว็บ และปรับปรุงการตอบสนองต่อข้อมูลจากผู้ใช้
user-experience
/modern-web-guidance user-experience
ทำหน้าที่เป็นชุดเครื่องมืออินเทอร์เฟซผู้ใช้ (UI) เพื่อใช้คอมโพเนนต์ที่กำหนดเองที่ตอบสนองตามอุปกรณ์ การเปลี่ยนภาพที่ราบรื่น และรูปแบบการจัดสไตล์ที่ทันสมัยได้อย่างรวดเร็ว
ดูทักษะ user-experience ใน GitHub
เทคโนโลยีเว็บ
ทักษะหลักเหล่านี้เป็นองค์ประกอบพื้นฐานสำหรับแอปพลิเคชันสมัยใหม่ ซึ่งจะช่วยให้โปรเจ็กต์ของคุณเริ่มต้นด้วยแนวทางปฏิบัติแนะนำที่ทันสมัย โดยคำนึงถึง HTML เชิงความหมาย ความเร็ว และความสามารถในการทำงานร่วมกัน
html
/modern-web-guidance html
หลักเกณฑ์ที่เน้นการดำเนินการสำหรับสถาปัตยกรรม HTML สมัยใหม่ ความหมาย API แบบอินเทอร์แอกทีฟแบบเนทีฟ (Dialog, Popover, Details) การจัดการโฟกัส และการจัดลำดับความสำคัญของทรัพยากร ใช้คู่มือนี้เมื่อจัดโครงสร้างเอกสารเว็บ ใช้การวางซ้อนแบบเนทีฟ หรือเพิ่มประสิทธิภาพลำดับการโหลดทรัพยากร
css
/modern-web-guidance css
หลักเกณฑ์ที่เน้นการดำเนินการสำหรับสถาปัตยกรรม CSS สมัยใหม่ เลย์เอาต์ และประสิทธิภาพ ใช้คู่มือนี้เมื่อเขียนสไตล์ จัดการระบบการออกแบบ หรือเพิ่มประสิทธิภาพการแสดงผลเว็บ
css-layout
/modern-web-guidance css-layout
เลย์เอาต์ CSS สมัยใหม่ เช่น Flexbox, Grid, Subgrid, Container Queries, Anchor Positioning และ Intrinsic Sizing ใช้ทักษะนี้เมื่อออกแบบคอมโพเนนต์ UI ที่ตอบสนองตามอุปกรณ์หรือเลย์เอาต์หน้าเว็บ
forms
/modern-web-guidance forms
แนวทางปฏิบัติแนะนำสำหรับการสร้างแบบฟอร์มเว็บที่เข้าถึงได้ ปลอดภัย และใช้งานง่าย ใช้คู่มือนี้เมื่อสร้างหรือแก้ไขแบบฟอร์ม อินพุต และขั้นตอนการส่ง
cpp-on-the-web
/modern-web-guidance cpp-on-the-web
การคอมไพล์ C และ C++ สำหรับเว็บสมัยใหม่โดยใช้ WebAssembly ใช้ทักษะนี้เมื่อคุณต้องย้ายโค้ด C++ สร้างไลบรารี C++ ด้วย Emscripten หรือตั้งค่าคอมโพเนนต์ C++ ประสิทธิภาพสูงในเบราว์เซอร์
ดูทักษะ cpp-on-the-web ใน GitHub
ความสามารถของเบราว์เซอร์ (เลือกใช้)
ทักษะเหล่านี้ช่วยคุณพัฒนาส่วนขยาย Chrome ที่เป็นไปตามมาตรฐานสมัยใหม่ เช่น Manifest V3 และเพิ่มประสิทธิภาพการเผยแพร่ไปยัง Chrome เว็บสโตร์ ด้วยความช่วยเหลือในการเตรียมข้อมูลเมตา นโยบายความเป็นส่วนตัว และเหตุผลในการขอสิทธิ์ ทักษะเหล่านี้เป็นแบบเลือกใช้และไม่ได้เปิดใช้โดยค่าเริ่มต้น
chrome-extensions
/modern-web-guidance chrome-extensions
สร้างส่วนขยาย Chrome ที่ปลอดภัยและเป็นไปตามข้อกำหนดภายใต้ Manifest V3 ซึ่งหลีกเลี่ยงข้อผิดพลาดทั่วไปเกี่ยวกับวงจรการทำงานของ Service Worker และการแซนด์บ็อกซ์ หากต้องการเลือกใช้ คุณจะต้องระบุทักษะ chrome-extensions ดังนี้
npx skills add GoogleChrome/modern-web-guidance --skill chrome-extensions
ดูทักษะ chrome-extensions ใน GitHub
ความปลอดภัย ความน่าเชื่อถือ และข้อมูลประจำตัว
ทักษะเหล่านี้มุ่งเน้นไปที่ความน่าเชื่อถือของผู้ใช้ด้วยการรักษาความปลอดภัยแอปพลิเคชันจากการโจมตีฝั่งไคลเอ็นต์ เช่น การเจาะช่องโหว่ XSS ผ่านส่วนหัว HTTP เชิงป้องกันและการแยกแหล่งที่มา นอกจากนี้ นักพัฒนายังสามารถพัฒนาขั้นตอนการตรวจสอบสิทธิ์ด้วยพาสคีย์ ลดการติดตามของบุคคลที่สาม และใช้ทักษะในการย้ายไลบรารี C/C++ ไปยังโมดูล WebAssembly ได้ด้วย
security
/modern-web-guidance security
หลักเกณฑ์ด้านความปลอดภัยเชิงป้องกันสำหรับนักพัฒนาเว็บ (XSS, CSP, คุกกี้, การแยกแบบข้ามต้นทาง) ใช้ทักษะนี้เพื่อเป็นแนวทางในกระบวนการตรวจสอบ ทดสอบ และใช้กฎด้านความปลอดภัยอย่างปลอดภัย
passkeys
/modern-web-guidance passkeys
หลักการที่ครอบคลุมและหลากหลายสำหรับการติดตั้งใช้งาน WebAuthn และพาสคีย์ในเว็บแอปพลิเคชัน ใช้คู่มือนี้เมื่อจัดการการลงทะเบียน การตรวจสอบสิทธิ์ การจัดการ หรือการตรวจสอบสิทธิ์อีกครั้งของพาสคีย์
privacy
/modern-web-guidance privacy
หลักเกณฑ์ที่เน้นการดำเนินการสำหรับนักพัฒนาเว็บในการติดตั้งใช้งานการออกแบบโดยคำนึงถึงความเป็นส่วนตัว ขอบเขตการใช้ข้อมูล การตรวจสอบของบุคคลที่สาม และการจัดการข้อมูลอย่างปลอดภัย ใช้ทักษะนี้เมื่อออกแบบแอปพลิเคชัน ผสานรวมบริการของบุคคลที่สาม จัดการข้อมูลผู้ใช้ หรือกำหนดค่าส่วนหัวด้านความปลอดภัย
ระบบการทำงานเป็นตัวแทน
ทักษะเหล่านี้ช่วยลดช่องว่างระหว่างเว็บแอปพลิเคชันและเวิร์กโฟลว์ AI ด้วย WebMCP การแสดงฟังก์ชันการทำงานของเบราว์เซอร์ฝั่งไคลเอ็นต์เป็นเครื่องมือแบบอินเทอร์แอกทีฟจะช่วยให้คุณสั่งให้ AI Agent โต้ตอบกับฟีเจอร์ของแอปพลิเคชันได้โดยตรง
webmcp
/modern-web-guidance webmcp
ติดตั้งใช้งาน WebMCP เพื่อแสดงฟังก์ชันการทำงานของเบราว์เซอร์ฝั่งไคลเอ็นต์เป็นเครื่องมือแบบอินเทอร์แอกทีฟสำหรับ AI Agent
ขั้นตอนถัดไป
เมื่อทำความเข้าใจคำแนะนำสำหรับเว็บสมัยใหม่แล้ว ก็ได้เวลาลองใช้ด้วยตัวคุณเอง ดูฟีเจอร์และกรณีการใช้งานที่รองรับในคำแนะนำสำหรับเว็บสมัยใหม่ แล้วลองใช้พรอมต์ตัวอย่าง 2-3 รายการเพื่อเริ่มต้นใช้งาน