Coding

Monorepo Project Standard

Try it

Use when creating, reviewing, or restructuring frontend monorepos with pnpm workspace, Turborepo, Nx, multi-package dependency boundaries, task orchestration, package naming, or package publishing; Chinese triggers include monorepo, workspace, multi-package.

What it does

适用于使用 pnpm workspace、Turborepo 或 Nx 的多包前端仓库。

The skill document

Monorepo 项目规范

适用于使用 pnpm workspace、Turborepo 或 Nx 的多包前端仓库。

Purpose

规范 Monorepo 项目的目录结构、依赖管理、任务编排和包发布流程,确保多包协作的构建效率和版本一致性。

Procedure

  1. 先确认仓库是否已使用 pnpm workspace、Turborepo 或 Nx,并沿用现有包命名与任务约定。
  2. 将应用放在 apps/,共享库、配置和工具放在 packages/ 或既有等价目录。
  3. 内部依赖使用 workspace:*,通过依赖图驱动构建顺序。
  4. 为 build、lint、test 配置可缓存、可并行、可增量的根任务,并明确输入、输出和环境变量。
  5. 在 Turborepo/Nx 中配置 affected/changed 范围命令,CI 优先跑受影响包,同时保留主干全量验证入口。
  6. 发布包前检查包边界、循环依赖、exports、peer dependencies 和版本策略。

工具选择

工具适用特点
pnpm workspace基础依赖提升、链接、脚本聚合
Turborepo推荐缓存、并行、依赖图
Nx大型增量构建、云缓存、插件生态

目录结构

pnpm + Turborepo

├── package.json                # 根 package,workspace 配置
├── pnpm-workspace.yaml         # workspace 包列表
├── turbo.json                  # Turborepo 配置
│
├── apps/
│   ├── web/                    # 主应用
│   │   ├── package.json
│   │   └── ...
│   ├── admin/                  # 管理后台
│   └── docs/                   # 文档站
│
├── packages/
│   ├── ui/                     # 共享 UI 组件
│   │   ├── package.json
│   │   └── src/
│   ├── utils/                  # 工具函数
│   ├── config-eslint/         # 共享 ESLint 配置
│   └── config-typescript/     # 共享 TS 配置
│
└── tooling/                    # 构建/测试工具(可选)
    └── scripts/

pnpm-workspace.yaml

packages:
  - "apps/*"
  - "packages/*"

依赖管理

  • 内部包使用 workspace:* 协议
  • 根 package.json 统一部分依赖版本,子包可覆盖
  • 禁止循环依赖,通过 pnpm why 检查
{
  "dependencies": {
    "@repo/ui": "workspace:*",
    "@repo/utils": "workspace:*"
  }
}

Turborepo 任务编排

{
  "$schema": "https://turbo.build/schema.json",
  "tasks": {
    "build": {
      "dependsOn": ["^build"],
      "outputs": ["dist/**", ".next/**"]
    },
    "lint": {
      "dependsOn": ["^build"]
    },
    "test": {
      "dependsOn": ["^build"]
    }
  }
}
  • ^build 表示先执行依赖包的 build
  • outputs 用于缓存命中判断
  • inputs 应包含源码、配置、锁文件和环境相关文件;不要把 .env secret 值写入缓存 key
  • 远程缓存要区分可信 CI 与本地开发,避免把含敏感信息的产物上传

Nx 任务编排

{
  "targetDefaults": {
    "build": {
      "dependsOn": ["^build"],
      "outputs": ["{projectRoot}/dist"],
      "cache": true
    }
  }
}

包命名

  • 内部包:@org/package-name 或 @repo/package-name
  • 发布到 npm:遵循 @scope/name 规范

Constraints

  • 子包之间通过 workspace:* 引用,不发布到 npm 再安装
  • 共享配置(ESLint、TS)放在 packages/config-*,子包 extends
  • 构建顺序由依赖图决定,不手动指定无关依赖
  • 根目录执行 pnpm -r build 或 turbo run build 时,所有包按序构建
  • 禁止循环依赖,新增包时通过 pnpm why 检查依赖链
  • CI cache 只缓存依赖安装目录和任务产物,不缓存未验证的构建状态
  • affected 构建不能替代发布前全量验证;主干或 release 分支仍需完整质量门禁

Expected Output

  • Monorepo 目录结构清晰(apps/ 应用、packages/ 共享包、tooling/ 工具)
  • pnpm-workspace.yaml 和 turbo.json / nx.json 配置正确
  • 内部包使用 workspace:* 协议,无循环依赖
  • 构建、lint、test 任务可通过根命令一键执行,缓存命中率高
  • CI 能区分 affected 快速反馈和 release 全量验证,缓存配置不会泄露密钥或隐藏依赖边界问题

Related skills

Find why your productivity system keeps failing, then apply the smallest fix — capacity math, bottleneck routing, durable local notes.

by Iván855 installs69 stars

Generate and edit Draw.io, Mermaid, and Excalidraw diagrams from natural language using a structured JSON spec.

by nssa.io1.0k installs47 stars

Run Git operations — commits, branches, merges, rebases, conflict resolution, and recovery — with safety rules enforced.

by Iván535 installs31 stars

Stores durable facts in a categorized, plain-markdown vault on disk, alongside your agent's built-in memory.

by Iván559 installs18 stars

Fetch raw ad creative, app, ranking, and revenue data from AdMapix as structured JSON.

by fly0pants4.3k installs296 stars

More from bovinphang

Browse all skills

Generate or edit diagrams, visual assets, and image workflows with reviewable PNG self-checks and bounded self-repair.

by bovinphang9 installs1 stars

Use when creating editable technical diagrams with draw.io / diagrams.net sources, including architecture diagrams, ERD, UML, sequence diagrams, flowcharts, ML model diagrams, official shape lookup, brand symbols, Graphviz auto-layout, codebase structure maps, .drawio validation, or draw.io CLI expo

by bovinphang5 installs

Use when building, reviewing, or improving frontend UI that needs product-specific design direction, design-system generation, Master/Page overrides, distinctive visual identity, anti-generic interface choices, first-screen hierarchy, UI polish, chart UX, interaction states, responsive behavior, or

by bovinphang8 installs

Use when creating or reviewing Next.js 14+ App Router projects, file routes, layouts, server/client component boundaries, SSR/SSG/ISR, streaming, metadata, middleware, server actions, or Next-specific data fetching. For generic client React component architecture, apply the project's React conventio

by bovinphang10 installs1 stars

Use when creating or reviewing Nuxt 3 projects, file routes, pages, layouts, SSR/SSG/SPA behavior, Nuxt data fetching, route middleware, plugins, modules, server routes, or Nuxt-specific Vue 3 conventions. For generic Vue component architecture, apply the project's Vue conventions separately; Chines

by bovinphang10 installs1 stars

Use when designing or reviewing React + TypeScript project structure, feature/module boundaries, component architecture, hooks organization, routing composition, state/API/error/styling defaults, or repository-wide React conventions. Prefer narrower skills for forms, data fetching, tests, accessibil

by bovinphang12 installs1 stars