cogover-fe

Cogover フロントエンドスキル

必須のワークフロー

ルーティングテーブル＋オンデマンド参照のモデルです。このファイルはインデックスです。詳細は reference/ にあります。

タスクを受け取ったら：

1. このファイル（読み込み済み）を確認し、関連する reference files を特定します
2. Read tool を使って {skill_base_dir}/reference/<name>.md を読みます
3. 実装時にルールを適用します。DO/DON'T に正確に従ってください
4. コミット／i18n の場合は、{skill_base_dir}/reference/commit-convention.md または i18n-translation.md を読みます

絶対に禁止（重大 — 最優先）：

• いかなる場合も絶対に、deprecated とされているコンポーネント／フック／API（@deprecated JSDoc、名前に Legacy／Old／V1 が付いているもの、または @stringeecom/ui-kit／reference files で deprecated と記載されているもの）を使用しないでください。これは絶対に破ってはならないルールです。違反すると例外なく、PR は即時却下されます。
• @stringeecom/ui-kit のコンポーネントを使う前に、必ず JSDoc の @deprecated と対応する reference file を確認してください。deprecated の場合は、JSDoc／reference に記載された代替を使用します。
• 古いコードで deprecated なコンポーネントが使われている場合、そのパターンをコピーしないでください。必ず新しい代替を使用します。
• react-hook-form では、register() や uncontrolled input を絶対に使用しないでください。必ず Controlled Components（@stringeecom/ui-kit の Controlled*）を使用してください。存在しない場合は、RULE-FORM-04 に従って新たに作成します。詳細：uikit-form-react-hook-form

ルール：

• 現在のタスクに関連する reference だけを読み、すべてを読まないでください
• 複雑なタスクでは、複数の Read calls を並行して実行します
• subagent に委任する場合は、reference の内容をプロンプトに含めます（subagent は skill files を読み取れません）
• コンポーネント／フックをインポートする場合は、必ず @stringeecom/ui-kit からインポートします
• 内部インポートで相対パスが .. を2階層より多くさかのぼる場合（つまり ../../../... 以上）は、パスエイリアス src/foo/bar を使用します。./、../、../../ の相対パスは使用できます。詳細：internal-import-path
• Link と useNavigate は必ず @stringeecom/ui-kit から使用します（ラッパーが appSlug を自動的に設定します）。例外：StringeeUtilProvider のセットアップファイル、および id、account の2つのプロジェクト。詳細：uikit-link-navigate
• 新しいテキストはまずベトナム語で書き、要求された場合に i18n 翻訳を行います
• 日付／時刻には必ず dayjs を使用します
• ユーザーから要求されない限り、Git コミットを自分で作成しないでください
• 独立したタスクは sub agent に並行して割り当てます

スタイリングの基礎（UI 作成時に必須）：

• Colors → 設定済みのトークン（text-primary-main、bg-surface-default）を使用し、raw hex/rgb/Tailwind default（bg-blue-500）は使用しないでください
• Spacing → rem（p-[1rem]、gap-[0.5rem]）を使用し、px（p-[16px]）は使用しないでください。換算：1rem = 16px
• Typography → prose-* classes（prose-body2、prose-h2）を使用し、text-[14px] font-semibold は使用しないでください
• className → concern ごとにグループ化した引数で cx() を使用し、文字列結合／テンプレートリテラルは使用しないでください
• Tokens → tailwind.config.js を確認し、値をハードコードしないでください

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個のルール（RULE-LIST-PAGE-01→10）：ディレクトリ構成、型、オプション、FormProvider＋URL 同期、テーブル＋デバウンス、ヘルパー、カラムフック、FilterMenu、ActionMenu、データフロー

共通コンポーネント

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

フォーム入力

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

フック

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

通知とトースト

uikit-toast-message — ToastContainer、ToastMessage、showToastMessage、showBrowserNotification（7 つのルール：RULE-TOAST-01→07）

単体テスト

uikit-unit-test — Vitest + React Testing Library + MSW。純粋関数（.test.ts）、フック（renderHook）、コンポーネント（render + userEvent）のパターン。MSW ハンドラーによる API のモック、テストユーティリティ（renderComponent、renderWrapper）、カバレッジ優先ファイル

パス：{skill_base_dir}/reference/<name>.md