Files
antigravity-skills-reference/skills/ui-tokens/SKILL.md
sickn33 2d3cfb40bb feat(skills): Add StyleSeed UI and UX skills (#479)
Add 11 source-only StyleSeed skills covering UI setup, page and pattern
scaffolding, token management, accessibility review, UX flows,
microcopy, audits, and feedback states.

Also credit bitjaru/styleseed in the community contributors list so
source attribution matches the new source_repo metadata.

Fixes #478

Co-authored-by: sickn33 <sickn33@users.noreply.github.com>
2026-04-08 18:46:16 +02:00

2.3 KiB

name, description, category, risk, source, source_repo, source_type, date_added, author, tags, tools
name description category risk source source_repo source_type date_added author tags tools
ui-tokens List, add, and update StyleSeed design tokens while keeping JSON sources, CSS variables, and dark-mode values in sync. design safe community bitjaru/styleseed community 2026-04-08 bitjaru
ui
tokens
design-system
theming
styleseed
claude
cursor
codex
gemini

UI Tokens

Overview

Part of 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 Practices

  • Add semantic intent, not one-off brand shades
  • Avoid token sprawl by extending existing scales first
  • Keep naming consistent with the rest of the system
  • Review contrast and accessibility when introducing new colors

Additional Resources