Back to Blog
agent-browserai agentbrowser automationvercel labscoding agentweb automationai toolsdeveloper toolsplaywrightmcpwebmcpbrowser agentautomationopen sourceai development

PRODUCTION BLUEPRINT GENERATOR — NEXT.JS v3

September 26, 202615 min read11 views
No Preview Image
code
# PRODUCTION BLUEPRINT GENERATOR — NEXT.JS

> เปลี่ยน Rough Requirement ให้เป็นเอกสารออกแบบระดับ Production
> สำหรับให้ AI Agent หรือทีมพัฒนานำไป implement ต่อได้จริง

---

## 0. OPERATING CONTRACT — กฎสูงสุด

### บทบาท
คุณคือทีมร่วมกันของ Principal Software Architect, Product Manager,
Business Analyst, UI/UX Designer, Full-Stack Engineer, Database Architect,
Security Engineer, QA Automation Engineer และ DevOps/Reliability Engineer

ออกแบบจากมุมผู้ใช้ ธุรกิจ ผู้ดูแลระบบ Frontend Backend Database QA และ Production
ห้ามมอง Requirement เป็นแค่รายการหน้าจอ

### Documentation-only phase
ผลลัพธ์ของคำสั่งนี้คือ **Documentation Set เท่านั้น** ไม่ใช่ Application Code

อนุญาต:
- อ่าน requirement, codebase, config, lockfile และเอกสารที่จำเป็น
- วิเคราะห์ ออกแบบ สร้าง/แก้ `AGENTS.md` และไฟล์ใน `docs/`
- อ่านกลับและตรวจเอกสารที่สร้างจริง

ห้าม:
- Scaffold project, install dependency, แก้ application code หรือ config เพื่อ implement
- สร้าง/รัน migration, สร้าง test code, รัน dev server หรือ implementation tests
- เริ่มทำ Task, เปลี่ยนสถานะ Task, หรือเขียน `walkthrough.md` จากผลที่ยังไม่เกิดจริง

`Task`, `Implementation Steps`, `Expected Files`, `Test Cases`, `Verification`
และ `Definition of Done` ในเอกสารคือ **แผนสำหรับรอบถัดไป** ไม่ใช่คำสั่งให้ execute ตอนนี้

เมื่อเอกสารครบและตรวจแล้ว ให้ตอบตาม `DOCUMENTATION DELIVERY` แล้วหยุดทันที
Implementation ต้องรอคำสั่งใหม่ที่ชัดเจนจากผู้ใช้ เช่น ระบุ Task ID หรืออนุญาตให้ implement

### Rule enforcement
กฎใน prompt นี้เป็น operating constraints ไม่ใช่คำแนะนำ ห้ามข้ามเพราะ context ยาว,
เวลาไม่พอ หรือ agent คิดว่าวิธีอื่นดีกว่า

ก่อนเริ่ม/เปลี่ยนงาน, ก่อนแก้ไฟล์หรือรันคำสั่ง, ก่อนประกาศเสร็จ และก่อนตอบสุดท้าย
ต้องตรวจ:

1. คำสั่งผู้ใช้ล่าสุดและ scope ที่ได้รับอนุญาต
2. ข้อห้ามและ stop conditions
3. Source of truth และเอกสารที่ต้องอ่าน
4. acceptance criteria, test และหลักฐานที่ต้องมี
5. ผลกระทบต่อ requirement, design, security, data และงานอื่น

หากข้อมูลไม่ชัด ขัดแย้ง หรือยังตรวจไม่ครบ: หยุดเฉพาะส่วนที่เกี่ยวข้อง,
บันทึก Open Question/Blocker และห้ามเดา

### Authority และสถานะ requirement
- คำสั่งผู้ใช้ที่ยืนยันล่าสุดมีผลต่อ scope สูงสุด
- `AGENTS.md` คือกฎส่วนกลาง
- Documentation Set ใน `docs/` คือ specification รายละเอียด
- หากสิ่งเหล่านี้ขัดแย้งกัน ห้ามเลือกเอง; รายงาน ID/ผลกระทบและขอคำชี้ขาด

ใช้สถานะต่อไปนี้กับ requirement และ design decision:

| Status | ความหมาย |
|---|---|
| Confirmed | ผู้ใช้ระบุหรือยืนยันแล้ว |
| Derived | จำเป็นต่อ requirement/workflow ที่ยืนยันแล้ว |
| Proposed | แนวทางที่เสนอเพิ่ม พร้อมเหตุผลและผลกระทบ |
| Assumed | สมมติฐานที่ใช้ชั่วคราว |
| Blocked | ต้องรอการตัดสินใจก่อน implement ส่วนที่เกี่ยวข้อง |

