用途：在编写 SSD 的 React 组件、定义 Props 类型、使用 Refs/Fragments，以及按 SSD 标准命名 component、page、module 时使用本技能。
主要能力与规则：组件须为 TypeScript（TSX）函数组件，禁用 React.createElement；每个文件只放一个组件（无状态/纯组件除外）；有 Props 时必须声明并导出，命名格式为 [ComponentName]Props；事件处理使用箭头函数；Fragment 用简写 <>...</> 而非 <React.Fragment>；ref 使用 ref callback，不用字符串 ref。Props 用 camelCase，布尔 Props 不写 ={true}，map 中不用 index 作为 key，避免用 DOM props 作 props 名。导入组件名用 PascalCase，文件夹主组件从文件夹名导入。命名约定：Module 与 Component 用 PascalCase、不超过 3 词，custom hook 单独文件并以 .hook.tsx 命名，后缀可用 Container、View、Card、Form、Table、List、Item；Formik 组件以 MUI 组件名结尾。Page 用 PascalCase、以 Page 结尾、不超过 3 词，每个 module 必须有 IndexPage，首页名为 IndexPage。
使用方式：在 VS Code 中可输入 snippet tsrafce 生成模板；Props 类型示例为 export type OrderTableProps = { orderId: number; orderDate: string; isActive?: boolean }，可选属性用 ?。权限校验示例：import { PermissionList } from "/src/Const"; import { checkPermissions, useAuth } from "/src/app/modules/_auth"; 默认条件为 "OR"，可传 "AND"。用户信息通过 useAuth() 取 user、userProfile、isAuthenticated、permissions、roles。
限制：资料未提供该技能的收费、价格、平台支持、效果等事实，暂未提供。