RBRU Skill: Claude / Codex Config และ MCP

Start here

Skill กับ MCP ต่างกันอย่างไร?

ให้นึกว่า Skill คือคู่มือการคิด ส่วน MCP คือช่องทางให้ agent ต่อกับเครื่องมือ Skill บอกวิธีวิเคราะห์และมาตรฐานที่ควรใช้ ส่วน MCP ทำให้ agent อ่านไฟล์ ค้นหา component เปิด browser หรือเรียก API ภายนอกได้

Skill = วิธีทำงาน

ติดตั้งเป็นไฟล์คำแนะนำ เช่น `SKILL.md` แล้ว agent เลือกใช้เมื่อโจทย์ตรงกับ description

MCP = เครื่องมือที่เรียกได้

ติดตั้ง server และเพิ่มใน config ของ client จากนั้น agent จะเห็น tools/resources แล้วเรียกตามงาน

ติดตั้ง Skill แบบทั่วไป

npx skills add <skills.sh-url-or-owner/repo>

# ถ้า repository มีหลาย skill
npx skills add <owner/repo> --skill <skill-name>

Skills CLI รองรับทั้งชื่อ owner/repo และ direct URL ของ skill page; หลังติดตั้งให้ restart agent ถ้า skill ยังไม่ปรากฏ

After install / วิธีเรียกใช้

ติดตั้งแล้วต้องเรียกใช้ยังไง?

Skill มักถูกเลือกใช้อัตโนมัติเมื่อโจทย์ตรงกับคำอธิบาย แต่การระบุชื่อ skill หรือ MCP ใน prompt จะช่วยลดความกำกวม โดยเฉพาะงานที่มีความเสี่ยงหรือมีหลายเครื่องมือให้เลือก

1. ระบุชื่อ

“ใช้ laravel-security ตรวจ feature นี้ก่อนแก้”

2. ระบุขอบเขต

“อ่านเฉพาะ routes, controller และ test ที่เกี่ยวข้อง”

3. ระบุผลลัพธ์

“รายงาน path, severity, patch และคำสั่ง test”

ใช้ skill frontend-design วาง design plan ก่อนเขียนหน้าใหม่

ใช้ Chrome DevTools MCP เปิด http://localhost:3000/blog/rbruskill
ตรวจ console, network, accessibility และ Lighthouse mobile

ใช้ Playwright MCP ทดสอบเปิดบทความ → กดสารบัญ → ตรวจว่า URL เปลี่ยนเป็น #laravel
และไม่มี horizontal scroll

หลังเพิ่ม MCP ให้ restart Claude หรือ Codex ก่อนใช้งาน; ใน Claude Code ใช้ /mcp เพื่อตรวจสถานะ ส่วน Codex ให้ตรวจในรายการ MCP ที่เชื่อมต่ออยู่ แล้วเรียกผ่าน prompt ตามตัวอย่างด้านบน

Install all four / project or machine

Prompt ติดตั้ง Playwright skills ทั้งชุด

Skills CLI ใช้ --global หรือ -g สำหรับระดับเครื่อง; ถ้าไม่ใส่ flag จะติดตั้งใน project scope จาก directory ปัจจุบัน. ตัวอย่างนี้เลือกทั้ง Codex และ Claude Code และใช้ --copy เพื่อให้ไฟล์แยกจาก symlink และตรวจสอบได้ง่าย

ติดตั้งลงโปรเจกต์ปัจจุบัน

รันจาก root ของ repo; เหมาะกับ skill ที่ต้องแชร์กับทีมและผูกกับโปรเจกต์นี้

cd /path/to/project

npx skills add https://github.com/microsoft/playwright-cli --skill playwright-cli --agent codex --agent claude-code --copy --yes
npx skills add https://github.com/currents-dev/playwright-best-practices-skill --skill playwright-best-practices --agent codex --agent claude-code --copy --yes
npx skills add https://github.com/github/awesome-copilot --skill playwright-generate-test --agent codex --agent claude-code --copy --yes
npx skills add https://github.com/github/awesome-copilot --skill playwright-explore-website --agent codex --agent claude-code --copy --yes

npx skills list

ติดตั้งระดับเครื่อง

ใส่ -g; skill จะพร้อมใช้ข้ามทุกโปรเจกต์ของ user ตาม agent ที่เลือก

npx skills add https://github.com/microsoft/playwright-cli --skill playwright-cli --global --agent codex --agent claude-code --copy --yes
npx skills add https://github.com/currents-dev/playwright-best-practices-skill --skill playwright-best-practices --global --agent codex --agent claude-code --copy --yes
npx skills add https://github.com/github/awesome-copilot --skill playwright-generate-test --global --agent codex --agent claude-code --copy --yes
npx skills add https://github.com/github/awesome-copilot --skill playwright-explore-website --global --agent codex --agent claude-code --copy --yes

