用途
Cogover Frontend Skill 用于指导 Cogover 前端项目的 UI 代码编写与评审、提交（commit）规范、国际化（i18n）翻译以及单元测试。它以索引文件作为入口，采用路由表 + 按需参考的模型：主文件只列出规则概要与参考文件清单，具体实现细节位于 {skill_base_dir}/reference/<name>.md。
使用方式
收到任务后：
- 阅读已加载的索引文件，确定与任务相关的参考文件。
- 使用 Read 工具读取
{skill_base_dir}/reference/<name>.md。 - 按规则实现，严格遵循 DO/DON'T。
- 涉及提交或国际化时，读取
{skill_base_dir}/reference/commit-convention.md或i18n-translation.md。
规则要求：只读取与当前任务相关的参考文件，不要全部读取；复杂任务可并行发起多个 Read 调用；若委派子代理（subagent），需将参考内容传入其提示词，因为子代理无法读取技能文件。
主要能力与规则要点
禁止使用已废弃内容（最高优先级）
任何情况下都不得使用已废弃的组件、Hook 或 API（带有 @deprecated JSDoc 标记、名称含 Legacy/Old/V1 后缀，或在 @stringeecom/ui-kit / 参考文件中被标注为废弃）。使用前需检查 JSDoc 的 @deprecated 标记及对应参考文件，若已废弃则使用 JSDoc/参考文件中给出的替代方案。看到旧代码使用废弃组件时不得复制该模式。违反此规则将直接拒绝 PR，无例外。
表单规则
禁止在 react-hook-form 中使用 register() 或非受控输入。始终使用受控组件（来自 @stringeecom/ui-kit 的 Controlled* 组件）；若尚不存在，则按 RULE-FORM-04 新建。详见参考文件 uikit-form-react-hook-form。
样式基础（编写 UI 时强制）
- 颜色：使用配置令牌（如
text-primary-main、bg-surface-default），禁止原始 hex/rgb 或 Tailwind 默认色（如bg-blue-500）。 - 间距：使用 rem（如
p-[1rem]、gap-[0.5rem]），禁止 px（如p-[16px]），1rem = 16px。 - 排版：使用 prose-* 类（如
prose-body2、prose-h2），禁止text-[14px] font-semibold。 - className：使用
cx()并按关注点分组传参，禁止字符串拼接或模板字面量。 - 令牌：先检查
tailwind.config.js，禁止硬编码值。
导入与代码组织
- 组件/Hook 导入：始终从
@stringeecom/ui-kit导入。 - 内部导入：相对路径超过 2 级（即
../../../...及以上）时使用路径别名src/foo/bar；允许./、../、../../深度的相对路径。详见internal-import-path。 - Link 与 useNavigate：始终从
@stringeecom/ui-kit导入（wrapper 自动附加 appSlug）。例外：StringeeUtilProvider设置文件以及 id、account 两个项目。详见uikit-link-navigate。
其他规则
- 新文本先用越南语编写，被要求时再翻译为 i18n。
- 日期/时间始终使用 dayjs。
- 除非用户要求，不自动创建 git commit。
- 独立任务可并行拆分为子代理。
参考文件分类
- 基础与工作流：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-model/object、data-model/field、data-model/record、data-model/related-list、uikit-tanstack-query-hooks、dayjs-date-time。
- 表单系统：uikit-form-react-hook-form、uikit-form-builder、uikit-form-item、uikit-form-control-label。
- 页面模式：page-list-resource（含 10 条规则 RULE-LIST-PAGE-01→10，涵盖目录结构、类型、options、FormProvider+URL 同步、table+debounce、helpers、columns hook、FilterMenu、ActionMenu、数据流）。
- 通用组件：涵盖 Alert、Avatar、Breadcrumbs、Button、Checkbox、CKEditor、Modal、Drawer、Table、Tabs、Steps、Toast 等大量 UI 组件参考。
- 表单输入：涵盖 Duration、Email、File、InputNumber、MarkdownEditor、MonacoEditor、Select、Slider、Switch、TextField、TimePicker、TreeSelect 等输入类组件参考。
- Hooks：涵盖 use-force-update、use-get-field-label、use-sync-state 等多个 Hook 参考。
- 通知与 Toast：uikit-toast-message（含 7 条规则 RULE-TOAST-01→07）。
- 单元测试：uikit-unit-test，使用 Vitest + React Testing Library + MSW，提供纯函数（.test.ts）、Hook（renderHook）、组件（render + userEvent）的测试模式，通过 MSW handlers 模拟 API，含测试工具（renderComponent、renderWrapper）及覆盖率优先文件建议。
适用场景
适用于 Cogover 前端项目中编写或评审 UI 代码、创建提交、处理国际化翻译、编写单元测试等场景。
限制
资料未说明该技能的许可证、支持版本、依赖要求或部署方式，这些信息暂未提供。所有规则细节需查阅对应参考文件，索引文件本身不展开。