Token-Injector Skill Skill

Token-Injector Skill

Purpose

Input: tokens.json + target CSS files Output: Updated stylesheets with CSS variables

When to Use

When updating the project's design tokens in tokens.json.
When automating the conversion of raw tokens into production-ready CSS variables.
When replacing hardcoded style values with token-based custom properties.

Process

Parse tokens.json from asset packages
Generate CSS custom properties
Inject into :root or component scope
Replace hardcoded values with var() references
Validate no broken references

Token Mapping

tokens.json:

{
  "background": "#1A1714",
  "palette": {
    "solidarity_red": "--sys-color-solidarity-red",
    "ink_gold": "--sys-color-ink-gold",
    "activist_green": "--sys-color-kr-activist-smoke-green"
  }
}

Generated CSS:

:root {
  --color-asphalt-black: #1a1714;
  --color-solidarity-red: --sys-color-solidarity-red;
  --color-ink-gold: --sys-color-ink-gold;
  --color-activist-green: --sys-color-kr-activist-smoke-green;
}

Replacement Logic

Before:

.card {
  background: #1a1714;
  border: 1px solid #c45c4b;
}

After:

.card {
  background: var(--color-asphalt-black);
  border: 1px solid var(--color-solidarity-red);
}

Batch Mode

Process all asset tokens.json files:

token-injector --input /assets/*/tokens.json --output /frontend/src/styles/kerala-rage-tokens.css

Integration

Asset-Packager: Generates source tokens.json Claude Code: Executes injection on target files Stylelint: Validates output

Efficiency

Before: 30 min manual find-replace per component After: 2 min automated injection Savings: 93% reduction

Tokens → CSS variables → automatic injection. Manual replacement eliminated.

Agent Skills: Token-Injector Skill

Install this agent skill to your local

Skill Files