npx skills list --global

Prompt / project scope

ติดตั้ง Playwright skills ทั้ง 4 ตัวนี้ลงในโปรเจกต์ปัจจุบัน

1. https://www.skills.sh/microsoft/playwright-cli/playwright-cli
2. https://www.skills.sh/currents-dev/playwright-best-practices-skill/playwright-best-practices
3. https://www.skills.sh/github/awesome-copilot/playwright-generate-test
4. https://www.skills.sh/github/awesome-copilot/playwright-explore-website

ทำงานจาก project root และ target เฉพาะ Codex กับ Claude Code
ใช้ Skills CLI ที่รองรับ direct URL หรือ GitHub source พร้อม --skill
หลังติดตั้งตรวจด้วย npx skills list ว่าครบทั้ง 4 ตัวและตรวจไฟล์ SKILL.md ใน project scope
ห้ามแก้ source code, ห้ามติดตั้ง MCP, ห้าม commit และห้าม push
ถ้าคำสั่งหรือ source ใดติดตั้งไม่ได้ ให้หยุดและรายงาน error จริงพร้อมคำสั่งที่ลอง

Prompt / machine-wide scope

ติดตั้ง Playwright skills ทั้ง 4 ตัวนี้ให้ใช้งานระดับเครื่องสำหรับ Codex กับ Claude Code

1. https://www.skills.sh/microsoft/playwright-cli/playwright-cli
2. https://www.skills.sh/currents-dev/playwright-best-practices-skill/playwright-best-practices
3. https://www.skills.sh/github/awesome-copilot/playwright-generate-test
4. https://www.skills.sh/github/awesome-copilot/playwright-explore-website

ใช้ Skills CLI โดยใส่ --global และ --copy
หลังติดตั้งตรวจ npx skills list --global และยืนยันว่า Codex เห็นใน ~/.codex/skills และ Claude Code เห็นใน ~/.claude/skills
ห้ามแก้ repo ปัจจุบัน, ห้ามติดตั้ง MCP, ห้าม commit และห้าม push
ถ้า global path ของ agent รุ่นที่ติดตั้งต่างจากนี้ ให้รายงาน path จริงแทนการเดา

หลังติดตั้งให้เรียกใช้เป็นลำดับ

เริ่มจาก playwright-explore-website เพื่อหา flow → ใช้ playwright-generate-test สร้าง test จาก scenario ที่ยืนยันแล้ว → ใช้ playwright-best-practices review locator และ assertion → ใช้ playwright-cli ตรวจ flow แบบ interactive หรือ debug console/network

ใช้ playwright-explore-website สำรวจ http://localhost:3000/blog/rbruskill
สรุป 3-5 flows พร้อม locator และ expected outcome โดยห้ามแก้ข้อมูลจริง
จากนั้นใช้ playwright-generate-test สร้าง TypeScript test ลง tests/ และรันให้ผ่าน
ใช้ playwright-best-practices review test ที่สร้าง ตรวจ selector, wait, isolation และ assertion
สุดท้ายใช้ playwright-cli เปิดหน้าเดียวกัน ตรวจ snapshot, console และ requests
ห้าม commit หรือ push จนกว่าจะรายงานผลทดสอบและ issue ที่ยังเหลือ

Custom instructions / agent rules

คำสั่งกลางสำหรับ Codex และ Claude

โปรเจกต์นี้ใช้ไฟล์แยกตาม agent แต่ใช้หลักการชุดเดียวกัน: Codex อ่าน AGENTS.md ส่วน Claude อ่าน CLAUDE.md ทั้งสองไฟล์มี communication style, clarification, MCP-first, engineering rules, skill routing และ verification rules แล้ว

งานเล็ก / scope ชัด

เลือก grill-me เพื่อถามเฉพาะจุดที่ยังต้องตัดสินใจ และให้ agent ค้นคำตอบจาก codebase ก่อนถามผู้ใช้

ใช้ grill-me ตรวจ requirement นี้ก่อนแก้โค้ด
ถามทีละคำถามที่จำเป็นเท่านั้น
เมื่อ shared understanding ชัดแล้วสรุป scope และค่อยเริ่ม implement

งานใหญ่ / หลายไฟล์ / ยังไม่ชัด

เลือก grill-with-docs เพื่อผูกแผนกับ domain model และบันทึกคำศัพท์หรือ decision ที่จำเป็นลงเอกสาร

