ss-tokens

Featured

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.

Web & Frontend 950 stars 88 forks Updated today MIT

Install

View on GitHub

Quality Score: 96/100

Stars 20%
99
Recency 20%
100
Frontmatter 20%
70
Documentation 15%
100
Issue Health 10%
50
License 10%
100
Description 5%
100

Skill Content

# 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: ```bash node <installed-ss-tokens>/scripts/generate-palette.mjs \ --key-color "#276B5E" \ --mode light \ --ch...

Details

Author
bitjaru
Repository
bitjaru/styleseed
Created
5 months ago
Last Updated
today
Language
JavaScript
License
MIT

Integrates with

Bundled in these plugins

Similar Skills

Semantically similar based on skill content — not just same category