SuperAPI AI 工具集

uniwind

前端与建站

查看项目

更新于 10-16 03:46

技能介绍

用途:在 React Native 项目中使用 Uniwind(其 Tailwind CSS 绑定)进行样式开发时,提供按影响优先级排序的最佳实践,指导自动重构与代码生成。适用场景包括:新建项目时设置 Uniwind、配置 Metro 插件与 CSS 入口、用 CSS 变量构建主题系统、为第三方组件接入 className、创建移动端与平板响应式布局、优化样式性能、从 NativeWind 迁移。

主要能力按类别划分:构建时配置(build-,关键):配置 Metro 插件选项、将 CSS 入口文件放在应用根目录、配置 TypeScript 定义位置、改配置后重启 Metro、开发时启用调试模式、配置 rem 基准值。主题架构(theme-,关键):用 @theme 指令定义变量、用 @variant 块定义主题、各主题保持变量一致、在 Metro 配置中注册自定义主题、使用 OKLCH 色彩空间、light-dark() 自适应色、移除 ThemeProvider。组件集成(comp-,高):用 withUniwind 包装第三方组件、在模块级定义包装组件、自定义 prop 映射、accent-* 提取颜色、Reanimated 组件无需包装、复杂可复用样式用自定义 CSS 类。响应式(resp-,高):移动优先、限制断点数量、hidden/flex 控制显隐、自定义语义断点、响应式缩放间距与字号。性能(perf-,中高):使用完整静态类名以便构建时解析、谨慎使用 useResolveClassNames、缓存变体样式对象、用 tailwind-merge 去重、优先 className、正确组合 className 与 style。平台(plat-,中):平台选择器、safe-area-context、Yoga 差异、web: 选择器、字体配置。状态(state-,中):Pressable 的 active/focus/disabled 状态、数据选择器、原生避免 hover:、group 变体(WIP)、dark: 深色模式。迁移(compat-,中低):NativeWind 迁移清单、Tailwind 4 CSS 优先配置、rem 默认值差异、用 withUniwind 替换 cssInterop、用 Safe Area Context 替换 *-safe 类。

使用方式:阅读各参考文件获取详细说明与示例,如 AGENTS.md(完整规则汇编)、references/_sections.md(类别定义)、assets/templates/_template.md(新增规则模板)、metadata.json(版本信息)。

限制:资料未提供具体安装命令、版本号、平台支持范围或性能数据,这些细节暂未提供。