ใช้ grill-with-docs ตรวจแผนนี้กับ codebase, CONTEXT.md และ ADR ที่มีอยู่
ถามทีละข้อและเสนอคำตอบแนะนำ
สร้างหรือแก้ CONTEXT.md/ADR เฉพาะเมื่อมี decision ที่ตกผลึกจริง

ติดตั้ง utility skills ทั้ง 3 ตัวพร้อมกัน

รันจาก project root เพื่อให้ใช้กับ Codex และ Claude Code ในโปรเจกต์นี้; เติม --global ถ้าต้องการใช้ข้ามทุกโปรเจกต์

npx skills add https://github.com/mattpocock/skills --skill grill-me --skill grill-with-docs --skill grilling --agent codex --agent claude-code --copy --yes

# machine-wide
npx skills add https://github.com/mattpocock/skills --skill grill-me --skill grill-with-docs --skill grilling --global --agent codex --agent claude-code --copy --yes

Shared instruction files

Codex:  AGENTS.md
Claude: CLAUDE.md

Primitive ที่เรียกตรงได้: /grilling
Entry points: grill-me สำหรับงานเล็ก, grill-with-docs สำหรับงานใหญ่

ห้าม commit, push, deploy หรือ external action เว้นแต่ผู้ใช้สั่ง
หลังแก้เสร็จต้องตรวจผลจริงด้วย lint, build และ QA ตามความเสี่ยง

Skills / operating knowledge

Skills ที่ควรมีในชุดทำงาน

เลือกติดตั้งตามงาน ไม่จำเป็นต้องลงทุกตัวพร้อมกัน และควรให้ agent อ่าน skill ที่เกี่ยวข้องก่อนเริ่ม implement หรือ audit

01 / BACKEND

Laravel

ใช้เมื่อทำ Laravel feature, วาง architecture หรือ review ความปลอดภัยของระบบฝั่ง server

laravel-specialist

เปิดแหล่งอ้างอิง

jeffallan / claude-skills

ทำหน้าที่อะไร: ผู้เชี่ยวชาญ Laravel สำหรับ routing, controller, model, service, queue และการตั้งค่าแอป
ติดตั้งอย่างไร: npx skills add https://www.skills.sh/jeffallan/claude-skills/laravel-specialist
เรียกใช้งานอย่างไร: ใช้เมื่อขอให้สร้างหรือแก้ feature Laravel โดยระบุ route, model, migration และ test ที่เกี่ยวข้อง

หมายเหตุ: ให้ agent อ่านโครงสร้างโปรเจกต์และ version ของ Laravel ก่อนแก้โค้ดเสมอ

laravel-patterns

เปิดแหล่งอ้างอิง

affaan-m / everything-claude-code

ทำหน้าที่อะไร: ช่วยเลือก pattern สำหรับ Eloquent, service layer, validation, caching, events และ queues
ติดตั้งอย่างไร: npx skills add https://www.skills.sh/affaan-m/everything-claude-code/laravel-patterns
เรียกใช้งานอย่างไร: เรียกใช้ตอนวางโครงสร้าง feature ใหม่หรือ review ว่า logic ควรอยู่ controller, service, action หรือ job

laravel-security

เปิดแหล่งอ้างอิง

affaan-m / everything-claude-code

ทำหน้าที่อะไร: ตรวจ authentication, authorization, CSRF, XSS, mass assignment, API และการจัดการข้อมูลลับ
ติดตั้งอย่างไร: npx skills add https://www.skills.sh/affaan-m/everything-claude-code/laravel-security
เรียกใช้งานอย่างไร: เรียกใช้เป็นรอบ security review ก่อน merge หรือก่อน deploy โดยขอให้รายงาน path, impact และวิธีแก้

หมายเหตุ: Skill ช่วย review แต่ไม่แทนการทดสอบ penetration test หรือการตรวจ production config

02 / FRONTEND ENGINEERING

React / Next.js

ใช้รักษาคุณภาพ React และ Next.js ให้เร็ว อ่านง่าย และไม่เพิ่ม client-side work โดยไม่จำเป็น

vercel-react-best-practices

เปิดแหล่งอ้างอิง

vercel-labs / agent-skills

ทำหน้าที่อะไร: แนวทาง performance จาก Vercel เช่น ลด waterfall, ลด bundle, จัดการ Server/Client Component และ re-render
ติดตั้งอย่างไร: npx skills add https://www.skills.sh/vercel-labs/agent-skills/vercel-react-best-practices
เรียกใช้งานอย่างไร: เรียกใช้ตอนสร้างหรือ refactor component ด้วยคำสั่ง เช่น “review หน้านี้ตาม React performance rules และแก้เฉพาะจุดที่มีหลักฐาน”

