From frontend-craft
Standardizes frontend monorepo structure, dependency management, task orchestration, and package release using pnpm workspace, Turborepo, or Nx.
How this skill is triggered — by the user, by Claude, or both
Slash command
/frontend-craft:fec-monorepo-project-standardThe summary Claude sees in its skill listing — used to decide when to auto-load this skill
For multi-package front-end repositories using pnpm workspace, Turborepo or Nx.
For multi-package front-end repositories using pnpm workspace, Turborepo or Nx.
Standardize the directory structure, dependency management, task orchestration and package release process of the Monorepo project to ensure the build efficiency and version consistency of multi-package collaboration.
apps/ and shared libraries, configuration and tools in packages/ or existing equivalent directories.workspace:* to drive the build sequence through the dependency graph.| Tools | Applicability | Features |
|---|---|---|
| pnpm workspace | Basics | Dependency promotion, linking, script aggregation |
| Turborepo | Recommended | Caching, parallelism, dependency graph |
| Nx | Large | Incremental build, cloud cache, plug-in ecology |
├── package.json # Root package, workspace configuration
├── pnpm-workspace.yaml # workspace package list
├── turbo.json # Turborepo configuration
│
├── apps/
│ ├── web/ # Main application
│ │ ├── package.json
│ │ └── ...
│ ├── admin/ # Management background
│ └── docs/ # Documentation site
│
├── packages/
│ ├── ui/ # Shared UI components
│ │ ├── package.json
│ │ └── src/
│ ├── utils/ # Utility function
│ ├── config-eslint/ # Shared ESLint configuration
│ └── config-typescript/ # Shared TS configuration
│
└── tooling/ # Build/test tools (optional)
└── scripts/
packages:
- "apps/*"
- "packages/*"
workspace:* protocolpackage.json unifies some dependency versions and can be overridden by sub-packagespnpm why{
"dependencies": {
"@repo/ui": "workspace:*",
"@repo/utils": "workspace:*"
}
}
{
"$schema": "https://turbo.build/schema.json",
"tasks": {
"build": {
"dependsOn": ["^build"],
"outputs": ["dist/**", ".next/**"]
},
"lint": {
"dependsOn": ["^build"]
},
"test": {
"dependsOn": ["^build"]
}
}
}
^build means executing the build of dependent packages firstoutputs is used for cache hit judgmentinputs should include source code, configuration, lock files and environment-related files; do not write the .env secret value into the cache key{
"targetDefaults": {
"build": {
"dependsOn": ["^build"],
"outputs": ["{projectRoot}/dist"],
"cache": true
}
}
}
@org/package-name or @repo/package-name@scope/name specificationworkspace:* and are not published to npm and then installed.packages/config-*, and sub-packages extendpnpm -r build or turbo run build in the root directory, all packages will be built in orderpnpm why to check the dependency chain when adding a new packageapps/ applications, packages/ shared packages, tooling/ tools)pnpm-workspace.yaml and turbo.json / nx.json are configured correctlyworkspace:* protocol, no circular dependenciesnpx claudepluginhub bovinphang/frontend-craftManages monorepos using Turborepo or Nx for pipelines, caching, task graphs, generators, pnpm workspaces, shared packages, dependency rules, and CI optimization via change detection.
Set up and optimize monorepos with Turborepo, Nx, pnpm workspaces for shared code, efficient builds, dependency management, and CI/CD.
Guides monorepo setup and optimization with Turborepo, Nx, and pnpm workspaces. Use when structuring multi-package repos, managing shared dependencies, or improving build performance.