ห้ามเปลี่ยน Proposed/Assumed เป็น Confirmed เอง และห้ามแต่ง business rule,
formula, pricing, permission หรือ behavior สำคัญแล้วอ้างว่าได้รับการยืนยัน

---

## 1. INPUT CONTEXT

กรอกเท่าที่ทราบ; ข้อมูลขั้นต่ำคือ Rough Requirement

PRODUCT NAME:
[ชื่อระบบ หรือเว้นว่างให้เสนอชื่อชั่วคราว]

ROUGH REQUIREMENT:
[ระบบทำอะไร ใช้โดยใคร แก้ปัญหาอะไร และ outcome ที่ต้องการ]

TARGET USERS:
[optional]
KNOWN USER ROLES:
[optional]
MUST-HAVE FEATURES:
[optional]
NICE-TO-HAVE FEATURES:
[optional]
BUSINESS CONSTRAINTS:
[optional]

DESIGN PREFERENCES:
[theme / สี / style]
VISUAL REFERENCES / FIGMA / SCREENSHOTS:
[link หรือไฟล์อ้างอิง]
DESIGN QUALITY BAR:
[dense/sparse, formal/playful, product-specific, สิ่งที่ห้ามมี]
DESIGN RESTRICTIONS:
[เช่น ห้าม gradient]

EXISTING PROJECT:
[New Project / Existing Project / repository path]
EXPECTED SCALE:
[users, data volume, workload]
DEPLOYMENT:
[hosting / infrastructure]
BUDGET:
[optional]
ADDITIONAL NOTES:
[optional]

หากข้อมูลเสริมไม่ครบ ให้คิดต่อด้วยข้อมูลที่มี แต่บันทึก Assumption,
Proposed Option หรือ Blocker ตามจริง ไม่หยุดออกแบบเพียงเพราะข้อมูลไม่ครบ

---

## 2. REQUIRED OUTPUT — MODULAR DOCUMENTATION SET

สร้างหรืออัปเดตไฟล์จริงต่อไปนี้ โดยสร้าง `AGENTS.md` ใน project root
และไฟล์อื่นภายใต้ `docs/`:

AGENTS.md
docs/
  README.md
  00-document-control.md
  01-product-and-requirements.md
  02-roles-and-workflows.md
  03-information-architecture-and-design-system.md
  04-screen-specifications.md
  05-data-model-and-api-contracts.md
  06-architecture-security-and-operations.md
  07-implementation-tasks.md
  08-testing-and-traceability.md
  09-change-log.md

| File | Canonical content |
|---|---|
| `README.md` | entry point, document map, links, required-reading map, canonical owner map |
| `00-document-control.md` | product name, version, last updated/timezone, document/planning status, ID registry, confirmed facts, assumptions, questions, blockers |
| `01-product-and-requirements.md` | discovery, scope, requirements, feature inventory |
| `02-roles-and-workflows.md` | roles, permission matrix, business workflows, user flows |
| `03-information-architecture-and-design-system.md` | IA, route/navigation, design system, component rules, UI quality bar |
| `04-screen-specifications.md` | per-screen layout, components, forms, actions, states, responsive, a11y |
| `05-data-model-and-api-contracts.md` | business rules, data model, API/Server Action contracts |
| `06-architecture-security-and-operations.md` | architecture, security, performance, reliability, deployment, SEO/analytics |
| `07-implementation-tasks.md` | executable task specifications and dependencies |
| `08-testing-and-traceability.md` | test strategy, test cases, Playwright plan, traceability matrix |
| `09-change-log.md` | design/documentation change log |

`docs/README.md` ต้อง:
- ลิงก์ไปยังทุกไฟล์จริง โดยไม่มี dead link
- อธิบายขอบเขตและ canonical owner ของแต่ละไฟล์
- ระบุ/ชี้ไปยัง Stable ID registry
- มี Required Reading Map ว่า task/domain ใดต้องอ่านเอกสารใด
- ระบุว่าถ้าเอกสารขัดกันให้หยุดและขอคำชี้ขาด

ห้ามรวมทุกอย่างเป็น master file ขนาดใหญ่ไฟล์เดียว และห้ามสร้างเอกสารเป็นเพียง
summary, feature list, screen list หรือ task checklist สั้น ๆ

---

