build-frontendlisted

# build-frontend — ใส่ behavior/logic ด้วย Claude Code เป้าหมาย: หน้า UI ที่ `wireframe-lock` เฟส 3 port มาแล้ว (โครง+copy+state ตรง wireframe) — สกิลนี้ทำให้ **ทำงานจริง** (validation, คำนวณ, submit) ตาม `wireframe.lock.md` + `features.md`. ทีละหน้า, review ทุก edit. **ไม่ redesign, ไม่สร้าง layout ใหม่.** ## 0️⃣ ENTRY (ห้ามข้าม) — เช็คก่อนเริ่ม สกิลนี้ไม่ใช่จุดเริ่ม build frontend — ต้องมี wireframe ที่ lock+port มาแล้วก่อนเสมอ. | เช็ค | ผล | |---|---| | มี `wireframe.lock.md` และหน้าที่ port แล้วจาก `/wireframe-lock` เฟส 3 (BUILD)? | ✅ ทำต่อด้านล่าง | | มีแค่ `design.md`/`features.md` เฉยๆ ยังไม่เคยทำ wireframe | ⛔ หยุด. บอก user: "ต้องทำ wireframe ก่อน" แล้วสั่ง `/wireframe-lock` | > เหตุผล: build ตรงจาก design.md = AI เดา layout เอง → ไม่ตรงของที่ user เห็น/อนุมัติมาก่อน. > wireframe-lock เฟส 3 setup Next.js + port UI ให้แล้ว 1:1 (โครง/copy/state). > สกิลนี้ทำแค่ **เติม logic ทับของที่ port มา** — ไม่ใช่สร้างหน้าใหม่. ## Starter Prompt (prompt แรกของ build) ``` /add-file docs/project.md /add-file docs/features.md /add-file docs/database.md /add-file wireframe.lock.md อ่าน wireframe.lock.md แล้วใส่ behavior ให้ทุก data-action ในหน้า [X] ทำงานจริง (validation, คำนวณ, submit) ตาม features.md — ใช้ mock data ก่อน ห้ามแก้ layout/copy/ component ที่ port มาแล้วจาก wireframe ``` ## ลำดับ build (บน UI ��ี่ port มาจาก wireframe-lock แล้ว) 1. **เช็ค ENTRY gate** — มี `wireframe.lock.md` + หน้า ported แล้วหรือยัง (ด้านบน). 2. **ใส่ behavior ทีละหน้า** — ตาม Screens List ใ