หมายเหตุ: เหมาะกับการ review performance ไม่ใช่เหตุผลให้เปลี่ยน architecture ทั้งโปรเจกต์โดยไม่มี measurement

03 / BROWSER TESTING

Playwright สำหรับ browser QA

ใช้สำรวจเว็บไซต์, สร้าง E2E test, ตรวจ interaction และ review ความเสถียรของชุดทดสอบ Playwright

playwright-cli

เปิดแหล่งอ้างอิง

microsoft / playwright-cli

ทำหน้าที่อะไร: ควบคุม browser จาก terminal ด้วยคำสั่งกว่า 40 แบบ เช่น เปิดหน้า, click, fill form, snapshot, console, network และ tracing
ติดตั้งอย่างไร: npx skills add https://github.com/microsoft/playwright-cli --skill playwright-cli
เรียกใช้งานอย่างไร: เรียกใช้เมื่ออยากตรวจ flow แบบ interactive อย่างรวดเร็ว เช่น “ใช้ playwright-cli เปิด /blog/rbruskill ตรวจสารบัญและถ่าย snapshot ก่อนและหลังคลิก”

หมายเหตุ: Skill นี้เป็นคู่มือให้ agent ใช้ CLI ไม่ได้ติดตั้งตัวคำสั่งให้เอง; ถ้าไม่มีคำสั่งให้ตรวจ npx ก่อน แล้วใช้ `npx playwright cli` หรือทำตาม installation ของ CLI

playwright-best-practices

เปิดแหล่งอ้างอิง

currents-dev / playwright-best-practices-skill

ทำหน้าที่อะไร: คู่มือเขียน, debug และดูแล Playwright tests ครอบคลุม locator, assertion, fixture, Page Object Model, flaky test, responsive, accessibility และ CI
ติดตั้งอย่างไร: npx skills add https://github.com/currents-dev/playwright-best-practices-skill --skill playwright-best-practices
เรียกใช้งานอย่างไร: เรียกใช้ตอนสร้างหรือ review test เช่น “ใช้ playwright-best-practices ตรวจ selector, wait, isolation และ retry ของ test นี้ แล้วแก้เฉพาะจุด”

หมายเหตุ: หลังแก้ test ให้รัน `npx playwright test --reporter=list` และทำซ้ำหลายรอบสำหรับ flow สำคัญ ไม่ถือว่า generate ผ่านจนกว่าจะ execute จริง

playwright-generate-test

เปิดแหล่งอ้างอิง

github / awesome-copilot

ทำหน้าที่อะไร: สร้าง Playwright test จาก scenario โดยให้ agent สำรวจและทำตามขั้นตอนผ่าน Playwright MCP ก่อนเขียนไฟล์ TypeScript ลงโฟลเดอร์ tests
ติดตั้งอย่างไร: npx skills add https://github.com/github/awesome-copilot --skill playwright-generate-test
เรียกใช้งานอย่างไร: เรียกใช้เมื่อมี scenario ชัดเจน เช่น “ใช้ playwright-generate-test สร้าง test เปิดหน้าแรก → เปิดบทความ → กดสารบัญ → ตรวจ URL และรัน test ให้ผ่าน”

หมายเหตุ: ต้องมี Playwright MCP ที่เชื่อมต่อได้ และควรตรวจ generated locator, assertion และ test data ก่อนนำไปใช้ใน CI

playwright-explore-website

เปิดแหล่งอ้างอิง

github / awesome-copilot

ทำหน้าที่อะไร: สำรวจเว็บไซต์จาก URL แล้วหา 3–5 user flows, บันทึก element/locator/expected outcome และเสนอ test case ต่อจากสิ่งที่พบ
ติดตั้งอย่างไร: npx skills add https://github.com/github/awesome-copilot --skill playwright-explore-website
เรียกใช้งานอย่างไร: เรียกใช้ก่อน generate test เช่น “ใช้ playwright-explore-website สำรวจ http://localhost:3000 โดยห้าม submit ข้อมูลจริง สรุป flow และ locator ที่พบ”

หมายเหตุ: ควรกำหนด URL, environment, account และสิ่งที่ห้ามทำให้ชัด; skill นี้จะใช้ Playwright MCP และปิด browser context เมื่อสำรวจเสร็จ

04 / PLANNING & CLARITY

Utility: Grill skills

ใช้ตรวจความชัดของ requirement และ stress-test แผนก่อนลงมือ โดยเลือกความเข้มตามขนาดและความเสี่ยงของงาน

grill-me

เปิดแหล่งอ้างอิง

mattpocock / skills

