Project Capture - สกิลสำหรับเอเจนต์ AI ที่ช่วยทำงานจับภาพหน้าจอโปรเจกต์เว็บแบบอัตโนมัติ

ผมทำสิ่งนี้ขึ้นมาเพราะเมื่อจำเป็นต้องจับภาพหน้าจอของโปรเจกต์เว็บซ้ำๆ การต้องตรวจสอบ route, จัดการการล็อกอิน, เลือกขอบเขตการจับภาพ และจัดระเบียบผลลัพธ์ด้วยตนเองทุกครั้งนั้นค่อนข้างยุ่งยาก

project-capture เป็นเครื่องมือที่ให้ AI coding agent วิเคราะห์โปรเจกต์ก่อน จากนั้นยืนยันกับผู้ใช้ว่าจะจับภาพหน้าจอใดบ้าง แล้วจึงสร้างสกรีนช็อตและรายงานด้วย Playwright

เดิมทำเป็น Codex skill แต่ก็เผยแพร่เป็น npm package ด้วย เพื่อให้สามารถใช้งานกับเครื่องมือ AI อื่นๆ อย่าง Claude Code, Gemini CLI หรือแม้แต่บนเทอร์มินัลทั่วไปได้

แทนที่จะเป็น crawler อัตโนมัติเต็มรูปแบบ มันใกล้เคียงกับเครื่องมือที่ช่วยให้เวิร์กโฟลว์ “วิเคราะห์โปรเจกต์ → ยืนยันขอบเขตการจับภาพ → จัดการการล็อกอิน → จับภาพหน้าจอ → สร้างรายงาน” ดำเนินไปได้อย่างเสถียรมากกว่า

ฟีเจอร์หลักมีดังนี้

• วิเคราะห์โครงสร้างโปรเจกต์เพื่อค้นหา route ที่เป็นไปได้
• รองรับแพตเทิร์น route ของ Next.js, Remix, React Router และ SPA ทั่วไป
• เลือกขอบเขตการจับภาพ: ทั้งหมด / โดเมนหลัก / โดเมนที่ระบุ / ระบุเอง
• ตรวจจับว่าจำเป็นต้องล็อกอินหรือไม่ และรองรับการล็อกอินด้วยตนเอง / การล็อกอินผ่านตัวแปรสภาพแวดล้อม
• route แบบ dynamic จะจัดการโดยอิงจาก sample URL
• จับภาพหน้าจอด้วย Playwright
• เลือกได้ระหว่างการจับภาพแบบเลื่อนครบทั้งหน้า หรือจับภาพตาม viewport ที่กำหนด
• สร้าง capture-report.md, capture-results.json