React Agent Skills
มาลองใช้งาน React Agent Skills จาก Vercel กัน
somkiat January 21, 2026 AI, Programming No comments
ทาง Vercel Lab ได้ปล่อย Agent Skills ออกมาให้ใช้งาน
ซึ่งมาช่วยในการพัฒนาฝั่งของ frontend ประกอบไปด้วย
React และ Next.js best practice
Web design guideline
มาลองใช้งานกันดู
เริ่มต้นด้วยการติดตั้ง
ทำการเลือก skill และ Agents ที่จะใช้งาน (Claude code, Antigravity, GitHubCopilot )
จากนั้นก็เลือกว่าจะติดตั้งแบบ global หรือ by project
เพียงเท่านี้ก็สามารถใช้งานได้เลย
$npx add-skill vercel-labs/agent-skills |
Need to install the following packages: |
add-skill@1.0.21 |
┌ skills |
│ |
◇ Source: https://github.com/vercel-labs/agent-skills.git |
│ |
◇ Repository cloned |
│ |
◇ Found 2 skills |
│ |
◆ Select skills to install |
│ ◼ vercel-react-best-practices (React and Next.js performance |
optimization guidelines fro...) |
│ ◻ web-design-guidelines |
└ |
◆ Select agents to install skills to |
│ ◼ Antigravity |
│ ◼ Claude Code |
│ ◼ Codex |
│ ◼ Cursor |
│ ◼ Gemini CLI |
│ ◼ GitHub Copilot (.github/skills) |
│ ◼ Kiro CLI |
│ ◼ Windsurf |
view raw1.txt hosted with ❤ by GitHub
เมื่อติดตั้งเสร็จแล้ว จะสร้าง folder และ file ต่าง ๆ ดังนี้
.github |
└── skills |
└── vercel-react-best-practices |
├── AGENTS.md |
├── SKILL.md |
└── rules |
├── advanced-event-handler-refs.md |
├── advanced-use-latest.md |
├── async-api-routes.md |
├── async-defer-await.md |
├── async-dependencies.md |
├── async-parallel.md |
├── async-suspense-boundaries.md |
├── bundle-barrel-imports.md |
view raw2.txt hosted with ❤ by GitHub
โดย 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 ดูครับ