ทำหน้าที่อะไร: สัมภาษณ์ requirement หรือ design แบบถามทีละคำถาม ไล่ decision tree และให้ agent อ่าน codebase เพื่อตอบสิ่งที่ค้นพบได้เอง
ติดตั้งอย่างไร: npx skills add https://github.com/mattpocock/skills --skill grill-me
เรียกใช้งานอย่างไร: ใช้กับงานเล็กหรือ scope ชัดแต่มีจุดที่ต้องยืนยัน เช่น “ใช้ grill-me ตรวจ acceptance criteria ของหน้า contact ก่อนแก้โค้ด” แล้วเริ่ม session ด้วย `/grilling`

หมายเหตุ: ควรถามทีละข้อและยังไม่ implement จนกว่าจะได้ shared understanding; ไม่ใช่คำสั่งให้ถามทุกเรื่องที่อ่านจาก codebase ได้แล้ว

grill-with-docs

เปิดแหล่งอ้างอิง

mattpocock / skills

ทำหน้าที่อะไร: stress-test แผนกับ domain model, glossary และ ADR พร้อมบันทึกคำศัพท์ใน CONTEXT.md และการตัดสินใจสำคัญเป็น ADR เมื่อจำเป็น
ติดตั้งอย่างไร: npx skills add https://github.com/mattpocock/skills --skill grill-with-docs
เรียกใช้งานอย่างไร: ใช้กับงานใหญ่ หลายไฟล์ หรือ requirement ยังไม่ชัด เช่น “ใช้ grill-with-docs ตรวจ redesign นี้กับโครงสร้าง repo และบันทึก decision ที่ย้อนกลับยาก”

หมายเหตุ: ให้เขียน CONTEXT.md/ADR เฉพาะเมื่อมีคำศัพท์หรือ decision ที่ตกผลึกจริง และต้องตรวจ diff ของเอกสารก่อนยอมรับ

grilling

เปิดแหล่งอ้างอิง

mattpocock / skills

ทำหน้าที่อะไร: แกนกลางของเทคนิค interview แบบ one-question-at-a-time ที่ skills อื่นเรียกใช้เพื่อคลี่ dependency และยืนยันความเข้าใจร่วมกัน
ติดตั้งอย่างไร: npx skills add https://github.com/mattpocock/skills --skill grilling
เรียกใช้งานอย่างไร: เรียกตรงด้วย `/grilling` เมื่อต้องการ stress-test แผนอย่างเดียว หรือให้ `grill-me` / `grill-with-docs` เป็น entry point ตามลักษณะงาน

หมายเหตุ: เป็น primitive ที่อยู่เบื้องหลัง ไม่ใช่ workflow แทน grill-me หรือ grill-with-docs ทุกกรณี

05 / UI COMPONENTS

shadcn/ui และ Stitch

ใช้เมื่อต้องสร้าง UI component ที่เข้ากับ design system หรือแปลง design ให้เป็นโค้ดที่ดูแลต่อได้

shadcn/ui

เปิดแหล่งอ้างอิง

shadcn / ui

ทำหน้าที่อะไร: ค้นหา ติดตั้ง และประกอบ component จาก shadcn/ui ให้เข้ากับโปรเจกต์ Tailwind และ components.json
ติดตั้งอย่างไร: pnpm dlx skills add shadcn/ui
เรียกใช้งานอย่างไร: เรียกใช้ด้วย “ค้นหา dialog ที่เหมาะกับโปรเจกต์นี้” หรือ “เพิ่ม button และ form โดยรักษา token เดิม”

หมายเหตุ: Skill กับ shadcn MCP ทำงานคนละชั้น: Skill ให้หลักคิด ส่วน MCP ค้นหา/ติดตั้ง registry ได้โดยตรง

shadcn-ui จาก Google Stitch

เปิดแหล่งอ้างอิง

google-labs-code / stitch-skills

ทำหน้าที่อะไร: ช่วยแปลงหน้าจอหรือแนวทางจาก Stitch ให้เป็น React component ที่ใช้ shadcn/ui
ติดตั้งอย่างไร: npx skills add https://github.com/google-labs-code/stitch-skills --skill shadcn-ui
เรียกใช้งานอย่างไร: เรียกใช้เมื่อมี design reference จาก Stitch แล้วต้องการให้แยกเป็น component, responsive state และไฟล์ในโปรเจกต์จริง

หมายเหตุ: ตรวจ spacing, responsive และ accessibility หลัง generate ทุกครั้ง อย่าวางใจ output โดยไม่ QA

06 / FRONTEND · UI · UX

Frontend และ UI/UX

ใช้กำหนด visual direction, information hierarchy และตรวจว่า UI ใช้งานได้จริง ไม่ใช่แค่สวยในภาพ

frontend-design

เปิดแหล่งอ้างอิง

anthropics / skills