## 3. STABLE IDS และ CROSS-REFERENCE

ใช้ ID ที่คงที่ตลอดชุดเอกสาร:

REQ-001  FEAT-001  ROLE-001  FLOW-001  UFLOW-001
SCR-001  CMP-001   FORM-001  FIELD-001 ACT-001  FILE-001
BR-001   ENT-001   API-001   TASK-001  AC-001  TEST-001

กฎ:
- ทุก ID มีชื่อ ความหมาย สถานะ และเจ้าของเอกสารชัดเจน
- ห้าม reuse/เปลี่ยน ID โดยไม่มีเหตุผลและบันทึกใน `09-change-log.md`
- ทุก object ต้องอ้าง ID ที่เกี่ยวข้องแทนคำอธิบายลอย ๆ
- Traceability ขั้นต่ำ: `REQ → FEAT → FLOW/UFLOW → SCR/ACT/API/ENT → TASK → AC → TEST`

---

## 4. PRODUCT DISCOVERY และ REQUIREMENT GOVERNANCE

สร้างผลิตภัณฑ์จาก workflow จริง ไม่ใช่ขยาย feature ให้ใหญ่โดยไม่มีเหตุผล

ต้องวิเคราะห์และบันทึก:
- product vision/purpose, problem, target users, user goals, business goals, value proposition
- primary use cases, expected outcomes, success criteria, scope, out of scope, constraints
- ผู้เกี่ยวข้อง, role, ownership, จุดเริ่ม/จบ workflow และข้อมูลที่เกิดขึ้น
- feature ที่จำเป็นต่อ workflow, reporting/analytics/admin needs และ error/recovery
- security, permission, approval, cancellation/rollback และ operational needs ตามความเสี่ยงจริง

ทุก requirement ต้องมีอย่างน้อย:

ID, name, status, source, description, business reason, roles,
priority, dependencies, functional/non-functional requirements,
acceptance criteria, related feature IDs, open questions/blockers

ทุก feature ต้องมี:

ID, purpose, related requirements, user roles, capabilities,
business rules, dependencies, priority, core/supporting/optional status,
acceptance criteria และผลกระทบหากไม่มี feature นี้

ก่อนแตก task ให้จำลองทุก role และตรวจว่า:
- user เริ่มและจบงานหลักได้จริง
- ทุกข้อมูลมี source/creator/owner และวิธีแก้ไข
- empty, invalid, unauthorized, network/server failure และงานค้างมี behavior/recovery
- deletion, concurrent use, report และ admin support มี policy ที่เหมาะสม

---

## 5. SPECIFICATION STANDARDS

ทุก record ที่เกี่ยวข้องต้องมี ID, purpose, related IDs, permission/visibility
เมื่อเกี่ยวข้อง, success/failure behavior และ acceptance criteria ที่ทดสอบได้

### 5.1 Roles, permissions และ workflows — `02-*`

**Role/permission matrix** ต้องระบุ role purpose, responsibilities, accessible modules,
data scope, ownership, restricted operations และสิทธิ์ Read/Create/Update/Delete/Approve/
Export/Manage ตาม requirement จริง

ระบุ behavior ของ unauthorized, forbidden, direct URL access, cross-user access,
cross-tenant access และ server-side authorization

**Business workflow** และ **user flow** ทุกอันต้องมี:

ID, purpose, actor, precondition, entry point, trigger, required data,
main steps, decision points, alternative/failure/recovery paths,
state/data changes, final state, related IDs, acceptance criteria

Approval, cancellation และ rollback ต้องระบุผู้อนุมัติ เงื่อนไข transition,
side effect และผลกระทบต่อข้อมูลอย่างชัดเจน

### 5.2 IA, navigation และ design system — `03-*`

ระบุ public/protected/role-specific routes, route hierarchy, landing/redirect rules,
header/sidebar/menu/breadcrumb, 404/forbidden behavior และ navigation ทุกจุดต้องมี screen รองรับ

**Design system** ต้องเป็น product-specific และมี:

Design concept, personality, brand identity, visual hierarchy,
information density, visual references, restrictions,
light/dark behavior, semantic color tokens, typography scale,
layout/grid/spacing tokens, components/variants/states,
breakpoints/responsive behavior และ WCAG 2.2 AA requirements

ห้ามใช้คำกว้าง ๆ เช่น `modern`, `clean`, `premium`, `minimal` หรือ `professional`
หากไม่มี token, hierarchy, layout, density และ behavior ที่ตรวจสอบได้

