← กลับหน้าภาพรวม

ZENITYX HANDS-ON · VERSION 1.0

สร้าง “เงินเข้าเงินออก”
ทีละขั้นจนขึ้นระบบทดลอง

เปิด Claude Desktop ใน Code tab วางกฎและ Skills ให้พร้อม แล้วใช้ Master Prompt เดียวเป็นแกน เพื่อเดินงานผ่าน Local Build, Supabase RLS, Verification และ Cloudflare Deploy อย่างมีหลักฐาน

ผลลัพธ์สุดท้ายFULL-STACK
ACCOUNTING APP
  • ✓ Auth + Protected Routes
  • ✓ CRUD + Monthly Dashboard
  • ✓ Supabase RLS
  • ✓ Cloudflare Learning URL
01

CLAUDE DESKTOP · CODE TAB

เลือกหน้าจอให้ถูกก่อนเริ่มสร้าง

เส้นทางหลักของคลาสคือ Claude Desktop → Code → Local เพราะเข้าถึงโฟลเดอร์โปรเจกต์, Diff, Terminal และ Preview ได้ในหน้าต่างเดียว

ใช้สร้างระบบ

Code tab

  • เลือก Project root บนเครื่อง
  • เห็นไฟล์, Diff, Terminal และ Preview
  • ตรวจและอนุมัติการเปลี่ยนแปลงได้
ไม่ใช่ Build Path หลัก

Chat / Cowork

  • Chat ใช้อธิบายแนวคิดหรือซ้อม Prompt
  • Cowork เหมาะกับงานเอกสารหรือ background task
  • อย่าคิดว่าสองหน้านี้เห็น repo เหมือน Code tab
1

Claude Desktop

อัปเดตเวอร์ชันล่าสุดและ Sign in ด้วยบัญชีที่ใช้ Code tab ได้

2

Supabase

มี Account และ Dev Project ที่ไม่มีข้อมูลจริง

3

Cloudflare

มี Account สำหรับรับ Learning Deployment URL

4

เครื่องมือพื้นฐาน

Node.js LTS, npm, Git และ Docker Desktop พร้อมใช้งาน

  1. 01
    ติดตั้ง Claude Desktop + Git for Windows

    Desktop มี Claude Code engine อยู่แล้ว จึงไม่ต้องติดตั้ง CLI เป็น prerequisite ของผู้เรียน Windows แต่ Code tab ต้องมี Git for Windows และต้องเปิดแอปใหม่หลังติดตั้ง

  2. 02
    สร้างโฟลเดอร์ว่างและเริ่ม Git repo

    ใช้ชื่อเช่น accounting-app: ตัวพิมพ์เล็ก a–z, เลข 0–9 และ hyphen เท่านั้น ห้ามขึ้น/ลงท้ายด้วย hyphen และยาวไม่เกิน 58 ตัวอักษร เปิด Code → Local → Select folder ที่ Project root จริง แล้วรัน git init กับ git status ห้ามเลือก OneDrive หรือโฟลเดอร์แม่ที่มีงานอื่น

  3. 03
    คง Ask permissions

    อย่าเปิด Bypass permissions ให้จัดหน้าจอ Chat, Diff, Terminal และ Preview ไว้ตรวจงานทีละจุด

  4. 04
    เตรียมบริการ Dev/Test

    สร้าง Supabase Dev Project ที่ไม่มีข้อมูลจริง เก็บ Database password ใน Password Manager เตรียม Cloudflare Account และเปิด Docker Desktop จน Engine พร้อม

CHECKLISTผู้เรียนเช็ก · Claude Desktop Code-tab Setup
1. ดาวน์โหลด/อัปเดต Claude Desktop แล้ว Sign in
2. Windows: ติดตั้ง Git for Windows และเปิดแอปใหม่
3. สร้าง Project root ว่างชื่อแบบ accounting-app: a-z, 0-9, hyphen เท่านั้น ไม่ขึ้น/ลงท้ายด้วย hyphen และยาวไม่เกิน 58 ตัวอักษร
4. เปิด Code → Local → Select folder ที่เป็น Project root
5. เปิด Terminal แล้วรัน git init และ git status ใน Project root
6. เลือก Permission mode: Ask permissions
7. เปิดมุมมอง Chat + Diff + Terminal + Preview
8. ใช้ /memory หา/เปิด Global rules แล้วใช้ /context ยืนยันไฟล์ที่ถูกโหลด
POWERSHELLผู้เรียนรันครั้งเดียว · Initialize Project Git
git init
git status
Desktop กับ CLI ใช้ engine และ configuration ร่วมกัน

หลักสูตรนี้ใช้ UI ของ Desktop เป็นหลัก ส่วน CLI เป็นทางเลือกสำหรับผู้สอนหรือ troubleshooting ต้องมีแผน Pro, Max, Team หรือ Enterprise ที่รองรับ Code tab

POWERSHELLผู้เรียนรันใน Terminal pane · ตรวจเครื่องมือโปรเจกต์
node --version
npm --version
git --version
docker --version
docker info --format "{{.ServerVersion}}"
ถ้า Supabase Local ต้องใช้ Docker

เครื่องที่ไม่มี Docker ยังสร้างโค้ดและ Migration ได้ แต่ต้องบอกว่า Local DB tests “ยังไม่ได้ verify” และห้ามข้าม Gate B ไป Apply Remote ทันที

ผลลัพธ์ที่ต้องเห็น

Code tab เปิด Local session ที่ Project root ว่างและชื่อตรงกฎ C3, Ask permissions ทำงาน, Git/Node/npm พร้อม และ Docker แสดง Server Version ส่วน Supabase/Wrangler จะตรวจเป็น project dependency หลัง Scaffold และ Gate S

02

PROMPT ENGINEERING + CLAUDE.MD

ก่อน Prompt เดียว ต้องวาง “ระบบกติกา”

One Prompt ที่ดีไม่ใช่ประโยคสั้น ๆ แต่เป็นสัญญางานที่บอก Goal, Context, Constraints, Acceptance Criteria, Approval Gates และ Evidence อย่างครบถ้วน

01 Goal02 Context03 Constraints04 Acceptance05 Gates06 Evidence
หลักจาก Karpathy-style CLAUDE.md

คิดก่อนทำ, ใช้วิธีเรียบง่าย, แก้เฉพาะขอบเขต และกำหนดผลลัพธ์ที่ตรวจได้ เราใช้เป็น reference แล้ว merge กับกฎเดิม ไม่คัดลอกทับทั้งไฟล์

  1. 01
    สร้าง User / Global Rules

    บน Windows เปิด %USERPROFILE%\.claude\CLAUDE.md ตรวจของเดิมก่อน แล้ว merge เฉพาะกฎทั่วไป ไฟล์นี้กระทบทุก Local Project ของผู้เรียน

  2. 02
    เตรียม Project Rules เป็น Draft

    อ่าน Template ด้านล่างได้ แต่ยังห้ามสร้าง CLAUDE.md, CLAUDE.local.md, .mcp.json, package.json, package-lock.json หรือ node_modules ใน Project root เพราะ C3 ต้อง Scaffold ก่อน

  3. 03
    ให้ C3 สร้างโครงก่อน

    หลัง Master Prompt ขอ Gate S สำหรับ C3 ให้รัน exact-version command ที่กำหนด เมื่อ Scaffold จบแล้วจึงให้ Agent สร้าง Project CLAUDE.md และไฟล์เฉพาะโปรเจกต์

  4. 04
    ตรวจ Rules ใน Session เดิม

    หลัง C3 + Project Rules ใช้ /memory เปิดตำแหน่งไฟล์กติกา แล้วใช้ /context ยืนยัน Global + Project files จากนั้นให้ Agent อ่าน Project CLAUDE.md โดยตรงและทำต่อ หากไฟล์ไม่ปรากฏจริงจึงเปิด Local session ใหม่แล้วใช้ Rescue Prompt “กู้สถานะ”

PROMPTPrompt · ให้ AI เสนอ Global Rules แบบไม่เขียนไฟล์
อ่าน CLAUDE.md จาก
https://github.com/multica-ai/andrej-karpathy-skills/blob/main/CLAUDE.md

สรุปหลัก “คิดก่อนทำ · simplicity · surgical changes · goal-driven verification”
แล้วเสนอ diff ขนาดสั้นสำหรับ %USERPROFILE%\.claude\CLAUDE.md

ห้ามเขียนไฟล์จนกว่าฉันตอบ APPROVE USER CLAUDE.MD
ห้ามใส่ secret, stack หรือกฎเฉพาะโปรเจกต์ และห้ามเขียนทับกฎเดิม

User / Global · ทุก Local Project

%USERPROFILE%\.claude\CLAUDE.md เก็บนิสัยร่วม เช่น minimum diff, safety, skill gate และ verify ไม่ใส่ stack หรือ secret ของโปรเจกต์ใดโปรเจกต์หนึ่ง

MARKDOWNTemplate · Global CLAUDE.md
# Global Claude Code Rules

## วิธีคิดก่อนลงมือ
- ระบุ assumptions และความไม่แน่ใจก่อนแก้ไฟล์
- เลือกวิธีที่ง่ายที่สุดซึ่งผ่าน acceptance criteria
- แก้เฉพาะสิ่งที่โยงกับคำขอ ห้าม refactor งานข้างเคียง
- แปลงงานเป็นผลลัพธ์ที่ตรวจได้ แล้ววนแก้จนมีหลักฐาน

## Skill workflow
- ก่อนงานหลายขั้น ให้ตรวจ descriptions ของ Skills/Plugins ที่ติดตั้งแล้วและเลือกชุดเล็กที่สุดที่ตรงงาน
- ถ้าขาดความสามารถ ให้ทำ read-only research จาก official docs และ trusted source แล้วเสนอ shortlist พร้อม source, reviewed version/commit, scope, files/scripts/hooks/MCP, dependency, permission, update policy และ risk
- ห้ามติดตั้ง ตั้งค่า execute หรืออัปเดต Tool, Skill, Plugin, MCP หรือ global package จนกว่าฉันอนุมัติ action, ชื่อ แหล่งที่มา version/ref และ scope แบบเจาะจง
- หนึ่ง approval อนุมัติได้หนึ่ง exact item เท่านั้น การติดตั้งกับการรัน setup/config ต้องขอแยกกัน และทุก update ต้องผ่าน approval ใหม่
- การเพิ่ม Marketplace กับการติดตั้ง Plugin เป็นคนละ exact item และต้องขอ approval แยก
- ก่อน C3 อนุญาตเฉพาะ user-scope action ที่ตรวจแล้วว่าไม่เขียน Project root; project/local action, setup และ MCP config ต้องรอหลัง Scaffold
- Supabase CLI และ Wrangler ต้อง pin exact version เป็น project dependency; ห้ามใช้ unqualified npx ที่อาจดาวน์โหลด package เอง
- C3 เป็นข้อยกเว้นแบบครั้งเดียว: หลัง Gate S ให้ใช้ exact-qualified npm exec ก่อนสร้าง Project files พร้อม flags --no-auto-update --no-deploy --no-open --no-git
- ห้ามติดตั้ง bundle เดียวกันซ้ำหลายวิธี

## Safety
- ห้ามแสดง secret, token, password, JWT หรือค่า credential ใน chat, log, source หรือ screenshot
- ห้ามเปลี่ยน remote database, production config, deploy, publish, push หรือสร้างทรัพยากรที่มีค่าใช้จ่ายโดยไม่มี approval gate
- ห้ามเปลี่ยน Nameserver, DNS record, Custom Domain หรือ Auth URL โดยไม่มี approval ที่ระบุ zone, hostname, target และ exact diff
- ใช้ manual permission review และห้าม bypass permissions
- รักษาไฟล์และ git changes เดิมของผู้ใช้

