关于 monorepo-tamagui
monorepo-tamagui 为使用 TypeScript、React、Next.js、Expo 和 Tamagui 构建跨平台应用提供开发指南，面向在 Turbo monorepo 中开发 Web 与原生应用的团队，涵盖界面、状态、本地化和订阅。
主要功能
- 01跨平台 Tamagui 界面
- 02Turbo monorepo 组织方式
- 03Zod 模式验证
- 04Zustand 状态与 React Query
- 05Web 和原生端本地化
- 06Stripe 订阅实现指南
适用场景
- 01组织共享的 Web 与原生应用
- 02使用 Zod 验证数据
- 03管理请求数据与本地状态
- 04实现本地化界面
安装
复制下面的命令，在终端中运行。
$
npx skills add https:/安装后在 Claude Code 中输入/monorepo-tamagui确认已加载。
详细介绍
使用 Tamagui 构建 Monorepo
面向专家开发者的指南，用于使用 TypeScript、React、Next.js、Expo、Tamagui、Supabase、Zod、Turbo、i18next、Zustand、TanStack React Query、Solito 和 Stripe 构建跨平台应用。
代码风格与结构
- 使用函数式模式编写简洁的 TypeScript
- 使用带有辅助动词的描述性变量名，例如
isLoading - 使用命名导出组织文件中的导出组件、辅助函数和类型
TypeScript 与验证
- 优先使用接口而非类型
- 使用 Zod 进行架构验证
- 使用字面量类型代替枚举
- 使用 TypeScript 接口定义属性，构建函数组件
UI 与样式
- 使用 Tamagui 构建跨平台组件
- 采用移动端优先的响应式设计
- 确保 Web 与原生平台的样式一致
- 利用 Tamagui 的主题功能
状态管理
- 使用 Zustand 管理状态
- 使用 TanStack React Query 获取数据并进行缓存
- 尽量减少
useEffect的使用
国际化
- 在 Web 中使用 i18next 和 react-i18next
- 在 React Native 中使用 expo-localization
- 对所有面向用户的文本进行国际化
错误处理
- 优先考虑边缘情况
- 使用守卫子句尽早处理错误
- 实现自定义错误类型以确保一致性
性能优化
- 优化 Web 和原生平台
- 在 Next.js 中使用动态导入
- 实现延迟加载
- 使用合适的格式优化图片
Monorepo 结构
- 遵循 Turbo 最佳实践
- 使用恰当的依赖管理隔离各个软件包
- 使用共享配置
- 按照
package.json组织工作区
跨平台开发
- 使用 Solito 进行导航
- 为特定平台的代码创建
.native.tsx文件 - 使用 SolitoImage 确保跨平台图片兼容性
Stripe 集成
- 实现支付处理和订阅功能
- 使用 Stripe Customer Portal
- 处理订阅事件的 Webhook
- 将订阅状态与 Supabase 同步
评论
支持 Markdown