Installation
Add @sigx/zero-kit to a design-system package as a dev dependency, beside
@sigx/cli for the sigx binary and @sigx/zero for the anatomy manifest the build
validates against.
Install the package
pnpm add -D @sigx/zero-kit @sigx/cli @sigx/zeroThe kit is Node-only and must never be a runtime dependency — one value import of its
barrel would drag node:fs into every browser consumer of the design system. Install
@sigx/cli as a direct dev dependency too: a package manager only links the executables of
direct dependencies, and the CLI discovers the kit's commands in any directory that has it
installed.
A design-system package
{
"name": "@acme/zero-acme",
"type": "module",
"exports": {
".": { "types": "./dist/index.d.ts", "import": "./dist/index.js" },
"./register": { "types": "./dist/register.d.ts", "import": "./dist/register.js" },
"./css": "./dist/css/index.css",
"./css/tokens": "./dist/css/tokens.css",
"./css/*": "./dist/css/components/*.css",
"./manifest.json": "./dist/manifest.json",
"./report.json": "./dist/report.json"
},
"files": ["dist", "src"],
"scripts": {
"build": "tsgo -p tsconfig.json && node build.mjs",
"validate": "sigx zero:validate --strict"
},
"peerDependencies": { "@sigx/zero": "^0.2.0-beta.1" },
"devDependencies": {
"@sigx/cli": "^0.10.0",
"@sigx/zero": "^0.2.0-beta.1",
"@sigx/zero-kit": "^0.2.0-beta.1",
"typescript": "^6.0.3"
}
}
@sigx/zero is a peer dependency of the design system (its runtime module calls
registerThemes) and a dev dependency for the build. The source layout and build.mjs are
described in Authoring a design system.
The subpaths
| Subpath | Runs in | Use it for |
|---|---|---|
@sigx/zero-kit | Node only | The compiler, validators, artifact writers, manifest tooling and conformance helpers — build scripts and tests. |
@sigx/zero-kit/define | anywhere | defineTokens, defineRecipe, defineDesignSystem, defineApi and their types — the one surface a design-system source module may value-import. |
@sigx/zero-kit/build | Node only | runStandardBuild — the whole pipeline as one function. |
@sigx/zero-kit/plugin | Node only | The sigx CLI plugin; loaded by the CLI, never imported by hand. |
tokens.ts and recipes.ts ship in the design system's runtime bundle, so they import from
the kit type-only (import type { TokensInput, RecipeInput } from '@sigx/zero-kit').
Verify
sigx zero:validate --help
sigx zero:build --help
Both commands print their current flags. In a package with a compiled
dist/design-system.js, sigx zero:validate --report prints the coverage report. See
Validate and build.