## Verification
- รายงาน command และผลจริง แยกสิ่งที่ผ่านออกจากสิ่งที่ยังไม่ได้ verify
- รัน typecheck, lint, tests, coverage และ build ที่เกี่ยวข้องก่อนอ้างว่าเสร็จ
- หยุด dev server ก่อน production build
- ไม่ใช้ TODO, placeholder, skipped tests หรือการปิดกฎเพื่อทำให้ผลตรวจผ่าน

Project · Draft ก่อน C3

อ่าน <repo>\CLAUDE.md Template นี้ได้ แต่ยังห้ามเขียนลง Project root จน C3 Scaffold เสร็จ จากนั้นจึงเก็บ Goal, Stack, Commands, Data rules และ Gates ไว้ใน Git ส่วน CLAUDE.local.md ต้องอยู่ใน .gitignore

MARKDOWNDraft Template · เขียนหลัง C3 เท่านั้น
# Project — Full-Stack Accounting Learning App

## Goal
สร้างเว็บบันทึกรายรับ–รายจ่ายส่วนบุคคลภาษาไทยเพื่อการเรียนรู้ด้วย React, Supabase และ Cloudflare

## Scope boundary
- ใช้ข้อมูลจำลองเท่านั้น ไม่ใช่ระบบบัญชี ภาษี หรือกฎหมายที่ผ่านการรับรอง
- เงินเก็บเป็น integer หน่วยสตางค์ ห้ามใช้ floating-point เป็น source of truth
- ทุกตารางที่ผู้ใช้เข้าถึงต้องเปิด RLS และทดสอบ User A/B isolation

## Required commands
- npm run typecheck
- npm run lint
- npm run test -- --run
- npm run test:coverage
- npm run build

## Approval gates
- GATE S: เพิ่ม/ติดตั้ง/ตั้งค่า Tool, Skill, Plugin หรือ MCP ตาม action, ชื่อ, แหล่งที่มา และ scope ที่อนุมัติ
- GATE A: ตรวจ credential/account connection แบบไม่แสดงค่า
- GATE B: apply remote database migration ตาม project ref และไฟล์ที่อนุมัติ
- GATE C: เปลี่ยน Auth URLs และ deploy Cloudflare ตาม target ที่อนุมัติ
- GATE D: เชื่อม Custom Domain หลัง Learning URL ผ่าน smoke test โดยแยก Nameserver, Domain binding และ Auth URL switch เป็นคนละ approval

## Definition of Done
Typecheck, lint, tests, coverage, build, RLS tests และ smoke tests ผ่านพร้อมหลักฐาน ไม่มี hardcoded secret และรายงานสิ่งที่ยังไม่ได้ verify ตรงไปตรงมา
PROMPTเก็บไว้รันหลัง C3 · ตรวจ Instruction Layers
AFTER C3 + PROJECT RULES — INSPECT ONLY:
ผู้เรียนรัน /memory กับ /context แยกเองใน Local session ปัจจุบันแล้ว
จาก context ปัจจุบันและ filesystem ให้อ่าน User CLAUDE.md, Project CLAUDE.md,
CLAUDE.local.md และ .claude/rules แล้วรายงาน conflict ที่พบ
ห้ามพยายามเรียก interactive slash command เอง ห้ามแก้ไฟล์ ห้ามติดตั้ง และห้ามแสดง secret
CLAUDE.md เป็น Context ไม่ใช่ Security Enforcement

Claude รวมกฎหลายระดับเข้าด้วยกันและอาจเจอ conflict จึงควรกระชับ ใช้ /memory เพื่อเปิดไฟล์และ /context เพื่อยืนยันสิ่งที่โหลดจริง และยังต้องใช้ Permissions + Approval Gates สำหรับการบังคับจริง

03

SKILL DISCOVERY · TRUST · GATE S

ให้ AI หา Skill เอง แต่ห้ามติดตั้งเอง

Claude เลือก Skill ที่ติดตั้งแล้วจาก description ได้ ส่วน Skill ใหม่จากอินเทอร์เน็ตต้องผ่านการตรวจ Source, Scope, Scripts, Hooks, MCP, Dependencies และ Permission ก่อน

PERSONAL %USERPROFILE%\.claude\skills · ทุก Local ProjectPROJECT · AFTER C3 .claude\skills · repo นี้PLUGIN Managed bundle · เปิดใช้ตาม settings
PROMPTPrompt · Skill Scout แบบ Read-only
ทำ Skill Scout แบบ READ-ONLY สำหรับโปรเจกต์นี้ก่อนเขียนโค้ด

1. ผู้เรียนรัน /memory และ /context แยกเองแล้ว ห้ามพยายามเรียก interactive slash command เอง
2. จาก context ปัจจุบันและ filesystem ให้อ่าน CLAUDE.md ทุกระดับที่เกี่ยวข้อง
3. ตรวจรายชื่อและ description ของ Skills/Plugins ที่ติดตั้งอยู่แล้ว
4. เทียบความต้องการ React/Vite, Supabase/RLS, Cloudflare, testing, security และ browser verification
5. หากยังขาด ให้ค้นจาก official Claude Code/Cloudflare/Supabase docs และ trusted catalogs ต่อไปนี้เท่านั้นในรอบแรก:
   - https://github.com/mattpocock/skills
   - https://github.com/multica-ai/andrej-karpathy-skills
6. เสนอไม่เกิน 5 รายการ โดยระบุ source, maintainer, capability, install method, reviewed version/commit, scope, files/scripts/hooks/MCP/dependencies, permissions, auto-update policy, duplicate/conflict risk และเหตุผลที่จำเป็น
7. เลือกวิธีติดตั้งเพียงวิธีเดียวต่อ bundle ห้ามติดตั้ง plugin และ skills.sh ซ้ำกัน
8. แยก Marketplace registration, Plugin install และ setup/config เป็นคนละ approval
9. ก่อน C3 เสนอได้เฉพาะ user-scope action ที่ยืนยันว่าไม่เขียน Project root; project/local-scope action, setup และ MCP config ต้องรอหลัง Scaffold
10. ห้าม install, update, clone, execute third-party script หรือแก้ settings ในขั้นนี้
11. จบด้วยรายการ exact approvals ที่ต้องการ แล้วหยุดรอ GATE S
Classroom policy

Managed Plugin · ปิด Auto-update

mattpocock-skills อยู่ใน claude-plugins-official ตาม catalog ปัจจุบัน ก่อน Gate S ให้เปิด /plugin → Marketplaces → claude-plugins-official, ตรวจ source SHA ของรายการ และ Disable auto-update พร้อมบันทึก reviewed commit; ถ้าหาไม่พบให้หยุดตรวจเอกสารล่าสุด ห้ามเพิ่ม Marketplace อื่นแทนเอง

อย่าติดตั้งซ้ำ

Editable Snapshot

ถ้าจะใช้ skills.sh ให้ผู้สอนกำหนด installer version และ <REVIEWED_COMMIT> ที่ตรวจแล้ว ห้ามใช้ @latest ในคลาส และห้ามใช้พร้อม Managed Plugin เพราะ Skill จะซ้ำ

Gate S · S-MATT-INSTALL

อนุมัติ exact plugin จาก claude-plugins-official + source SHA ที่ตรวจแล้ว ที่ user scope โดยตั้ง auto-update เป็น disabled ก่อน รอบนี้ติดตั้ง Plugin เท่านั้น ยังห้ามรัน setup

CLAUDE CODEผู้เรียนรันหลัง S-MATT-INSTALL
/plugin install mattpocock-skills@claude-plugins-official --scope user

Gate S · S-CF-MARKETPLACE

แทนค่า <REVIEWED_TAG_OR_BRANCH> ด้วย ref ที่ตรวจแล้วก่อนอนุมัติ หลัง add ต้องตรวจ resolved commit ให้ตรง หากพิสูจน์ไม่ได้ให้ remove และหยุดก่อนรอบติดตั้ง

CLAUDE CODEผู้เรียนรันหลัง S-CF-MARKETPLACE
/plugin marketplace add https://github.com/cloudflare/skills.git#<REVIEWED_TAG_OR_BRANCH>

Gate S · S-CF-PLUGIN

หลังตรวจ plugin จาก catalog แล้ว ขอ approval ใหม่สำหรับ exact plugin ที่ user scope เท่านั้น

CLAUDE CODEผู้เรียนรันหลัง S-CF-PLUGIN
/plugin install cloudflare@cloudflare --scope user
ก่อน C3 อนุญาตเฉพาะ User scope ที่ไม่เขียน Repo

Project/local Skill, /setup-matt-pocock-skills, .mcp.json และ project dependencies ต้องรอหลัง C3 การติดตั้ง Matt, setup, Marketplace, Cloudflare Plugin, C3 และ MCP คือคนละ exact action จึงต้อง review และอนุมัติแยกกัน

ผลลัพธ์ก่อนเข้า Master Prompt

/memory เปิด Global CLAUDE.md ได้, /context ยืนยัน Global rules ที่โหลดจริง, Plugin ที่เลือกเป็น user scope, Project setup/CLAUDE.md/MCP เป็น Draft รอหลัง C3 และ Skill Scout ไม่มีการติดตั้งเงียบ

04

UNDERSTAND THE V1

รู้ก่อนว่าเรากำลังสร้างอะไร

V1 คือระบบบันทึกรายรับ–รายจ่ายส่วนบุคคล ไม่ใช่ระบบบัญชีเต็มรูปแบบ การล็อก Scope ทำให้ผู้เรียนสร้างจบและตรวจ Security ได้ทัน

IN V1
  • อีเมล Login + Session
  • รายรับ/รายจ่ายแบบ CRUD
  • สรุปรายเดือนและหมวดหมู่
  • Export CSV ภาษาไทย
  • RLS แยกข้อมูลแต่ละผู้ใช้
NOT IN V1
  • VAT, WHT และการยื่นภาษี
  • บัญชีคู่และงบการเงิน
  • Bank Sync / Payment Gateway
  • OCR เอกสารจริง
  • Production data ของผู้เรียน
ใช้ข้อมูลจำลองในคลาสเท่านั้น

ห้ามใช้เลขบัญชี เลขบัตรประชาชน ข้อมูลลูกค้า หรือธุรกรรมจริง ก่อนใช้ในธุรกิจต้องให้ผู้เชี่ยวชาญด้านบัญชีและกฎหมายตรวจระบบ

Deploy ได้ ≠ พร้อมรับข้อมูลจริง

รุ่นเรียนนี้ยังไม่มี Privacy Notice, retention/deletion policy, backup/restore drill, account deletion flow, incident response และการตรวจรับด้าน Security/Privacy จึงเรียกว่า Learning Deployment เท่านั้น

05

ONE MASTER PROMPT

คัดลอก Prompt นี้ให้ Claude Desktop Code

Prompt ยาวเพราะทำหน้าที่แทน Requirement, Architecture, Security Policy, Test Plan และ Deployment Checklist ในชุดเดียว

01 Scope02 Stack03 Data04 Security05 Gates06 Verify
PROMPTMaster Prompt — Full-Stack Accounting App
คุณคือ Lead Full-Stack Engineer, UX Engineer และ Security Reviewer
ให้สร้างเว็บแอป “เงินเข้าเงินออก” สำหรับบันทึกรายรับ–รายจ่ายส่วนบุคคล ตั้งแต่เริ่มต้นจน Deploy บน Production infrastructure เพื่อการเรียน โดยทำงานใน workspace ปัจจุบัน

เป้าหมายการทำงาน
- เริ่มและควบคุมงานทั้งหมดจาก Prompt นี้ได้เลย
- ไม่ถามคำถามทั่วไปซ้ำ ให้ใช้ค่าเริ่มต้นที่ระบุไว้
- Initial Build ต้องหยุดรออนุมัติที่ GATE S, GATE A, GATE B และ GATE C; ถ้าผู้ใช้เริ่ม Optional Custom Domain Add-on หลัง Smoke Test ต้องหยุดเพิ่มที่ GATE D1, D2-A, D2-B (เมื่อจำเป็น) และ D3 ตาม exact action
- ห้ามอ้างว่าเชื่อมต่อ Migration หรือ Deploy สำเร็จ หากไม่มีหลักฐานจากระบบจริง
- Custom Domain ไม่ใช่ส่วนของ Initial Deploy: ห้ามเปลี่ยน Nameserver, DNS, Domain binding หรือ Canonical/Auth URL จนกว่าผู้ใช้จะเริ่ม Custom Domain Add-on และอนุมัติ GATE D ที่ระบุ exact hostname

