# Cogover Fe

> Cogover Frontend UI Kit (components, forms, hooks, design tokens), commit convention, i18n, unit test. Use when writing/reviewing UI code, creating commits, translating text, or writing unit tests.

- Skill: `stringeecom/cogover-fe` (Agent Skill, multi-file: 143 files)
- Install (CLI): `npx skillmds@latest add stringeecom/cogover-fe`
- Raw SKILL.md: https://api.skillmd.com/api/skills/stringeecom/cogover-fe/raw
- Safety review: pending
- Works with: Claude Code, Claude.ai, OpenAI Codex
- Category: Design & Media
- License: MIT
- Author: stringeecom (https://skillmd.com/u/stringeecom)
- Updated: 2026-09-17
- Page: https://skillmd.com/skills/stringeecom/cogover-fe

---


# Cogover Frontend Skill

## Quy trình bắt buộc

Mô hình **routing table + on-demand reference**. File này = index. Chi tiết nằm trong `reference/`.

### Khi nhận task:

1. Đọc file này (đã load) → xác định reference files liên quan
2. Dùng **Read tool** đọc từ `{skill_base_dir}/reference/<name>.md`
3. Áp dụng quy tắc khi implement. Tuân theo DO/DON'T chính xác
4. Commit/i18n → đọc `{skill_base_dir}/reference/commit-convention.md` hoặc `i18n-translation.md`

### TUYỆT ĐỐI KHÔNG (CRITICAL — HIGHEST PRIORITY):
- **KHÔNG BAO GIỜ, TRONG BẤT KỲ TRƯỜNG HỢP NÀO**, sử dụng component/hook/API đã bị **deprecated** (`@deprecated` JSDoc, tên có hậu tố `Legacy`/`Old`/`V1`, hoặc được ghi chú deprecated trong `@stringeecom/ui-kit` / reference files). Đây là rule **BẤT KHẢ XÂM PHẠM** — vi phạm = reject PR ngay lập tức, không có ngoại lệ.
- Trước khi dùng bất kỳ component nào từ `@stringeecom/ui-kit`: **kiểm tra JSDoc `@deprecated`** và reference file tương ứng. Nếu deprecated → dùng bản thay thế được ghi trong JSDoc/reference.
- Khi thấy code cũ đang dùng component deprecated → KHÔNG copy pattern đó, phải dùng bản mới.
- **KHÔNG BAO GIỜ** dùng `register()` hoặc uncontrolled input trong `react-hook-form`. **LUÔN LUÔN** dùng Controlled Components (`Controlled*` từ `@stringeecom/ui-kit`). Nếu chưa có → tạo mới theo RULE-FORM-04. Chi tiết: `uikit-form-react-hook-form`

### Quy tắc:
- **CHỈ đọc reference liên quan** task hiện tại, KHÔNG đọc hết
- Task phức tạp → đọc song song nhiều Read calls
- Delegate subagent → truyền nội dung reference vào prompt (subagent không đọc được skill files)
- Import component/hook → luôn từ `@stringeecom/ui-kit`
- Import nội bộ → dùng path alias `src/foo/bar` khi relative vượt quá 2 cấp `..` (tức `../../../...` trở lên). Cho phép relative ở độ sâu `./`, `../`, `../../`. Chi tiết: `internal-import-path`
- `Link` và `useNavigate` → luôn từ `@stringeecom/ui-kit` (wrapper tự gắn `appSlug`). Ngoại lệ: file setup `StringeeUtilProvider` và 2 dự án `id`, `account`. Chi tiết: `uikit-link-navigate`
- Text mới → viết tiếng Việt trước, dịch i18n khi được yêu cầu
- Date/Time → luôn dùng `dayjs`
- Không tự tạo git commit trừ khi user yêu cầu
- Tách task độc lập → sub agent song song

### Styling Foundations (BẮT BUỘC khi viết UI):
- **Colors** → dùng configured tokens (`text-primary-main`, `bg-surface-default`), KHÔNG raw hex/rgb/Tailwind default (`bg-blue-500`)
- **Spacing** → dùng `rem` (`p-[1rem]`, `gap-[0.5rem]`), KHÔNG `px` (`p-[16px]`). Quy đổi: 1rem = 16px
- **Typography** → dùng `prose-*` classes (`prose-body2`, `prose-h2`), KHÔNG `text-[14px] font-semibold`
- **className** → dùng `cx()` với grouped args theo concern, KHÔNG string concat/template literals
- **Tokens** → kiểm tra `tailwind.config.js` trước, KHÔNG hardcode values

## Reference Files

### Foundation & Workflow
`color-palette-usage` · `cx-class-grouping` · `spacing-rem-only` · `tokens-tailwind-config` · `typography-prose-classes` · `no-auto-markdown` · `no-typescript-any` · `prettier-and-lint-check` · `uikit-import-source` · `internal-import-path` · `uikit-text-vietnamese-first` · `uikit-no-auto-commit` · `uikit-parallel-sub-agents` · `commit-convention` · `i18n-translation`

### Data & Query
`data-model/object` · `data-model/field` · `data-model/record` · `data-model/related-list` · `uikit-tanstack-query-hooks` · `dayjs-date-time`

### Form System
`uikit-form-react-hook-form` · `uikit-form-builder` · `uikit-form-item` · `uikit-form-control-label`

### Page Pattern
`page-list-resource` — 10 rules (RULE-LIST-PAGE-01→10): directory structure, types, options, FormProvider+URL sync, table+debounce, helpers, columns hook, FilterMenu, ActionMenu, data flow

### Common Components
`uikit-alert` · `uikit-avatar` · `uikit-avatar-field` · `uikit-breadcrumbs` · `uikit-button` · `uikit-button-group` · `uikit-icon-button` · `uikit-tooltip` · `uikit-smart-tooltip` · `uikit-checkbox` · `uikit-checkbox-group` · `uikit-ckeditor` · `uikit-collapsible-container` · `uikit-confirm-modal` · `uikit-copy-link-button` · `uikit-created-by-info` · `uikit-date-picker` · `uikit-date-range-calendar` · `uikit-date-range-picker` · `uikit-draggable-wrapper` · `uikit-draggable-item` · `uikit-drawer` · `uikit-file-preview` · `uikit-filter-generator` · `uikit-filter-generator-base` · `uikit-help-button` · `uikit-horizontal-steps` · `uikit-insert-field-object-v2` · `uikit-insert-field-object-button-v2` · `uikit-insert-field-object-button-wrapper2` · `uikit-layout-select-button` · `uikit-limitable-list` · `uikit-link-navigate` · `uikit-list-view-table` · `uikit-modal` · `uikit-option-table` · `uikit-popper` · `uikit-reaction` · `uikit-resize-bar` · `uikit-skeleton` · `uikit-step-progress-bar` · `uikit-steps` · `uikit-stringee-dnd-context` · `uikit-table` · `uikit-table-settings` · `uikit-tabs` · `uikit-tag` · `uikit-text-link` · `uikit-vertical-steps` · `uikit-usage-help-button`

### Form Inputs
`uikit-duration-input` · `uikit-duration-range-input` · `uikit-email-input` · `uikit-emoji-control-picker` · `uikit-emoji-picker` · `uikit-file-input` · `uikit-input-group` · `uikit-input-number` · `uikit-markdown-editor` · `uikit-monaco-editor` · `uikit-multiple-select` · `uikit-phone-input` · `uikit-radio` · `uikit-radio-group` · `uikit-rating` · `uikit-search-input` · `uikit-select` · `uikit-slider` · `uikit-switch` · `uikit-tags-input` · `uikit-text-field` · `uikit-time-picker` · `uikit-time-range-picker` · `uikit-time-select` · `uikit-tree-select` · `uikit-url-input`

### Hooks
`uikit-use-force-update` · `uikit-use-get-data-field-by-slug` · `uikit-use-get-data-field-option-label` · `uikit-use-get-field-label` · `uikit-use-get-layout` · `uikit-use-get-record-page-link` · `uikit-use-get-state-from-search-params` · `uikit-use-histories-state` · `uikit-use-merge-record-filters` · `uikit-use-merged-refs` · `uikit-use-replace-record-value` · `uikit-use-save-to-search-params` · `uikit-use-sync-state`

### Notifications & Toast
`uikit-toast-message` — ToastContainer, ToastMessage, showToastMessage, showBrowserNotification (7 rules: RULE-TOAST-01→07)

### Unit Testing
`uikit-unit-test` — Vitest + React Testing Library + MSW. Patterns cho pure functions (.test.ts), hooks (renderHook), components (render + userEvent). Mock API via MSW handlers, test utilities (renderComponent, renderWrapper), coverage priority files

> Path: `{skill_base_dir}/reference/<name>.md`