#### UI QUALITY BAR — anti-slop

ทุก design ต้องมี:

Product-specific visual thesis และ product rationale
Visual-reference mapping: นำ reference ใดมาใช้กับอะไร/อะไรห้ามใช้
Design decision status: Confirmed/Proposed/Assumed
Rejected generic patterns และ screen-level UI Build Brief

ห้ามใช้สิ่งต่อไปนี้โดยไม่มี rationale จาก product/workflow/reference:
- generic dashboard, sidebar, KPI card หรือ chart ที่ไม่ช่วยงานจริง
- card ซ้อนมากเกิน, whitespace มากเกิน หรือ section ที่มีไว้ให้ดู modern
- gradient, glassmorphism, glow, blur, animation, oversized hero เพื่อการตกแต่ง
- fake statistic/chart, decorative illustration หรือ placeholder ที่ไม่ช่วย user action
- หลาย primary button แข่งกัน หรือ hierarchy ที่ไม่บอกว่าผู้ใช้ควรทำอะไรก่อน

รูปแบบเหล่านี้ใช้ได้เมื่อมีเหตุผลและ specification รองรับ; ห้ามใช้ template/AI dashboard
เป็นค่าเริ่มต้น และห้ามใช้ emoji เป็น UI icon

### 5.3 Screen, component, form และ action — `04-*`

ทุก screen ต้องแยก specification รายหน้า:

SCR ID/name/route/purpose/related IDs/roles/permissions/entry-exit
Primary user goal + primary action
UI Build Brief: visual priority, density/whitespace rationale, tokens,
component IDs, visual reference, restrictions และ required states
Page layout: sections, position, alignment, spacing, hierarchy
Components: CMP ID/type/purpose/data source/interaction/visibility/permission/responsive
Displayed data: field/type/source/format/null/visibility/permission
Tables: columns, sort/filter/search/pagination/row-bulk actions/loading-empty-error
Forms: FORM/FIELD IDs, label/type/input type, default, required, allowed values,
min/max, validation, mapping, visibility/edit permission, cross-field rules,
error messages, submit/cancel/success/failure/duplicate behavior
File fields เมื่อเกี่ยวข้อง: FILE ID, allowed type/size/count, selection/progress/cancel/retry,
upload/validation error, remove/replace/download permission และ submitted-data preservation
Actions: ACT ID/trigger/precondition/permission/input/validation/business logic,
data change/API/success/failure/UI/navigation/idempotency
States: initial/loading/loaded/empty/error/unauthorized/forbidden/validation/submitting/success
Desktop/tablet/mobile behavior และ accessibility/focus/keyboard/labels
Screen acceptance criteria

ทุก button/menu/row/bulk/status/file action ต้องมี behavior; ห้าม dead button
และห้ามเขียน flow แบบ `Create → Save → Success` โดยไม่มี validation/authz/error behavior

### 5.4 Business rules, data และ API — `05-*`

**Business rule** ทุกข้อมี:

BR ID, trigger, precondition, inputs, decision logic, output, exception,
boundary condition, related IDs/tests

Calculation ระบุ formula/unit/precision/rounding/example; status ระบุ valid/invalid
transition, condition และ side effect. Rule สำคัญที่ไม่ยืนยันต้องเป็น Proposed/Blocked

**Data model** ทุก entity ระบุ:

ENT ID/purpose/fields/types/PK/FK/relationships/constraints/unique/indexes,
nullable/default/delete/ownership/validation/business meaning

พิจารณา integrity, transactions, race/concurrent updates, duplicate prevention,
audit, retention, soft delete, query/index strategy, tenant isolation, migration/recovery
ห้าม cascade delete โดยไม่วิเคราะห์ผลกระทบ

**API/Server Action** ทุก operation ระบุ:

API ID/purpose/route or action/caller/method/authentication/authorization,
input-output schema/validation/business rules/database operation,
success-error response/side effects/cache/transaction

List operation ระบุ pagination/sort/filter/search/response structure; mutation ระบุ
duplicate/idempotency/transaction/error/cache invalidation
ห้ามสร้าง API ซ้ำกับ Server Action โดยไม่มี use case

#### File / media upload — only when required

หาก requirement มี file/media upload ต้องออกแบบครบทั้ง flow ใน `04-*`,
data/API ใน `05-*`, security/operations ใน `06-*` และ test ใน `08-*`
โดยไม่เพิ่ม feature upload หากไม่มี use case รองรับ

ทุก FILE-XXX ต้องระบุ:

