ssd-frontend-review

SSD Frontend Review — Review React/TypeScript Code

Context

Use this skill to audit frontend code before a PR or before refactoring to get a clear violations report. Use together with ssd-frontend-refactor to fix what is found

---

Main Rules

1. Read code only — do not modify any files during the review step
2. Report every violation with file path and line number
3. Group violations by category, not by file
4. If unsure whether it is a real violation, mark it as Warning (not Error)

---

Review Checklist

Category 1: TypeScript Types

Rules	ถูก	ผิด
Do not use any	unknown, Record<string, T>	any
Do not use {} as a type	Record<string, unknown>	{}
Do not use as any	type guard or as unknown as T	as any

Category 2: Naming Conventions

สิ่ง	Correct pattern	Incorrect example
Component	PascalCase, max 3 words	orderPageComponent
Props type	[ComponentName]Props	Props, IProps, OrderProps (if the component is not named Order)
Page component	ends with 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	ends with .hook.tsx	useOrder.ts, order.hook.ts

Category 3: Component Structure

Rules	ถูก	ผิด
1 component per 1 file	Separate files	2 exported components in a single file
Fragment syntax	<>...</>	<React.Fragment>...</React.Fragment>
Do not React.createElement	Always JSX	React.createElement('div', ...)
Event handler	arrow function	function handleClick() {}
Boolean prop	No need to add ={true}	<Button disabled={true}>
Do not use DOM prop as prop name	Meaningful prop names	prop ชื่อ className, style

Category 4: List Keys

Rules	ถูก	ผิด
Do not use index as key	unique id from data	key={index}

Category 5: Environment Variables

Rules	ถูก	ผิด
Do not use import.meta.env directly	window.__CONST__ENV__.VAR_NAME	import.meta.env.VITE_API_URL
Env var must start with VITE_	VITE_API_URL	API_URL (in .env file)

Category 6: Form Handling

Rules	ถูก	ผิด
Form must use Formik	useFormik<T>() or <Formik>	useState + onChange for form
Validation must use Yup or a validate function	validationSchema: Yup.object(...)	manual validation in submit handler

Category 7: State Management

Rules	ถูก	ผิด
Redux must use createSlice	createSlice({ name, initialState, reducers })	createReducer, manual switch
Use typed hooks	useAppSelector, useAppDispatch from redux/hook.ts	useSelector, useDispatch directly

Category 8: API Calls

Rules	ถูก	ผิด
Do not use axios directly in a component	useQuery, useMutation from React Query	axios.get() in useEffect or component body
Query key must use queryKeys object	queryKeys.orders.list()	['orders', 'list'] inline

Category 9: Automation Testing Attributes

Element	Rules
<Button>	must have name attribute
<Label> / <Typography> that displays data	must have name attribute
Dynamic render (list items, conditional)	must have id attribute

---

Review steps

Step 1: Define scope

# ถามหรือตรวจสอบว่าจะ review ไฟล์ไหน
# ตัวอย่าง scope:
# - ทั้ง src/modules/Order/
# - เฉพาะไฟล์ที่เปลี่ยนใน PR นี้
# - ทุก .tsx ใน src/

Step 2: Read files and check against the Checklist

Read each file one by one, check every category above, record violations with line number

Step 3: Create a report

Produce a report in this format:

## 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 ก่อน