Uniwind最佳实践Skill uniwind

---

名称: uniwind 描述: Uniwind 用于 React Native 和 Tailwind CSS 样式的最佳实践指南。此技能应用于编写、Review 或重构使用 Uniwind 的 React Native 代码。触发于涉及 Uniwind、className 样式、React Native 中的 Tailwind、NativeWind 迁移或主题的任务。

Uniwind 最佳实践

全面的性能优化和最佳实践指南 for Uniwind - 最快的 React Native Tailwind CSS 绑定。包含 8 个类别中的 45+ 规则，按影响优先级排序，以指导自动化重构和代码生成。

何时应用

参考这些指南当：

• 在新 React Native 项目中设置 Uniwind
• 配置 Metro 插件和 CSS 入口点
• 使用 CSS 变量构建主题系统
• 集成支持 className 的第三方组件
• 为移动和 tablet 创建响应式布局
• 优化样式性能
• 从 NativeWind 迁移到 Uniwind

规则类别按优先级

优先级	类别	影响	前缀
1	构建时配置	关键	build-
2	主题架构	关键	theme-
3	组件集成	高	comp-
4	响应式设计	高	resp-
5	性能优化	中-高	perf-
6	平台模式	中	plat-
7	状态与交互	中	state-
8	迁移与兼容性	低-中	compat-

快速参考

1. 构建时配置 (关键)

• build-metro-config - 配置 Metro 插件与必要选项
• build-css-entry - 将 CSS 入口文件放在应用根目录
• build-typescript-types - 配置 TypeScript 定义文件位置
• build-restart-metro - 配置更改后重启 Metro
• build-debug-mode - 在开发期间启用调试模式
• build-rem-polyfill - 为设计系统一致性配置 rem 基准值

2. 主题架构 (关键)

• theme-css-variables - 使用 @theme 指令定义主题变量
• theme-variant-blocks - 使用 @variant 块定义主题
• theme-consistent-variables - 在所有主题中定义相同的变量
• theme-custom-registration - 在 Metro 配置中注册自定义主题
• theme-oklch-colors - 使用 OKLCH 色彩空间以获得感知均匀性
• theme-light-dark-function - 使用 light-dark() 函数进行自适应颜色
• theme-no-provider - 从应用中移除 ThemeProvider 包装器

3. 组件集成 (高)

• comp-with-uniwind - 使用 withUniwind 处理第三方组件
• comp-module-level - 在模块级别定义包装组件
• comp-prop-mapping - 为 non-style 属性使用自定义 prop 映射
• comp-accent-colors - 使用 accent-* 类进行颜色 prop 提取
• comp-reanimated - Reanimated 组件无需 withUniwind
• comp-custom-css - 使用自定义 CSS 类进行复杂可复用样式

4. 响应式设计 (高)

• resp-mobile-first - 使用渐进增强进行移动优先设计
• resp-limit-breakpoints - 限制断点数量为 3-5 以保持可维护性
• resp-visibility-toggle - 使用 hidden/flex 进行响应式可见性
• resp-custom-breakpoints - 使用语义名称定义自定义断点
• resp-responsive-spacing - 响应式缩放间距和排版

5. 性能优化 (中-高)

• perf-static-classnames - 使用完整的静态类名进行构建时解析
• perf-use-resolve-sparingly - 谨慎使用 useResolveClassNames
• perf-memoize-variants - 记忆化变体样式对象
• perf-tailwind-merge - 使用 tailwind-merge 进行类去重
• perf-avoid-inline-styles - 优先使用 className 而非内联 style prop
• perf-combine-styles - 正确结合 className 和 style prop

6. 平台模式 (中)

• plat-ios-android-selectors - 使用平台选择器处理 iOS/Android 差异
• plat-safe-area-context - 使用 react-native-safe-area-context 处理安全区域
• plat-yoga-layout - 理解 Yoga 布局引擎差异
• plat-web-selector - 使用 web: 选择器进行跨平台应用
• plat-font-families - 配置字体家族无回退

7. 状态与交互 (中)

• state-pressable-states - 使用 Pressable 与 active:/focus:/disabled: 状态
• state-data-selectors - 使用数据选择器进行组件状态样式
• state-no-hover - 避免在原生使用 hover:，使用 active: 替代
• state-group-variants - 使用组变体进行父子样式 (WIP)
• state-dark-mode - 使用 dark: 变体处理深色模式样式

8. 迁移与兼容性 (低-中)

• compat-nativewind-migration - 遵循 NativeWind 迁移清单
• compat-tailwind-4-syntax - 使用 Tailwind 4 CSS-First 配置
• compat-rem-default - 考虑不同的 rem 默认值
• compat-cssinterop-replacement - 用 withUniwind 替换 cssInterop
• compat-safe-area-changes - 用安全区域上下文替换 *-safe 类

如何使用

阅读单独参考文件以获取详细解释和代码示例：

• 节定义 - 类别结构和影响级别
• 规则模板 - 添加新规则的模板

参考文件

文件	描述
AGENTS.md	包含所有规则的完整编译指南
references/_sections.md	类别定义和排序
assets/templates/_template.md	新规则模板
metadata.json	版本和参考信息