# AILoadout manifest — full-stack-dev
# Upload this file to your AI, then say: Use this Loadout and start at workflow step 1.
schema_version: "1.0"
kind: "Loadout"
id: "full-stack-dev"
title: "Full-Stack Dev (React + TypeScript)"
version: "1.0.0"
category: "Coding"
purpose: "ชุดทำงานครบสำหรับสร้างฟีเจอร์เว็บ React + TypeScript กับ AI — ตั้งแต่วางแผน เขียน รีวิว ยันเปิด PR"
expected_outcome:
  - "เขียนฟีเจอร์เร็วขึ้น บั๊กน้อยลง"
  - "โค้ดได้มาตรฐานเดียวกันทั้งทีม"
  - "รีวิว + เขียนเทสต์อัตโนมัติ"
  - "เอกสาร/PR ครบโดยไม่ต้องเขียนเอง"
supported_platforms:
  - "claude-code"
  - "cursor"
  - "windsurf"
  - "cline"
  - "vscode"
  - "codex"
  - "claude"
  - "chatgpt"
prerequisites:
  - "บัญชี GitHub + Personal Access Token (สำหรับ GitHub MCP)"
  - "ติดตั้ง Node.js (สำหรับ npx)"
  - "โปรเจกต์ React + TypeScript ที่จะทำงานด้วย"
resources:
  prompt:
    - id: "prompt-feature"
      name: "Feature Implementation"
      description: "สั่ง AI ทำฟีเจอร์แบบมีสเปกก่อนเขียน — สรุปสเปก ถามจุดไม่ชัด วางไฟล์ แล้วลงมือ"
      source:
        kind: "inline"
      content: |-
        คุณคือ senior full-stack dev
        เมื่อผมสั่งฟีเจอร์ ให้ทำตามลำดับ:
        1. สรุปสเปกสั้นๆ + ถามจุดที่ไม่ชัด
        2. บอกไฟล์ที่จะแตะ
        3. เขียนโค้ดทีละไฟล์ตามมาตรฐานโปรเจกต์
        4. เสนอเทสต์ที่ควรมี
  rule:
    - id: "rule-react-ts"
      name: "React + TypeScript Standards"
      description: "มาตรฐานที่ AI ต้องยึด — strict types, ไม่มี any, ตั้งชื่อชัด, component เล็ก reuse ได้"
      source:
        kind: "inline"
      content: |-
        - ใช้ TypeScript strict เสมอ ห้าม any
        - Functional components + hooks เท่านั้น
        - ตั้งชื่อ prop/ตัวแปรให้สื่อความหมาย
        - แยก component ให้เล็กและ reuse ได้
        - จัดการ error + loading state เสมอ
  agent:
    - id: "agent-code-review"
      name: "Code Reviewer"
      description: "ผู้ช่วยแยกร่างที่รีวิวโค้ดในคอนเทกซ์ของตัวเอง หาบั๊ก/ช่องโหว่ แล้วรายงานกลับ — ไม่รกแชทหลัก"
      source:
        kind: "github"
        ref: "anthropics/claude-code subagents"
        url: "https://docs.claude.com/en/docs/claude-code/sub-agents"
      note: "ℹ️ วางเป็นไฟล์ใน .claude/agents/ — รองรับเต็มบน Claude Code (แพลตฟอร์มอื่นใช้เป็น prompt/skill แทนได้)"
  mcp:
    - id: "mcp-context7"
      name: "Context7"
      description: "ดึงเอกสารไลบรารีเวอร์ชันล่าสุดให้ AI อ้างอิงตอนเขียนโค้ด — ลดการมั่ว API"
      source:
        kind: "registry"
        ref: "upstash/context7"
        url: "https://github.com/upstash/context7"
      install: "npx -y @upstash/context7-mcp"
    - id: "mcp-filesystem2"
      name: "Filesystem"
      description: "ให้ AI อ่าน/เขียนไฟล์ในโปรเจกต์ได้โดยตรง"
      source:
        kind: "registry"
        ref: "@modelcontextprotocol/server-filesystem"
        url: "https://github.com/modelcontextprotocol/servers/tree/main/src/filesystem"
      install: "npx -y @modelcontextprotocol/server-filesystem ."
    - id: "mcp-github"
      name: "GitHub"
      description: "ค้นโค้ด อ่าน issue/PR และเปิด PR ผ่าน AI"
      source:
        kind: "registry"
        ref: "github/github-mcp-server"
        url: "https://github.com/github/github-mcp-server"
  template:
    - id: "template-pr"
      name: "PR Description"
      description: "เทมเพลตคำอธิบาย Pull Request ให้ AI กรอกให้อัตโนมัติ"
      source:
        kind: "inline"
      content: |-
        ## What
        <สรุปสิ่งที่เปลี่ยน>
        ## Why
        <เหตุผล / issue>
        ## How to test
        1. ...
        2. ...