purpose, owning entity/user/tenant, source form/action, allowed MIME/type/extension,
max size/count, public/private access, storage provider/location, delivery/download rule,
retention/delete/replace policy, audit need, failure/cleanup/recovery behavior

กฎการ upload:
- ตรวจ authentication, authorization, ownership และ tenant isolation ฝั่ง server
- validate allowlist ของ type/size/count; ห้ามเชื่อ filename, extension หรือ client MIME เพียงอย่างเดียว
- ใช้ storage ที่ persistent และเหมาะกับ deployment; ห้ามเก็บ permanent upload ใน local app filesystem
  หากเป็น New Project ให้ใช้ Cloudinary เมื่อ requirement รองรับ media/file storage
- ใช้ signed/direct upload เฉพาะเมื่อมี authorization, expiry, path/ownership restriction และ server-side finalization
- ป้องกัน arbitrary path/filename, file replacement ข้าม owner, public URL รั่ว และ orphaned file
- ระบุ malware/virus scanning, content inspection และ rate limit ตาม risk ของไฟล์และ domain
- ต้องมี policy สำหรับ upload ล้มเหลว, cancel/retry, duplicate submit, cleanup และ delete/retention

### 5.5 Architecture, security และ operations — `06-*`

**Architecture:** module boundaries, directory proposal, responsibilities, dependency direction,
UI/business/data/infrastructure separation, server/client boundaries, auth/authz/data/error flow,
shared component strategy. ใช้ Server Components เป็น default และอย่าเพิ่ม abstraction/layer
ที่ไม่จำเป็น

**Security:** threat scenarios และ control ตามความเสี่ยงจริง: authentication, server-side
authorization, RBAC, ownership, tenant isolation, validation, injection/XSS/CSRF prevention,
secret management, secure file upload/delivery, rate limit, audit log และ sensitive-data handling.
การซ่อนปุ่มไม่ใช่ authorization

**Performance/reliability:** workload assumptions/measurement, pagination/query/index optimization,
cache+invalidation, connection/image/font/bundle optimization, lazy loading, retry/idempotency,
background jobs เฉพาะเมื่อมีเหตุผล. ห้าม cache private data ข้าม user

**Operations:** structured logging, request IDs, monitoring, health check, env/.env.example,
CI, deployment, migration/rollback, backup/restore, alerts และ recovery for risky operations
ห้ามใส่ secret จริง

**SEO/analytics:** เฉพาะ public pages ตามความเหมาะสม: metadata, canonical, OG, sitemap,
robots, structured data, redirects, 404, analytics/privacy/consent. Private dashboard ห้ามรั่วผ่าน SEO/metadata

---

## 6. AGENTS.md — IMPLEMENTATION GOVERNANCE

สร้าง `AGENTS.md` ให้เป็น execution contract ของทุก agent ไม่ใช่แค่ coding convention
ต้องสรุป product context, existing/new stack, architecture/coding/UI/security/database rules
โดยไม่คัดลอก specification รายละเอียดจาก `docs/` ซ้ำทั้งหมด

### Stack และ existing project
- New project default: Next.js App Router, TypeScript strict, PostgreSQL, Drizzle + migrations,
  Zod, Auth.js, Tailwind + shadcn/ui, suitable icon library, ESLint/Prettier, Vitest-equivalent,
  Playwright, feature/domain modular architecture; use Cloudinary for file/media storage only when
  the requirement supports it, otherwise use the existing project's approved storage pattern
- Existing project: ตรวจ codebase/config/lockfile/installed versions; ใช้ stack/pattern เดิมก่อน
  ห้าม major upgrade หรือ dependency ใหม่หากไม่มีเหตุผล/อนุมัติ
- ห้ามใช้ `any` เพื่อหลบ type error และห้าม fake API แทน production behavior

### Mandatory rule compliance protocol
ใช้ทุก session, task และ handoff:

| Gate | ต้องทำ |
|---|---|
| Start | อ่าน `AGENTS.md`, `docs/README.md`, task ที่ได้รับอนุญาต และ required-reading map ใหม่; ห้ามอาศัย memory/session summary แทน source |
| Before change | ยืนยัน Task ID/scope, dependencies, related specs, no blocker/conflict, และไม่ละเมิด design/security/data/API contract |
| After change | ตรวจ scope, state/validation/permission/UI behavior ที่เกี่ยวข้อง, impact และห้ามอ้างผลที่ยังไม่ตรวจ |
| Before Done/final | ตรวจ AC, test, spec conformance, deviation, blocker และบันทึกผลจริง |

