Agent skill

Ds Create Token

Create design tokens for a component from its CSS variables. An agent skill from baloise/design-system.

Apache-2.0Auto-check passedFrontend & Design

Install Ds Create Token

skills CLI

$ npx skills add baloise/design-system --skill ds-create-token -a claude-code

Project install by default; add -g for ~/.claude/skills/.

GitHub CLI

$ gh skill install baloise/design-system ds-create-token --agent claude-code

Project scope by default; add --scope user for a personal install. Needs GitHub CLI 2.90.0 or later (public preview).

Manual copy

$ git clone --depth 1 https://github.com/baloise/design-system.git skills-src && mkdir -p .claude/skills && cp -r skills-src/.claude/skills/ds-create-token .claude/skills/ds-create-token && rm -rf skills-src

Use ~/.claude/skills/ instead of .claude/skills for a personal install. The folder must contain SKILL.md.

Claude Code skills documentation · loads skills from .claude/skills/

Paste into Claude Code

Install the "ds-create-token" agent skill from https://github.com/baloise/design-system/tree/next/.claude/skills/ds-create-token into .claude/skills/ds-create-token/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "ds-create-token", then confirm the skill loads.

Claude Code copies the folder itself, the same result as the manual copy. Check what it changed before you commit it.

$skill-installer

$skill-installer install https://github.com/baloise/design-system/tree/next/.claude/skills/ds-create-token

Type this inside Codex. $skill-installer <name> installs a curated skill from openai/skills. The installer writes to $CODEX_HOME/skills (default ~/.codex/skills). Restart Codex if the skill does not show up.

skills CLI

$ npx skills add baloise/design-system --skill ds-create-token -a codex

Project install goes to .agents/skills/; add -g for ~/.codex/skills/.

GitHub CLI

$ gh skill install baloise/design-system ds-create-token --agent codex

Project scope by default (.agents/skills/); add --scope user for a personal install.

Manual copy

$ git clone --depth 1 https://github.com/baloise/design-system.git skills-src && mkdir -p .agents/skills && cp -r skills-src/.claude/skills/ds-create-token .agents/skills/ds-create-token && rm -rf skills-src

Use ~/.agents/skills/ instead of .agents/skills for a personal install.

Codex skills documentation · loads skills from .agents/skills/

Paste into Codex

Install the "ds-create-token" agent skill from https://github.com/baloise/design-system/tree/next/.claude/skills/ds-create-token into .agents/skills/ds-create-token/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "ds-create-token", then confirm the skill loads.

Codex copies the folder itself, the same result as the manual copy. Check what it changed before you commit it.

skills CLI

$ npx skills add baloise/design-system --skill ds-create-token -a cursor

Project install goes to .agents/skills/; add -g for ~/.cursor/skills/.

GitHub CLI

$ gh skill install baloise/design-system ds-create-token --agent cursor

Project scope by default (.agents/skills/); add --scope user for a personal install.

Manual copy

$ git clone --depth 1 https://github.com/baloise/design-system.git skills-src && mkdir -p .cursor/skills && cp -r skills-src/.claude/skills/ds-create-token .cursor/skills/ds-create-token && rm -rf skills-src

Use ~/.cursor/skills/ instead of .cursor/skills for a personal install.

Cursor skills documentation · loads skills from .cursor/skills/, .agents/skills/, .claude/skills/, .codex/skills/

Paste into Cursor

Install the "ds-create-token" agent skill from https://github.com/baloise/design-system/tree/next/.claude/skills/ds-create-token into .cursor/skills/ds-create-token/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "ds-create-token", then confirm the skill loads.

Cursor copies the folder itself, the same result as the manual copy. Check what it changed before you commit it.

gemini skills install

$ gemini skills install https://github.com/baloise/design-system.git --path .claude/skills/ds-create-token

--scope user (default) or --scope workspace; --path is the subfolder of the repo that holds the skill; --consent skips the security confirmation prompt.

skills CLI

$ npx skills add baloise/design-system --skill ds-create-token -a gemini-cli

Project install goes to .agents/skills/; add -g for ~/.gemini/skills/.

GitHub CLI

$ gh skill install baloise/design-system ds-create-token --agent gemini-cli

Project scope by default (.agents/skills/); add --scope user for a personal install.

Manual copy

$ git clone --depth 1 https://github.com/baloise/design-system.git skills-src && mkdir -p .gemini/skills && cp -r skills-src/.claude/skills/ds-create-token .gemini/skills/ds-create-token && rm -rf skills-src

Use ~/.gemini/skills/ instead of .gemini/skills for a personal install, then run /skills reload.

Gemini CLI skills documentation · loads skills from .gemini/skills/, .agents/skills/

Paste into Gemini CLI

