PixelPilot uiux-monorepo.instructions.md

Monorepo Design System Skill

Share design tokens and components across multiple applications.

---

ARCHITECTURE OPTIONS

Approach	Best For	Complexity
npm workspaces	Small teams, 2-3 apps	Low
Turborepo	Medium teams, 5+ apps	Medium
Nx	Large enterprise	High
Publishable package	External consumers	Medium

---

NPM WORKSPACES (BASIC)

Folder Structure

my-monorepo/
├── package.json              # Root package.json
├── packages/
│   ├── tokens/               # Design tokens
│   │   ├── package.json
│   │   ├── src/
│   │   │   ├── tokens.css
│   │   │   ├── tokens.js
│   │   │   └── index.ts
│   │   └── tsconfig.json
│   ├── ui/                   # Shared components
│   │   ├── package.json
│   │   ├── src/
│   │   │   ├── Button/
│   │   │   ├── Input/
│   │   │   └── index.ts
│   │   └── tsconfig.json
│   └── utils/                # Shared utilities
│       ├── package.json
│       └── src/
└── apps/
    ├── web/                  # Main web app
    │   ├── package.json
    │   └── src/
    ├── admin/                # Admin dashboard
    │   ├── package.json
    │   └── src/
    └── docs/                 # Documentation site
        ├── package.json
        └── src/

Root package.json

{
  "name": "my-monorepo",
  "private": true,
  "workspaces": [
    "packages/*",
    "apps/*"
  ],
  "scripts": {
    "dev": "npm run dev --workspaces --if-present",
    "build": "npm run build --workspaces --if-present",
    "lint": "npm run lint --workspaces --if-present",
    "test": "npm run test --workspaces --if-present"
  },
  "devDependencies": {
    "typescript": "^5.0.0"
  }
}

Tokens Package

// packages/tokens/package.json
{
  "name": "@myorg/tokens",
  "version": "1.0.0",
  "main": "dist/index.js",
  "module": "dist/index.mjs",
  "types": "dist/index.d.ts",
  "exports": {
    ".": {
      "import": "./dist/index.mjs",
      "require": "./dist/index.js",
      "types": "./dist/index.d.ts"
    },
    "./css": "./dist/tokens.css"
  },
  "files": ["dist"],
  "scripts": {
    "build": "tsup src/index.ts --format cjs,esm --dts && cp src/tokens.css dist/"
  }
}