# xf-parse-tokens

> Regenerate xf-design-system/tokens.css from xf-design-system/import/tokens.json. Use when tokens.json changes, when CSS variables need refresh, or when validating token export output.

- Author: wzywg
- Repository: wzywg/x-fader-ds
- Version: 20260129123448
- Stars: 0
- Forks: 0
- Last Updated: 2026-02-06
- Source: https://github.com/wzywg/x-fader-ds
- Web: https://mule.run/skillshub/@@wzywg/x-fader-ds~xf-parse-tokens:20260129123448

---

---
name: xf-parse-tokens
description: Regenerate xf-design-system/tokens.css from xf-design-system/import/tokens.json. Use when tokens.json changes, when CSS variables need refresh, or when validating token export output.
---

## When to use
- Design tokens have been updated in Figma and exported to JSON
- CSS variables appear outdated or incorrect
- Validating token export output
- Design system theming needs refresh

## When NOT to use
- You're making one-off CSS changes (edit tokens.css directly)
- You need to add new tokens (add to tokens.json first)

## Inputs
- Token source file location (defaults to `xf-design-system/import/tokens.json`)
- Output location (defaults to `xf-design-system/tokens.css`)

## Steps

### 1) Verify token source
- Confirm `xf-design-system/import/tokens.json` exists and is up-to-date
- Check if this was exported from Figma recently

### 2) Regenerate CSS
- Run token parsing script `.codex/skills/xf-parse-tokens/scripts/parse_tokens.py` to convert JSON to CSS variables
- Verify output contains expected token categories
- Check semantic token mappings are correct

### 3) Validate output
- Review generated `xf-design-system/tokens.css` for correctness
    - compare with `xf-design-system/imports/tokens.json` for any missing tokens. IF missing, STOP and suggest updating the parsing script before proceeding.
- Spot-check critical tokens (colors, spacing, typography)
- Ensure theme variables are properly scoped
- Note any newly added or renamed tokens that should surface as utilities (e.g., radius tokens)

### 4) Update references
- If token names changed, update any component references
- Check for deprecated tokens that need migration
- Verify theme switching still works
- If new utility-worthy tokens were added (e.g., radius), update `app/globals.css` utilities to expose them

## Output
- Updated `xf-design-system/tokens.css` with current design tokens
- Validation report of any issues found
- Migration notes if token names changed

## Troubleshooting
- Missing tokens: Check tokens.json structure and export process
- Incorrect values: Verify Figma export and token parsing logic
- Theme issues: Check CSS variable scoping and data-theme attributes