Install the "ds-create-token" agent skill from https://github.com/baloise/design-system/tree/next/.claude/skills/ds-create-token into .gemini/skills/ds-create-token/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "ds-create-token", then confirm the skill loads.

Gemini CLI copies the folder itself, the same result as the manual copy. Check what it changed before you commit it.

GitHub CLI

$ gh skill install baloise/design-system ds-create-token

Installs for Copilot at project scope by default; add --scope user for a personal install. Preview a skill first with gh skill preview. Needs GitHub CLI 2.90.0 or later (public preview).

skills CLI

$ npx skills add baloise/design-system --skill ds-create-token -a github-copilot

Project install goes to .agents/skills/; add -g for ~/.copilot/skills/.

Manual copy

$ git clone --depth 1 https://github.com/baloise/design-system.git skills-src && mkdir -p .github/skills && cp -r skills-src/.claude/skills/ds-create-token .github/skills/ds-create-token && rm -rf skills-src

Use ~/.copilot/skills/ instead of .github/skills for a personal install. Commit .github/skills so cloud agent and code review can use it.

GitHub Copilot skills documentation · loads skills from .github/skills/, .claude/skills/, .agents/skills/

Paste into GitHub Copilot

Install the "ds-create-token" agent skill from https://github.com/baloise/design-system/tree/next/.claude/skills/ds-create-token into .github/skills/ds-create-token/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "ds-create-token", then confirm the skill loads.

GitHub Copilot copies the folder itself, the same result as the manual copy. Check what it changed before you commit it.

skills CLI

$ npx skills add baloise/design-system --skill ds-create-token -a opencode

OpenCode documents no install command of its own. Project install goes to .agents/skills/; add -g for ~/.config/opencode/skills/.

GitHub CLI

$ gh skill install baloise/design-system ds-create-token --agent opencode

Project scope by default (.agents/skills/); add --scope user for a personal install.

Manual copy

$ git clone --depth 1 https://github.com/baloise/design-system.git skills-src && mkdir -p .opencode/skills && cp -r skills-src/.claude/skills/ds-create-token .opencode/skills/ds-create-token && rm -rf skills-src

Use ~/.config/opencode/skills/ instead of .opencode/skills for a personal install.

OpenCode skills documentation · loads skills from .opencode/skills/, .claude/skills/, .agents/skills/

Paste into OpenCode

Install the "ds-create-token" agent skill from https://github.com/baloise/design-system/tree/next/.claude/skills/ds-create-token into .opencode/skills/ds-create-token/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "ds-create-token", then confirm the skill loads.

OpenCode copies the folder itself, the same result as the manual copy. Check what it changed before you commit it.

Facts

Skill name: ds-create-token
GitHub stars: 114
Token cost: ~636 tokens
SKILL.md length: 271 words
Files: 3
Skills in repo: 10
Repo updated: Oct 7, 2026
First seen: Oct 7, 2026
Licence: Apache-2.0

At a glance

Create design tokens for a component from its CSS variables. An agent skill from baloise/design-system.

Works in 3 steps: Extract & Display → Suggest Paths & Confirm → Write & Compile
Tasks that involve Design tokens
SKILL.md covers Usage, Workflow, Token Path Structure and Requirements, plus 1 more section
Runs JavaScript scripts from its folder; calls pnpm

What it does

Ds Create Token is an agent skill from baloise/design-system. Create design tokens for a component from its CSS variables

Its SKILL.md is about 640 tokens, which your agent loads only when the skill is triggered. The skill folder holds 2 other files (for example `README.md` and `index.js`).

It sits in Frontend & Design, covering Design tokens. The repository describes itself as: The Baloise Design System consists of reusable components and a clearly defined visual style, that can be assembled together to build any number of applications. The licence is Apache-2.0.

When your agent uses it

Tasks that involve Design tokens

Example prompts

“/ds-create-token”

Requirements

Node.js

Workflow steps

3 steps, taken from the step headings in SKILL.md.

Extract & Display
Suggest Paths & Confirm
Write & Compile

What it can do on your machine

Read from SKILL.md and the folder at commit 19063c5. It shows what the files ask for, not the result of running them.

Tool permissions
Pre-approves nothing: there is no allowed-tools line, so your agent's usual permission prompts apply.
From allowed-tools in the SKILL.md frontmatter.
Runs code
Ships script files (JavaScript), which the agent can run.
Shell commands in SKILL.md call:
- pnpm
From the folder's file list and the shell code blocks in SKILL.md.
Network
No URLs in SKILL.md. Its commands use pnpm, which can reach the network depending on how they are called.
From URLs in SKILL.md, links to its own repository left out.
Credentials
Names no API keys, tokens, secrets or passwords.
From names ending in _API_KEY, _TOKEN, _SECRET, _KEY or _PASSWORD in SKILL.md.

Context cost

