Skill465 repo starsupdated 2d ago

ss-tokens

The ss-tokens skill manages design tokens in the StyleSeed design system by viewing, adding, or modifying values stored in JSON source files and their corresponding CSS implementations. Use it to create new tokens, update existing ones, or display current token inventories for colors, typography, spacing, radius, and shadows while maintaining synchronization between JSON definitions and CSS custom properties.

View source Repository: styleseed

Install in Claude Code

Copy

git clone --depth 1 https://github.com/bitjaru/styleseed /tmp/ss-tokens && cp -r /tmp/ss-tokens/engine/.claude/skills/ss-tokens ~/.claude/skills/ss-tokens

Then start a new Claude Code session; the skill loads automatically.

Definition

SKILL.md

# 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
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 (`--success` not `--green-500`)
- Colors should support both light and dark modes
- New tokens must be added to BOTH the JSON source AND the CSS implementation