กติกาก่อนแก้ไฟล์
1. ยืนยันว่า workspace คือ Project root ถ้ายังไม่มี Git repo และเป็นโฟลเดอร์งานนี้จริง ให้รัน git init ก่อน แล้วอ่าน CLAUDE.md ทุกระดับที่เกี่ยวข้อง, AGENTS.md ถ้ามี, project instructions, package files และ git status
2. รักษาไฟล์เดิมของผู้ใช้ ห้าม reset หรือเขียนทับโดยไม่ตรวจ
3. ถ้า workspace มีโปรเจกต์เดิม ให้ต่อยอดด้วย minimum diff
4. ถ้า workspace ว่าง ชื่อโฟลเดอร์ต้องใช้เฉพาะ a-z, 0-9 และ hyphen ไม่ขึ้น/ลงท้ายด้วย hyphen และยาวไม่เกิน 58 ตัวอักษร ก่อน C3 ให้ root มีเพียง .git/.gitignore ที่อนุญาต ห้ามสร้าง CLAUDE.md, CLAUDE.local.md, .mcp.json, package.json, package-lock.json หรือ node_modules
5. หลัง Gate S สำหรับ exact reviewed C3 version ให้เรียก npm exec --package=create-cloudflare@<EXACT_REVIEWED_VERSION> -- create-cloudflare . --framework=react --platform=workers --lang=ts --accept-defaults --no-auto-update --no-deploy --no-open --no-git เท่านั้น ห้ามใช้ @latest หรือ unqualified npx
6. เมื่อ C3 จบแล้ว ให้สร้าง Project CLAUDE.md จาก Goal, Stack, Commands, Data rules, Gates และ Definition of Done ใน Prompt นี้ แล้วค่อยเพิ่ม .mcp.json และ project dependencies ผ่าน Gate S ของแต่ละ exact item
7. ถ้ามีความเสี่ยงทับงานอื่น ให้หยุดรายงานก่อนแก้ไฟล์
8. ใช้ package stable ที่เข้ากันได้ และตรวจ official documentation เมื่อไม่แน่ใจ
9. ห้ามใช้ TypeScript any, @ts-ignore, TODO, placeholder, mock integration หรือ hardcoded secret
10. ห้ามรัน production build ขณะที่ dev server ยังทำงาน

ขอบเขตระบบ V1
- UI ภาษาไทย สกุลเงิน THB
- สมัครสมาชิก เข้าสู่ระบบ ออกจากระบบ และรักษา session ด้วย Supabase Auth
- Protected routes สำหรับหน้าที่ต้องล็อกอิน
- เพิ่ม แก้ไข ลบ และค้นหารายรับ–รายจ่าย
- ข้อมูลหนึ่งรายการมี kind, amount, category, date และ note
- เลือกเดือนและกรองประเภทได้
- Dashboard แสดงรายรับรวม รายจ่ายรวม คงเหลือสุทธิ และยอดตามหมวดหมู่
- มือถือใช้ cards และจอใหญ่ใช้ table
- Export เฉพาะเดือนที่เลือกเป็น CSV ภาษาไทย
- มี loading, empty, validation และ error states
- ยืนยันก่อนลบ
- ใช้ keyboard ได้ มี label และ visible focus state
- แสดง disclaimer ว่าเป็นเครื่องมือบันทึกส่วนบุคคล ไม่ใช่คำแนะนำด้านบัญชี ภาษี หรือกฎหมาย
- ใช้เฉพาะข้อมูลจำลอง ห้ามอ้างว่าพร้อมรับข้อมูลจริงจนกว่าจะมี Privacy Notice, retention/deletion policy, backup/restore, account deletion, incident response และผู้เชี่ยวชาญตรวจระบบ

Tech stack บังคับ
- Frontend: React + Vite + TypeScript
- Routing: React Router
- Styling: Tailwind CSS
- Validation: Zod
- Backend/Auth/Database: Supabase Auth + PostgreSQL
- Client: @supabase/supabase-js
- Hosting: Cloudflare Workers + Static Assets
- Tests: Vitest + React Testing Library
- Lint: ESLint
- Package scripts ต้องมี typecheck, lint, test, test:coverage, build และ deploy

Business rules เรื่องจำนวนเงิน
- เก็บจำนวนเงินเป็น integer หน่วยสตางค์ใน amount_satang
- amount ต้องมากกว่า 0 และมีเพดานที่สมเหตุสมผล
- ห้ามใช้ floating-point เป็นแหล่งข้อมูลหลักของผลรวม
- สร้าง pure functions สำหรับแปลงบาทเป็นสตางค์ แสดงเงินบาท และรวมยอด
- เขียน tests สำหรับทศนิยม การปัดเศษ ค่าว่าง ค่าติดลบ และค่าที่เกินเพดาน

Database schema เป้าหมาย
ตาราง public.transactions
- id uuid primary key default gen_random_uuid()
- user_id uuid not null default auth.uid() references auth.users(id) on delete cascade
- kind text not null check kind เป็น income หรือ expense
- amount_satang bigint not null check มากกว่า 0 และไม่เกินเพดานที่กำหนด
- category text not null ความยาวหลัง trim 1–60 ตัวอักษร
- note text ไม่บังคับ ความยาวไม่เกิน 500 ตัวอักษร
- occurred_on date not null
- created_at timestamptz not null default now()
- updated_at timestamptz not null default now()
- index สำหรับ user_id และ occurred_on desc

Security และ RLS บังคับ
- เปิด RLS บน transactions
- revoke สิทธิ์ anon ที่ไม่จำเป็น และ grant CRUD ให้ authenticated เท่าที่ใช้
- SELECT: user_id = auth.uid()
- INSERT: WITH CHECK user_id = auth.uid()
- UPDATE: มีทั้ง USING และ WITH CHECK user_id = auth.uid()
- DELETE: user_id = auth.uid()
- ผู้ใช้ที่ไม่ล็อกอินอ่านหรือเขียนไม่ได้
- Frontend filter ช่วย performance แต่ไม่ใช่ security boundary
- ห้ามใช้ Supabase secret key หรือ legacy service_role ใน browser
- Browser ใช้เฉพาะ VITE_SUPABASE_URL และ VITE_SUPABASE_PUBLISHABLE_KEY
- validate ทั้ง UI และ database constraints
- ห้ามแสดง raw database error หรือข้อมูลภายในแก่ผู้ใช้

Environment และ Secret
- .env.local ต้องอยู่ใน .gitignore
- .env.example มีเฉพาะชื่อตัวแปรและค่าว่าง
- สร้าง env validator ที่แจ้งชื่อค่าที่ขาดโดยไม่พิมพ์ค่าจริง
- ห้ามขอให้ผู้ใช้ paste secret ลง chat
- ห้ามพิมพ์ credential, token, JWT หรือ key เป็น command argument หรือ plain text ใน terminal, log, screenshot หรือ report; อนุญาตให้ผู้ใช้กรอก password เองเฉพาะ masked interactive prompt ของเครื่องมือที่ตรวจสอบ target แล้ว
- ก่อน commit/deploy ให้ตรวจ diff และค้นหา secret pattern

Claude Code และ MCP Safety
- เริ่มด้วย Skill Scout: ตรวจ skill descriptions ที่มีอยู่ เลือกชุดเล็กที่สุด และใช้ skill ที่ตรงงานโดยอัตโนมัติเมื่อได้รับอนุญาตแล้ว
- ถ้าความสามารถยังขาด ให้ค้นแบบ read-only จาก official Claude/Cloudflare/Supabase docs และ https://github.com/mattpocock/skills; ใช้ https://github.com/multica-ai/andrej-karpathy-skills/blob/main/CLAUDE.md เป็น behavioral-rules reference ไม่ใช่ blind installer
- ถ้าต้องเพิ่ม ติดตั้ง ตั้งค่า execute หรืออัปเดต Tool/Skill/Plugin/MCP ให้รายงาน source, version/ref, scope, scripts/hooks/MCP/dependencies, permissions, duplicate risk และหยุดที่ GATE S ก่อนทุกครั้ง
- ห้าม clone, install, update หรือ execute third-party code จากผลค้นหาโดยพลการ และห้ามติดตั้ง bundle เดียวกันซ้ำหลายวิธี
- ใน Claude Desktop ให้เลือก Ask permissions จาก Mode selector และตรวจ Settings → Claude Code ห้ามเปิด Bypass permissions
- ห้ามตั้ง allow rule ครอบคลุม db push, deploy, secret, account creation หรือ production config
- ถ้าใช้ Supabase MCP ให้เชื่อมเฉพาะ Dev/Test project และจำกัดด้วย project_ref ที่ผู้ใช้ยืนยัน
- ตั้ง MCP เป็น project-scoped/local-scoped เท่าที่จำเป็น ห้ามเก็บ token จริงใน .mcp.json หรือ source control
- คง manual tool approval และให้ Supabase MCP เป็น read-only ตลอดคลาส จำกัด feature groups ให้เหลือเท่าที่งานต้องใช้; Remote write ใช้ CLI หลัง Gate B เท่านั้น
- ห้ามเชื่อม Supabase MCP กับ production data และต้องตรวจทุก tool call ที่อ่าน/เขียน remote state
- สำหรับ Cloudflare ให้ใช้ Cloudflare Skills/Docs เพื่ออ้างอิง และใช้ Wrangler หลังผู้เรียน OAuth เอง; API MCP ที่เข้าถึง account ต้องคง manual approval และห้ามเปลี่ยน remote state ก่อน Gate C

CSV export
- Export เฉพาะเดือนที่เลือก
- ใช้ UTF-8 พร้อม BOM เพื่อเปิดภาษาไทยใน Excel
- Escape comma, quote และ newline ตามมาตรฐาน CSV
- ป้องกัน formula injection สำหรับ cell ที่เริ่มด้วย =, +, - หรือ @
- ชื่อไฟล์ transactions-YYYY-MM.csv
- มี unit tests สำหรับภาษาไทย comma quote newline และ formula injection

โครงสร้างโค้ด
- แยก auth, transactions, dashboard, lib/supabase, validation และ utilities
- Supabase client อยู่จุดเดียว
- Business logic เป็น pure functions ที่ test ได้
- Component หนึ่งตัวมีหน้าที่หลักหนึ่งอย่าง
- ไม่กระจาย query/session logic ซ้ำทั่วโปรเจกต์
- Dependency น้อยที่สุดที่ยัง production-ready

PHASE 0 — INSPECT, SKILL SCOUT & BLUEPRINT
1. ผู้เรียนรัน /memory และ /context แยกเองแล้ว ห้ามพยายามเรียก interactive slash command เอง
2. ตรวจ workspace จาก context ปัจจุบันและ filesystem อ่านกติกาโปรเจกต์ รวมถึงตรวจ skills/plugins ที่ติดตั้งแล้วแบบ read-only
3. รายงาน assumptions, architecture, data flow, ไฟล์ที่จะสร้าง และ skill plan แบบสั้น
4. ถ้า skills ที่มีอยู่เพียงพอ ให้ใช้ชุดเล็กที่สุดและทำต่อได้ทันที
5. ถ้าต้อง add, install, configure, execute หรือ update สิ่งใด ให้เสนอรายการตาม Skill Safety แล้วหยุดที่ GATE S
6. Supabase CLI และ Wrangler ต้องระบุ exact reviewed version, ติดตั้งเป็น project dependency และตรวจด้วย npm ls; ห้ามใช้ unqualified npx
7. C3 เป็น one-time scaffold exception: หลัง Gate S ให้ใช้ exact-qualified npm exec ที่ destination . ก่อนสร้าง Project files พร้อม --no-auto-update --no-deploy --no-open --no-git เพื่อคง reviewed version, รักษา Gate C และไม่สร้าง nested repo
8. หลัง GATE S หรือเมื่อไม่ต้องเปลี่ยน Tool/Skill/Plugin/MCP ถือว่า Prompt นี้อนุมัติให้ implement ตามขอบเขตแล้ว
9. หยุดเพิ่มเฉพาะเมื่อเสี่ยงทับงานเดิมหรือขัด project instructions