Ds Create Token loads about 636 tokens when it runs. Until then it costs about 19 tokens; SKILL.md has 271 words of instructions outside code blocks.

Always · name and description, kept in context so the agent knows when to use it: ~19
When it runs · the whole SKILL.md, loaded when a task matches: ~636

Estimates: characters ÷ 4, the usual rule of thumb; real counts depend on the model's tokenizer. Scripts and assets cost tokens only if the agent reads them.

Safety

Auto-check passed

The automated check found no risky patterns in SKILL.md.

Automated static check — not a guarantee. Review scripts before installing. It scans the text of SKILL.md for risky patterns (piping downloads into a shell, reading credential files, hidden Unicode, destructive commands); files beside SKILL.md are not scanned.

SKILL.md

The full file from baloise/design-system at commit 19063c5, republished under its Apache-2.0 licence (© baloise). 271 words, ~636 tokens.

Download SKILL.mdSave it as .claude/skills/ds-create-token/SKILL.md (or your agent's skills folder). This skill also uses 2 other files; get the full folder from GitHub.

name: ds-create-token
description: Create design tokens for a component from its CSS variables

ds-create-token

Create component design tokens from CSS variables defined in a component's SCSS file. The skill analyzes vars.local() calls and variant --mod- variables, suggests component token paths, and creates them in Base.tokens.json.

Usage

/ds-create-token <component-name>

Examples:

/ds-create-token badge
/ds-create-token button
/ds-create-token footer

Workflow

Step 1: Extract & Display

Parses component SCSS files for @include vars.local() and --mod- variables
Shows a table with:
- Component variable name
- Current value (alias/global/hardcoded)
- Value type
- Status indicator
Displays preview of component tokens that will be created
User confirms to proceed to Step 2

Step 2: Suggest Paths & Confirm

For each variable:

Hardcoded values → Uses ds-find-token skill to find matching alias tokens
- If no match found → Suggests creating new Alias token (user confirms)
Global tokens → Suggests replacing with Alias equivalent
Proposes component token path following: --ds-[component]-[variant]-[element]-[category]-[property]-[state]
- Missing segments are skipped (no placeholders)
- State segment only included if multiple states exist
User can review, edit, or confirm each mapping

Step 3: Write & Compile

Backs up Base.tokens.json
Writes new tokens to Base.tokens.json
Creates any new Alias tokens needed
Runs pnpm tokens to compile outputs
Shows success summary with created tokens

Token Path Structure

Component tokens always follow this structure:

--ds-[component]-[variant]-[element]-[category]-[property]-[state]

Example: --ds-badge-primary-color-base-text

component: badge
variant: primary
element: (skipped if not present)
category: color
property: text
state: base

Requirements

Component must exist in packages/core/src/components/
Component must have a .host.scss file with vars.local() definitions
Design tokens must already be compiled (run pnpm tokens first if needed)

Important Notes

JSDoc Comments: When generating or updating JSDoc comments in the SCSS file, do NOT include default values in parentheses. Only include the property name and description. Example:

✓ @prop --button-color: Text color of the button
✗ @prop --button-color: Text color of the button (default: --ds-alias-text-color-white)

Files

SKILL.md and 2 other files in .claude/skills/ds-create-token of baloise/design-system.

SKILL.md
README.md
index.js

Open the folder on GitHubat commit 19063c5

Compare with similar skills

Ds Create Token next to the 5 skills that share the most tags, products or categories with it. Stars are the repository's; “used in” counts other GitHub owners with a copy.

Ds Create Token compared with similar skills
Skill	Stars	Used in	Tokens	Auto-check	Licence	Repo updated
Ds Create Token this skillbaloise/design-system	114	—	~636	Automated safety check: Pass	Apache-2.0	yesterday
Figma Design System Builderwarpdotdev/warp	65k	2 repos	~4.4k	Automated safety check: Pass	AGPL-3.0	today
Figma use_figma Plugin API Ruleswarpdotdev/warp	65k	4 repos	~4.4k	Automated safety check: Pass	AGPL-3.0	today
MCP Developmentcoollabsio/coolify	63k	1 repos	~949	Automated safety check: Pass	MIT	today
Design SystemOhh-889/skyroc	795	11 repos	~1.7k	Automated safety check: Pass	MIT	1 mo ago
Design Dnazanwei/design-dna	1.9k	1 repos	~2.1k	Automated safety check: Pass	MIT	1 mo ago

Similar skills

Figma Design System Builder
warpdotdev/warp
Builds or updates a design system in Figma from a codebase in ordered phases: discovery, variables and tokens, components, theming and documentation, with checkpoints.
65k GitHub starsUsed in 2 repos~4.4k tokens
Frontend & DesignAuto-check passed
Figma use_figma Plugin API Rules
warpdotdev/warp
Required groundwork before any use_figma call: the rules and reference files for running JavaScript in a Figma file through the Plugin API without common failures.
65k GitHub starsUsed in 4 repos~4.4k tokens
Frontend & DesignAuto-check passed
MCP Development
coollabsio/coolify
A skill your agent uses for Laravel MCP development. An agent skill from coollabsio/coolify.
63k GitHub starsUsed in 1 repo~949 tokens
Frontend & DesignAuto-check passed
Design System
Ohh-889/skyroc
Token architecture, component specifications, and slide generation.
795 GitHub starsUsed in 11 repos~1.7k tokens
Frontend & DesignAuto-check passed
Design Dna
zanwei/design-dna
Extract, define, and apply design DNA across three dimensions: design system (tokens), design style (qualitative feel), and visual effects (Canvas, WebGL, 3D, particles, shaders, scroll effects…
1.9k GitHub starsUsed in 1 repo~2.1k tokens
Frontend & DesignAuto-check passed
Figma Design to Code
warpdotdev/warp
Turns a Figma frame or component into production code that matches the design, using the Figma MCP server and the project's own design system.
65k GitHub starsUsed in 4 repos~2.9k tokens
Frontend & DesignAuto-check passed

Questions about Ds Create Token

What does Ds Create Token do?

Create design tokens for a component from its CSS variables. An agent skill from baloise/design-system. Ds Create Token is an agent skill from baloise/design-system.

When should I use Ds Create Token?

Ds Create Token fits situations like: tasks that involve Design tokens.

How do I install Ds Create Token in Claude Code?

Run `npx skills add baloise/design-system --skill ds-create-token -a claude-code`. Or copy the skill folder (.claude/skills/ds-create-token in baloise/design-system) into .claude/skills/ds-create-token in your project. Claude Code loads it when a task matches its description.

How do I install Ds Create Token in Codex?

Run `npx skills add baloise/design-system --skill ds-create-token -a codex`. Or copy the skill folder (.claude/skills/ds-create-token in baloise/design-system) into .agents/skills/ds-create-token in your project. Codex loads it when a task matches its description.

Can I use Ds Create Token in Cursor, Gemini CLI or GitHub Copilot?

Cursor, Gemini CLI, GitHub Copilot and OpenCode also load SKILL.md folders. With the skills CLI, run `npx skills add baloise/design-system --skill ds-create-token -a cursor` (or -a gemini-cli, github-copilot or opencode for the others). To copy it by hand, put the folder in .cursor/skills/ds-create-token, .gemini/skills/ds-create-token, .github/skills/ds-create-token and .opencode/skills/ds-create-token in your project.

What does Ds Create Token need to run?

Going by SKILL.md and its folder, Ds Create Token needs JavaScript for the scripts in its folder and the command-line tools its instructions call (pnpm). Our summary lists: Node.js.

Does Ds Create Token access the network?

SKILL.md contains no URLs. Any network use would come from the scripts or tools the agent runs. This is read from the text; nothing was executed.

Is Ds Create Token safe to install?

Our automated static check of SKILL.md found no risky patterns, such as piping downloads into a shell, reading credential files or hidden Unicode. It is not a guarantee. Review the folder before installing.

What licence does Ds Create Token use?

Ds Create Token is published under the Apache-2.0 licence (the repository's licence). It allows redistribution, so the full SKILL.md is shown on this page.

How many tokens does Ds Create Token use?

About 636 tokens (SKILL.md is roughly 2.5k characters). Agents keep only the skill's name and description in context until a task matches; then they load SKILL.md in full.

What are the alternatives to Ds Create Token?

Skills that share tags, products or a category with Ds Create Token: Figma Design System Builder (warpdotdev/warp, 65k stars), Figma use_figma Plugin API Rules (warpdotdev/warp, 65k stars), MCP Development (coollabsio/coolify, 63k stars) and Design System (Ohh-889/skyroc, 795 stars). The comparison table on this page puts their stars, adoption, token cost, safety result and licence side by side.

Who maintains Ds Create Token?

baloise (a GitHub organization) maintains it in baloise/design-system, which has 114 GitHub stars. The repository holds 10 skills in this directory. The repository was last updated on October 7, 2026.

Source: baloise/design-system on GitHub. Facts on this page come from the repository at the commit we read; the author's words are quoted as theirs.

Install Ds Create Token

Facts

At a glance

What it does

When your agent uses it

Example prompts

Requirements

Workflow steps

What it can do on your machine

Tool permissions

Runs code

Network

Credentials

Context cost

Safety

SKILL.md

ds-create-token

Usage

Workflow

Step 1: Extract & Display

Step 2: Suggest Paths & Confirm

Step 3: Write & Compile

Token Path Structure

Requirements

Important Notes

Files

Compare with similar skills

Similar skills

More from baloise/design-system

Related

Questions about Ds Create Token