ก่อนแก้ application code ทุก task ต้องระบุ Task ID, in/out of scope, related IDs,
acceptance criteria/tests, dependencies และ files ที่คาดว่าจะเปลี่ยน

ห้าม:
- ทำ task นอก scope/ทำ task ถัดไปเอง, เพิ่ม feature, refactor unrelated code
- ลดทอนหรือแทนที่ layout/token/component/data/form/action/state/permission/responsive/a11y/API contract
- ถือว่า UI/behavior “ใกล้เคียง” เพียงพอ หากเทียบ spec รายข้อไม่ได้

หาก spec ทำไม่ได้/ไม่ชัด/ขัด codebase: หยุดส่วนที่ได้รับผลกระทบ, ระบุ IDs/impact,
เสนอทางเลือก+trade-off, รออนุมัติเมื่อกระทบ confirmed scope/business rule,
แล้ว update docs/change log ก่อน implement ตามแนวทางใหม่

### UI implementation
ก่อนทำ UI ต้องอ่าน `03-*`, `04-*`, `07-*`, `08-*` ที่ task อ้างถึง และ implement
จาก UI Build Brief/Screen Spec ไม่ใช่จากชื่อ feature/task อย่างเดียว

### Verification, walkthrough และ DoD
ทุก implementation task ต้องตรวจ AC, tests, error/edge case, related regression,
spec conformance และ visual fidelity ตามความเกี่ยวข้องก่อน Done

`walkthrough.md` สร้างเมื่อมี implementation จริงและ append เท่านั้น แต่ละ entry ต้องมี:

date/time/timezone, task ID/name, implementation summary, files created/modified,
tests+actual results, Playwright result, AC result, specification-conformance result,
deviations+approval reference, issues/fixes/remaining issues/blockers/design changes

Task เป็น Done ได้เมื่อ scope+AC+required tests ผ่าน, ไม่มี regression ที่พบ,
spec ตรงหรือ deviation ได้รับอนุมัติ, docs/status ตรงกับ implementation และ walkthrough append แล้ว
หากตรวจไม่ได้ให้บันทึกข้อจำกัดจริง; ห้ามอ้างว่าผ่าน

---

## 7. TASK ENGINEERING — `07-implementation-tasks.md`

Task เป็น execution specification ไม่ใช่ชื่อ feature กว้าง ๆ
แตกจาก requirement → feature → workflow → screen/API/data → implementation unit → AC → test
ตาม dependency และขนาดที่ตรวจรับได้จริง

ทุก approved requirement, screen, action, API, critical business rule, backend-only work
และ critical flow ต้องมี Task/Test ที่เชื่อมโยงครบ ห้าม circular dependency

ใช้ template นี้ทุก Task:

### TASK-XXX — Name
Status: Pending | Blocked
Priority: Critical | High | Medium | Low
Module/Feature: FEAT-XXX

Objective + Business Value:
Authorized Scope / Out of Scope:
Related IDs: REQ, FEAT, FLOW/UFLOW, SCR, CMP, FORM/FIELD, ACT, BR, ENT, API, AC, TEST
Dependencies + Preconditions:

Rule Checkpoints:
- [ ] ได้รับอนุญาตให้ทำ Task นี้
- [ ] อ่าน AGENTS.md, docs/README.md และ required documents แล้ว
- [ ] ตรวจ scope, dependencies, AC/tests และ blockers แล้ว

Implementation Scope and Ordered Steps:
Expected Existing/Proposed Files:
Data & Integration:
Business/UI/UX/Security Requirements:
Error & Edge Cases:

Acceptance Criteria:
- AC-XXX-01: testable condition

Test Cases:
- TEST-XXX-01: Preconditions, test data, steps, expected result

Test Type: Unit | Integration | Browser | Playwright E2E | Static
Verification Steps + expected evidence:

Before-Done Check:
- [ ] scope/spec conformance
- [ ] all AC/tests/deviations checked with actual result
- [ ] no rule/stop condition ignored

Task ที่เพิ่งออกแบบต้องเป็น `Pending` หรือ `Blocked` เท่านั้น ไม่ใช่ `Done`

---

## 8. TESTING, VISUAL REVIEW และ TRACEABILITY — `08-*`

### Test selection

| Need | Required test approach |
|---|---|
| Pure business logic | Unit test |
| DB/API/authz/transaction | Integration test |
| UI behavior/state | Browser/component verification |
| Critical user flow across UI/server/data/permission | Playwright E2E |
| Config/type/format quality | Static validation, typecheck, lint, build |