GATE S — TOOL / SKILL / PLUGIN / MCP CHANGE
ห้ามหยุดที่ Gate นี้ถ้าใช้เฉพาะสิ่งที่ติดตั้งอยู่แล้วและไม่เปลี่ยน configuration

ก่อนหยุด:
- แสดง exact name, source URL, maintainer, install method, reviewed version/commit และ scope
- สรุป files/scripts/hooks/MCP/dependencies, permission และเหตุผลที่จำเป็น
- ตรวจชื่อซ้ำและยืนยันว่าจะไม่ติดตั้ง bundle เดียวกันสองวิธี
- ขออนุมัติครั้งละหนึ่ง exact action ID และ exact item; การรัน setup/config หลังติดตั้งต้อง review และขอ Gate S ใหม่
- การเพิ่ม Marketplace และการติดตั้ง Plugin ต้องแยกเป็น Gate S คนละรอบ
- ก่อน C3 อนุญาตเฉพาะ user-scope action ที่พิสูจน์ว่าไม่เขียน Project root; project/local action, setup, MCP config และ project dependencies ต้องรอหลัง Scaffold
- Git marketplace ต้องใช้ full Git URL#<reviewed-tag-or-branch>; หลัง add ให้ตรวจ resolved commit เทียบกับที่ review หากไม่ตรงหรือพิสูจน์ไม่ได้ให้ remove marketplace และหยุดก่อนติดตั้ง Plugin
- ระบุ auto-update policy; สำหรับคลาสให้ปิด auto-update และทุก update ต้องกลับมาทำ Trust Review + Gate S

รอข้อความนี้โดยต้องระบุรายการจริง:
APPROVE GATE S <ACTION-ID>: <add|install|configure|execute|update> <exact-name> จาก <source> version/ref <reviewed-version-or-commit> ด้วย <method> ที่ scope <user|project|local> โดย auto-update <disabled|manual-review>

หลังอนุมัติ:
1. ทำเฉพาะ action, รายการ และวิธีที่อนุมัติ
2. ถ้าพบ dependency, script, hook, MCP หรือ permission เพิ่มจากรายงาน ให้หยุดก่อน
3. ตรวจว่า skill พร้อมใช้, version/ref ตรงกับที่อนุมัติ และ auto-update policy ถูกต้อง โดยไม่รัน workflow ที่เปลี่ยน remote state
4. ทำต่อที่ PHASE 1

PHASE 1 — LOCAL IMPLEMENTATION
1. ถ้า workspace ว่าง ให้ execute C3 exact version ด้วยคำสั่งและ safe flags ที่กำหนดก่อนสร้าง Project files
2. หลัง Scaffold ให้สร้าง Project CLAUDE.md แล้วอ่านไฟล์ใหม่นี้โดยตรงใน session เดิม ผู้เรียนใช้ /memory และ /context แยกเองเพื่อตรวจ Global + Project rules; ถ้า Project file ไม่ปรากฏจึงใช้ Rescue Prompt ใน session ใหม่
3. ขอ Gate S แยกตาม action ID สำหรับ project/local setup, MCP config และ dependency แต่ละ exact item ที่จำเป็น เช่น S-MATT-SETUP, S-SUPABASE-MCP, S-SUPABASE-CLI และ S-WRANGLER
4. ติดตั้ง dependencies ตาม exact versions ที่ review แล้ว ยืนยัน Supabase CLI/Wrangler ด้วย npm ls และใช้เฉพาะ project-local binary หรือ npm script ห้ามให้ npx ดาวน์โหลด package
5. สร้าง UI, routing, auth state, validation และ data layer
6. สร้าง versioned migration ใน supabase/migrations แต่ยังห้าม apply remote
7. สร้าง RLS policies และ database tests
8. สร้าง .env.example, README, security notes และขั้นตอนสร้าง Local .env.local จาก supabase status โดยไม่คัดลอกค่าเข้า Prompt
9. สร้าง unit/component tests
10. รัน typecheck, lint และ tests ที่ไม่ต้องเชื่อม remote
11. แก้ทุก failure ก่อนเดินหน้า

GATE A — CREDENTIALS & ACCOUNT CONNECTION
ต้องหยุดแม้พบ session หรือ credential พร้อมอยู่แล้ว

ก่อนหยุด ให้รายงานเฉพาะ:
- ชื่อตัวแปรที่ต้องมี ห้ามแสดงค่า
- Supabase project ref และ Cloudflare account/Worker target ที่ตั้งใจใช้
- สถานะว่ามี Supabase CLI/MCP และ Wrangler หรือไม่
- ขั้นตอนให้ผู้ใช้สลับ .env.local จาก Local เป็น Hosted Dev, หยุดและเริ่ม dev server ใหม่, ตรวจเฉพาะ hostname/project ref ว่าชี้ Hosted Dev จริง, login ผ่าน browser และรัน supabase link ด้วยตนเอง โดยกรอก Database password เฉพาะ masked interactive prompt

รอข้อความนี้:
APPROVE GATE A: ตรวจการเชื่อมต่อได้ โดยห้ามแสดง credential

หลังอนุมัติ:
1. ตรวจ presence/format ของ env แบบ mask ทั้งค่า และยืนยัน hostname/project ref โดยห้ามแสดง key
2. ตรวจ auth CLI แบบ read-only
3. ยืนยัน target project/account อีกครั้ง
4. ห้ามสร้าง project ที่มีค่าใช้จ่ายหรือเปลี่ยน secret โดยพลการ
5. ทำต่อถึง Gate B

GATE B — DATABASE MIGRATION
ก่อนหยุด:
- แสดง project ref, migration path และ SQL diff
- สรุป table, constraints, index, trigger และ RLS policies
- รัน local DB tests และ supabase db push --dry-run ถ้าทำได้
- ระบุ conflict, data risk และวิธี verify
- แสดงแผนทดสอบ User A/B และ alias ของ test accounts ที่ผู้ใช้เตรียมไว้ โดยห้ามสร้างบัญชีหรือข้อมูลทดสอบจนกว่าจะได้รับอนุญาตชัดเจน
- ห้าม DROP, TRUNCATE, remote reset หรือแก้ migration history ที่ apply แล้ว

รอข้อความนี้โดยต้องระบุ target จริง:
APPROVE GATE B: ใช้ migration <ชื่อไฟล์> กับ Supabase project <project-ref>
และอนุญาตเฉพาะ test account aliases <USER_A_ALIAS>, <USER_B_ALIAS> กับข้อมูลจำลองที่ระบุ

หลังอนุมัติ:
1. Apply เฉพาะ migration ที่อนุมัติ
2. ถ้าไม่มี authenticated tool ให้ส่งขั้นตอน SQL Editor แล้วหยุดรอผู้ใช้ยืนยัน
3. ตรวจ schema, constraints, index และ policies จาก remote จริง
4. ทดสอบ unauthenticated denial
5. ทดสอบ User A และ User B ว่าอ่าน/แก้ข้อมูลข้ามกันไม่ได้ เฉพาะ test accounts และข้อมูลจำลองที่ผู้ใช้อนุมัติใน Gate B
6. ทดสอบ Auth, CRUD, dashboard และ CSV
7. Regenerate Supabase TypeScript types

VERIFY GATE ก่อน Deploy
- typecheck ผ่าน
- lint ผ่าน
- unit/component/database tests ผ่าน
- coverage business logic สำคัญอย่างน้อย 80%
- ไม่มี skipped tests, any, TODO, placeholder หรือ mock data ใน production path
- ไม่มี hardcoded secret
- หยุด dev server ก่อน production build
- production build ผ่าน
- wrangler deploy --dry-run ผ่าน
- mobile/desktop, loading, empty, validation และ error states ผ่าน
- ถ้าข้อใดยังตรวจไม่ได้ ให้เขียน “ยังไม่ได้ verify”

หลังเขียนโค้ด ให้ code reviewer และ security reviewer ตรวจพร้อมกันถ้าระบบรองรับ แล้วแก้เฉพาะ finding ใน scope

GATE C — CLOUDFLARE PRODUCTION DEPLOY
ต้องหยุดก่อน deploy หรือเปลี่ยน production config ทุกครั้ง

ก่อนหยุด:
- แสดง account และ Worker name เป้าหมาย
- แสดง build/deploy command
- สรุปผล Verify Gate
- ยืนยันว่า VITE_* เป็น build-time public values
- ยืนยันว่าไม่มี Supabase secret/service-role key ใน client หรือ bundle
- ระบุ Supabase project ref, Auth Site URL และ redirect URLs แบบ exact ที่ต้องเปลี่ยน

รอข้อความนี้โดยต้องระบุ target จริง:
APPROVE GATE C: deploy ไป Cloudflare Worker <worker-name> ใน account <account-name/id> และตั้ง Auth URLs ของ Supabase project <project-ref> ตาม exact URLs ที่รายงาน

หลังอนุมัติ:
1. ยืนยัน Worker, account, Supabase project และ exact Auth URLs อีกครั้ง
2. หยุด dev server และ build ใหม่
3. Deploy เฉพาะ build ที่ผ่าน Verify Gate
4. เปิด Production URL จริงและทำ smoke test
5. ตรวจหน้าเว็บ, assets, deep-link refresh, login/logout, console และ responsive layout
6. ทดสอบ authenticated CRUD เฉพาะ test account และข้อมูลจำลองที่ผู้ใช้อนุญาต
7. บันทึก URL, commit SHA, migration version และสิ่งที่ยังไม่ได้ verify

CUSTOM DOMAIN BOUNDARY
- Initial Definition of Done จบได้ด้วย Cloudflare Learning URL ที่ smoke test ผ่าน
- ถ้าผู้ใช้ต้องการโดเมนจริง ให้ใช้ Custom Domain Add-on หลังจบ Gate C เท่านั้น
- Agent ทำ read-only inventory และเสนอ exact diff ก่อน ห้ามเปลี่ยน Nameserver, DNS record, Custom Domain, redirect rule หรือ Supabase Auth URL เองโดยไม่มี Gate D
- Nameserver cutover เป็นขั้นที่ผู้เรียนทำเองกับ Registrar หลังสำรอง DNS records และตรวจ DNSSEC แล้ว

Definition of Done
- V1 Deploy บน Production infrastructure เพื่อการเรียนและใช้เฉพาะข้อมูลจำลอง
- Supabase Auth และ RLS ทำงานกับ target ที่อนุมัติ
- User A เข้าถึงข้อมูล User B ไม่ได้
- Dashboard และ CSV ใช้ข้อมูลจำลองที่อ่านจาก Supabase จริง ไม่ใช่ mock data และ tests ผ่าน
- typecheck, lint, tests, coverage, build และ dry-run ผ่าน
- Cloudflare Production URL เปิดได้จริงและ smoke test ผ่าน
- ไม่มี hardcoded secret
- README อธิบาย setup, architecture, gates, security และข้อจำกัด
- UI มี disclaimer ว่าไม่ใช่ระบบบัญชี/ภาษี/กฎหมายที่ผ่านการรับรอง
- รายงานชัดว่า “ยังไม่พร้อมรับข้อมูลจริง” จนกว่า Privacy, retention/deletion, backup/restore, account deletion และ incident response จะได้รับการออกแบบและตรวจรับ

