nativewind-generator

用途\nnativewind-generator 是一个面向移动端开发的组件生成技能，用于生成使用 NativeWind（即以 Tailwind CSS 工具类方式）设置样式的 React Native 组件，目标场景是跨平台移动应用。资料标注其分类为 Mobile Development，版本 1.0.0，依赖 React Native、Expo、NativeWind 与 Tailwind CSS。\n\n主要能力\n该技能围绕 NativeWind 的最佳实践组织输出，包括：工具类优先的样式写法，建议使用 className 而非手写 StyleSheet；响应式设计，通过条件类名在 Phone 与 Tablet 布局间切换（如 p-4 配合 flex-row/flex-col）；深色模式，使用 dark: 前缀；Pressable 按压状态，通过函数式 className 根据 pressed 状态切换背景；以及常见样式模式对照表（如 flex-1、p-4、mt-2、bg-white、text-base、font-bold、items-center、rounded-lg、shadow-md 等）。\n\n模板与示例\n资料提供了 Screen 组件模板（UserProfile.phone.tsx，包含 SafeAreaView、ScrollView、标题区与操作按钮）和 Form 组件模板（LoginForm.tsx，包含受控输入、加载状态与禁用态样式），还给出列表项、带阴影卡片、徽章、Flex 行等快速模式片段。这些示例展示了如何用 NativeWind 工具类完成常见移动端布局与交互样式。\n\n使用方式\n资料未提供安装命令或调用命令，仅说明依赖关系与输出规范。实际使用时，可按其约定在项目中采用 className 工具类编写组件，并参考其文件结构建议：components/UserProfile/ 下放置共享逻辑主文件、.phone.tsx 与 .tablet.tsx 布局文件以及 index.ts 统一导出。Tailwind 配置示例展示了 content 扫描路径与主题扩展（primary、success、error 色板）。\n\n适用场景\n适合创建新的 React Native 组件、将 Figma 设计转换为代码（资料标注为 Phase 3）、构建 Phone/Tablet 响应式变体，以及用工具类进行快速原型开发。\n\n限制与验收标准\n资料提出的成功标准包括：90% 以上样式使用工具类、Phone/Tablet 响应式、所有 props 具备 TypeScript 类型、适当的无障碍标签、尽量少用 StyleSheet、包含单元测试。资料未提供具体安装步骤、价格、平台支持范围或性能数据，这些事实暂未提供。