ทำหน้าที่อะไร: วางทิศทาง visual, typography, palette, layout และ signature ของหน้าเว็บให้มีเอกลักษณ์
ติดตั้งอย่างไร: npx skills add https://www.skills.sh/anthropics/skills/frontend-design
เรียกใช้งานอย่างไร: เรียกใช้ก่อนเริ่ม redesign เพื่อให้ agentเสนอ design thesis, token, wireframe และข้อวิจารณ์ก่อนเขียนโค้ด

ui-ux-pro-max

เปิดแหล่งอ้างอิง

nextlevelbuilder / ui-ux-pro-max-skill

ทำหน้าที่อะไร: ค้นหาแนวทาง style, color, typography, UX, interaction และ accessibility ตามประเภทผลิตภัณฑ์
ติดตั้งอย่างไร: npx skills add https://www.skills.sh/nextlevelbuilder/ui-ux-pro-max-skill/ui-ux-pro-max
เรียกใช้งานอย่างไร: เรียกใช้ตอนเลือก design system หรือ audit หน้า เช่น “ตรวจ mobile layout, contrast, focus state และ touch target”

web-design-guidelines

เปิดแหล่งอ้างอิง

vercel-labs / web-interface-guidelines

ทำหน้าที่อะไร: ตรวจ UI ตาม Web Interface Guidelines โดยเน้น usability, accessibility, responsive และ interaction states
ติดตั้งอย่างไร: npx skills add https://www.skills.sh/vercel-labs/agent-skills/web-design-guidelines
เรียกใช้งานอย่างไร: เรียกใช้หลัง implement ด้วยการระบุไฟล์หรือ pattern ที่ต้องการ review แล้วให้รายงานแบบ path:line

design-an-interface

เปิดแหล่งอ้างอิง

mattpocock / skills

ทำหน้าที่อะไร: ช่วยเปลี่ยน requirement ให้เป็น interface ที่มี hierarchy, states, copy และ interaction ชัดเจน
ติดตั้งอย่างไร: npx skills add https://github.com/mattpocock/skills --skill design-an-interface
เรียกใช้งานอย่างไร: เรียกใช้เมื่อมี requirement แต่ยังไม่มี screen structure โดยขอให้เสนอ interface contract ก่อนลง component

07 / DOCUMENTS

PDF และเอกสาร

ใช้เมื่ออ่าน PDF, สร้างเอกสาร หรือทำงานกับ PDF ที่ต้องตรวจทั้งข้อมูลและ layout

pdf

เปิดแหล่งอ้างอิง

anthropics / skills

ทำหน้าที่อะไร: อ่าน, extract, สร้าง, render และตรวจ PDF โดยให้ความสำคัญกับ layout จริงของเอกสาร
ติดตั้งอย่างไร: npx skills add https://www.skills.sh/anthropics/skills/pdf
เรียกใช้งานอย่างไร: เรียกใช้เมื่อต้องการ “extract ตารางจาก PDF”, “สร้าง PDF one-pager” หรือ “render ตรวจทุกหน้า”

หมายเหตุ: ถ้า layout สำคัญ ต้องตรวจด้วยภาพ ไม่พอแค่อ่านข้อความที่ extract ได้

react-pdf

เปิดแหล่งอ้างอิง

vercel-labs / json-render

ทำหน้าที่อะไร: สร้าง PDF จาก React/json-render specification ให้มี component และ layout ที่นำกลับมาใช้ซ้ำได้
ติดตั้งอย่างไร: npx skills add https://www.skills.sh/vercel-labs/json-render --skill react-pdf
เรียกใช้งานอย่างไร: เรียกใช้เมื่อมี JSON spec หรือ React component แล้วต้องการ render เป็นเอกสาร PDF พร้อมตรวจผลลัพธ์

08 / COMMUNICATION

Thai Interpreter

ใช้เป็นชั้นช่วยตีความ requirement ภาษาไทยให้ agent เข้าใจเจตนา ขอบเขต และคำที่มีความหมายเฉพาะ

thai-interpreter

เปิดแหล่งอ้างอิง

nxdus / thai-interpreter

ทำหน้าที่อะไร: แปลและ normalize prompt ภาษาไทยเป็น intent ที่ชัด พร้อมรักษาคำศัพท์ทางธุรกิจและ technical context
ติดตั้งอย่างไร: npx skills add https://www.skills.sh/nxdus/thai-interpreter/thai-interpreter
เรียกใช้งานอย่างไร: เรียกใช้เมื่อ requirement ภาษาไทยกำกวม หรือมีคำเฉพาะ เช่น workflow, สิทธิ์, งวดงาน และ acceptance criteria

