Turbo单仓
turborepo-monorepo
by giuseppe-trisciuoglio
覆盖 Turborepo workspace 搭建、turbo.json 任务编排、Next.js/NestJS 集成、Vitest/Jest 测试、CI/CD、远程缓存与构建优化。
安装
claude skill add --url github.com/giuseppe-trisciuoglio/developer-kit/tree/main/plugins/developer-kit-typescript/skills/turborepo-monorepo文档
Turborepo Monorepo
Overview
Provides comprehensive guidance for working with Turborepo monorepos in TypeScript/JavaScript projects. Turborepo is a high-performance build system written in Rust that optimizes task execution through intelligent caching, parallelization, and dependency graph analysis. This skill covers workspace creation, task configuration, framework integration (Next.js, NestJS, Vite), testing setup, CI/CD pipelines, and performance optimization.
When to Use
Use this skill when:
- Creating a new Turborepo workspace or initializing in an existing project
- Configuring
turbo.jsontasks with proper dependencies and outputs - Setting up Next.js or NestJS applications in a monorepo
- Configuring Vitest or Jest testing pipelines
- Implementing CI/CD workflows (GitHub Actions, CircleCI, GitLab CI)
- Setting up remote caching or Vercel Remote Cache
- Optimizing build times and cache hit ratios
- Managing package configurations for specific apps/libs
- Debugging task dependency issues
- Migrating from other monorepo tools to Turborepo
Trigger phrases: "create Turborepo workspace", "Turborepo monorepo", "turbo.json config", "Turborepo Next.js", "Turborepo NestJS", "Turborepo CI/CD", "Vitest Turborepo"
Instructions
Workspace Creation
-
Create a new workspace:
bash# Using pnpm (recommended) pnpm create turbo@latest my-workspace # Using npm npm create turbo@latest my-workspace # Using yarn yarn create turbo my-workspace -
Initialize in an existing project:
bashpnpm add -D -w turbo -
Create turbo.json in root:
json{ "$schema": "https://turborepo.dev/schema.json", "pipeline": { "build": { "dependsOn": ["^build"], "outputs": ["dist/**", ".next/**"] }, "lint": { "outputs": [] }, "test": { "dependsOn": ["build"], "outputs": ["coverage/**"] } } } -
Add scripts to root package.json:
json{ "scripts": { "build": "turbo run build", "dev": "turbo run dev", "lint": "turbo run lint", "test": "turbo run test", "clean": "turbo run clean" } }
Task Configuration
-
Configure task dependencies:
json{ "pipeline": { "build": { "dependsOn": ["^build"], "outputs": ["dist/**"] }, "test": { "dependsOn": ["build"], "outputs": ["coverage/**"] }, "lint": { "outputs": [] } } } -
Run tasks across packages:
bash# Run task for all packages turbo run build # Run multiple tasks turbo run lint test build # Run for specific package turbo run build --filter=web -
Use transit nodes for parallel type checking:
json{ "pipeline": { "transit": { "dependsOn": ["^transit"] }, "typecheck": { "dependsOn": ["transit"], "outputs": [] } } }
Framework Integration
-
Next.js app configuration:
json{ "pipeline": { "build": { "dependsOn": ["^build"], "outputs": [".next/**", "!.next/cache/**"], "env": ["NEXT_PUBLIC_*"] } } }See references/nextjs-config.md for complete Next.js setup.
-
NestJS API configuration:
json{ "pipeline": { "build": { "dependsOn": ["^build"], "outputs": ["dist/**"] }, "start:dev": { "cache": false, "persistent": true } } }See references/nestjs-config.md for complete NestJS setup.
Testing Setup
-
Vitest configuration:
json{ "pipeline": { "test": { "outputs": [], "inputs": ["$TURBO_DEFAULT$", "vitest.config.ts"] }, "test:watch": { "cache": false, "persistent": true } } } -
Run affected tests:
bashturbo run test --filter=[HEAD^]See references/testing-config.md for complete testing setup.
Package Configurations
- Create package-specific turbo.json:
See references/package-configs.md for detailed package configuration patterns.json
{ "extends": ["//"], "tasks": { "build": { "outputs": ["$TURBO_EXTENDS$", ".next/**"] } } }
CI/CD Setup
-
GitHub Actions basic workflow:
yaml- name: Install dependencies run: pnpm install - name: Run tests run: pnpm run test --filter=[HEAD^] - name: Build run: pnpm run build --filter=[HEAD^] -
Remote cache setup:
bash# Login to Vercel npx turbo login # Link repository npx turbo linkSee references/ci-cd.md for complete CI/CD setup examples.
Task Properties Reference
| Property | Description | Example |
|---|---|---|
dependsOn | Tasks that must complete first | ["^build"] - dependencies first |
outputs | Files/folders to cache | ["dist/**"] |
inputs | Files for cache hash | ["src/**/*.ts"] |
env | Environment variables affecting hash | ["DATABASE_URL"] |
cache | Enable/disable caching | true or false |
persistent | Long-running task | true for dev servers |
outputLogs | Log verbosity | "full", "new-only", "errors-only" |
Dependency Patterns
^task- Run task in dependencies first (topological order)task- Run task in same package firstpackage#task- Run specific package's task
Filter Syntax
| Filter | Description |
|---|---|
web | Only web package |
web... | web + all dependencies |
...web | web + all dependents |
...web... | web + deps + dependents |
[HEAD^] | Packages changed since last commit |
./apps/* | All packages in apps/ |
Best Practices
Performance Optimization
- Use specific outputs - Only cache what's needed
- Fine-tune inputs - Exclude files that don't affect output
- Transit nodes - Enable parallel type checking
- Remote cache - Share cache across team/CI
- Package configurations - Customize per-package behavior
Caching Strategy
{
"pipeline": {
"build": {
"outputs": ["dist/**"],
"inputs": ["$TURBO_DEFAULT$", "!README.md", "!**/*.md"]
}
}
}
Task Organization
- Independent tasks - No
dependsOn: lint, format, spellcheck - Build tasks -
dependsOn: ["^build"]: build, compile - Test tasks -
dependsOn: ["build"]: test, e2e - Dev tasks -
cache: false, persistent: true: dev, watch
Workspace Structure
my-workspace/
├── apps/
│ ├── web/ # Next.js app
│ └── api/ # NestJS backend
├── packages/
│ ├── ui/ # React component library
│ └── config/ # Shared configs
├── turbo.json
├── package.json
└── pnpm-workspace.yaml
Common Issues
Tasks not running in order
Problem: Tasks execute in wrong order
Solution: Check dependsOn configuration
{
"build": {
"dependsOn": ["^build"]
}
}
Cache misses on unchanged files
Problem: Cache invalidating unexpectedly
Solution: Review globalDependencies and inputs
{
"globalDependencies": ["tsconfig.json"],
"pipeline": {
"build": {
"inputs": ["$TURBO_DEFAULT$", "!*.md"]
}
}
}
Type errors after cache hit
Problem: TypeScript errors not caught due to cache
Solution: Use transit nodes for type checking
{
"transit": { "dependsOn": ["^transit"] },
"typecheck": { "dependsOn": ["transit"] }
}
Examples
Example 1: Create New Workspace
Input: "Create a Turborepo with Next.js and NestJS"
pnpm create turbo@latest my-workspace
cd my-workspace
# Add Next.js app
pnpm add next react react-dom -F apps/web
# Add NestJS API
pnpm add @nestjs/core @nestjs/common -F apps/api
Example 2: Configure Testing Pipeline
Input: "Set up Vitest for all packages"
{
"pipeline": {
"test": {
"dependsOn": ["build"],
"outputs": ["coverage/**"],
"inputs": ["$TURBO_DEFAULT$", "vitest.config.ts"]
},
"test:watch": {
"cache": false,
"persistent": true
}
}
}
Example 3: Run Affected Tests in CI
Input: "Only test changed packages in CI"
pnpm run test --filter=[HEAD^]
Example 4: Debug Cache Issues
Input: "Why is my cache missing?"
# Dry run to see what would be executed
turbo run build --dry-run --filter=web
# Show hash inputs
turbo run build --force --filter=web
Constraints and Warnings
- Node.js 18+ is required for Turborepo
- Package manager field required in root
package.json - Outputs must be specified for caching to work
- Persistent tasks cannot have dependents
- Windows: WSL or Git Bash recommended
- Remote cache requires Vercel account or self-hosted solution
- Large monorepos may need increased
concurrencysettings
Reference Files
For detailed guidance on specific topics, consult:
| Topic | Reference File |
|---|---|
| turbo.json template | references/turbo.json |
| Next.js integration | references/nextjs-config.md |
| NestJS integration | references/nestjs-config.md |
| Vitest/Jest/Playwright | references/testing-config.md |
| GitHub/CircleCI/GitLab CI | references/ci-cd.md |
| Package configurations | references/package-configs.md |
相关 Skills
网页构建器
by anthropics
面向复杂 claude.ai HTML artifact 开发,快速初始化 React + Tailwind CSS + shadcn/ui 项目并打包为单文件 HTML,适合需要状态管理、路由或多组件交互的页面。
✎ 在 claude.ai 里做复杂网页 Artifact 很省心,多组件、状态和路由都能顺手搭起来,React、Tailwind 与 shadcn/ui 组合效率高、成品也更精致。
前端设计
by anthropics
面向组件、页面、海报和 Web 应用开发,按鲜明视觉方向生成可直接落地的前端代码与高质感 UI,适合做 landing page、Dashboard 或美化现有界面,避开千篇一律的 AI 审美。
✎ 想把页面做得既能上线又有设计感,就用前端设计:组件到整站都能产出,难得的是能避开千篇一律的 AI 味。
网页应用测试
by anthropics
用 Playwright 为本地 Web 应用编写自动化测试,支持启动开发服务器、校验前端交互、排查 UI 异常、抓取截图与浏览器日志,适合调试动态页面和回归验证。
✎ 借助 Playwright 一站式验证本地 Web 应用前端功能,调 UI 时还能同步查看日志和截图,定位问题更快。
相关 MCP 服务
GitHub
编辑精选by GitHub
GitHub 是 MCP 官方参考服务器,让 Claude 直接读写你的代码仓库和 Issues。
✎ 这个参考服务器解决了开发者想让 AI 安全访问 GitHub 数据的问题,适合需要自动化代码审查或 Issue 管理的团队。但注意它只是参考实现,生产环境得自己加固安全。
Context7 文档查询
编辑精选by Context7
Context7 是实时拉取最新文档和代码示例的智能助手,让你告别过时资料。
✎ 它能解决开发者查找文档时信息滞后的问题,特别适合快速上手新库或跟进更新。不过,依赖外部源可能导致偶尔的数据延迟,建议结合官方文档使用。
by tldraw
tldraw 是让 AI 助手直接在无限画布上绘图和协作的 MCP 服务器。
✎ 这解决了 AI 只能输出文本、无法视觉化协作的痛点——想象让 Claude 帮你画流程图或白板讨论。最适合需要快速原型设计或头脑风暴的开发者。不过,目前它只是个基础连接器,你得自己搭建画布应用才能发挥全部潜力。