用途：该技能用于指导如何高效使用 React 开发前端组件，适用于采用 React 19、TypeScript 与 React Compiler（通过 babel-plugin-react-compiler 启用）的项目，并与 Inertia、Laravel 配合。
主要能力与结构约定：页面位于 resources/js/pages/ 并通过 Inertia 渲染；共享组件位于 resources/js/components/；UI 基础组件（shadcn/ui）位于 resources/js/components/ui/；自定义 hooks 位于 resources/js/hooks/。
数据获取：页面数据应始终通过 Inertia 由 Laravel 控制器以 props 传入，不要在客户端获取数据，也不要用 useEffect 加载页面数据。这样可保证状态一致（服务端为唯一数据源）、页面渲染前完成服务端加载、初始数据无需 loading 状态、利于 SEO，并让 props 类型与控制器输出匹配。
TypeScript 约定：所有组件 props 显式标注类型；对象结构使用 interface，定义在 resources/js/types/index.d.ts；扩展原生元素 props 优先用 React.ComponentProps<"element">；使用路径别名 @/components、@/hooks、@/lib、@/types。
React 19 与 React Compiler：编译器会自动记忆化组件与 hooks，除非性能分析显示确有需要，否则不要手动添加 useMemo、useCallback 或 React.memo，保持代码直白交由编译器优化。
状态管理：局部状态用内置 useState 与 useReducer；服务端提供的状态用 Inertia 共享数据（通过 usePage() 访问）；表单状态使用 Inertia 的 <Form> 组件。
事件处理与条件渲染：简单处理器用内联箭头函数，逻辑复杂或复用时才提取为具名函数；守卫子句用提前返回，简单条件用 &&，if/else 用三元表达式，复杂条件逻辑拆分为独立组件。
文件命名：组件用 PascalCase（UserCard.tsx），hooks 用 camelCase 且以 use 前缀（useClipboard.ts），工具函数用 camelCase（formatDate.ts），页面用与路由匹配的 kebab-case（edit.tsx、create.tsx、index.tsx）。
限制：资料未提供安装命令、版本兼容范围、收费信息或具体性能数据，暂未提供。