หมายเหตุ: ยังต้องยืนยันกับผู้ใช้เมื่อคำกำกวมกระทบ scope, เงิน, ข้อมูล หรือ production

MCP / connected tools

MCP ที่ช่วยให้ agent ทำงานกับโลกจริง

MCP แต่ละตัวต้องเพิ่มเข้า client config แล้ว restart client การเรียกใช้งานส่วนใหญ่ทำผ่านภาษาธรรมชาติ โดยระบุ scope, path, environment และสิ่งที่ห้ามทำให้ชัด

A / LARAVEL

Laravel Boost

Official Laravel

ทำหน้าที่อะไร

MCP และ documentation API ที่ช่วยให้ agent เข้าใจ route, model, migration, config, log และ version ของ Laravel ในโปรเจกต์จริง

อ่านเอกสารต้นทาง

ติดตั้งอย่างไร

composer require laravel/boost --dev
php artisan boost:install

เรียกใช้งานอย่างไร

“ใช้ Boost ตรวจ route และ model ที่เกี่ยวข้องกับ feature นี้ แล้วสรุปผลก่อนแก้”

หมายเหตุ: รันใน Laravel project และเลือก skills ที่ตรงกับ package ที่ตรวจพบ อย่าให้ agent เดา schema จากชื่อไฟล์อย่างเดียว

B / COMPONENT REGISTRY

shadcn/ui MCP

Official shadcn/ui

ทำหน้าที่อะไร

ให้ agent browse, search และติดตั้ง component จาก shadcn registry หรือ registry ภายในทีมผ่าน natural language

อ่านเอกสารต้นทาง

ติดตั้งอย่างไร

pnpm dlx shadcn@latest mcp init --client codex

เรียกใช้งานอย่างไร

“ค้นหา card และ dialog จาก registry แล้วเพิ่มเข้าหน้า contact โดยใช้ style ของโปรเจกต์นี้”

หมายเหตุ: Codex อาจต้องเพิ่ม config ใน ~/.codex/config.toml เองตามเอกสาร client แล้ว restart หลังแก้ config

C / ANIMATION

React Bits MCP

Community MCP server

ทำหน้าที่อะไร

ค้นหา component แบบ animated จาก React Bits พร้อม source code และ demo เพื่อเลือกใช้ให้เข้ากับ UI

อ่านเอกสารต้นทาง

ติดตั้งอย่างไร

ติดตั้ง MCP server ตาม README ของ repository ที่เลือก
แล้วเพิ่ม server เข้า config ของ Claude / Codex

เรียกใช้งานอย่างไร

“ค้นหา animated hero ที่เหมาะกับเว็บรับงานโทน warm แล้วแสดง source, dependency และข้อจำกัด responsive”

หมายเหตุ: มีหลาย community implementation ให้ตรวจ source, license และ dependency ก่อนนำมาใช้จริง

D / BROWSER QA

Chrome DevTools MCP

Official Chrome DevTools

ทำหน้าที่อะไร

ตรวจ DOM, console, network, performance, screenshot, accessibility และ Lighthouse จาก browser จริง

อ่านเอกสารต้นทาง

ติดตั้งอย่างไร

codex mcp add chrome-devtools -- npx chrome-devtools-mcp@latest

เรียกใช้งานอย่างไร

“เปิด localhost:3000 ตรวจ console/network และทำ Lighthouse mobile พร้อมรายงาน issue ที่แก้ได้”

หมายเหตุ: ต้องมี Node.js รุ่นที่รองรับและ Chrome current stable; ใช้กับข้อมูลที่อนุญาตให้ browser เข้าถึงเท่านั้น

E / E2E TESTING

Playwright MCP

Official Microsoft Playwright

ทำหน้าที่อะไร

ควบคุม browser เพื่อทำ E2E, responsive test, form test และตรวจ flow แบบผู้ใช้จริง

อ่านเอกสารต้นทาง

ติดตั้งอย่างไร

codex mcp add playwright -- npx @playwright/mcp@latest

เรียกใช้งานอย่างไร

“ทดสอบ login → กรอก form → submit → ตรวจ success state ที่ desktop และ mobile”

หมายเหตุ: ใช้ test account และข้อมูลจำลอง แยกจาก production account เพื่อป้องกัน side effect

F / REPOSITORY

GitHub MCP

Official GitHub MCP Server

ทำหน้าที่อะไร

อ่าน issue, PR, repository, workflow และข้อมูล GitHub เพื่อทำงานร่วมกับทีม

อ่านเอกสารต้นทาง

ติดตั้งอย่างไร

เก็บ GITHUB_PERSONAL_ACCESS_TOKEN ไว้นอก repo
แล้วรัน GitHub MCP server ผ่าน Docker ตาม official config

