รีวิว agent-skills ของ Addy Osmani: 24 skill สาย production ครบวงจร จากสาย web performance

นี่คือตัวที่สี่และตัวปิดของชุด repo skill สาย Claude Code ที่กำลังมาแรง 3 ตัวก่อนคือ superpowers, karpathy skills และ mattpocock skills ตัวนี้ชื่อ addyosmani/agent-skills ดาว 72.6k เจ้าของคือ Addy Osmani วิศวกรและนักเขียนสาย web performance ของ Google คำอธิบายมันสั้นว่า "ทักษะวิศวกรรมระดับ production สำหรับ AI coding agent"

พอเปิดดู จุดที่ต่างจาก 3 ตัวก่อนชัดทันที มันไม่ได้เล็กหรือมินิมอล แต่เป็น ชุดที่ครบวงจรที่สุด 24 skill คลุมตั้งแต่กำหนดสเปกไปจน ship และที่ไม่มีใครใน 3 ตัวก่อนมีเลยคือสาย web จริง ๆ ทั้งการเทสต์ผ่านเบราว์เซอร์และการปรับ performance ตรงกับความเชี่ยวชาญของเจ้าของพอดี

บทความนี้เล่าเป็นขั้น เริ่มจากมันคืออะไรและทำไมดาวเยอะ ต่อด้วย skill ที่โดดเด่นจริง แล้วเทียบให้เห็นว่าใน 4 ตัวที่รีวิวมา แต่ละตัวเป็นคนละขั้ว ควรหยิบตัวไหน ปิดที่วิธีลงและวิธีที่เราเอามาใช้เอง

ช่วงที่ 1addyosmani agent-skills คืออะไร และทำไมดาวเยอะ

ตัวนี้คือชุดที่ครบวงจรที่สุดใน 4 ตัว ข้างในมี skill 24 ตัว จัดเรียงตามลำดับงานจริง กำหนดสเปก วางแผน เขียน ตรวจ รีวิว จน ship มีทั้ง persona บทบาทเฉพาะทาง คำสั่งลัด และ checklist อ้างอิง ทำมาเป็น plugin ที่ลงได้หลาย host ทั้ง Claude Code, Cursor, Copilot

ที่น่าสนใจคือ พอเปิดอ่านข้างใน แต่ละ skill มี ตารางดักข้ออ้าง แบบเดียวกับที่ superpowers ใช้ คือระบุเหตุผลที่ agent มักยกมาข้ามขั้นตอน พร้อมคำโต้ นี่เป็นครั้งที่สามที่เราเห็นแพตเทิร์นดักข้ออ้างนี้ในของคนละเจ้า ยิ่งยืนยันว่ามันเป็นหลักที่คนทำเรื่องนี้จริงจังมาถึงเหมือนกัน

ทำไมดาวถึงแตะ 72.6k ส่วนหนึ่งมาจากชื่อเจ้าของ Addy Osmani เป็นคนที่วงการ web รู้จักดีในเรื่อง performance แต่ที่สำคัญกว่าคือมันเป็นชุดเดียวที่เอาความรู้สาย web มาทำเป็น skill จริง ไม่ใช่แค่กระบวนการกลาง ๆ

repo มี skill อะไรบ้าง

ถ้ามาหาว่าใน repo addyosmani/agent-skills มี skill อะไรบ้าง ครบทั้ง 24 ตัว สรุปให้ตรงนี้ อ่านตรงจากไฟล์ SKILL.md ในเรพอ จัดตามช่วงงานตั้งแต่กำหนดสเปกจน ship

• Meta using-agent-skills
• Define interview-me, idea-refine, spec-driven-development
• Plan planning-and-task-breakdown
• Build incremental-implementation, test-driven-development, context-engineering, source-driven-development, doubt-driven-development, frontend-ui-engineering, api-and-interface-design
• Verify browser-testing-with-devtools, debugging-and-error-recovery
• Review code-review-and-quality, code-simplification, security-and-hardening, performance-optimization
• Ship git-workflow-and-versioning, ci-cd-and-automation, deprecation-and-migration, documentation-and-adrs, observability-and-instrumentation, shipping-and-launch

จุดที่ไม่มีใน 3 ตัวก่อนอยู่ในช่วง verify คือ browser-testing-with-devtools กับ performance-optimization สาย web ที่จะเล่าต่อด้านล่าง

ช่วงที่ 2skill ที่โดดเด่นจริง

หยิบมา 4 ตัวที่เป็นเอกลักษณ์ ไม่ค่อยเจอในที่อื่น

