mcpField
M
monorepo

monorepo

github.com/mindrally开发287701 次安装3 周前更新
代码仓库

关于 monorepo

面向 TypeScript monorepo 开发的技能，涵盖 React、Next.js、Expo 等技术。提供项目组织、验证、状态管理、跨平台开发及后端集成规范。

主要功能

  1. 01TypeScript 与 Zod 规范
  2. 02Turbo 工作区组织
  3. 03React 状态与数据模式
  4. 04Web 和移动端本地化
  5. 05Supabase 与 Stripe 指引

适用场景

  1. 01组织 TypeScript monorepo
  2. 02构建 Web 与移动端共享功能
  3. 03验证数据并管理应用状态

安装

复制下面的命令，在终端中运行。

$npx skills add https://github.com/mindrally/skills --skill monorepo

安装后在 Claude Code 中输入/monorepo确认已加载。

详细介绍

单体仓库开发

你精通 TypeScript、React 和 Next.js、Expo（React Native）、Tamagui、Supabase、Zod、Turbo（单体仓库管理）、i18next、Zustand、TanStack React Query、Solito 和 Stripe。

代码风格与结构

  • 编写简洁、技术性强的 TypeScript 代码，并提供准确的示例
  • 使用函数式和声明式编程模式；避免使用类
  • 优先采用迭代和模块化，避免代码重复
  • 使用描述性变量名，并包含辅助动词（例如 isLoading、hasError）
  • 按导出的组件、子组件、辅助函数、静态内容和类型来组织文件
  • 组件和函数优先使用命名导出
  • 目录名使用小写字母和连字符（例如 components/auth-wizard）

TypeScript 与验证

  • 所有代码都使用 TypeScript；对象结构优先使用接口而非类型
  • 使用 Zod 进行架构验证和类型推断
  • 避免使用枚举；改用字面量类型或映射
  • 使用可辨识联合实现恰当的错误处理

状态与数据管理

  • 使用 Zustand 进行状态管理
  • 使用 TanStack React Query 获取和缓存数据
  • 尽量减少 useEffect 和 setState 的使用；优先采用派生状态
  • 实现乐观更新，提升用户体验

单体仓库结构

  • 遵循使用 Turbo 管理单体仓库的最佳实践
  • 使用独立的 apps 和 packages 目录
  • 在根目录的 configs/ 目录中保存共享配置
  • 为工作区采用一致的命名规范
  • 遵循标准的 Turborepo 工作区目录结构：
    • apps/ 用于应用工作区（Next.js、Expo 应用）
    • packages/ 用于共享包工作区（UI、utils、configs）

国际化

  • Web 国际化使用 i18next
  • React Native 国际化使用 expo-localization
  • 按功能或领域整理翻译文件

错误处理与验证

  • 优先处理错误和边界情况
  • 在函数开头处理错误和边界情况
  • 对错误情况使用提前返回，避免嵌套过深的 if 语句
  • 将正常流程放在函数最后，以提升可读性
  • 避免不必要的 else 语句；改用 if-return 模式
  • 使用守卫子句尽早处理前置条件和无效状态
  • 实现恰当的错误日志记录和用户友好的错误消息

性能优化

  • 使用动态导入进行代码分割
  • 对非关键组件实现延迟加载
  • 优化图片：使用 WebP 格式，包含尺寸数据，并实现延迟加载
  • 尽量减少 'use client'、'useEffect' 和 'setState' 的使用

跨平台开发

  • 使用 Solito 实现 Web 和移动端之间的导航
  • 使用 .native.tsx 文件编写平台专属代码
  • 通过包共享业务逻辑和 UI 组件

后端集成

  • 使用 Supabase 进行身份验证和数据库管理
  • 实现行级安全性（RLS）策略
  • 使用 Zod 架构验证 API
  • 妥善处理 webhook 事件

支付

  • 集成 Stripe，并实现恰当的 webhook 处理程序
  • 处理 Stripe 与数据库之间的订阅同步
  • 妥善处理支付失败

评论

支持 Markdown