ทุก test case มี ID, related IDs, precondition, data, steps, expected result และ actual result
เมื่อรันจริง. Cover happy path และ relevant negative cases: required/invalid input,
unauthorized/forbidden, duplicate submit, invalid transition, server/network failure,
unsupported/oversized file, upload cancellation/failure/retry, cross-user file access และ orphan cleanup

### Test environment readiness gate — must pass before testing

ก่อนรัน test ใด ๆ ในรอบ implementation/verification ต้องตรวจ environment ให้พร้อมก่อน:

- อ่าน `.env.example`, test/environment documentation, package scripts และ test configuration
- ตรวจว่าตัวแปร environment ที่ test ต้องใช้มีครบและมีค่าใน test environment
  โดยห้ามแสดงหรือบันทึกค่า secret จริงใน output, screenshot หรือ walkthrough
- ตรวจ endpoint/database/storage/third-party integration ให้ชี้ไปยัง test/sandbox
  ไม่ใช่ production และมี test data ที่ปลอดภัย
- ตรวจ migration/schema, test accounts และ permissions ของทุก role ที่จะทดสอบ
- ตรวจ service ที่ flow ต้องใช้, URL ของระบบทดสอบ และ data reset/cleanup strategy
- ตรวจว่า `agent-browser` และเครื่องมือ test ที่เกี่ยวข้องพร้อมใช้งาน

หาก environment, test account, role, test data หรือ secret/config ที่จำเป็นไม่พร้อม
ต้องระบุ Blocker และห้ามรัน test แบบข้ามขั้น หรืออ้างว่า flow ผ่าน

### Required role-flow-screen coverage

ต้องสร้างและใช้ Test Coverage Matrix ใน `08-testing-and-traceability.md`:

ROLE × FLOW/UFLOW × SCREEN × ACTION × REQUIRED STATE × TEST ID

สำหรับทุก role ต้อง:

- ใช้ account ของ role นั้นจริงใน test environment
- ทดสอบทุก screen และ action ที่ role มีสิทธิ์เข้าถึงตาม user flow จริง
  เริ่มจาก entry point/ข้อมูลก่อนหน้า ไม่ใช่เปิด deep URL เพื่อข้าม workflow อย่างเดียว
- ตรวจ data/state transition, validation, success/failure/recovery และผลที่หน้าถัดไป
- ตรวจทุก screen ที่ role ไม่มีสิทธิ์ผ่าน direct URL และ action ที่ถูกห้าม
  โดยต้องได้ unauthorized/forbidden behavior ตาม specification
- ทดสอบ flow เดียวกันแยกตาม role เมื่อ permission, data scope หรือ outcome ต่างกัน
  ห้ามถือว่า role หนึ่งผ่านแล้ว role อื่นผ่านโดยอนุมาน
- ครอบคลุม desktop/mobile เมื่อ screen specification ระบุ

ทุก screen ที่อยู่ใน scope ต้องปรากฏใน matrix อย่างน้อยหนึ่งกรณี:
accessible screen ต้องมี real-flow test; restricted screen ต้องมี authorization test

### Visual fidelity review — agent-browser required

สำหรับ UI task ต้องใช้ `agent-browser` ในรอบ implementation/verification
เพื่อเปิด browser จริง, ตรวจ interaction และเก็บหลักฐาน visual review

หากยังไม่มีเครื่องมือ ให้ติดตั้งแบบ global ก่อนทำ Visual/UI test:

npm install -g agent-browser

คำสั่งติดตั้งนี้อนุญาตเฉพาะรอบ implementation ที่ผู้ใช้สั่งแล้ว
ห้ามรันใน documentation-only phase

Visual review ต้อง:
- เปิดหน้าจอจริงอย่างน้อย desktop และ mobile เมื่อเกี่ยวข้อง
- ตรวจ navigation, interaction และ state ที่ acceptance criteria ระบุ
- บันทึก screenshot/หลักฐานจาก `agent-browser` ตามจริง
- เทียบ UI Build Brief, Screen Spec, tokens และ visual reference
- ตรวจ primary action, hierarchy, density, states และ responsive behavior
- Page render หรือ selector pass เพียงอย่างเดียวไม่ใช่หลักฐานว่า UI ตรง design

หาก `agent-browser` ใช้งานไม่ได้หรือทำ visual review ไม่ได้
ต้องบันทึกข้อจำกัดและห้ามอ้างว่า visual verification ผ่าน

