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.

By bitjaru · 713 installs

npx skills add bitjaru/styleseed --skill ss-tokens

Source repository · Upstream listing

Design Token Manager Registry first artifact boundary When .styleseed/project.json and .styleseed/artifacts/index.json exist, resolve the requested artifact ID first, then read only .styleseed/bundles/<artifact id .md and .styleseed/manifests/<artifact id .json . Never fall back to the global legacy bundle for a registry project. Legacy projects may use .styleseed/effective rules.md only when no registry exists. 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: The generator is bundled inside this skill for skills only installations and is deterministically mirrored from the canonical engine/color source during repository generation. 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 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 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.