ผู้ช่วยเขียน Component React

ข้อมูลที่ต้องเตรียม

ไม่มีรายการบังคับ แต่คุณภาพของคำตอบขึ้นกับรายละเอียดที่คุณให้โดยตรง

ระดับความพร้อม: พร้อมใช้ทันที

วางแล้วใช้ได้เลย แทนค่าในวงเล็บด้วยข้อมูลจริงจะได้ผลดีกว่า แต่ไม่บังคับ

เครื่องมือและภาษา

ใช้ได้กับผู้ช่วย AI ทุกตัวที่รับข้อความยาว Skill.md ได้ผลเต็มที่กับผู้ช่วยที่โหลดไฟล์ทักษะได้ ไฟล์เป็นภาษาอังกฤษอย่างเดียว คุยต่อเป็นไทยได้ แต่อย่าแปลตัวไฟล์

ใครควรใช้

โปรแกรมเมอร์ นักพัฒนาซอฟต์แวร์ นอกกลุ่มนี้ควรใช้ผลเป็นจุดตั้งต้น ไม่ใช่คำตอบสุดท้าย

บทบาทที่กำหนดให้ AI

บรรทัดแรกกำหนดตัวตนให้ AI ว่า “You are a senior React engineer.” บทบาทเปลี่ยนคลังศัพท์ สมมติฐาน และระดับความละเอียดที่ AI เลือกใช้

โครงสร้างของคำสั่ง ทีละส่วน

แต่ละหัวข้อวางไว้แก้คนละจุด

• Every component includes — เพิ่มรายละเอียดเฉพาะของงานนี้ (5 ข้อย่อย)
• Rules — ปิดช่องที่ผลลัพธ์มักเพี้ยน (4 ข้อย่อย)
• Output — เพิ่มรายละเอียดเฉพาะของงานนี้ (แบ่งเป็น 3 ขั้น)

ทำไมถึงได้ผลนิ่งกว่าการพิมพ์ถามเอง

ความต่างอยู่ที่การปิดช่องที่ทำให้ AI ต้องเดา กลไกที่ใช้คือ

• มีข้อห้ามระบุไว้ ซึ่งเป็นส่วนที่คนมักลืมใส่ ทั้งที่ช่วยประหยัดเวลาแก้งานได้มากที่สุด

Guardrails มาตรฐานที่ติดมาด้วย

ท้ายไฟล์มีบล็อก Guardrails มาตรฐาน — กรอกตัวแปรให้ครบ บอกตรง ๆ เมื่อข้อมูลไม่พอ และคุมโทนให้อยู่ในกรอบ

ขั้นที่ 1 — เปิดไฟล์และเลือกเครื่องมือ

วางไฟล์ในโฟลเดอร์ skills ของผู้ช่วยที่คุณใช้ — โหลดเป็นทักษะถาวร ไม่ใช่วางในแชทครั้งเดียว ใช้ได้ทั้ง ChatGPT, Claude และ Gemini

ขั้นที่ 2 — รันและอ่านผล

AI จะรับบทเป็น Senior Software Engineer แล้วทำงานตามกรอบที่ไฟล์วางไว้ ถ้าคำตอบยังกว้างไป ให้เติมบริบทแล้วรันซ้ำในแชทเดิม

แก้ตรงไหนเมื่อผลลัพธ์ไม่ตรงใจ

แต่ละหัวข้อคุมพฤติกรรมคนละอย่าง แก้ทีละหัวข้อแล้วรันใหม่ ถ้ารื้อพร้อมกันหลายจุด จะไม่รู้ว่าอะไรได้ผล

ปรับความเข้มของข้อกำหนด

ตัวแปรครบแล้วผลยังไม่ตรง ปัญหามักอยู่ที่ข้อกำหนด ปรับทีละบรรทัด

• เพิ่มหรือลดบรรทัดในหัวข้อ “Rules” คือวิธีคุมผลที่ตรงที่สุด หลุดกรอบซ้ำ ๆ ให้เติมข้อห้ามหนึ่งบรรทัด
• เขียนกลุ่มเป้าหมายให้แคบลง ระบุอาชีพ ช่วงอายุ และความรู้เดิม แทน “คนทั่วไป”
• ไฟล์นี้ยังไม่มีส่วนกำหนดสไตล์ เติมบรรทัดสั้น ๆ ว่าอยากได้โทนไหน ผลจะไม่แกว่งระหว่างรอบ

ใช้ได้ทันที และต่อยอดได้

คำสั่งนี้ใช้งานได้ทันทีโดยไม่ต้องแก้ ถ้าจะปรับ แนะนำให้เก็บต้นฉบับไว้เวอร์ชันหนึ่งเสมอ แล้วแก้บนสำเนา เพราะเมื่อปรับไปหลายรอบจนผลลัพธ์เพี้ยน คุณจะยังมีจุดตั้งต้นให้กลับไปเทียบได้

ต่อเป็น Workflow หลายขั้น

เอาผลจากคำสั่งนี้ไปเป็นข้อมูลตั้งต้นของคำสั่งถัดไปในหมวดเขียนโค้ดและโปรแกรม ร่างก่อนแล้วค่อยส่งต่อให้ตรวจ ได้ผลดีกว่าสั่งทุกอย่างรอบเดียว

ข้อควรรู้เฉพาะไฟล์ Skill.md

ไฟล์นี้เป็น Skill.md ซึ่งตัวเนื้อหาเป็นภาษาอังกฤษโดยตั้งใจ เพราะเป็นไฟล์ที่ AI Agent อ่านเพื่อโหลดความสามารถ ไม่ใช่ข้อความที่คนอ่าน ถ้าจะแก้ ให้คงส่วน frontmatter ด้านบน (บรรทัด name และ description) ไว้ตามเดิม เพราะระบบใช้สองบรรทัดนี้ในการค้นหาและเรียกใช้สกิล ส่วนเนื้อหาด้านล่างแก้ได้อิสระ

หน้าตาของคำตอบ

ไม่ได้ล็อกเทมเพลตตายตัว แต่กรอบ 3 ส่วนทำให้คำตอบเดินตามลำดับเดิมทุกครั้ง

• คืนคอมโพเนนต์แบบมี type + สถานะ empty/loading + เทสต์ Vitest

สิ่งที่คำสั่งนี้จะไม่ทำ

ข้อจำกัดเหล่านี้ตั้งใจใส่ไว้ — คำตอบที่ยอมบอกว่าไม่รู้ มีประโยชน์กว่าคำตอบที่มั่นใจแต่ผิด

• “Rules” ระบุสิ่งที่ห้ามทำไว้ชัดเจน 4 ข้อ คำตอบที่ข้ามข้อห้ามเหล่านี้ถือว่าไม่ผ่าน
• ท้ายไฟล์มีกติกามาตรฐาน — ไม่กุข้อมูล ไม่แทนผู้เชี่ยวชาญ และบอกขอบเขตของตัวเอง

วิธีดูว่ารอบนี้ได้ผลดีหรือยัง

สัญญาณของรอบที่ดี คือคำตอบอ้างอิงข้อมูลที่คุณให้จริง ไม่ใช่ตัวอย่างสมมติ ถ้ายังกว้างอยู่ ให้เติมรายละเอียดแล้วรันซ้ำ คำตอบที่กว้างจนใช้กับใครก็ได้ มักเกิดจากวงเล็บที่ยังไม่ได้แทนค่า