本文へ移動
cccskills
無料GitHub で公開

fec-monorepo-project-standard

用于创建、审查或重构前端 monorepo,包括 pnpm workspace、Turborepo、Nx、多包依赖边界、任务编排、包命名或包发布;中文触发词包括 monorepo、workspace、多包。

インストール方法を見る

含まれるファイル(1)

  • SKILL.md4.6 KB

SKILL.md(原文)

インストールする前に、エージェントに与えられる指示の中身を確認できます。

Monorepo 项目规范

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

用途

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

流程

  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 规范

约束

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

预期输出

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

レビュー

まだレビューはありません。使ってみた感想をお寄せください。

同じリポジトリのスキル

概要と使いどころ

用于审查或改进前端无障碍、语义结构、键盘支持、焦点管理、ARIA 标签、屏幕阅读器行为、WCAG 2.2 问题、触控无障碍或辅助技术回归;中文触发词包括 无障碍、accessibility、a11y、WCAG、屏幕阅读器。

日本語の概要は準備中です。原文の説明を表示しています。

bovinphang/frontend-craft222026年9月26日 更新

Use when reviewing or improving frontend accessibility, semantic structure, keyboard support, focus management, ARIA labels, screen reader behavior, WCAG 2.2 issues, touch accessibility, or assistive-technology regressions; Chinese triggers include accessibility, accessibility, a11y, WCAG, screen reader.

日本語の概要は準備中です。原文の説明を表示しています。

bovinphang/frontend-craft222026年9月26日 更新

用于从参考系统中吸收想法、能力、工作流、架构、质量体系、生态扩展或工程实践,并通过原创的项目内重设计转化为当前项目能力,而不是复制原实现。

日本語の概要は準備中です。原文の説明を表示しています。

bovinphang/frontend-craft222026年9月26日 更新

Use when absorbing ideas, capabilities, workflows, architecture, quality systems, ecosystem extensions, or engineering practices from any reference system into the current project through original, project-native redesign rather than copying.

日本語の概要は準備中です。原文の説明を表示しています。

bovinphang/frontend-craft222026年9月26日 更新

Use when designing, implementing, or reviewing frontend-to-backend API integration, typed API clients, REST/tRPC/OpenAPI client choices, auth refresh, API error mapping, upload flows, SSE/WebSocket/polling choices, CORS-facing frontend behavior, or cross-boundary loading/error states. Do not use for backend-only service architecture or TanStack Query cache policy alone; Chinese triggers include API integration, front-end and back-end joint debugging, typed API client, Interface error handling, SSE, WebSocket.

日本語の概要は準備中です。原文の説明を表示しています。

bovinphang/frontend-craft222026年9月26日 更新

用于设计、实现或审查前后端 API 集成、类型化 API client、REST/tRPC/OpenAPI 客户端选型、认证刷新、API 错误映射、上传流程、SSE/WebSocket/轮询选择、CORS 相关前端行为或跨边界 loading/error 状态。不要用于纯后端服务架构或仅 TanStack Query 缓存策略;中文触发词包括 API 集成、前后端联调、typed API client、接口错误处理、SSE、WebSocket。

日本語の概要は準備中です。原文の説明を表示しています。

bovinphang/frontend-craft222026年9月26日 更新

bovinphang のスキルをすべて見る

このスキルの問題を報告する