How do I install the Ss Tokens skill?

Run npx skillmds@latest add majiayu000/ss-tokens-2 in your terminal (requires Node.js), paste this page's agent-chat prompt into Claude, Cursor, or any MCP-connected agent, or download the SKILL.md file and copy it into your agent's skills directory.

Is Ss Tokens safe to use?

This skill has not completed SkillMD's automated safety review yet. Independent scanners report: SkillSpector: PASS, Skill Scanner: PASS. Capability flags: reads secrets. SkillMD never runs a skill's scripts for you; review the SKILL.md before installing.

Which AI agents work with Ss Tokens?

This skill is tagged as working with Claude Code, Claude.ai, OpenAI Codex. SKILL.md is an open format, so most agents that read a skills directory can load it too.

Is Ss Tokens free to use?

Yes. Installing skills from SkillMD is free, and the skill stays under its author's original license.

Who published Ss Tokens?

majiayu000 (@majiayu000) published this skill. Their other Agent Skills are listed on their SkillMD profile.

Ss Tokens by majiayu000 — Agent Skill

Name: Ss Tokens
Rating: 4.2 (5 reviews)
Author: majiayu000

Ss Tokens

Generate an accessible semantic palette from a key color, or view, add, and modify StyleSeed design tokens. Use when a user supplies a brand color, asks which colors combine well, needs light/dark theme roles, or needs token files for implementation.

majiayu000 Updated Sep 22, 2026 567 repo stars

File contents

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 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

`generate color` — Derive the system from one key color

Do not pick a second color by eye or copy a preset. Run the shared StyleSeed generator:

node <styleseed-root>/engine/color/generate-palette.mjs \
  --key-color "#276B5E" \
  --mode light \
  --character calm \
  --harmony auto \
  --temperature neutral \
  --out .styleseed/palette.json

Supported controls are light|dark mode, calm|balanced|vivid|deep character, auto|tonal|adjacent|contrast harmony, and neutral|warm|cool surface temperature. The generator preserves the key hue, maps chroma into sRGB without channel clipping, builds 11-step OKLCH primary/accent ramps, scores the accent against the key and reserved status hues, maps primitives to semantic roles, and adjusts fill lightness until text/action/focus pairs pass.

Use --format css for CSS variables or JSON for an auditable result. Never mark the palette valid unless valid is true and every item in contrast passes. In STYLESEED.md, persist Key color, Palette character, Palette mode, Palette harmony, and Surface temperature, then run $ss-resolve; the resolver emits the same .styleseed/palette.json and palette.css.

`list` — Show current tokens

Read and display the requested token file in a formatted table.

`add` — Add new token

Add the token to the JSON source file (tokens/*.json)
Add the CSS custom property to css/theme.css under :root
If it needs a Tailwind utility, add to the @theme inline block
If it has a dark mode variant, add to the .dark block

`update` — Modify existing token

Update the value in the JSON source file
Update the CSS custom property in theme.css
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
Treat preset recipes as maintained defaults, not the limit of available colors.
Character and role allocation are stronger design controls than complementary/triadic geometry alone.

---name: ss-tokens-2description: Generate an accessible semantic palette from a key color, or view, add, and modify StyleSeed design tokens. Use when a user supplies a brand color, asks which colors combine well, needs light/dark theme roles, or needs token files for implementation.---# 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 non-CSS token systems (Figma, native iOS/Android) — Tailwind v4 / CSS variables onlyAction: **$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### `generate color` — Derive the system from one key colorDo not pick a second color by eye or copy a preset. Run the shared StyleSeed generator:```bashnode <styleseed-root>/engine/color/generate-palette.mjs \ --key-color "#276B5E" \ --mode light \ --character calm \ --harmony auto \ --temperature neutral \ --out .styleseed/palette.json```Supported controls are `light|dark` mode, `calm|balanced|vivid|deep` character,`auto|tonal|adjacent|contrast` harmony, and `neutral|warm|cool` surface temperature.The generator preserves the key hue, maps chroma into sRGB without channel clipping, builds11-step OKLCH primary/accent ramps, scores the accent against the key and reserved status hues,maps primitives to semantic roles, and adjusts fill lightness until text/action/focus pairs pass.Use `--format css` for CSS variables or JSON for an auditable result. Never mark the palettevalid unless `valid` is true and every item in `contrast` passes. In `STYLESEED.md`, persist`Key color`, `Palette character`, `Palette mode`, `Palette harmony`, and `Surface temperature`,then run `$ss-resolve`; the resolver emits the same `.styleseed/palette.json` and `palette.css`.### `list` — Show current tokensRead and display the requested token file in a formatted table.### `add` — Add new token1. 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` block4. If it has a dark mode variant, add to the `.dark` block### `update` — Modify existing token1. Update the value in the JSON source file2. 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- Treat preset recipes as maintained defaults, not the limit of available colors.- Character and role allocation are stronger design controls than complementary/triadic geometry alone.

Frequently asked questions