ทาง Vercel Lab ได้ปล่อย Agent Skills ออกมาให้ใช้งาน
ซึ่งมาช่วยในการพัฒนาฝั่งของ frontend ประกอบไปด้วย
- React และ Next.js best practice
- Web design guideline
มาลองใช้งานกันดู
เริ่มต้นด้วยการติดตั้ง
ทำการเลือก skill และ Agents ที่จะใช้งาน (Claude code, Antigravity, GitHubCopilot )
จากนั้นก็เลือกว่าจะติดตั้งแบบ global หรือ by project
เพียงเท่านี้ก็สามารถใช้งานได้เลย
เมื่อติดตั้งเสร็จแล้ว จะสร้าง folder และ file ต่าง ๆ ดังนี้
โดย React skill ตัวนี้จะเน้นเรื่องของปัญหาหลัก ๆ
ที่มักจะพบเจอในระบบที่พัฒนาด้วย React นั่นเอง
โดย rule ต่าง ๆ มากกว่า 40 เรื่อง ๆ
ยกตัวอย่างเช่น
- การใช้งาน Async แบบผิด ๆ
- Start และ load ช้า
- การ re-render ของ component ต่าง ๆ มากเกินความต้องการ
- ขนาดของ file ที่ build ออกมาใหญ่เกินไป ทำให้ใช้เวลาในการ load นาน
- ใช้ memory เยอะขึ้นเรื่อย ๆ
- ปรับปรุงการทำงานของ code ที่เขียนด้วย JavaScript
ซึ่งใน Skill ทำการกำหนด priority ของการทำงานไว้ในไฟล์ SKILL.md
แบ่งเป็น 8 กลุ่มตามนี้
- Eliminating Waterfalls
- Bundle Size Optimization
- Server-Side Performance
- Client-Side Data Fetching
- Re-render Optimization
- Rendering Performance
- JavaScript Performance
- Advanced Patterns
เมื่อทุกอย่างเรียบร้อย ให้ทำการสร้าง react project
และสั่งให้ทำงาน ยกตัวอย่างเช่น
“Develop login page with vercel react best practice”
จะทำการ load skill ขึ้นมาให้อัตโนมัติ
และทำการ generate code ตาม spec หรือ req ที่เรากำหนดมานั่นเอง
จากนั้นทำการทดสอบ และ validate ดูครับ
ขอให้สนุกกับการ coding
