菜单
React 组件通用编码规范。编写、审查或重构 React 组件（.tsx）时使用，尤其涉及组件定义（export function + IXxxProps）、design/ui 分层、与 DI/Observable 桥接（useDependency/useObservable/useObservableRef）、自定义 hooks、Tailwind + cva + cn() 样式方案、语义色 token、组件注册插槽（ComponentManager/IUIPartsService/connectInjector）、i18n（LocaleService.t）时。可独立使用；与 code-style-architecture 搭配效果最佳。
用 Codex 或 Claude 帮你安装 复制这段 Prompt，粘贴到 Codex、Claude 或其他助手里，让它检查 Skill 页面并帮你完成安装。
基于 SOC 职业分类
| name | code-style-react |
| description | React 组件通用编码规范。编写、审查或重构 React 组件（.tsx）时使用，尤其涉及组件定义（export function + IXxxProps）、design/ui 分层、与 DI/Observable 桥接（useDependency/useObservable/useObservableRef）、自定义 hooks、Tailwind + cva + cn() 样式方案、语义色 token、组件注册插槽（ComponentManager/IUIPartsService/connectInjector）、i18n（LocaleService.t）时。可独立使用；与 code-style-architecture 搭配效果最佳。 |
核心心智：组件是 Observable 的渲染函数——业务逻辑在 service，组件只做「DI 取服务 → 订阅流 → 渲染 → 派发命令」。
export interface IRuleFormProps {
ruleId: string;
onClose?: () => void;
}
export function RuleForm({ ruleId, onClose }: IRuleFormProps) { ... }
export function 具名声明（不用箭头函数常量），named export，不用 default exportIXxxProps，export interface 定义在组件文件顶部defaultPropsforwardRef（ref 作为普通 prop），设计组件用 React.ComponentProps<'button'> & VariantProps<...> 交叉类型memo 包裹——靠 Observable 精确订阅控制刷新design 包（纯展示，无业务无 DI） → ui 包（宿主基座：workbench/插槽/菜单） → *-ui 业务包（views/）
useDependency(IXxxService)；订阅流：useObservable(service.xxx$, default)useObservableRefviews/hooks/，命名 useXxx，内部只做「DI + Observable → 派生值」commandService.executeCommand(XxxCommand.id, params)；纯 UI 编排（弹菜单、设目标）走轻量 service；组件不直接改数据cn() 合并；无 CSS Modules / CSS-in-JSbg-surface / text-content / border-line），禁止硬编码色值与 dark: 双写切色（颜色随主题 CSS 变量自动切换）cn() 条件类名用对象语法 { 'class': cond }；静态类名放第一个参数style，且提为模块常量localeService.t('<包名>.<分组>.<键>')src/locale/{zh-CN,en-US,...}.ts，顶层键 = 包名| # | 主题 | 文件 | 何时查阅 |
|---|---|---|---|
| 1 | 组件定义与文件组织 | references/01-component.md | 新建组件、决定放哪层时 |
| 2 | 状态·DI·hooks | references/02-state-di.md | 桥接 Observable、写自定义 hook、判断逻辑归属时 |
| 3 | 样式方案 | references/03-styling.md | 写类名、建 cva 变体、处理主题色时 |
| 4 | 组件注册插槽与 i18n | references/04-slots-i18n.md | 插件向宿主注入 UI、取文案时 |
DI + RxJS + 命令模式架构的通用编码规范。适用于任何基于依赖注入（redi 或同类容器）、RxJS 响应式、插件化的 TypeScript 项目。编写 Service/Controller/Plugin/Command、DI 注入（createIdentifier/@Inject/@Optional/@DependentOn）、Observable（$ 后缀/Subject 封装）、Disposable 生命周期、拦截器责任链、错误处理与日志、test bed 测试时使用。
通用 TypeScript 代码规范（命名·类型·注释·格式），适用于任何 TS/TSX 项目。编写、审查或重构 .ts/.tsx 文件时使用，尤其涉及文件命名（kebab-case + 角色后缀 / PascalCase.tsx）、标识符命名（I 前缀/_ 前缀/$ 后缀/SCREAMING_SNAKE/is-has-should-can）、interface vs type 选择、Nullable<T>、enum vs 联合类型、class 成员顺序、注释语言与密度、缩进引号分号等格式硬约束时。这是所有 code-style-* 系列 skill 的基础层。
TypeScript monorepo 拆包与跨端工程化规范。新建 monorepo、拆分/新建包、设计包边界、决定代码放哪个包时使用，尤其涉及：三维拆包原则（功能域×平台层×抽象层级）、契约包 + 对称多端实现（Electron 双进程/web/mobile）、逻辑包与 -ui 包分离、包标准形态（exports/publishConfig/peerDependencies）、共享 infra 包收敛工程配置、ESLint 架构护栏（禁桶导入/穿透导入/自包导入/facade 隔离）、facade 门面与 preset 套餐分层 API、turbo 任务编排与测试组织。
Termlnk 仓库专属编码规范（叠加在 code-style-core/architecture/react/monorepo 四个通用 skill 之上的增量层）。编写、审查或重构 Termlnk 仓库（packages/*、packages-internal/*、apps/{desktop,web,mobile}）任何 .ts/.tsx 时使用，尤其涉及：菜单系统（下拉/右键/mergeMenu/triggerContextMenu/commandId）、Base46 主题与颜色（tm: 前缀类/base_30/base_16/IThemeService/xterm 配色/换肤透明度）、插件配置键（config.schema.ts/ConfigRepository 持久化 subKey）、tRPC 双进程契约（rpc-server/rpc-client 对称实现）、目录与包名契约（plugin.ts/@termlnk 包名/*-mobile 后缀）、mobile babel 限制时。新建插件包或 plugin.ts 必读。