How do I install the Chi Tokens skill?

Run npx skillmds@latest add tomevault-io/chi-tokens in your terminal (requires Node.js), paste this page's agent-chat prompt into Claude, Cursor, or any MCP-connected agent, or download the SKILL.md file and copy it into your agent's skills directory.

Is Chi Tokens safe to use?

This skill has not completed SkillMD's automated safety review yet. Independent scanners report: SkillSpector: PASS, Skill Scanner: PASS. SkillMD never runs a skill's scripts for you; review the SKILL.md before installing.

Which AI agents work with Chi Tokens?

This skill is tagged as working with Claude Code, Claude.ai, OpenAI Codex. SKILL.md is an open format, so most agents that read a skills directory can load it too.

Is Chi Tokens free to use?

Yes. Installing skills from SkillMD is free, and the skill stays under its author's original license.

Who published Chi Tokens?

tomevault-io (@tomevault-io) published this skill. Their other Agent Skills are listed on their SkillMD profile.

Chi Tokens by tomevault-io — Agent Skill

Name: Chi Tokens
Author: tomevault-io

Chi Tokens

Extract and provide information about Chi Design System design tokens (colors, typography, spacing, shadows, breakpoints, z-index). Use when the user asks about design tokens, SCSS variables, theme colors, spacing values, or any design token query. Reads SCSS source files directly. Use when this capability is needed.

tomevault-io Updated Sep 17, 2026

File contents

Chi Design Tokens

How to Extract Tokens

Design tokens are SCSS variables defined in source files. Read them directly.

Global Tokens

Read src/chi/_global-variables.scss and parse lines matching: $variable-name: value; Regex: ^\$([a-z0-9-_]+):\s*(.+?)\s*;

Note: Some values are SCSS maps (e.g., $shadow, $state-colors). These contain multiple sub-values inside (key: value, ...) syntax.

Theme-Specific Tokens

For theme colors, read src/chi/themes/{theme}/_variables.scss where theme is one of: lumen, brightspeed, centurylink, colt, portal, connect.

Theme files override global tokens. When a user asks about a color, check the theme file first, then fall back to global.

Token Categorization

Category	Name Pattern	Examples
colors	Contains `color`, `grey`, `red`, `blue`, etc.	`$color-background-primary`
typography	Starts with `font-`, `line-height`, `cap-height`	`$font-size-5` (1rem = 16px)
spacing	Is `base-unit`	`$base-unit` (8px)
shadows	Contains `shadow`	`$shadow` (map with levels 0-5)
breakpoints	Ends with `-breakpoint`	`$sm-breakpoint` (576px)
zIndex	Starts with `zindex-`	`$zindex-modal` (50)
opacity	Starts with `opacity-`	`$opacity-60` (0.6)

Key Values to Remember

$base-unit: 8px -- spacing formula: space(N) = (N/2)rem, so each step = 8px at 16px root
$zindex-backdrop: 30, $zindex-modal: 50, $zindex-popover: 60, $zindex-tooltip: 70
Font sizes: $font-size-5: 1rem (16px, default body text)

Workflow

When user asks about tokens:

Specific token: Look up in reference.md first for description and examples. Read SCSS for the raw value.
Category listing: Filter reference.md by category, or read SCSS and filter by name pattern.
Theme-specific: Read the theme's _variables.scss for overridden values.
Relationships: Check reference.md "Token Relationships" section for related utilities and components.

Response Format

When providing token information, include:

Token name and SCSS variable ($name)
Value (raw SCSS and computed px where applicable)
Description and category
Usage examples (SCSS and utility class equivalents)
Related utilities or components

Converted and distributed by TomeVault — claim your Tome and manage your conversions.

---name: chi-tokensdescription: Extract and provide information about Chi Design System design tokens (colors, typography, spacing, shadows, breakpoints, z-index). Use when the user asks about design tokens, SCSS variables, theme colors, spacing values, or any design token query. Reads SCSS source files directly. Use when this capability is needed.---# Chi Design Tokens## How to Extract TokensDesign tokens are SCSS variables defined in source files. Read them directly.### Global TokensRead `src/chi/_global-variables.scss` and parse lines matching: `$variable-name: value;`Regex: `^\$([a-z0-9-_]+):\s*(.+?)\s*;`**Note**: Some values are SCSS maps (e.g., `$shadow`, `$state-colors`). These contain multiple sub-values inside `(key: value, ...)` syntax.### Theme-Specific TokensFor theme colors, read `src/chi/themes/{theme}/_variables.scss` where theme is one of: `lumen`, `brightspeed`, `centurylink`, `colt`, `portal`, `connect`.Theme files override global tokens. When a user asks about a color, check the theme file first, then fall back to global.## Token Categorization| Category | Name Pattern | Examples ||----------|-------------|----------|| **colors** | Contains `color`, `grey`, `red`, `blue`, etc. | `$color-background-primary` || **typography** | Starts with `font-`, `line-height`, `cap-height` | `$font-size-5` (1rem = 16px) || **spacing** | Is `base-unit` | `$base-unit` (8px) || **shadows** | Contains `shadow` | `$shadow` (map with levels 0-5) || **breakpoints** | Ends with `-breakpoint` | `$sm-breakpoint` (576px) || **zIndex** | Starts with `zindex-` | `$zindex-modal` (50) || **opacity** | Starts with `opacity-` | `$opacity-60` (0.6) |## Key Values to Remember- `$base-unit: 8px` -- spacing formula: `space(N) = (N/2)rem`, so each step = 8px at 16px root- `$zindex-backdrop: 30`, `$zindex-modal: 50`, `$zindex-popover: 60`, `$zindex-tooltip: 70`- Font sizes: `$font-size-5: 1rem` (16px, default body text)## WorkflowWhen user asks about tokens:1. **Specific token**: Look up in [reference.md](reference.md) first for description and examples. Read SCSS for the raw value.2. **Category listing**: Filter reference.md by category, or read SCSS and filter by name pattern.3. **Theme-specific**: Read the theme's `_variables.scss` for overridden values.4. **Relationships**: Check reference.md "Token Relationships" section for related utilities and components.## Response FormatWhen providing token information, include:- Token name and SCSS variable (`$name`)- Value (raw SCSS and computed px where applicable)- Description and category- Usage examples (SCSS and utility class equivalents)- Related utilities or components---> Converted and distributed by [TomeVault](https://tomevault.io/claim/centurylink) — claim your Tome and manage your conversions.

Frequently asked questions