用途：这是一份 React 编码规范技能，用于在使用 React 时统一组件写法与样式约定，配合 React Compiler 与 Tailwind v4 项目使用。
主要能力与约定：
- 组件 props：始终在函数参数中解构 props，TypeScript 类型内联定义，避免单独 interface，避免需要二次解构的非解构 props；优先复用组件库 UI 组件，使用 globals.css 中的 CSS 变量做主题。
- React Compiler：项目使用编译期自动记忆化，禁止用 React.memo、useMemo、useCallback 做性能优化；仅在 Effect 依赖、外部库集成或经性能分析确认的热点等场景可作逃生舱，且必须注释说明原因。
- Effects：仅用于与外部系统同步（DOM API、网络、命令式库）；渲染保持纯函数，事件驱动逻辑放事件处理器；派生数据在渲染期直接计算，不要放进 Effect；不要用 ref 或标志位阻止 Strict Mode 双调用。用 useEffectEvent 抽取非响应式逻辑，禁止用 eslint-disable 压制依赖检查。
- Tailwind v4 语法：用 / 表示透明度（bg-black/50），移除 bg-opacity-* 等；shadow-sm→shadow-xs、rounded-sm→rounded-xs、blur-sm→blur-xs；CSS 变量用括号 bg-(--brand-color)；重要修饰符放末尾 size-5!；后代选择器用 **: 与 *:；data 属性用 *:data-[slot=field-label]；上下文用 in-data-[...]；优先内置工具类而非任意值。默认边框色改为 currentColor，ring 宽度改为 1px。
- 设计令牌：用语义化 CSS 变量分层（--background、--foreground、--primary、--primary-foreground 等），在 @theme inline 与 :root/.dark 中定义。
- data 属性样式：用 data-state 表达开关、选中、禁用、加载、方向、位置等状态；用 data-slot 作为稳定标识，配合 has-[]、[&_] 及全局 CSS 做父子组合与主题级样式；命名用 kebab-case 且语义明确。变体、尺寸、行为配置与事件处理器仍用 props。
使用方式：资料未提供安装命令或调用步骤，仅给出规范条目与代码示例。
适用场景：使用 React、React Compiler、Tailwind v4 与 shadcn/ui、Radix UI 组件的前端项目。
限制：资料未说明收费、平台支持范围与版本要求；示例中的具体项目配置需以实际工程为准。