รูปแบบรายงานสุดท้าย
1. สิ่งที่สร้าง
2. Architecture และเหตุผล
3. ไฟล์สำคัญ
4. Migration/RLS ที่ตรวจจากระบบจริง
5. Verification commands พร้อมผลจริง
6. Learning deployment URL ที่เปิดตรวจแล้ว
7. สิ่งที่ยังไม่ได้ verify
8. ข้อจำกัดและคำเตือน

เริ่มจาก PHASE 0 ได้เลย
POWERSHELLแทน exact version แล้ว Agent รันหลัง S-C3-EXECUTE · C3 Safe Scaffold
npm exec --package=create-cloudflare@<EXACT_REVIEWED_VERSION> -- create-cloudflare . --framework=react --platform=workers --lang=ts --accept-defaults --no-auto-update --no-deploy --no-open --no-git
C3 ต้องมาก่อน Project files

ก่อนรันให้ Project root มีเพียง .git/.gitignore ที่อนุญาต ห้ามมี Project CLAUDE.md, .mcp.json, package files หรือ node_modules คำสั่งใช้ exact reviewed version ที่อนุมัติ; --no-git ป้องกัน repo ซ้อน และ --no-deploy --no-open รักษา Gate C

Gate S หลัง C3 · S-MATT-SETUP

ให้ Claude แสดง diff และไฟล์ที่จะเขียนก่อน แล้วอนุมัติ setup แยกจากการติดตั้ง Plugin เพราะคำสั่งนี้เปลี่ยน Project files

CLAUDE CODEผู้เรียนรันหลัง C3 + S-MATT-SETUP
/setup-matt-pocock-skills

Gate S หลัง C3 · S-SUPABASE-MCP

ตรวจ exact Project Ref, features และ read_only=true ก่อนอนุมัติให้ Agent เสนอ diff ของ .mcp.json

JSONAgent เขียนหลัง C3 + S-SUPABASE-MCP
{
  "mcpServers": {
    "supabase": {
      "type": "http",
      "url": "https://mcp.supabase.com/mcp?project_ref=<PROJECT_REF>&read_only=true&features=database,debugging,development,docs"
    }
  }
}
Claude Desktop Code ต้องตอบกลับด้วย

Assumptions + Blueprint + Skill Plan สั้น ๆ แล้วหยุดที่ S-C3-EXECUTE หลัง Scaffold จึงสร้างและอ่าน Project CLAUDE.md ใน session เดิม จากนั้นขอ S-MATT-SETUP, S-SUPABASE-MCP, S-SUPABASE-CLI และ S-WRANGLER แยกตามสิ่งที่จำเป็น ก่อนเดินหน้าจนหยุดอีกครั้งที่ Gate A

06

HUMAN APPROVAL

ตอบกลับเฉพาะตอนถึง Gate

Gate Prompt ระบุ Target และสิ่งที่อนุญาตอย่างชัดเจน ลดโอกาสที่ Agent จะเชื่อมผิด Project หรือแก้ Production เกิน Scope

S
PROMPTGate S — อนุมัติ Tool / Skill / Plugin / MCP
APPROVE GATE S <ACTION-ID>: <add|install|configure|execute|update> <exact-name> จาก <source-url> version/ref <reviewed-version-or-commit> ด้วย <method> ที่ scope <user|project|local> โดย auto-update <disabled|manual-review>

ทำเฉพาะ action, รายการ, scripts/hooks/MCP/dependencies และ permissions ที่รายงานไว้ หาก version/ref ไม่ตรง พบสิ่งเพิ่มหรือชื่อซ้ำให้หยุดก่อน ทุก update ต้องกลับมาขอ Gate S ใหม่ และห้ามเริ่ม workflow ที่เปลี่ยน remote state
A
PROMPTGate A — อนุญาตให้ตรวจการเชื่อมต่อ
APPROVE GATE A: ตรวจการเชื่อมต่อได้ โดยห้ามแสดง credential

ฉันสลับ .env.local เป็น Hosted Dev ด้วยตัวเองแล้ว, หยุดและเริ่ม dev server ใหม่แล้ว, ยืนยันว่า hostname/project ref ชี้ Hosted Dev ที่ระบุ, login Supabase/Cloudflare และ link Supabase project ผ่านเครื่องของฉันแล้ว โดยกรอก password เฉพาะ masked prompt หากค่าใดไม่พร้อม ให้รายงานเฉพาะชื่อค่าที่ขาด ห้ามพิมพ์ค่าจริงหรือส่วนหนึ่งของ secret ออกมา
B
PROMPTGate B — อนุมัติ Migration
APPROVE GATE B: ใช้ migration <ชื่อไฟล์ที่ Claude Code รายงาน> กับ Supabase project <project-ref ที่ Claude Code รายงาน>

ให้ apply เฉพาะ migration นี้ ห้าม DROP TABLE ห้ามลบข้อมูลเดิม และหลัง apply ให้ตรวจ table, constraints, index และ RLS policies จากระบบจริง
อนุญาตให้ทดสอบด้วย test account aliases <USER_A_ALIAS> และ <USER_B_ALIAS> พร้อมข้อมูลจำลองเท่านั้น ห้ามสร้าง account ใหม่หรือใช้ข้อมูลจริง
C
PROMPTGate C — อนุมัติ Deploy
APPROVE GATE C: deploy ไป Cloudflare Worker <worker-name> ใน account <account-name/id>
และตั้ง Supabase Auth ของ project <project-ref> เป็น Site URL <exact-site-url> กับ Redirect URLs <exact-redirect-urls>

ให้ deploy เฉพาะ build ที่ผ่าน typecheck, lint, tests, production build และ wrangler dry-run แล้ว หลัง deploy ให้เปิด URL จริงและทำ smoke test
อย่าใช้ Auto-Approve กับ Production

Supabase แนะนำให้ MCP ใช้กับ Dev/Testing, จำกัด Project, เปิด Read-only เมื่อเหมาะสม และตรวจ Tool Call ด้วยคน

07

SUPABASE · AUTH + DATABASE + RLS

เชื่อม Backend โดยไม่ให้ข้อมูลรั่ว

ให้ Agent สร้าง Migration และ Tests กับ Supabase Local ก่อน ใช้ Local env ทดสอบจริง แล้วจึงสลับเป็น Hosted Dev env และเชื่อม target ระหว่างที่ Agent หยุดรอ Gate A

AGENT RUNS สร้างไฟล์และรันคำสั่งSTUDENT RUNS Login และตั้งค่าบัญชีSTUDENT CHECKS ตรวจผลก่อนอนุมัติ
ตรวจ Project-local CLI ก่อนทุกคำสั่ง

รันตรวจแบบ read-only ก่อน หาก package ใดหาย ให้ Agent เสนอ exact version/source แล้วหยุด Gate S ทีละ package ห้ามใช้ unqualified npx ซึ่งอาจดาวน์โหลดเวอร์ชันที่ยังไม่ review

POWERSHELLAgent รันหลัง Toolchain Gate S · Local CLI Check
npm ls supabase wrangler --depth=0
.\node_modules\.bin\supabase.cmd --version
.\node_modules\.bin\wrangler.cmd --version

ก่อน Gate A · Agent ทำใน Local

POWERSHELLAgent รัน · Supabase Local Workflow
.\node_modules\.bin\supabase.cmd init
.\node_modules\.bin\supabase.cmd start
.\node_modules\.bin\supabase.cmd migration new initial_transactions

# หลัง Agent เขียน migration และ database tests — LOCAL เท่านั้น
.\node_modules\.bin\supabase.cmd db reset --local
.\node_modules\.bin\supabase.cmd db lint --local --level error
.\node_modules\.bin\supabase.cmd test db
.\node_modules\.bin\supabase.cmd gen types --lang typescript --local > src/lib/database.types.ts

Local env · ผู้เรียนคัดลอกจาก status

ENV TEMPLATEผู้เรียนสร้าง · .env.local สำหรับ Local
# Local Acceptance — คัดลอกจากผล supabase status ด้วยตนเอง
VITE_SUPABASE_URL=http://127.0.0.1:54321
VITE_SUPABASE_PUBLISHABLE_KEY=<LOCAL_ANON_OR_PUBLISHABLE_KEY>

รัน .\node_modules\.bin\supabase.cmd status แล้วคัดลอกเฉพาะ API URL และ local anon/publishable key ด้วยตนเอง ห้ามส่งค่าผ่าน Prompt

Local Acceptance ก่อน Gate A

เปิด Local URL, สมัครด้วยอีเมลทดสอบผ่าน Local Mailpit, ตรวจ form validation, CRUD, mobile layout และ browser console แล้วให้ Agent รายงานสิ่งที่ผ่าน/ยังไม่ได้ verify

EXPECTED OUTPUTSchema และ RLS ที่ควรได้
public.transactions
├─ id · uuid · primary key
├─ user_id · uuid · default auth.uid()
├─ kind · income | expense
├─ amount_satang · bigint > 0
├─ category · text 1–60 chars
├─ note · text ≤ 500 chars
├─ occurred_on · date
├─ created_at · timestamptz
└─ updated_at · timestamptz

RLS policies
├─ SELECT · auth.uid() = user_id
├─ INSERT · WITH CHECK auth.uid() = user_id
├─ UPDATE · USING + WITH CHECK
└─ DELETE · auth.uid() = user_id

RLS Test Matrix ที่ต้องผ่าน

สถานะการทดสอบผลที่ต้องได้
Logged outอ่าน transactionsไม่เห็นข้อมูล
User Aเพิ่มรายการโดยไม่ส่ง user_idระบบตั้ง owner เป็น A
User Aอ่านโดยไม่ใส่ user filterเห็นเฉพาะข้อมูล A
User Aแก้/ลบ ID ของ User Bข้อมูล B ไม่เปลี่ยน
User Aเปลี่ยน owner จาก A เป็น Bถูก WITH CHECK ปฏิเสธ
Instructor Test Account Plan

เตรียมบัญชี A และ B แยกกัน ใช้อีเมลทดสอบและรหัสผ่านคนละชุด ห้ามแชร์รหัสผ่านกับผู้เรียน ให้ผู้สอนยืนยันอีเมลล่วงหน้าหรือใช้ Local Mailpit ตรวจ rate limit ก่อนคลาส และกำหนดวันลบบัญชี/ข้อมูลทดสอบหลังจบ

ระหว่าง Agent รอ Gate A · สลับไป Hosted Dev Project

ENV TEMPLATEผู้เรียนเปลี่ยน · .env.local เป็น Hosted Dev
# Hosted Dev Project — สลับก่อนส่ง APPROVE GATE A
VITE_SUPABASE_URL=https://<PROJECT_REF>.supabase.co
VITE_SUPABASE_PUBLISHABLE_KEY=<SB_PUBLISHABLE_KEY>
POWERSHELLผู้เรียนรัน · Login ผ่าน Browser
.\node_modules\.bin\supabase.cmd login
.\node_modules\.bin\wrangler.cmd login
POWERSHELLผู้เรียนรัน · Link target และกรอก Password แบบ masked
.\node_modules\.bin\supabase.cmd link --project-ref <PROJECT_REF>
# กรอก Database password เองเฉพาะ masked interactive prompt
# ห้ามใส่ password เป็น argument, chat, log หรือ screenshot

ตรวจ Project Ref ให้ตรงกับ Dev Project ก่อนกรอก Password ห้ามส่ง Password ให้ Agent และห้ามใส่เป็น command argument

POWERSHELLผู้เรียนรันก่อน Gate A · Restart Vite หลังสลับ Env
# หยุด dev server เดิมใน Terminal ด้วย Ctrl+C ก่อน
# แล้วเริ่มใหม่เพื่อให้ Vite โหลด Hosted .env.local
npm run dev
ยืนยันว่าแอปชี้ Hosted Dev จริง

