8.7

ใช้ Superpowers กับงานทำเว็บ

ตัวอย่างนี้ใช้กับงานเพิ่ม Contact Form ในเว็บ Next.js ซึ่งเป็นงานที่มีหลายส่วน เช่น UI, validation, state, database และ verification

Step 1: Brainstorm ก่อนเขียนโค้ด

Text
ฉันต้องการเพิ่มระบบ Contact Form ในเว็บ Next.js นี้
ช่วย brainstorm แนวทางก่อน ยังไม่ต้องเขียนโค้ด
เป้าหมายคือเก็บ lead ชื่อ เบอร์ LINE ID และบริการที่สนใจ

Step 2: ทำ Design / Spec

Text
จากแนวทางที่เลือก ช่วยสรุป design document
ระบุไฟล์ที่จะเกี่ยวข้อง data flow, validation, success state, error state และวิธีทดสอบ

Step 3: ขอ Plan ก่อน Execute

Text
ช่วยเขียน implementation plan เป็น task เล็ก ๆ
แต่ละ task ต้องระบุ:
- ไฟล์ที่จะแก้
- สิ่งที่ต้องทำ
- วิธี verify
ยังไม่ต้องลงมือแก้โค้ด

Step 4: Execute ทีละ task

Text
เริ่ม execute task 1 ตาม plan
หลังทำเสร็จให้สรุปไฟล์ที่แก้และวิธีตรวจ

Step 5: Review และ Verify

Text
ช่วย review งานที่ทำเทียบกับ plan
จัด findings ตาม severity
ถ้าไม่มี issue ให้บอก test gap หรือ residual risk
  • เข้าใจว่า Superpowers คือ workflow ไม่ใช่ shortcut
  • รู้ว่าเมื่อไรควรใช้และเมื่อไรไม่จำเป็น
  • ติดตั้งจากแหล่งที่เชื่อถือได้
  • ใช้ Brainstorm และ Plan ก่อนแก้หลายไฟล์
  • Review และ Verify ทุกครั้งก่อนถือว่างานเสร็จ