Synchronize UI Design Tokens Across JSON and CSS
Manages StyleSeed design tokens: list, add, and update colors, typography, spacing, radius, and shadows across JSON and CSS.
Why it matters
Ensure design tokens in JSON and CSS are always in sync, preventing drift and maintaining consistency across your UI. This skill helps manage token updates safely and efficiently.
Outcomes
What it gets done
Inspect the current set of design tokens.
Add new color, shadow, radius, spacing, or typography tokens.
Update existing tokens and audit downstream usage.
Keep JSON token files and CSS variables aligned.
Install
Add it to your toolbox
Run in your project directory:
curl -fsSL https://spark.entire.vc/get/ag-ui-tokens | bash Overview
Design Token Manager
A StyleSeed design-token management skill with list, add, and update actions that keep JSON token sources and their CSS/Tailwind implementations in sync. Use when viewing, adding, or modifying design tokens themselves; not for applying tokens in components or linting token violations, which route elsewhere.
What it does
Manages design tokens in the StyleSeed design system's CSS-variable and Tailwind v4 setup, through three actions. list reads and displays a requested token file as a formatted table. add adds a new token to the JSON source file, adds the matching CSS custom property under :root in theme.css, adds a Tailwind utility to the @theme inline block if needed, and adds a dark-mode variant to the .dark block if the token has one. update changes the value in the JSON source file, updates the CSS custom property in theme.css, and checks all components for direct usage that might need updating. It documents the token file map: colors live in tokens/colors.json implemented via theme.css's :root and @theme inline; typography lives in tokens/typography.json implemented via fonts.css and base.css; spacing lives in tokens/spacing.json via plain Tailwind utilities with no custom CSS needed; radius lives in tokens/radii.json and shadows in tokens/shadows.json, both implemented via theme.css's :root/@theme inline. Its rules require JSON and CSS to always stay in sync, semantic token names instead of descriptive ones such as --success rather than --green-500, light and dark mode support for colors, and every new token to be added to both the JSON source and the CSS implementation.
When to use - and when NOT to
Use it when viewing, adding, or modifying design tokens in the StyleSeed design system. Do not use it for applying tokens inside components, which routes to /ss-component or /ss-pattern, for finding token violations in existing code, which routes to /ss-lint, for brand-wide color or font choices that don't exist yet (define a skin first, then add tokens), or for non-CSS token systems like Figma or native iOS/Android, since this skill covers Tailwind v4 and CSS variables only.
Inputs and outputs
Input is a token action - list, add, or update - and a token type: colors, typography, spacing, radius, or shadows. Output is a formatted token table for list, or synchronized edits across the matching tokens/*.json source file and its CSS implementation file for add and update.
Integrations
Operates on the StyleSeed design system's dual token representation: JSON source files under tokens/ and their CSS implementations in theme.css, fonts.css, and base.css, built on Tailwind v4's @theme inline block and CSS custom properties.
Who it's for
Designers and frontend engineers maintaining the StyleSeed design system's token layer who need list, add, and update operations that keep the JSON source and CSS implementation from drifting apart.
FAQ
Common questions
Discussion
Questions & comments · 0
Sign In Sign in to leave a comment.