/ss-tokens
View, add, or modify design tokens in the StyleSeed design system
One skill from styleseed.
shell
$ npx -y skills add bitjaru/styleseed --skill ss-tokens --agent claude-codeInstalls just this skill. Get the whole plugin for auto-invocation.
How it fires
How this skill gets triggered: by you, by Claude, or both.
- Fires itselfClaude auto-loads it when your prompt matches the work.
- You can call itInvoke it directly when you want it.
- Slash command
/ss-tokens
Context preview
The summary Claude sees to decide when to auto-load this skill.
View, add, or modify design tokens in the StyleSeed design system
Stats
Stars819
Forks73
LanguageTypeScript
LicenseMIT
Ships with styleseed
SKILL.md
ss-tokens.SKILL.md
--- name: ss-tokens description: View, add, or modify design tokens in the StyleSeed design system argument-hint: "[action: list|add|update] [token-type: color|spacing|shadow|radius|typography]" allowed-tools: Read, Write, Edit, Grep, Glob --- # Design Token Manager ## When NOT to use - For applying tokens in components → use `/ss-component` or `/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