1. browser-testing-with-devtools ให้ agent มองเห็นในเบราว์เซอร์จริงผ่าน Chrome DevTools แทนที่จะเดาจากโค้ด ใช้ไล่บั๊กหน้าเว็บ ดูเน็ตเวิร์ก และวัดความเร็ว โดยถือว่าเนื้อหาในเบราว์เซอร์เป็นข้อมูลที่ไม่น่าเชื่อ ต้องระวังเรื่องความปลอดภัย
2. performance-optimization ยึดหลัก วัดก่อนแก้ ใช้ทั้งเครื่องมือจำลองอย่าง Lighthouse และข้อมูลผู้ใช้จริง ไล่จับปัญหาที่เจอบ่อยอย่างดึงข้อมูลซ้ำซ้อน โหลดรูปไม่ได้ย่อ และ bundle ใหญ่เกิน
3. source-driven-development กฎคือทุกการตัดสินใจที่ผูกกับเฟรมเวิร์ก ต้องอิงเอกสารทางการ ไม่ใช่เขียนจากความจำของโมเดล ลำดับความน่าเชื่อคือเอกสารทางการ บล็อกทางการ มาตรฐานเว็บ ไม่ใช่คำตอบสุ่มจากเว็บบอร์ด
4. doubt-driven-development หลังทำงานยาว ๆ จนสมมติฐานเริ่มฝังหัว ให้ตั้งผู้ตรวจใหม่ที่เริ่มจากศูนย์ และตั้งใจหาข้อโต้แย้ง ไม่ใช่หาข้อสนับสนุน จำกัดไว้ไม่เกิน 3 รอบ แล้วให้คนตัดสินว่าคุ้มไหม

จุดร่วมของทุกตัวคือความหมกมุ่นกับการยืนยันให้เห็นจริง ทั้งวัด performance จริง เห็นหน้าเว็บจริง อ้างเอกสารจริง ตั้งใจหาจุดที่ตัวเองผิด source-driven กับ doubt-driven ตรงกับสิ่งที่เราย้ำมาตลอดในบล็อกนี้ คืออย่าเชื่อสิ่งที่ AI พูดจนกว่าจะยืนยันกับแหล่งจริง

ช่วงที่ 3สี่ขั้ว เลือกตัวไหน

พอรีวิวครบ 4 ตัว ภาพชัดว่าแต่ละตัวตอบคนละโจทย์

• superpowers ชุด skill พร้อมกติกากันพลาดบังคับ สำหรับ ปล่อย AI ทำงานยาวเอง
• karpathy skills 4 หลักนามธรรมในไฟล์เดียว สำหรับ อยากได้หลักสั้นที่สุด
• mattpocock skills ไดเรกทอรีของคนทำงาน สำหรับ อยากได้เครื่องมือเป็นชิ้นไป remix
• addyosmani agent-skills ชุดครบวงจรที่สุด สำหรับ คนสาย web ที่อยากได้ทั้งกระบวนการและความรู้ performance

ถ้าทำงานสาย frontend หรือแคร์เรื่องความเร็วหน้าเว็บ ตัวของ Addy คือตัวเดียวในสี่ที่ตอบตรงนั้น ทั้งสี่ไม่ได้ขัดกัน จะหยิบ 4 หลักของ karpathy เป็นฐาน เติม skill สาย web ของ Addy ยืมวิธีดักข้ออ้างของ superpowers แล้วเลือก skill เป็นชิ้นแบบ mattpocock ก็ทำได้ ทั้งหมดคือตัวอย่างให้ประกอบชุดของตัวเอง

ช่วงที่ 4ควรลงไหม แล้วเอาไปใช้ยังไง

ควรลอง addyosmani agent-skills ไหม

คุ้มมากถ้าทำงานสาย web หรืออยากได้ชุดกระบวนการที่ครบตั้งแต่ต้นจนจบ ลงเป็น plugin ได้เลย รองรับหลาย host ข้อดีคือครบ ข้อควรระวังคือมันใหญ่ อย่าเพิ่งเปิดใช้ทุกตัว เลือกเฉพาะช่วงงานที่ทำบ่อยก่อน โดยเฉพาะสาย browser กับ performance ที่หาที่อื่นยาก

ไอเดียที่หยิบไปใช้ได้เลย

ต่อให้ไม่ลง repo สองหลักที่หยิบไปใช้ได้ทันทีคือ source-driven กับ doubt-driven อย่าให้ AI เขียนโค้ดที่ผูกกับเฟรมเวิร์กจากความจำ ให้ดึงเอกสารทางการมาก่อนแล้วอ้างที่มา และเมื่อทำงานเรื่องใหญ่มานาน ลองตั้งให้ตรวจซ้ำแบบตั้งใจหาจุดผิด ไม่ใช่หาจุดที่ยืนยันว่าถูก 2 ข้อนี้กันพลาดได้เยอะโดยไม่ต้องลงอะไรเลย

ส่วนเราเอง หยิบแนว source-driven มาเทียบกับกฎที่ใช้อยู่ เพราะมันตรงกับหลักยืนยันก่อนเชื่อที่เราถือมาตลอด ส่วน skill สาย frontend หลายตัวไม่ตรงกับงานเราทุกวัน เลยเลือกเฉพาะบางตัว วิธีที่เราผสมเข้ากับ stack ตัวเองเป็นรายละเอียดที่ยังไม่ลงในบทความนี้

กฎข้อเดียวที่ต้องจำ

ถ้าจะจำอย่างเดียวจากชุดรีวิว 4 ตัวนี้ ขอให้เป็นข้อนี้ ไม่มี repo ไหนที่ต้องเอามาทั้งดุ้น superpowers, karpathy, mattpocock และ addyosmani คือสี่มุมของเรื่องเดียวกัน หยิบส่วนที่ตรงกับงานจากแต่ละตัว แล้วประกอบเป็นชุดของเราเอง นั่นคือวิธีใช้ของพวกนี้ให้คุ้มที่สุด

บทความนี้เป็นหนึ่งชั้นใน สถาปัตยกรรม AI agent ระดับ production ทั้ง 7 ชั้น