# Brief Recap

> brief-recap — Ngắn + Đủ Hiểu

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

---


# brief-recap — Ngắn + Đủ Hiểu

## CONTEXT VỀ ANH

```
Anh = dev mobile (Flutter, Riverpod, Dio).
Anh hiểu: state management, async, API, DB cơ bản, OOP, architecture patterns.
Anh KHÔNG quen sâu: React internals, SQLAlchemy quirks, Celery, FastAPI patterns,
                    TailwindCSS edge cases, build tooling web.

→ Dùng tech term BÌNH THƯỜNG, không dumbing down ("tách logic" thay vì "tách component" là sai).
→ Chỉ giải thích thêm khi gặp khái niệm WEB/BACKEND-SPECIFIC mà mobile không có.
```

## FORMAT MẶC ĐỊNH

```
[1 câu kết quả — vào thẳng]

**Đã làm:**
- [hành động + lý do tech ngắn]
- [hành động]
- [hành động — tối đa 5 bullet]

[Next step nếu cần test, bỏ qua nếu không]
```

## VÍ DỤ

### Bug fix nhỏ
```
Fix bug trang orders load chậm — do useEffect re-fetch vô tận.

**Đã làm:**
- Fix dependency array của useEffect (thiếu memoize callback)
- Wrap fetchOrders bằng useCallback
- Build pass

Test: mở /orders → check Network tab xem còn spam request không.
```

### Feature mới (web)
```
Xong feature import sản phẩm Excel.

**Đã làm:**
- Backend: endpoint POST /products/import nhận file .xlsx, parse bằng openpyxl, validate Decimal cho giá
- Admin: drag-drop modal, hiển thị preview 5 dòng đầu trước khi confirm
- Atomic insert: nếu 1 dòng lỗi → rollback cả batch (tránh import nửa vời)

Test: /products → Import → upload file mẫu xem có preview không.
```

### Backend refactor
```
Tối ưu query orders list — N+1 → 1 query.

**Đã làm:**
- Thay lazy="noload" của Order.items bằng selectinload trong list endpoint
  (SQLAlchemy default: mỗi order trigger 1 query con để load items → 50 orders = 51 queries)
- Giờ JOIN sẵn → 1 query duy nhất
- Test load 100 orders: 800ms → 80ms
```
**(Note: giải thích `selectinload` vì đây là SQLAlchemy-specific, anh quen Dio thì không gặp)**

### React-specific
```
Sửa modal bị header sidebar che.

**Đã làm:**
- Move modal ra ngoài DOM tree bằng React Portal (mount vào document.body thay vì component cha)
  → tránh bị overflow:hidden / z-index của parent ảnh hưởng
- Pattern này dùng cho mọi Modal/Drawer/Toast từ giờ
```
**(Note: giải thích Portal vì Flutter có Navigator/Overlay tương tự nhưng cơ chế khác)**

## QUY TẮC

| Khái niệm | Có cần giải thích thêm không? |
|-----------|------------------------------|
| `useState`, `useEffect`, `useCallback` | KHÔNG — anh hiểu hooks |
| `async/await`, `Promise` | KHÔNG |
| `JWT`, `bcrypt`, `HMAC` | KHÔNG |
| `Decimal precision` | KHÔNG — đã có rule trong CLAUDE.md |
| `React Portal` | CÓ — mobile không có khái niệm này |
| `SQLAlchemy lazy/eager loading` | CÓ — Dio không có |
| `Celery / background task` | CÓ ngắn — Flutter dùng isolate khác |
| `TailwindCSS arbitrary values` | CÓ ngắn |
| `Vite / Next.js SSR` | CÓ ngắn |
| `Atomic SQL update` | KHÔNG — anh hiểu race condition |
| `Connection pool` | KHÔNG |

## ĐỘ DÀI

```
Bug fix 1 dòng:        1 câu — "Fix X bằng cách Y."
Bug fix vừa:           2-3 bullet
Feature nhỏ:           3-5 bullet + next step
Feature lớn:           5 bullet + section "Cần test" cụ thể
Refactor:              Nói cũ làm gì, mới làm gì, tại sao tốt hơn
```

## ANTI-PATTERNS

```
✗ Paste file paths: "Sửa OrdersPage.tsx line 142, OrderModal.tsx line 88..."
  → Anh không cần biết line. Anh cần biết FEATURE thay đổi gì.

✗ Liệt kê hành động trước, kết quả sau:
  "Em đã refactor X, sau đó update Y, cuối cùng test Z..."
  → Vào kết quả luôn ở câu đầu.

✗ Quá dumbing down: "Em sửa cái nút bấm cho nó không bị bug nữa"
  → Anh là dev. Nói "fix onClick handler bị stale closure" được.

✗ Quá technical: paste stack trace, error message dài
  → Tóm tắt root cause 1 câu.

✗ Sycophantic mở đầu: "Em đã hoàn thành task...", "Tuyệt vời, em sẽ..."
  → CẤM. Vào thẳng.

✗ Thiếu next step khi UI thay đổi
  → Phải nói anh test URL nào, click gì.
```

## SELF-CHECK

```
□ Câu đầu = KẾT QUẢ (không phải "em đã làm...")?
□ Bullets ngắn, mỗi cái 1 ý?
□ Có giải thích thêm khi gặp khái niệm web/backend-specific?
□ KHÔNG dumbing down khái niệm chung (state, async, JWT...)?
□ KHÔNG paste file path / line number?
□ Có next step test nếu UI thay đổi?
□ Tổng < 10 dòng (trừ feature lớn)?
```

---

**Mục tiêu:** Anh đọc 10 giây hiểu vừa làm gì + tại sao + cần test gì. Đủ tin để ship hoặc tự test.