workflow:
  - step: "วางแผน"
    order: 1
    estimated_time: "~5 นาที"
    ai_actions:
      - "สรุปสเปกฟีเจอร์จากที่คุณบอก"
      - "ถามกลับจุดที่ยังไม่ชัด"
      - "เสนอไฟล์ที่จะแตะ"
    user_action: "บอกฟีเจอร์ + ยืนยันสเปก"
    uses:
      - "prompt-feature"
    done_when: "ได้สเปก 3–5 บรรทัด + ไฟล์ที่จะแตะ"
    tip: "อย่ารีบให้ AI เขียนโค้ดก่อนสเปกนิ่ง"
  - step: "วางโครง"
    order: 2
    estimated_time: "~5 นาที"
    ai_actions:
      - "ใช้ Filesystem อ่านโครงโปรเจกต์ปัจจุบัน"
      - "สร้างไฟล์/โฟลเดอร์ตามสเปก"
    user_action: "ยืนยันโครงสร้างก่อนไปต่อ"
    uses:
      - "mcp-filesystem2"
      - "rule-react-ts"
    done_when: "ไฟล์ครบตามสเปก"
    tip: "ให้ Rule ทำงานตั้งแต่ตอนนี้ ชื่อไฟล์จะได้มาตรฐาน"
  - step: "ลงมือเขียน"
    order: 3
    estimated_time: "20–40 นาที"
    ai_actions:
      - "เขียนโค้ดทีละไฟล์ตามมาตรฐาน"
      - "ใช้ Context7 เช็ค API ล่าสุดของไลบรารี"
    user_action: "รีวิวแต่ละไฟล์ก่อนไปไฟล์ถัดไป"
    uses:
      - "prompt-feature"
      - "rule-react-ts"
      - "mcp-context7"
    done_when: "ฟีเจอร์ทำงานได้ครบ"
    tip: "เจอ AI เดา API? สั่ง 'ใช้ Context7 เช็คก่อน'"
  - step: "รีวิว"
    order: 4
    estimated_time: "~10 นาที"
    ai_actions:
      - "เรียก subagent Code Reviewer รีวิวโค้ดที่เพิ่งเขียนในคอนเทกซ์แยก"
      - "รายงานประเด็นเรียงตามความร้ายแรง"
    user_action: "ไล่แก้ตามที่ reviewer ชี้"
    uses:
      - "agent-code-review"
    done_when: "ไม่มีบั๊กร้ายแรงค้าง"
    tip: "ให้ reviewer อยู่คนละ context จะเห็นจุดบอดมากกว่า"
  - step: "เขียนเทสต์"
    order: 5
    estimated_time: "~10 นาที"
    ai_actions:
      - "เขียนเทสต์ให้ path หลัก + edge case"
      - "รันเทสต์"
    user_action: "ดูให้ผ่านหมด"
    uses:
      - "prompt-feature"
      - "rule-react-ts"
    done_when: "เทสต์ผ่านทั้งหมด"
    tip: "เขียนเทสต์หลังรีวิว จะได้เทสต์ในสิ่งที่ถูกแล้ว"
  - step: "เปิด PR"
    order: 6
    estimated_time: "~5 นาที"
    ai_actions:
      - "กรอก PR Description จาก diff จริง"
      - "ใช้ GitHub เปิด PR ให้"
    user_action: "ตรวจคำอธิบาย + วิธีเทสต์ก่อนส่ง"
    uses:
      - "template-pr"
      - "mcp-github"
    done_when: "PR เปิดแล้ว พร้อมวิธีทดสอบ"
    tip: "ใส่ How to test ละเอียด รีวิวเวอร์อนุมัติเร็วขึ้น"
creator:
  name: "AILoadout"
  handle: "@ailoadout"
metadata:
  version: "1.0.0"
  updated_at: "2026-07-22"
  license: "MIT"
