mcpField
S
ss-tokens

ss-tokens

github.com/bitjaruデザイン・UI993831 回インストール1 日前に更新
リポジトリ

ss-tokens について

ss-tokensは、Tailwind v4とCSS変数を使うプロジェクト向けのStyleSeedデザイントークン管理スキルです。パレット生成に加え、JSONソースとCSS実装を同期して変更できます。

主な機能

  1. 01基準色からパレットを生成
  2. 02現在のデザイントークンを一覧表示
  3. 03トークンの追加・更新
  4. 04JSONとCSSの同期
  5. 05ライト・ダークモードの色に対応

活用シーン

  1. 01プロジェクトのカラーパレット生成
  2. 02既存トークン設定の確認
  3. 03スペースやシャドウの追加
  4. 04コンポーネント用トークンの更新

インストール

コマンドをコピーしてターミナルで実行します。

$npx skills add https://github.com/bitjaru/styleseed --skill ss-tokens

インストール後、Claude Code で/ss-tokensを入力して読み込まれたか確認します。

同梱ファイルscripts/generate-palette.mjsscripts/generator.mjs

詳細

このワークフローの前に、セッションごとに一度だけ更新の事前チェックを実行してください。

デザイントークンマネージャー

レジストリ優先のアーティファクト境界

.styleseed/project.json と .styleseed/artifacts/index.json が存在する場合は、まず要求されたアーティファクト ID を解決し、その後 .styleseed/bundles/<artifact-id>.md と .styleseed/manifests/<artifact-id>.json のみを読み取ってください。レジストリを持つプロジェクトでは、グローバルなレガシーバンドルにフォールバックしないでください。レガシープロジェクトでは、レジストリが存在しない場合に限り .styleseed/effective-rules.md を使用できます。

使用しない場合

  • コンポーネントにトークンを適用する場合 → /ss-component または /ss-pattern を使用してください
  • 既存コード内のトークン違反を見つける場合 → /ss-lint を使用してください
  • CSS 以外のトークンシステム（Figma、ネイティブ iOS/Android）の場合 — Tailwind v4 / CSS 変数のみ

アクション：$0 | トークンタイプ：$1 引数：$ARGUMENTS

トークンファイルの場所

タイプJSON ソースCSS 実装
色tokens/colors.jsoncss/theme.css :root + @theme inline
タイポグラフィtokens/typography.jsoncss/fonts.css + css/base.css
余白tokens/spacing.jsonTailwind ユーティリティ（カスタム CSS は不要）
角丸tokens/radii.jsoncss/theme.css @theme inline
シャドウtokens/shadows.jsoncss/theme.css :root

手順

generate color — 1 つのキーカラーからシステムを導出する

目視で 2 つ目の色を選んだり、プリセットをコピーしたりしないでください。共有の StyleSeed ジェネレーターを実行してください。

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

ジェネレーターはスキルのみのインストール向けにこのスキル内にバンドルされており、リポジトリ生成時に正規の engine/color ソースから決定論的にミラーリングされます。

サポートされる制御項目は、light|dark モード、calm|balanced|vivid|deep の特性、auto|tonal|adjacent|contrast のハーモニー、neutral|warm|cool のサーフェス温度です。 ジェネレーターはキーカラーの色相を維持し、チャンネルをクリッピングせずに彩度を sRGB にマッピングし、11 段階の OKLCH プライマリー／アクセントランプを構築します。また、アクセントとキーカラーおよび予約済みのステータス色を照合してスコアを算出し、プリミティブをセマンティックロールにマッピングし、テキスト／アクション／フォーカスの各ペアが基準を満たすまで塗りの明度を調整します。

CSS 変数には --format css を使用し、監査可能な結果には JSON を使用してください。valid が true で、contrast のすべての項目に合格していない限り、パレットを有効として扱わないでください。STYLESEED.md に Key color、Palette character、Palette mode、Palette harmony、Surface temperature を保存し、その後 $ss-resolve を実行してください。リゾルバーは同じ .styleseed/palette.json と palette.css を出力します。

list — 現在のトークンを表示する

要求されたトークンファイルを読み取り、整形された表で表示してください。

add — 新しいトークンを追加する
  1. JSON ソースファイル（tokens/*.json）にトークンを追加します
  2. css/theme.css の :root 配下に CSS カスタムプロパティを追加します
  3. Tailwind ユーティリティが必要な場合は、@theme inline ブロックに追加します
  4. ダークモード用のバリアントがある場合は、.dark ブロックに追加します
update — 既存のトークンを変更する
  1. JSON ソースファイルの値を更新します
  2. theme.css の CSS カスタムプロパティを更新します
  3. 直接使用されていて更新が必要なコンポーネントがないか確認します

ルール

  • JSON と CSS は常に同期させてください
  • 説明的な名前ではなく、セマンティックな名前を使用してください（--green-500 ではなく --success）
  • 色はライトモードとダークモードの両方に対応させてください
  • 新しいトークンは JSON ソースと CSS 実装の両方に追加してください
  • プリセットレシピは維持されるデフォルトとして扱い、使用可能な色の上限とはみなさないでください。
  • 特性とロールの割り当ては、補色／三角形の幾何学的配置だけの場合よりも強力なデザイン制御です。

コメント

Markdown 対応