SuperAPI AI 工具集

uniwind-best-practices

编程与开发

查看项目

更新于 10-16 03:46

技能介绍

用途:本技能为 Uniwind(面向 React Native 的 Tailwind CSS 绑定)提供性能优化与最佳实践指南,包含 8 大类 45 条以上规则,按影响程度分级,用于指导自动重构与代码生成。适用时机包括:在新建 React Native 项目中设置 Uniwind、配置 Metro 插件与 CSS 入口、用 CSS 变量构建主题系统、集成支持 className 的第三方组件、创建移动端与平板响应式布局、优化样式性能、从 NativeWind 迁移到 Uniwind。

主要能力按优先级分为:1)构建时配置(关键):配置 Metro 插件必需选项、将 CSS 入口文件放在应用根目录、配置 TypeScript 定义文件位置、配置变更后重启 Metro、开发时启用调试模式、配置 rem 基准值。2)主题架构(关键):用 @theme 指令定义主题变量、用 @variant 块定义主题、各主题保持相同变量、在 Metro 配置中注册自定义主题、使用 OKLCH 色彩空间、用 light-dark() 函数做自适应颜色、移除 ThemeProvider 包裹。3)组件集成(高):用 withUniwind 包装第三方组件、在模块层级定义包装组件、自定义 prop 映射、用 accent-* 类提取颜色 prop、Reanimated 组件无需 withUniwind、复杂可复用样式使用自定义 CSS 类。4)响应式设计(高):移动优先渐进增强、限制断点为 3-5 个、用 hidden/flex 控制可见性、自定义语义化断点、响应式缩放间距与字号。5)性能优化(中高):使用完整静态类名以便构建时解析、谨慎使用 useResolveClassNames、记忆化变体样式对象、用 tailwind-merge 去重、优先 className 而非内联 style、正确组合 className 与 style。6)平台模式(中):用平台选择器处理 iOS/Android 差异、用 react-native-safe-area-context 处理安全区、理解 Yoga 布局差异、用 web: 选择器、配置字体族。7)状态与交互(中):用 Pressable 配合 active:/focus:/disabled: 状态、用数据选择器、避免在原生端使用 hover:、用 group 变体(WIP)、用 dark: 变体处理深色模式。8)迁移与兼容(低中):遵循 NativeWind 迁移清单、使用 Tailwind 4 CSS-first 配置、注意 rem 默认值差异、用 withUniwind 替换 cssInterop、用 Safe Area Context 替换 *-safe 类。

使用方式:可阅读各参考文件获取详细说明与代码示例,参考文件包括 AGENTS.md(含全部规则的完整指南)、references/_sections.md(分类定义与排序)、assets/templates/_template.md(新规则模板)、metadata.json(版本与引用信息)。

限制:资料仅列出规则清单与使用指引,未提供具体命令、安装步骤、收费价格、支持平台版本或效果数据。