pratchaya0 SSD Frontend Review — ตรวจสอบ Code React/TypeScript
บริบท
ใช้ skill นี้เพื่อ audit code frontend ก่อน PR หรือก่อน refactor เพื่อให้ได้รายงาน violations ที่ชัดเจน ใช้ร่วมกับ ssd-frontend-refactor เพื่อแก้ไขสิ่งที่พบ
กฎหลัก
- อ่าน code เท่านั้น — ห้ามแก้ไขไฟล์ใดๆ ในขั้นตอน review
- รายงานทุก violation พร้อม file path และ line number
- จัดกลุ่ม violations ตาม category ไม่ใช่ตาม file
- ถ้าไม่แน่ใจว่า violation จริงหรือไม่ ให้ระบุเป็น Warning (ไม่ใช่ Error)
Checklist การตรวจสอบ
Category 1: TypeScript Types
| กฎ | ถูก | ผิด |
|---|---|---|
ห้ามใช้ any |
unknown, Record<string, T> |
any |
ห้ามใช้ {} เป็น type |
Record<string, unknown> |
{} |
ห้ามใช้ as any |
type guard หรือ as unknown as T |
as any |
Category 2: Naming Conventions
| สิ่ง | รูปแบบที่ถูก | ตัวอย่างที่ผิด |
|---|---|---|
| Component | PascalCase, max 3 คำ | orderPageComponent |
| Props type | [ComponentName]Props |
Props, IProps, OrderProps (ถ้า component ไม่ชื่อ Order) |
| Page component | ลงท้ายด้วย Page |
OrderList, OrderScreen |
| Route path | lowercase kebab-case | /orderList, /Order_List |
| Variable/function | camelCase | OrderName, order_name |
| Global constant | CONSTANT_CASE |
baseUrl, BaseUrl |
| Custom hook file | ลงท้ายด้วย .hook.tsx |
useOrder.ts, order.hook.ts |
Category 3: Component Structure
| กฎ | ถูก | ผิด |
|---|---|---|
| 1 component ต่อ 1 ไฟล์ | ไฟล์แยกกัน | 2 exported components ในไฟล์เดียว |
| Fragment syntax | <>...</> |
<React.Fragment>...</React.Fragment> |
ห้าม React.createElement |
JSX เสมอ | React.createElement('div', ...) |
| Event handler | arrow function | function handleClick() {} |
| Boolean prop | ไม่ต้องใส่ ={true} |
<Button disabled={true}> |
| ห้าม DOM prop เป็น prop ชื่อ | ชื่อ prop ที่สื่อความหมาย | prop ชื่อ className, style |
Category 4: List Keys
| กฎ | ถูก | ผิด |
|---|---|---|
| ห้ามใช้ index เป็น key | unique id จาก data | key={index} |
Category 5: Environment Variables
| กฎ | ถูก | ผิด |
|---|---|---|
ห้ามใช้ import.meta.env ตรงๆ |
window.__CONST__ENV__.VAR_NAME |
import.meta.env.VITE_API_URL |
Env var ต้องขึ้นต้นด้วย VITE_ |
VITE_API_URL |
API_URL (ใน .env file) |
Category 6: Form Handling
| กฎ | ถูก | ผิด |
|---|---|---|
| Form ต้องใช้ Formik | useFormik<T>() หรือ <Formik> |
useState + onChange สำหรับ form |
| Validation ต้องใช้ Yup หรือ validate function | validationSchema: Yup.object(...) |
manual validation ใน submit handler |
Category 7: State Management
| กฎ | ถูก | ผิด |
|---|---|---|
Redux ต้องใช้ createSlice |
createSlice({ name, initialState, reducers }) |
createReducer, manual switch |
| ใช้ typed hooks | useAppSelector, useAppDispatch จาก redux/hook.ts |
useSelector, useDispatch โดยตรง |
Category 8: API Calls
| กฎ | ถูก | ผิด |
|---|---|---|
| ห้าม axios ใน component โดยตรง | useQuery, useMutation จาก React Query |
axios.get() ใน useEffect หรือ component body |
Query key ต้องใช้ queryKeys object |
queryKeys.orders.list() |
['orders', 'list'] แบบ inline |
Category 9: Automation Testing Attributes
| Element | กฎ |
|---|---|
<Button> |
ต้องมี name attribute |
<Label> / <Typography> ที่แสดงข้อมูล |
ต้องมี name attribute |
| Dynamic render (list items, conditional) | ต้องมี id attribute |
ขั้นตอนการ Review
ขั้นตอนที่ 1: กำหนด scope
# ถามหรือตรวจสอบว่าจะ review ไฟล์ไหน
# ตัวอย่าง scope:
# - ทั้ง src/modules/Order/
# - เฉพาะไฟล์ที่เปลี่ยนใน PR นี้
# - ทุก .tsx ใน src/
ขั้นตอนที่ 2: อ่านไฟล์และตรวจตาม Checklist
อ่านทีละไฟล์ ตรวจทุก category ด้านบน บันทึก violations พร้อม line number
ขั้นตอนที่ 3: สร้างรายงาน
ออก report ในรูปแบบนี้:
## Frontend Review Report
### ❌ Violations (ต้องแก้ไข)
| File | Line | Category | ปัญหา | แนวทางแก้ไข |
|------|------|----------|-------|-------------|
| src/modules/Order/OrderForm.tsx | 12 | Types | ใช้ `any` | เปลี่ยนเป็น `unknown` หรือระบุ type ชัดเจน |
| src/modules/Order/OrderList.tsx | 45 | Lists | ใช้ index เป็น key | ใช้ `order.orderId` แทน |
### ⚠️ Warnings (ควรแก้ไข)
| File | Line | Category | ข้อสังเกต |
|------|------|----------|----------|
| src/modules/Order/OrderCard.tsx | 8 | Testing | ไม่มี `name` attribute บน Button |
### ✅ ผ่าน
- Naming conventions: ผ่านทุก component และ page
- Fragment syntax: ใช้ `<>` ถูกต้องทุกที่
- Environment variables: ไม่พบการใช้ `import.meta.env`
### สรุป
- Violations: X รายการ ใน Y ไฟล์
- Warnings: X รายการ
- พร้อม refactor ด้วย `ssd-frontend-refactor`: ใช่ / ต้องพิจารณา Tier 4 ก่อน