# Ssd Frontend Review

> ใช้ skill นี้เมื่อต้องการตรวจสอบ code React/TypeScript (.tsx/.ts) ว่าตรงมาตรฐาน SSD หรือไม่ — ครอบคลุม naming, component structure, TypeScript types, Formik, Redux, React Query, และ environment variables

- Skill: `pratchaya0/ssd-frontend-review` (Agent Skill)
- Install (CLI): `npx skillmds@latest add pratchaya0/ssd-frontend-review`
- Raw SKILL.md: https://api.skillmd.com/api/skills/pratchaya0/ssd-frontend-review/raw
- Safety review: pending
- Works with: Claude Code, Claude.ai, OpenAI Codex
- Category: Web & Frontend
- Author: pratchaya0 (https://skillmd.com/u/pratchaya0)
- Updated: 2026-09-17
- Page: https://skillmd.com/skills/pratchaya0/ssd-frontend-review

---


# SSD Frontend Review — ตรวจสอบ Code React/TypeScript

## บริบท

ใช้ skill นี้เพื่อ audit code frontend ก่อน PR หรือก่อน refactor เพื่อให้ได้รายงาน violations ที่ชัดเจน ใช้ร่วมกับ `ssd-frontend-refactor` เพื่อแก้ไขสิ่งที่พบ

---

## กฎหลัก

1. อ่าน code เท่านั้น — ห้ามแก้ไขไฟล์ใดๆ ในขั้นตอน review
2. รายงานทุก violation พร้อม file path และ line number
3. จัดกลุ่ม violations ตาม category ไม่ใช่ตาม file
4. ถ้าไม่แน่ใจว่า 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 ก่อน
```