เรียกใช้งานอย่างไร

“อ่าน review comments ของ PR นี้ แล้วสรุปเฉพาะ actionable items โดยยังไม่แก้หรือ push”

หมายเหตุ: ให้ token สิทธิ์น้อยที่สุด, ไม่ใส่ token ใน source/log และอย่าเปิด write toolset ถ้าไม่จำเป็น

G / LOCAL FILES

Filesystem MCP

Official MCP servers

ทำหน้าที่อะไร

อ่าน, เขียน, ค้นหา, list และดู metadata ของไฟล์ใน directory ที่อนุญาต

อ่านเอกสารต้นทาง

ติดตั้งอย่างไร

เพิ่ม server โดยอนุญาตเฉพาะ workspace ที่ต้องใช้
npx -y @modelcontextprotocol/server-filesystem /path/to/workspace

เรียกใช้งานอย่างไร

“ค้นหาไฟล์ config ที่เกี่ยวข้อง แล้วอ่านเฉพาะไฟล์ใน workspace นี้”

หมายเหตุ: อย่าให้สิทธิ์ home directory หรือ root กว้างเกินงาน และใช้ read-only เมื่อทำ audit

H / DESIGN SOURCE

Figma Dev Mode MCP

Official Figma

ทำหน้าที่อะไร

อ่าน design, variables, components และ inspect details จาก Figma Dev Mode เพื่อส่งต่อเป็นโค้ด

อ่านเอกสารต้นทาง

ติดตั้งอย่างไร

เปิดใช้ Figma Dev Mode MCP ตามคู่มือ Figma
จากนั้นเชื่อมต่อ MCP client ที่รองรับ

เรียกใช้งานอย่างไร

“อ่าน frame นี้ สรุป token, spacing และ component state แล้วทำ React component ตาม design”

หมายเหตุ: ต้องมีสิทธิ์เข้าถึงไฟล์ Figma และควรระบุ frame/version ที่ต้องการให้ชัด

I / PDF DATA

PDF Reader MCP

Community PDF reader MCP

ทำหน้าที่อะไร

extract text, search, อ่านตาราง และดึงข้อมูลจาก PDF ให้ agent ใช้งานต่อได้

อ่านเอกสารต้นทาง

ติดตั้งอย่างไร

ติดตั้ง MCP server ตาม README ของ repository
แล้วกำหนด path หรือ resource ที่อนุญาตให้เข้าถึง

เรียกใช้งานอย่างไร

“ค้นหาคำว่า acceptance criteria ใน PDF แล้วสรุปเลขหน้าและข้อความที่เกี่ยวข้อง”

หมายเหตุ: ถ้าต้องรักษา layout หรือฟอร์ม ต้องใช้ PDF skill/render ตรวจภาพร่วมด้วย

Recommended workflow

เรียกใช้เป็นลำดับแบบนี้

ทำความเข้าใจ repo

Filesystem MCP หรือ Laravel Boost อ่านโครงสร้าง, route, model, config และข้อจำกัดก่อน

วางแนวทาง

ใช้ Laravel patterns, frontend-design หรือ UI/UX Pro Max ช่วย review ทางเลือกและ acceptance criteria

ลงมือสร้าง

ให้ specialist skill และ shadcn/React skill ช่วย implement โดยแก้เฉพาะไฟล์ที่อยู่ใน scope

ตรวจของจริง

ใช้ Chrome DevTools และ Playwright ตรวจ DOM, console, network, responsive, form และ Lighthouse

ตัวอย่าง prompt ที่ดี

“ใช้ Laravel security และ patterns ตรวจ feature นี้ก่อนแก้โค้ด อ่านไฟล์ที่เกี่ยวข้องเท่านั้น สรุป risk เป็น path และ severity จากนั้นเสนอ patch พร้อม test ที่ต้องรัน ห้าม commit หรือ deploy”

More notes / ARTICLES

บทความอื่นที่น่าอ่าน

Alternative tools

OpenCode + Open Design

ทางเลือกสำหรับคนที่อยากทำงานแบบ local-first และใช้ provider ของตัวเอง

อ่านบทความ

Knowledge system

จดแต่ไม่ต้องจำด้วย Obsidian

สร้างคลังความคิดที่ค้นเจอ เชื่อมโยงได้ และพกพาเป็นไฟล์ Markdown

อ่านบทความ

Handoff docs

ส่งต่องานด้วย docmd

เปลี่ยน Markdown ให้เป็นเอกสารที่อ่านง่าย ค้นหาได้ และตรวจสอบต่อได้

อ่านบทความ

กลับหน้าแรก คุยเรื่องโปรเจกต์