skills.rest
rmethodm
rmethodmCOMMUNITY
Explore all skills by this author →
GitHub

ss-tokens

View, add, and update design tokens across JSON sources and Tailwind CSS theme files.

Updated May 26, 2026
Search Tags:#design system#design tokens#tailwind css#theme#dark mode#colors#css variables
One-click install
npx skills add https://github.com/rmethodm/resumegen --skill ss-tokens-rmethodm
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: ss-tokens
Source: https://github.com/rmethodm/resumegen/tree/main/.agents/skills/ss-tokens
Command: npx skills add https://github.com/rmethodm/resumegen --skill ss-tokens-rmethodm

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve? Design tokens often live in multiple places (JSON source files and CSS theme files), and keeping them in sync manually leads to drift, inconsistent naming, and missing dark-mode variants. This Skill manages the full lifecycle of design tokens in the StyleSeed design system so changes stay consistent across every file. ## Core Features & Use Cases - List tokens: Read and display color, typography, spacing, radius, or shadow tokens from their JSON source files in a formatted table. - Add tokens: Insert a new token into the JSON source, the :root CSS custom properties, the @theme inline Tailwind block, and the .dark block when a dark-mode variant is needed. - Update tokens: Modify values in both the JSON source and css/theme.css, then check components for direct usage that may need updating. - Use Case: When a designer defines a new semantic success color, run the add action to register it in tokens/colors.json, css/theme.css, and the dark-mode block in one consistent pass. ## Quick Start Ask the assistant to add a new success color token to the design system with both light and dark mode values.

Frequently Asked Questions about ss-tokens

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I add a new design token to a Tailwind CSS theme?▼

Add the token to the JSON source file under tokens/, then add the CSS custom property to the :root block in css/theme.css. If it needs a Tailwind utility, also add it to the @theme inline block, and include a .dark variant when dark mode applies.

How do I list existing design tokens in a design system?▼

Use the list action with a token type such as color, spacing, shadow, radius, or typography. The Skill reads the corresponding JSON source file and displays the tokens in a formatted table.

Does this token manager support dark mode colors?▼

Yes, color tokens support both light and dark modes. When adding a token with a dark-mode variant, the value is added to the .dark block in css/theme.css alongside the :root definition.

When should I not use a design token manager?▼

Do not use it for applying tokens inside components, finding token violations in existing code, or defining brand-wide colors that have no skin yet. It also only supports Tailwind v4 and CSS variables, not Figma or native iOS/Android token systems.

Why should design tokens use semantic names instead of color names?▼

Semantic names like --success instead of --green-500 decouple intent from appearance, so the underlying value can change without renaming every usage. This Skill enforces semantic naming as a core rule when adding tokens.

Related Skills

Explore More Design & Creative Skills→
alfredoperezalfredoperez

create-theme

Generate Butai-compatible data-theme CSS files with validated token contracts.

Community
Advanced
shwilliamsonshwilliamson

css-standards

Enforce BEM naming, CSS variables, and responsive patterns for CSS/SCSS.

Community
Basic
imsaifimsaif
3

design-audit

Scan Tailwind UI components for hardcoded colors and design token violations.

Community
Advanced
openaiopenai
5.3k

expo-tailwind-setup

Configures Tailwind CSS v4 in Expo projects using NativeWind v5 and react-native-css.

Official
Intermediate