หลัง restart ให้ Agent ตรวจเฉพาะ hostname และ Project Ref จาก Network/config diagnostic ต้องไม่ใช่ 127.0.0.1 และต้องตรง Dev Project ห้ามแสดงหรือ console.log Publishable Key

Authenticate MCP ด้วยตัวเอง

หลังอนุมัติ .mcp.json ให้ยอมรับ Workspace Trust และ Authenticate ผ่าน Browser จาก Code tab ตรวจว่า URL มี Project Ref ถูกต้องและ read_only=true ตลอดคลาส; Remote write ใช้ CLI หลัง Gate B เท่านั้น

POWERSHELLAgent รันหลัง Gate A · Remote Dry Run เท่านั้น
.\node_modules\.bin\supabase.cmd db push --dry-run
หยุดที่ Gate B

ผู้เรียนต้องตรวจ Project Ref, SQL diff, test-account aliases และขอบเขตข้อมูลจำลองก่อนส่งข้อความ APPROVE GATE B ห้ามใช้ Shell comment เป็นตัวหยุดคำสั่ง

POWERSHELLAgent รันหลัง APPROVE GATE B เท่านั้น · Apply
# รันหลังข้อความ APPROVE GATE B ที่ระบุ target จริงเท่านั้น
.\node_modules\.bin\supabase.cmd db push
PUBLICVITE_SUPABASE_URLVITE_SUPABASE_PUBLISHABLE_KEY

อยู่ใน Browser ได้เมื่อ RLS ถูกต้อง

SECRETsb_secret_…service_role / access token

ห้ามใส่ VITE_* ห้ามส่งใน Prompt

08

VERIFY BEFORE YOU SHIP

ให้หลักฐานเป็นคนบอกว่า “พร้อม”

Agent ต้องแสดง Command และผลจริงของทุกด่าน ข้อใดรันไม่ได้ต้องเขียนว่า “ยังไม่ได้ verify” ไม่ใช่เดาจากโค้ด

TYPEnpm run typecheck

ไม่มี TypeScript error และไม่มี any

LINTnpm run lint

ไม่มีการปิดกฎเพื่อหลบปัญหา

TESTnpm run test -- --run

Business logic + components ผ่าน

COVERnpm run test:coverage

Coverage ของ business logic สำคัญ ≥ 80%

RLSlocal supabase.cmd test db

Unauthenticated + A/B isolation ผ่าน

BUILDnpm run build

หยุด dev server ก่อนรัน

DRYlocal wrangler.cmd deploy --dry-run

Bundle และ config พร้อม Deploy

SECRETตรวจ Git diff + bundle

ไม่มี sb_secret/service_role/token

หยุด Dev Server ก่อน Build

ในคลาสนี้ใช้กฎเดียวกันทุกเครื่อง: ปิด dev server → รัน Verify Gate → Build → Dry Run เพื่อไม่ให้ไฟล์หรือ Process ชนกัน

09

CLOUDFLARE WORKERS

Deploy React App ด้วย Workers + Static Assets

Cloudflare แนะนำ Workers Static Assets สำหรับ React/Vite โปรเจกต์ใหม่ หน้าเว็บเป็น SPA และ Supabase ทำหน้าที่ Auth/Database

LOCALReact + Vitenpm run build
VERIFYWrangler Dry Runยังไม่เปลี่ยน Production
PRODUCTIONCloudflare WorkerStatic Assets + HTTPS URL
POWERSHELLAgent รันก่อน Gate C · Verify + Dry Run
# ต้องหยุด dev server ก่อน
npm run typecheck
npm run lint
npm run test -- --run
npm run test:coverage
npm run build
.\node_modules\.bin\wrangler.cmd deploy --dry-run
หยุดที่ Gate C

ผู้เรียนตรวจ Worker/account, Supabase project ref, exact Site URL, exact redirect URLs และผล Verify Gate ก่อนส่ง APPROVE GATE C

POWERSHELLAgent รันหลัง APPROVE GATE C เท่านั้น · Deploy
# รันหลังข้อความ APPROVE GATE C ที่ระบุ Worker, account และ Auth URLs เท่านั้น
npm run deploy
VITE_* คือ Build-time Public Values

ค่าจะเข้า Browser bundle จึงใช้ได้เฉพาะ Supabase URL และ Publishable key ห้ามใส่ Secret key หรือ Cloudflare API token

Auth URL ต้องอนุมัติแบบ Exact

Gate C ต้องระบุ Supabase project ref, Site URL และ redirect URLs ใหม่แบบเต็ม ห้ามใช้ wildcard ใน Production URL และห้ามให้ Agent เปลี่ยนค่าอื่นใน Auth config

ผลลัพธ์ที่ต้องเห็น

Wrangler ส่ง Production URL จริง จากนั้นยังต้องเปิด URL และทำ Smoke Test ก่อนรายงานว่างานเสร็จ

10

DEPLOYMENT SMOKE TEST

Deploy ผ่าน ไม่ได้แปลว่า App ใช้ได้

ให้ Agent เปิด URL จริงและตรวจ Critical Flow ตามรายการนี้

  1. 01

    เปิด Production URL ผ่าน HTTPS ได้และ assets ไม่ 404

  2. 02

    Refresh หน้า Protected Route แล้วไม่กลายเป็น 404

  3. 03

    สมัคร/Login/Logout และกลับเข้าระบบตาม Supabase redirect URL ที่อนุญาต

  4. 04

    User A เพิ่ม แก้ ลบ และเห็นเฉพาะรายการของตนเอง

  5. 05

    User B ไม่เห็นและแก้ข้อมูลของ User A ไม่ได้

  6. 06

    Dashboard ยอดรายรับ รายจ่าย และคงเหลือถูกต้อง

  7. 07

    CSV เดือนที่เลือกเปิดภาษาไทยใน Excel และไม่เกิด formula injection

  8. 08

    ไม่มี fatal console error และ Mobile layout ใช้งานได้

Auth Redirect ต้องเปลี่ยนจาก localhost

ตั้ง Supabase Site URL เป็น Production URL และใช้ Exact redirect paths สำหรับ Production ส่วน wildcard เก็บไว้เฉพาะ Dev/Preview

หลังจบคลาสต้อง Cleanup

เก็บเฉพาะผลทดสอบที่ไม่เปิดเผยข้อมูล จากนั้นลบข้อมูลจำลอง/บัญชีทดสอบตามแผน ถอน MCP OAuth ที่ไม่ใช้ และตรวจว่าไม่มี token หรือ .env ถูก commit

11

CUSTOM DOMAIN · DNS · SSL · AUTH

เชื่อม Custom Domain ผ่าน Cloudflare แบบไม่ทำเว็บหรืออีเมลเดิมพัง

ทำบทนี้หลัง Learning URL ผ่าน Smoke Test แล้วเท่านั้น เส้นทางหลักของคลาสคือ Worker Custom Domain ส่วน Pages ใช้เฉพาะเมื่อ Deployment target จริงเป็น Pages

BASELINELearning URL ผ่านworkers.dev หรือ pages.dev
DOMAINDNS + HTTPS ActiveExact hostname เท่านั้น
AUTHSupabase CutoverExact redirect paths
Domain เป็น Shared Production State

การเปลี่ยน Nameserver หรือ DNS ผิดอาจทำให้เว็บ อีเมล และระบบยืนยันโดเมนเดิมหยุดพร้อมกัน ขั้น Nameserver ให้ผู้เรียนทำเองที่ Registrar เท่านั้น Agent มีหน้าที่ตรวจแบบ read-only, เสนอ exact diff และหยุดรอ Gate

คำศัพท์ 6 คำที่ต้องแยกให้ออก

1

Domain

ชื่อหลักที่ซื้อไว้ เช่น example.com

2

Registrar

บริษัทที่จดโดเมนและเป็นที่เปลี่ยน Nameserver

3

Zone

พื้นที่จัดการ DNS ของโดเมนใน Cloudflare

4

Nameserver

ตัวชี้ว่าใครเป็นผู้ตอบ DNS ของโดเมน

5

DNS record

A, AAAA, CNAME, MX และ TXT ที่พาแต่ละบริการไปยังปลายทาง

6

SSL certificate

ใบรับรองที่ทำให้ exact hostname เปิดผ่าน HTTPS ได้

แนะนำสำหรับคลาส

app.example.com

  • แยกจากเว็บหลักและ www
  • Rollback ง่ายกว่า Apex
  • ระบุหน้าที่ว่าเป็น Web App ชัดเจน
ใช้เมื่อมีแผนชัดเจน

example.com / www

  • Apex อาจชนเว็บหลักเดิม
  • www เป็นคนละ exact hostname
  • ต้องออกแบบ canonical redirect และ DNS ของทั้งคู่แยกกัน

เลือกวิธีตาม Deployment target จริง

หัวข้อWorkers + Static Assets · เส้นทางหลักPages · ทางเลือก
เงื่อนไขWorker มีอยู่แล้ว และ Zone ต้อง Active ใน CloudflarePages project มีอยู่แล้ว; Apex ต้องใช้ Cloudflare Nameservers แต่ External DNS subdomain ไม่ต้องย้าย Nameserver
ตำแหน่งตั้งค่าWorkers & Pages → Worker → Settings → Domains & Routes → Add → Custom DomainWorkers & Pages → Pages project → Custom domains → Set up a domain
DNS / CertificateCloudflare สร้าง DNS record และ certificate ให้ ห้ามทำ CNAME ไป workers.dev เองZone ใน Cloudflare สร้าง record ให้อัตโนมัติ; External DNS subdomain ใช้ CNAME ไป <project>.pages.dev
ข้อห้ามHostname ที่มี CNAME เดิมอยู่จะผูก Worker Custom Domain ไม่ได้ ต้องหาเจ้าของ record ก่อนต้อง Associate hostname ใน Pages ก่อนสร้าง External CNAME ไม่เช่นนั้นอาจเจอ 522

