ui-tokens

Solid

List, add, and update StyleSeed design tokens while keeping JSON sources, CSS variables, and dark-mode values in sync.

Web & Frontend 39,227 stars 6374 forks Updated today MIT

Install

View on GitHub

Quality Score: 97/100

Stars 20%
100
Recency 20%
100
Frontmatter 20%
70
Documentation 15%
96
Issue Health 10%
50
License 10%
100
Description 5%
100

Skill Content

# UI Tokens ## Overview Part of [StyleSeed](https://github.com/bitjaru/styleseed), this skill manages design tokens without letting the source-of-truth files drift apart. It is meant for teams using the Toss seed's JSON token files and CSS implementation together. ## When to Use - Use when you need to inspect the current token set - Use when you want to add a new color, shadow, radius, spacing, or typography token - Use when you need to update a token and propagate the change safely - Use when the project has both JSON token files and CSS variables that must stay aligned ## How It Works ### Supported Actions - `list`: show the current tokens in a human-readable form - `add`: introduce a new token and wire it through the implementation - `update`: change an existing token value and audit the downstream usage ### Typical Source-of-Truth Split For the Toss seed: - JSON under `tokens/` - CSS variables and theme wiring under `css/theme.css` - typography support in the font and base CSS files ### Rules - keep JSON and CSS in sync - prefer semantic names over descriptive names - provide dark-mode support where relevant - update the token implementation, not just the source manifest - check for direct component usage that might now be stale ## Output Return: 1. The requested token inventory or change summary 2. Every file touched 3. Any affected components or utilities that should be reviewed 4. Follow-up actions if the new token requires broader adoption ## Best Practi...

Details

Author
sickn33
Repository
sickn33/antigravity-awesome-skills
Created
4 months ago
Last Updated
today
Language
Python
License
MIT

Similar Skills

Semantically similar based on skill content — not just same category

Web & Frontend Solid

design-system-tokens

Design token management with W3C Design Token Community Group specification, three-tier token hierarchy (global/alias/component), OKLCH color spaces, Style Dictionary transformation, and dark mode theming. Use when creating design token files, implementing theme systems, managing token versioning, or building design-to-code pipelines.

179 Updated today
yonatangross
Web & Frontend Listed

design-tokens

Design tokens and CSS custom properties: theme systems, dark mode, component libraries. Use when implementing design systems or user mentions tokens, CSS variables, or theming.

35 Updated today
laurigates
AI & Automation Listed

design-tokens

Generate design token systems exportable to CSS variables, Tailwind config, JSON, and Style Dictionary — covering colour, typography, spacing, radius, shadow, and motion

3 Updated 4 days ago
anthril
AI & Automation Solid

design-tokens

Design token management, generation, and multi-platform support.

1,034 Updated today
a5c-ai
Web & Frontend Listed

theming-components

Provides design token system and theming framework for consistent, customizable UI styling across all components. Covers complete token taxonomy (color, typography, spacing, shadows, borders, motion, z-index), theme switching (CSS custom properties, theme providers), RTL/i18n support (CSS logical properties), and accessibility (WCAG contrast, high contrast themes, reduced motion). This is the foundational styling layer referenced by ALL component skills. Use when theming components, implementing light/dark mode, creating brand styles, customizing visual design, ensuring design consistency, or supporting RTL languages.

368 Updated 5 months ago
ancoleman