Ss Tokens
- 225 installs
- 868 repo stars
- Updated August 3, 2026
- bitjaru/styleseed
ss-tokens is a Claude Code skill that views, adds, and updates design tokens in the StyleSeed design system across JSON sources and CSS variables.
About
This skill views, adds, and updates design tokens (colors, typography, spacing, radius, shadows) in the StyleSeed design system. A developer uses it while building UI to keep the JSON token sources and their CSS custom-property implementations in sync. It targets Tailwind v4 and CSS variables only.
- Lists, adds, and updates StyleSeed design tokens across JSON source and CSS
- Keeps tokens/*.json and css/theme.css in sync for light and dark modes
- Enforces semantic token names over descriptive ones
Ss Tokens by the numbers
- 225 all-time installs (skills.sh)
- Ranked #905 of 1,880 Design & UI/UX skills by installs in the Skillselion catalog
- Data as of Aug 5, 2026 (Skillselion catalog sync)
ss-tokens capabilities & compatibility
Free; no API keys required.
- Capabilities
- design tokens · theme management
- Use cases
- frontend · ui design
- Pricing
- Free
What ss-tokens says it does
View, add, or modify design tokens in the StyleSeed design system
Use semantic names, not descriptive names (`--success` not `--green-500`)
For non-CSS token systems (Figma, native iOS/Android) — Tailwind v4 / CSS variables only
npx skills add https://github.com/bitjaru/styleseed --skill ss-tokensAdd your badge
Show developers this skill is listed on Skillselion. Paste this into your README.
| Installs | 225 |
|---|---|
| repo stars | ★ 868 |
| Last updated | August 3, 2026 |
| Repository | bitjaru/styleseed ↗ |
What it does
Manage StyleSeed design tokens by adding or updating a color, spacing, radius, shadow, or typography value across JSON and CSS.
Who is it for?
Keeping StyleSeed color, spacing, radius, shadow, and typography tokens consistent between JSON and CSS.
Skip if: Applying tokens in components, linting token violations, or non-CSS token systems like Figma or native iOS/Android.
When should I use this skill?
You need to list, add, or update a StyleSeed design token.
What you get
Tokens stay synchronized across tokens/*.json and css/theme.css with semantic names and dark-mode variants.
- Updated token JSON files
- Updated CSS custom properties in theme.css
By the numbers
- 5 token types managed (colors, typography, spacing, radius, shadows)
Files
Design Token Manager
When NOT to use
- For applying tokens in components → use
/ss-componentor/ss-pattern - For finding token violations in existing code → use
/ss-lint - For brand-wide color/font choices that don't exist yet — define a skin first, then add tokens
- For non-CSS token systems (Figma, native iOS/Android) — Tailwind v4 / CSS variables only
Action: $0 | Token type: $1 Arguments: $ARGUMENTS
Token File Locations
| Type | JSON Source | CSS Implementation |
|---|---|---|
| Colors | tokens/colors.json | css/theme.css :root + @theme inline |
| Typography | tokens/typography.json | css/fonts.css + css/base.css |
| Spacing | tokens/spacing.json | Tailwind utilities (no custom CSS needed) |
| Radius | tokens/radii.json | css/theme.css @theme inline |
| Shadows | tokens/shadows.json | css/theme.css :root |
Instructions
list — Show current tokens
Read and display the requested token file in a formatted table.
add — Add new token
1. Add the token to the JSON source file (tokens/*.json) 2. Add the CSS custom property to css/theme.css under :root 3. If it needs a Tailwind utility, add to the @theme inline block 4. If it has a dark mode variant, add to the .dark block
update — Modify existing token
1. Update the value in the JSON source file 2. Update the CSS custom property in theme.css 3. Check all components for direct usage that might need updating
Rules
- Always keep JSON and CSS in sync
- Use semantic names, not descriptive names (
--successnot--green-500) - Colors should support both light and dark modes
- New tokens must be added to BOTH the JSON source AND the CSS implementation
Related skills
Frontend DesignGenerate distinctive, production-grade frontend interfaces and components that avoid generic AI aesthetics.716k165k
Web Design GuidelinesAutomatically audit frontend code against the latest Vercel Web Interface Guidelines for consistency, accessibility, and UX quality.498k29.6k
Lark WhiteboardGenerate valid Lark Whiteboard (Feishu Board) documents with correctly placed connectors, automatic routing, and proper schema compliance directly from agent inst389k16k
Sleek Design Mobile AppsGenerate mobile app screens and UI from plain English descriptions using the Sleek.design API.315k476
Design Taste FrontendOverride generic LLM frontend output with intentional, metric-driven UI/UX taste.301k69.4k
Ui Ux Pro MaxGet instant, high-quality UI/UX decisions, component recommendations, style guidance, and code improvements across web and mobile projects.290k112kFAQ
Does ss-tokens work with Figma or native mobile token systems?
No. It supports Tailwind v4 and CSS variables only, not Figma or native iOS/Android token systems.
Where does ss-tokens store tokens?
In JSON sources under tokens/ (colors.json, typography.json, spacing.json, radii.json, shadows.json) and their CSS implementation in css/theme.css, css/fonts.css, and css/base.css.