เลือกจากทักษะคำแนะนำเกี่ยวกับเว็บสมัยใหม่ที่แสดงไว้เพื่อให้ตรงกับขั้นตอนปัจจุบันในวงจรการพัฒนาเว็บ ตั้งแต่การจัดรูปแบบเริ่มต้นไปจนถึงการติดตั้งใช้งานความปลอดภัยขั้นสุดท้าย
สาขาวิชาหลักของเว็บ
Orchestrators เพื่อช่วยปรับแต่งและมุ่งเน้นงานของคุณตามหลักการของเว็บ
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 โต้ตอบกับฟีเจอร์ของแอปพลิเคชันได้โดยตรง
webmcp
/modern-web-guidance webmcp
ใช้ WebMCP เพื่อแสดงฟังก์ชันการทำงานของเบราว์เซอร์ฝั่งไคลเอ็นต์เป็นเครื่องมือแบบอินเทอร์แอกทีฟสำหรับ AI Agent
ขั้นตอนถัดไป
เมื่อเข้าใจคำแนะนำในการพัฒนาเว็บที่ทันสมัยแล้ว ลองใช้ด้วยตัวคุณเอง ดูฟีเจอร์และกรณีการใช้งานที่รองรับในคำแนะนำในการพัฒนาเว็บที่ทันสมัย และลองใช้พรอมต์ตัวอย่างเพื่อเริ่มต้นใช้งาน