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