Design Token System Builder

This skill enables Claude to build and manage design token systems using Style Dictionary v4.3.3. It generates CSS variables, TypeScript exports, and documentation from DTCG (Design Token Community Group) format tokens with dynamic prefix configuration.

What This Skill Does

Token Architecture

Source Structure

- `tokens/_prefix.json` - Mantine token prefix (currently "mantine")

- `tokens/_custom-prefix.json` - Custom token prefix (default "clearco")

Build Outputs

- CSS variables: `build/css/` (variables.css, theme-light.css, theme-dark.css)

- SCSS: `build/scss/`

- JavaScript: `build/js/`

- TypeScript: `build/ts/` (typed exports)

- Documentation: `build/docs/`

- `mantine.primitive.tokens.json`

- `mantine.component.tokens.json`

- `mantine.semantic.light.tokens.json`

- `mantine.semantic.dark.tokens.json`

- `mantine.custom.tokens.json`

- `{brand}.light.tokens.json`

- `{brand}.dark.tokens.json`

Instructions

1. Initial Setup

When first working with a design token project:

2. Building Tokens

**For standard Mantine tokens:**

```bash

npm run build # Standard build

npm run build:verbose # With detailed logging

npm run dev # Watch mode

```

**For custom tokens:**

```bash

npm run build:custom # Build custom tokens

npm run build:custom:verbose # With logging

npm run dev:custom # Watch mode

```

**For all tokens:**

```bash

npm run build:all # Build everything

npm run build:all:verbose # With logging

npm run dev:all # Watch mode for all

```

**For brand-specific tokens:**

```bash

npm run build:brands # Build all brands

npm run dev:brands # Watch mode

```

**For Figma output:**

```bash

npm run build:figma # Generate Figma-compatible JSON

```

3. Development Workflow

**Step 1**: Start watch mode based on what you're editing:

**Step 2**: Edit token files in `tokens/` directory using DTCG format:

```json

{

"color": {

"primary": {

"$type": "color",

"$value": "#0066CC",

"$description": "Primary brand color"

}

}

}

```

**Step 3**: Reference other tokens using `{token.path}` syntax:

```json

{

"semantic": {

"button-bg": {

"$type": "color",

"$value": "{color.primary}"

}

}

}

```

**Step 4**: Validate changes:

```bash

npm run validate # Check token structure

npm run check:collisions # Check for path conflicts

```

4. Modifying Prefixes

**To change Mantine prefix:**

**To change custom prefix:**

5. Adding New Token Categories

**Step 1**: Create new JSON file in appropriate directory:

**Step 2**: Use DTCG format with required fields:

**Step 3**: Build and verify outputs

6. Testing & Quality

**Run tests:**

```bash

npm test # Run all tests

npm run test:watch # Watch mode

npm run test:coverage # Generate coverage report

```

**Lint and format:**

```bash

npm run lint # Check code quality

npm run lint:fix # Auto-fix issues

npm run format # Format with Prettier

npm run format:check # Check formatting

```

7. Cleaning Build Artifacts

```bash

npm run clean # Remove build/ directory

```

8. Integration & Usage

**In CSS:**

```css

.button {

background-color: var(--mantine-color-primary);

padding: var(--mantine-spacing-md);

}

```

**In TypeScript:**

```typescript

import { colorPrimary, spacingMd } from './build/ts/tokens';

```

**In JavaScript:**

```javascript

import tokens from './build/js/tokens.js';

console.log(tokens.color.primary);

```

Key Technical Details

- `name/prefix-css` - Adds dynamic prefix to CSS variables

- `name/custom-prefix-css` - Adds custom prefix for custom tokens

Common Tasks

Adding a new color palette:

1. Create `tokens/primitives/my-colors-dtcg.json`

2. Define color with shades 50-900 using DTCG format

3. Run `npm run build`

4. Verify output in `build/css/variables.css`

Creating a theme variant:

1. Create `tokens/semantic/my-theme-dtcg.json`

2. Reference primitive tokens using `{token.path}`

3. Build and check `build/css/theme-my-theme.css`

Setting up brand-specific tokens:

1. Create brand directory in `tokens/brands/my-brand/`

2. Add light/dark theme files

3. Run `npm run build:brands`

4. Check `build/brands/my-brand/` for outputs

Constraints