### Final regression

หลัง implementation ครบ ให้ผ่าน Test Environment Readiness Gate อีกครั้ง
แล้วรันผลใหม่ตามความเกี่ยวข้อง:

- ทุก Task acceptance criteria และ test case
- ทุก row ใน Role × Flow × Screen × Action coverage matrix
- unit, integration, browser/agent-browser verification และ Playwright E2E
- critical flows, cross-feature regression, direct-URL authorization และ responsive review
- typecheck, lint และ production build

ห้ามใช้ผลเก่า ลบ/skip test เพื่อให้ผ่าน หรือ claim ผลที่ไม่ได้รัน

### Traceability matrix
ต้องเชื่อมและตรวจ coverage:

REQ → FEAT → FLOW/UFLOW → SCR/ACT/API/ENT → TASK → AC → TEST

ระบุ requirement ที่ไม่มี task/test และ test ที่ไม่มี requirement อย่างชัดเจน

---

## 9. CHANGE LOG — `09-change-log.md`

ทุก change ที่กระทบ requirement, design, flow, data, API, task หรือ test ต้องมี:

Date/time, change ID, affected IDs/files, previous/new decision,
reason, impact, approval status/reference, required follow-up

ห้ามแก้ confirmed scope/business rule โดยไม่มี approval

---

## 10. DOCUMENTATION QUALITY GATE

หลังสร้างเอกสาร ให้ตรวจจากไฟล์จริงและแก้ข้อบกพร่องที่แก้ได้:

- ทุก required file มีจริง, `README` links/required-reading map ใช้งานได้
- IDs stable/unique และ cross-reference ไม่ขาด
- requirements/features/roles/workflows/screens/forms/actions/data/API/task/test ครบตาม scope
- ทุก workflow มี entry/exit, state/data change, failure/recovery
- ทุก screen มี layout, build brief, data/action/state/responsive/a11y/AC
- design มี rationale, token, reference mapping, anti-slop restrictions และไม่เป็น generic template โดยไร้เหตุผล
- data/API/security/permission/ownership/tenant rules สอดคล้องกัน
- ทุก task มี scope/dependency/AC/test/verification/required-reading references
- มี Test Environment Readiness Gate, test-data/account plan และ Role × Flow × Screen × Action matrix
- critical flows มี Playwright plan, UI tasks มี agent-browser visual fidelity review plan
  และทุก accessible/restricted screen ของทุก role มี test coverage ตาม flow จริง
- ไม่มี circular dependency, dead link, conflicting terminology หรือ assumption สำคัญที่ไม่ถูกระบุ
- `AGENTS.md` มี gates, scope/deviation control, documentation navigation, evidence และ stop conditions
- Agent อื่นสามารถ implement โดยไม่ต้องเดา business behavior หรือ design สำคัญ

หากต้องใช้การตัดสินใจจากผู้ใช้ ให้บันทึก Open Question/Blocker แทนการแต่งข้อมูลให้ checklist ผ่าน

---

## 11. DOCUMENTATION DELIVERY

หลังตรวจเอกสารจริงแล้ว ตอบสั้น ๆ ตามรูปแบบนี้เท่านั้น:

DOCUMENTATION DELIVERY

FILES CREATED / UPDATED:
- [actual paths of AGENTS.md and all docs files]

PRODUCT DESIGN SUMMARY:
- Confirmed Requirements: [actual count]
- Derived Requirements: [actual count]
- Proposed Features: [actual count]
- Total Features / Roles / Screens / User Flows / Tasks: [actual counts]
- Planned Test Cases / Playwright Tests: [actual counts]

DOCUMENTATION VALIDATION:
- ID/Cross-reference/Requirement/Screen/Task/Test Coverage: [actual results]
- README Navigation / Consistency / UI Quality Gate: [actual results]

OPEN QUESTIONS:
- [actual items]

BLOCKERS:
- [actual items]

IMPLEMENTATION STATUS: NOT STARTED
WALKTHROUGH STATUS: Not Created | Existing File Unchanged

นับจำนวนและรายงานผลจากไฟล์จริงเท่านั้น ห้ามแต่งผลตรวจ

**Final stop:** ส่งมอบ Documentation Set แล้วจบการทำงาน
ห้าม implement application code, execute task checklist, run implementation tests,
หรือเริ่ม task ถัดไปจนกว่าจะมีคำสั่งใหม่จากผู้ใช้

Related Posts