Workflow 8 ขั้น · จาก Inventory ถึง Cutover

  1. 01
    ยืนยัน Baseline และสิทธิ์

    Learning URL ต้องผ่าน Smoke Test, ผู้เรียนต้องเป็นเจ้าของโดเมนหรือได้รับสิทธิ์จัดการ DNS และต้องยืนยัน Account, Worker/Pages target, Zone กับ exact hostname ให้ตรงกัน

  2. 02
    ทำ DNS Inventory ก่อนแตะอะไร

    บันทึก A/AAAA/CNAME, MX, SPF, DKIM, DMARC, verification TXT และ CAA เดิม พร้อมเจ้าของบริการและ Rollback plan ห้ามคัดลอก TXT secret-like value เต็มลง Prompt หรือ Screenshot

  3. 03
    ทำ Zone ให้ Active เมื่อจำเป็น

    ใช้ขั้นนี้เฉพาะ Worker หรือ Pages Apex/Full Setup: เพิ่ม Apex domain ใน Cloudflare และตรวจ records ที่ import มา ถ้า DNSSEC เปิดอยู่ ให้บันทึก DS TTL แล้วลบ old DS/ปิด DNSSEC ที่ Registrar รอ TTL หมดและตรวจ old DS หายจาก 1.1.1.1 กับ 8.8.8.8 ก่อน จากนั้นผู้เรียนจึงเปลี่ยนเป็น Nameserver สองค่าที่ Cloudflare มอบหมายเอง และรอ Zone Active ได้ถึงประมาณ 24 ชั่วโมง ส่วน Pages + External DNS subdomain ห้ามย้าย Nameserver ให้ข้ามไป Associate ใน Pages แล้วสร้าง CNAME ตาม Gate D2-B

  4. 04
    เปิด DNSSEC กลับหลัง Zone Active

    ทำผ่าน Cloudflare ตามขั้นตอนของ Registrar และตรวจ DS/สถานะใหม่ ห้ามเปิด DS เก่าค้างไว้ระหว่าง Nameserver cutover เพราะโดเมนอาจ Resolve ไม่ได้

  5. 05
    Associate Exact Hostname

    เลือก Worker หรือ Pages ตามหลักฐานจริง ใช้ Dashboard path ในตาราง และตรวจ record conflict ก่อนกด Add Custom Domain; หนึ่ง hostname ต่อหนึ่ง Gate

  6. 06
    รอ Domain + HTTPS เป็น Active

    ยังไม่เปลี่ยน Supabase Auth ขณะ Certificate Pending หากค้างให้ตรวจ CAA และ DCV/WAF ที่ /.well-known/* ห้ามแก้ด้วยการปิด SSL, ตั้ง Flexible หรือเปิด HSTS เพื่อทดลอง

  7. 07
    สลับ App Origin และ Supabase Auth

    ให้ Agent หา variable/route จากโค้ดจริงก่อน ตั้ง Site URL เป็น exact HTTPS origin และเพิ่มเฉพาะ callback/reset paths ที่ระบบ implement จริง เก็บ Local URL สำหรับ Dev และ Learning URL ชั่วคราวเพื่อ Rollback

  8. 08
    Verify แล้วจึงประกาศใช้

    ตรวจ DNS จากสอง Resolver, HTTPS, deep link, Auth, Password reset, CRUD, RLS A/B, Console และ Mobile ถ้าข้อใดยังไม่ได้ตรวจให้รายงานว่า “ยังไม่ได้ verify” และคง URL เดิมไว้

PROMPTPrompt Add-on · ให้ Claude ตรวจ Domain แบบ Read-only ก่อน
CUSTOM DOMAIN ADD-ON — READ-ONLY FIRST
ใช้หลัง GATE C และ Smoke Test ของ Learning URL ผ่านแล้วเท่านั้น

ข้อมูลที่ผู้เรียนกรอก
- DEPLOY_TARGET: <WORKER|PAGES>
- CLOUDFLARE_ACCOUNT: <ACCOUNT_NAME_OR_ID>
- CLOUDFLARE_TARGET: <WORKER_NAME_OR_PAGES_PROJECT>
- APEX_DOMAIN: <example.com>
- CANONICAL_HOSTNAME: <app.example.com>
- CURRENT_LEARNING_URL: <https://...workers.dev|https://...pages.dev>
- SUPABASE_PROJECT_REF: <PROJECT_REF>

กติกา
1. อ่าน CLAUDE.md ทุกระดับ, git status, deployment config และหลักฐาน Smoke Test เดิม
2. ตรวจแบบ read-only ก่อน: เจ้าของ target, Cloudflare zone status, authoritative nameservers, DNSSEC status, DNS record inventory และ hostname conflict
3. รายงานเฉพาะชื่อ record/type/target ที่จำเป็น ห้ามแสดง token, key, password, cookie หรือ credential
4. แยกเส้นทางให้ถูก:
   - WORKER: zone ต้อง Active ใน Cloudflare แล้วใช้ Worker > Settings > Domains & Routes > Add > Custom Domain
   - PAGES: ใช้ Pages project > Custom domains > Set up a domain; ถ้า DNS อยู่นอก Cloudflare ต้อง associate ใน Pages ก่อนสร้าง CNAME ไป <PROJECT>.pages.dev
5. ตรวจ MX, SPF, DKIM, DMARC, verification TXT, CAA และ record ของบริการเดิมก่อนเสนอ Nameserver cutover ห้ามลบหรือเขียนทับ record ที่ไม่เกี่ยวข้อง
6. ถ้า Registrar เปิด DNSSEC อยู่ ให้บันทึก DS TTL, ให้ผู้เรียนลบ DS/ปิด DNSSEC ที่ Registrar แล้วรอให้ DS TTL หมดจาก Parent zone ตรวจว่า old DS หายจาก public resolver อย่างน้อย 2 แห่งก่อน GATE D1 ห้ามปิดแล้วเปลี่ยน Nameserver ทันที จากนั้นค่อยเปิด DNSSEC ผ่าน Cloudflare หลัง zone Active
7. เสนอแผน exact actions, rollback, expected propagation และ evidence ที่จะตรวจ โดยยังห้ามเปลี่ยน remote state
8. เลือก Gate ตาม target โดยห้ามเหมารวม:
   - WORKER หรือ PAGES APEX/FULL SETUP: zone ต้อง Active; ถ้ายังไม่ Active ให้หยุด GATE D1 ถ้า Active แล้วจึงไป D2-A
   - PAGES + EXTERNAL DNS SUBDOMAIN: ไม่ต้องย้าย Nameserverและไม่ต้องมี Cloudflare zone Active ให้ข้าม D1 ไป D2-A เพื่อ associate hostname ใน Pages ก่อน แล้วจึงหยุด D2-B สำหรับ exact CNAME ที่ DNS provider เดิม
9. ห้ามใช้ wildcard hostname หรือ wildcard Supabase production redirect URL
10. ห้ามปิด Learning URL เดิมจน Custom Domain, HTTPS, Auth และ Critical Flow ผ่านครบ

รูปแบบคำตอบก่อนขออนุมัติ
1. Target ที่ยืนยันแล้ว
2. Current DNS/Nameserver/DNSSEC inventory
3. Record conflict และความเสี่ยงต่อเว็บ/อีเมลเดิม
4. Exact actions แยก D1, D2-A, D2-B (ถ้าจำเป็น) และ D3
5. Rollback plan
6. Verification checklist
7. Gate ถัดไปเพียงหนึ่ง Gate แล้วหยุด
Gate D1 ใช้เฉพาะ Worker หรือ Pages Apex/Full Setup

Pages + External DNS subdomain ข้าม D1 ได้ ส่วนเส้นทางที่ต้อง Cutover ต้องเทียบ MX/TXT ให้ครบ และถ้ามี DNSSEC ต้องรอ old DS TTL หมดพร้อมตรวจ DS จากสอง Resolver ก่อนเปลี่ยน Nameserver ห้ามทำสองขั้นติดกันทันที

D1
PROMPTGate D1 — Nameserver Cutover (เฉพาะ Worker หรือ Pages Apex/Full Setup)
APPROVE GATE D1: เตรียมเชื่อม APEX_DOMAIN <example.com> เข้า Cloudflare account <account-name/id>

ฉันตรวจและสำรอง DNS records เดิมแล้ว โดยเฉพาะ A/AAAA/CNAME, MX, SPF, DKIM, DMARC, verification TXT และ CAA
ฉันลบ old DS/ปิด DNSSEC ที่ Registrar แล้ว บันทึก DS TTL เดิม <TTL> และรอครบถึง <TIMESTAMP>
ฉันตรวจจาก 1.1.1.1 กับ 8.8.8.8 แล้วว่า old DS ไม่เหลือ จากนั้นจะเปลี่ยน Nameserver เป็น <CF_NS_1> กับ <CF_NS_2> ด้วยตัวเอง

Agent ทำได้เฉพาะแสดง checklist, ตรวจ public DNS แบบ read-only และรายงานสถานะ ห้าม login Registrar, ห้ามเปลี่ยน Nameserver/DNS และห้ามเดินต่อ D2 จน Cloudflare zone แสดง Active
D2-A
PROMPTGate D2-A — ผูก Hostname กับ Cloudflare Target
APPROVE GATE D2-A: เชื่อม exact hostname <app.example.com> กับ <Cloudflare Worker worker-name|Pages project project-name> ใน account <account-name/id>

ใช้ Cloudflare Dashboard ตาม target ที่รายงานเท่านั้น ห้ามเปลี่ยน hostname อื่น, DNS record อื่น, Worker route อื่น, redirect rule หรือ production setting อื่น
ผู้เรียนเป็นผู้กด Add Custom Domain เอง แล้วให้ Agent ตรวจสถานะและ public DNS แบบ read-only
D2-B
PROMPTGate D2-B — External DNS CNAME (Pages เท่านั้นเมื่อจำเป็น)
APPROVE GATE D2-B: หลัง Pages รับรู้ hostname แล้ว ให้ผู้เรียนสร้าง CNAME exact record
<app.example.com> → <pages-project.pages.dev> ที่ DNS provider <provider-name>

ห้ามสร้างก่อน associate domain ใน Pages ห้ามแตะ record อื่น และห้ามใช้ Gate นี้กับ Worker Custom Domain หรือ Pages zone ที่ Cloudflare สร้าง record ให้อัตโนมัติ
D3
PROMPTGate D3 — สลับ Canonical URL และ Supabase Auth
APPROVE GATE D3: หลัง <app.example.com> แสดง Active และ HTTPS ผ่านแล้ว

อนุมัติ exact app/config diff <FILES_AND_VARIABLES> และ Supabase project <project-ref> เท่านั้น:
- Site URL: https://<app.example.com>
- Redirect URLs: <EXACT_IMPLEMENTED_CALLBACK_AND_RESET_URLS>

ให้แก้เฉพาะรายการที่รายงาน, build/deploy ใหม่เฉพาะเมื่อ app config ต้องใช้ origin ใหม่ และทดสอบ signup/login/logout/password reset/protected route/CRUD ด้วยบัญชีและข้อมูลจำลองที่อนุมัติ ห้ามใช้ wildcard Production URL และห้ามปิด Learning URL เดิมจนทุกข้อผ่าน
Certificate ให้ Cloudflare จัดการ

Workers Custom Domain สร้าง DNS record และ certificate ให้ ส่วน Pages จะออก certificate หลัง Domain validation หาก Pending ให้ตรวจ CAA/DCV และ record conflict ก่อน ไม่ลบ CAA ทั้งชุดหรือปิด Security Rule กว้าง ๆ

ตรวจจาก Windows หลังแต่ละ Gate

POWERSHELLผู้เรียน/Agent รันแบบ Read-only · DNS + HTTPS
# แทนค่า placeholder ก่อนรัน ห้ามคัดลอก <...> ไปทั้งวงเล็บ
nslookup -type=ns <APEX_DOMAIN> 1.1.1.1
nslookup -type=ns <APEX_DOMAIN> 8.8.8.8
Resolve-DnsName -Name <APEX_DOMAIN> -Type DS -Server 1.1.1.1 -ErrorAction SilentlyContinue
Resolve-DnsName -Name <APEX_DOMAIN> -Type DS -Server 8.8.8.8 -ErrorAction SilentlyContinue
nslookup <CUSTOM_HOSTNAME> 1.1.1.1
curl.exe -I https://<CUSTOM_HOSTNAME>/
curl.exe -I https://<CUSTOM_HOSTNAME>/<CRITICAL_ROUTE>
PROMPTPrompt · Final Custom Domain Verification
VERIFY CUSTOM DOMAIN — EVIDENCE ONLY
ตรวจหลัง Custom Domain แสดง Active และ HTTPS พร้อมแล้ว

1. ตรวจ authoritative nameservers และ hostname จาก public resolver อย่างน้อย 2 แห่ง
2. เปิด https://<CUSTOM_HOSTNAME> และ critical routes จริง ตรวจ status, redirect chain, assets, console และ mobile layout
3. ตรวจ certificate ของ exact hostname และไม่มี TLS/redirect loop
4. ยืนยัน Supabase Site URL กับ exact Redirect URLs จาก Dashboard โดยไม่แสดง key/token
5. ทดสอบ signup, email confirmation, login, logout, password reset, protected route และ CRUD ด้วยข้อมูลจำลองที่อนุมัติ
6. ตรวจว่า User A ยังเข้าถึง User B ไม่ได้
7. รายงาน PASS/FAIL/ยังไม่ได้ verify พร้อมหลักฐานและ rollback trigger ห้ามเดาผล
8. คง Learning URL เดิมไว้จนทุก Critical Flow ผ่าน
Supabase Site URL มีผลกับอีเมล Auth

Email confirmation และ Password reset อาจใช้ Site URL เป็นปลายทาง จึงต้องรอ HTTPS Active ก่อน Gate D3 และใช้ Production paths แบบ exact ห้ามแก้ปัญหาด้วย wildcard กว้าง

Rescue เฉพาะ Domain / DNS / SSL / Auth

D01

Zone Pending หรือ NXDOMAIN

Cloudflare ยังไม่ Active หรือค้นหา hostname ไม่เจอ

PROMPTDomain Rescue Prompt 1
วิเคราะห์ DNS แบบ read-only: ตรวจ authoritative NS จาก 1.1.1.1 และ 8.8.8.8, Registrar nameservers, DNSSEC/DS, zone status และ exact hostname
เปรียบเทียบกับค่าที่อนุมัติใน Gate D1/D2 แล้วรายงานจุดต่าง ห้ามเปลี่ยน Nameserver, DNS หรือปิด DNSSEC เอง และห้ามบอกว่า propagation เสร็จถ้า resolver ยังไม่ตรง
D02

Pages Custom Domain ขึ้น 522

สร้าง CNAME แล้วแต่ Pages ยังรับ hostname ไม่ถูกต้อง

PROMPTDomain Rescue Prompt 2
ตรวจว่า exact hostname ถูก associate ผ่าน Pages > Custom domains ก่อนสร้าง CNAME หรือไม่
ตรวจ CNAME ว่าชี้ <PROJECT>.pages.dev และไม่มี record ชนกัน เสนอ exact correction และ rollback แต่ห้ามแก้ DNS จนได้รับ Gate D2-B ใหม่
D03

SSL Certificate ค้าง Pending Validation

DNS ถูกแล้วแต่ HTTPS ยังไม่พร้อม

PROMPTDomain Rescue Prompt 3
ตรวจ CAA ของ apex/hostname, certificate status และ DCV path /.well-known/* แบบ read-only
รายงานว่า CAA หรือ WAF/redirect rule ใดอาจขวาง Cloudflare validation ห้ามลบ CAA ทั้งชุดหรือปิด Security Rule กว้าง ๆ ให้เสนอ minimum exact change แล้วหยุดรอ approval
D04

Supabase เด้งกลับ localhost หรือ URL เก่า

Login, Email confirmation หรือ Password reset กลับผิดโดเมน

PROMPTDomain Rescue Prompt 4
ตรวจ actual redirectTo ใน source, Supabase Site URL, exact Redirect URLs และ callback/reset routes ที่ระบบ implement จริง
ห้ามแก้ด้วย wildcard Production URL ให้เสนอ exact URL diff และทดสอบด้วยบัญชีจำลองใหม่หลัง Gate D3
D05

อีเมลเดิมหยุดหลังเปลี่ยน Nameserver

เว็บไซต์เปิดได้แต่รับส่งอีเมลหรือ verification ไม่ทำงาน

PROMPTDomain Rescue Prompt 5
หยุดการเปลี่ยน DNS เพิ่มเติม ตรวจ MX, SPF, DKIM, DMARC และ verification TXT เทียบ inventory ก่อน cutover
รายงาน record ที่หาย/ต่างและผู้ให้บริการที่เกี่ยวข้อง ห้ามเดาค่าใหม่ ให้ใช้ค่าจากผู้ให้บริการอีเมลและขอ approval สำหรับ exact record ทีละรายการ

Definition of Done · Custom Domain

  1. 01

    Worker/Pages Apex: Cloudflare zone Active และ NS ตรงกัน; Pages External DNS subdomain: NS คง provider เดิมและ exact CNAME resolve ไป Pages target จาก 1.1.1.1 กับ 8.8.8.8

  2. 02

    Exact hostname ผูกกับ Worker หรือ Pages target ที่อนุมัติ และไม่มี DNS record ชนกัน

  3. 03

    Custom Domain กับ certificate แสดง Active; HTTPS เปิดได้โดยไม่มี TLS error หรือ redirect loop

  4. 04

    หน้าแรก, protected route, deep-link refresh และ static assets เปิดจาก Custom Domain ได้

  5. 05

    Supabase Site URL และ Redirect URLs เป็น Production URLs แบบ exact ตาม route ที่โค้ดใช้จริง

  6. 06

    Signup, confirmation, login, logout และ password reset กลับ Custom Domain ถูกต้อง

  7. 07

    CRUD ด้วยข้อมูลจำลองผ่าน และ User A ยังเข้าถึงข้อมูล User B ไม่ได้

  8. 08

    Learning URL เดิมยังใช้ rollback ได้ และรายงานสิ่งที่ยังไม่ได้ verify อย่างตรงไปตรงมา

ผลลัพธ์สุดท้าย

https://app.example.com เปิดผ่าน HTTPS, Auth กลับ exact domain, Critical Flow ผ่านด้วยข้อมูลจำลอง และมี Learning URL + DNS inventory สำหรับ Rollback ถ้ายังไม่ครบข้อใดให้ระบุว่า Custom Domain “ยังไม่ได้ verify”

12

WHEN THINGS BREAK

Rescue Prompts — แก้จากหลักฐาน

อย่าเริ่มโปรเจกต์ใหม่ทันทีเมื่อ Error ให้ Prompt เหล่านี้บังคับ Agent หา Root Cause และรักษา Gate เดิม

01

Agent หยุดกลางทางหรือจำสถานะไม่ได้

งานค้างหลังปิดเครื่อง เปลี่ยน Agent หรือ Context หาย

PROMPTRescue Prompt 1
ให้กู้สถานะจาก workspace ปัจจุบัน ห้าม initialize โปรเจกต์ใหม่และห้ามลบงานเดิม

1. อ่าน CLAUDE.md ทุกระดับที่เกี่ยวข้อง, AGENTS.md ถ้ามี, README, package.json, git status และ migration files
2. ตรวจ Phase/Gate ล่าสุดที่ผ่านจริงจากหลักฐาน
3. รัน read-only checks ก่อน
4. สรุป: เสร็จแล้ว / ยังไม่เสร็จ / ยังไม่ได้ verify / ต้องรออนุมัติ
5. ทำต่อจากขั้นถัดไปด้วย minimum diff
6. ถ้าขั้นถัดไปคือ credential, migration หรือ deploy ให้หยุดที่ Gate เดิม
7. ห้าม claim ว่าสำเร็จหากไม่มีหลักฐานจริง
02

Supabase ต่อได้แต่ข้อมูลว่างหรือ RLS Error

พบ new row violates row-level security policy หรือเห็นข้อมูลไม่ครบ

PROMPTRescue Prompt 2
วิเคราะห์ Supabase และ RLS แบบ evidence-first โดยห้ามปิด RLS

ตรวจ environment แบบไม่แสดงค่า, auth.uid(), schema, grants และ policies จริง
ตรวจ SELECT, INSERT, UPDATE, DELETE แยกกัน รวมทั้ง USING และ WITH CHECK
ทดสอบ unauthenticated, User A และ User B ผ่าน client JWT จริง
เปรียบเทียบ remote schema กับ migration files

ถ้าต้องแก้ ให้สร้าง forward-only migration ใหม่ แสดง SQL/diff/risk แล้วหยุดที่ Gate B ก่อน apply ห้ามใช้ service-role key ใน browser ห้าม reset remote database
03

Typecheck, Lint, Test หรือ Build ไม่ผ่าน

Agent แก้ซ้ำหรือพยายามปิดกฎเพื่อให้ไฟเขียว

PROMPTRescue Prompt 3
แก้ verification failure ด้วย minimum diff ห้ามลดมาตรฐาน

1. รัน command ที่ fail ซ้ำและจับ root cause แรก
2. แยก typecheck, lint, test และ build
3. แก้ทีละกลุ่มและเพิ่ม regression test เมื่อเป็น bug
4. ห้ามใช้ any, @ts-ignore, ปิด lint rule, ลบ assertion หรือ skip test
5. หยุด dev server ก่อน production build
6. รัน typecheck, lint, tests, coverage, build และ wrangler dry-run ใหม่
7. รายงาน command และ exit result จริง ข้อใดยังไม่ผ่านต้องบอกตรง ๆ
04

ยอดเงินหรือ CSV ผิด

ยอดคลาดเคลื่อน ภาษาไทยเพี้ยน หรือ Excel รันสูตรจากข้อมูล

PROMPTRescue Prompt 4
ตรวจ business logic โดยแยกเป็น pure functions และเขียน failing tests ก่อนแก้

ตรวจ integer satang, การปัดเศษ, month range แบบ start inclusive/end exclusive, income, expense, balance และ empty month
ตรวจ CSV เฉพาะเดือนที่เลือก, UTF-8 BOM, comma, quote, newline และ formula injection สำหรับ = + - @
แก้ด้วย minimum diff แล้วรัน typecheck, lint และ tests ทั้งหมด
05

Cloudflare เปิดแล้วหน้าขาวหรือ Refresh 404

หน้าแรกเปิดได้ แต่ deep link หรือ assets ใช้ไม่ได้

PROMPTRescue Prompt 5
วิเคราะห์ Cloudflare deployment แบบ read-only ก่อน ห้าม redeploy ทันที

ตรวจ production URL/target, dist, index.html, asset paths, Vite base, build-time env, Workers assets config และ SPA not_found_handling
ตรวจ console, network 404, CORS และ Supabase Auth redirect URLs โดยปกปิดข้อมูลสำคัญ

แก้ local files และรัน Verify Gate ได้ แต่ก่อน deploy ซ้ำต้องสรุป root cause, files changed, account/Worker target และหยุดที่ Gate C
13

MAKE IT YOUR OWN

สร้าง Product Brief ของคุณเอง

เติมข้อมูลสั้น ๆ แล้วนำ Prompt Add-on ไปวางต่อท้าย Master Prompt เพื่อเปลี่ยนชื่อ กลุ่มผู้ใช้ สี และฟีเจอร์ โดยไม่ทำให้ Security Rules หาย

ฟีเจอร์เสริม (ไม่บังคับ)
PROMPT ADD-ONProduct Brief ที่สร้างจากข้อมูลของคุณ
ใช้ Master Prompt หลักของ Handbook นี้เป็นกติกาทั้งหมด แล้วปรับ Product Brief ดังนี้

ชื่อแอป: เงินเข้าเงินออก
กลุ่มผู้ใช้: ฟรีแลนซ์และเจ้าของกิจการขนาดเล็ก
ภาษาหลัก: ไทย
สกุลเงิน: THB — ล็อกตาม Business Rules ของ V1
สีหลัก: แดงสด #F20D0D
ฟีเจอร์เสริม: ไม่มี — รักษา V1 ให้เรียบง่าย

ข้อกำหนด:
- ฟีเจอร์เสริมต้องไม่ทำให้ Auth, RLS, amount_satang, CSV safety หรือ Approval Gates อ่อนลง
- ถ้าฟีเจอร์เสริมต้องเปลี่ยน schema ให้สร้าง migration แยกและหยุดที่ Gate B
- ถ้าขอบเขตใหญ่เกิน V1 ให้เสนอเป็น Phase 2 และทำ Core V1 ให้เสร็จก่อน
- เริ่ม Phase 0 จาก Master Prompt ได้เลย
DOCS

SOURCES + REFERENCES

ลิงก์อ้างอิงสำหรับผู้สอน

คำสั่งและ Security Rules ยึดจากเอกสารทางการ ณ วันที่ 8 สิงหาคม 2026 ส่วน Global Rules และ Skill catalog ใช้ GitHub สองรายการที่ผู้ใช้ระบุเป็น community references ซึ่งต้องตรวจ source ก่อนใช้

WORKFLOW COMPLETE

Rules → Skills → Prompt → Supabase → Cloudflare → Domain

ตอนนี้คุณมี Global/Project CLAUDE.md, Skill Scout, Master Prompt, Approval Gates, Custom Domain Cutover และ Checklist สำหรับกลับไปสร้างโปรเจกต์ถัดไปด้วยตัวเอง

กลับขึ้นด้านบน ↑
สารบัญ