mcpField
C
css-tokens

css-tokens

github.com/schalkneethlingデザイン・UI753 回インストール27 週間前に更新
リポジトリ

css-tokens について

css-tokensは、WebプロジェクトにCSSカスタムプロパティの基本トークンセットを追加するスキルです。タイポグラフィ、間隔、色、境界線、重なり順、トランジションを扱い、ファイルを書き込む前に保存先を確認します。

主な機能

  1. 01タイポグラフィと間隔のスケール
  2. 02oklch()によるライト・ダークカラー
  3. 03角丸とz-indexのトークン
  4. 04標準トランジション時間
  5. 05書き込み前に保存先を確認

活用シーン

  1. 01Webプロジェクトに基本トークンを追加
  2. 02既存のスタイルディレクトリにCSSトークンファイルを作成
  3. 03ライト・ダークモードの色変数を設定

インストール

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

$npx skills add https://github.com/schalkneethling/webdev-agent-skills --skill css-tokens

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

同梱ファイルREADME.mdreferences/tokens.css

詳細

CSS デザイントークンスキル

目的

このスキルでは、Web プロジェクトの一貫したデザイン基盤を確立するための、包括的な CSS デザイントークン（カスタムプロパティ）一式を提供します。ユーザーから、CSS 用の基本トークンシステムやデザイントークンを求められた場合に、このスキルを使用してください。

このスキルを使用する場合

ユーザーから次のような依頼があった場合に、このスキルを使用してください。

  • 「プロジェクトにデザイントークンを追加して」
  • 「CSS トークンを設定して」
  • 「トークンファイルを作成して」
  • 「基本の CSS 変数を追加して」
  • 基本となる CSS カスタムプロパティに関する同様の依頼

このスキルを使用しない場合

  • ユーザーがすでにデザイントークンシステムを使用している場合（代わりに既存システムの変更を提案してください）
  • ユーザーがフレームワーク固有のトークンシステム（例：Tailwind の設定、CSS-in-JS トークン）を明示的に求めている場合
  • ユーザーが一部のトークンだけを必要としている場合（特定のカテゴリの抽出を提案してください）

このスキルが提供するもの

包括的なデザイントークンシステムを備えた完全な tokens.css ファイルです。

  • タイポグラフィ：フォントファミリー、ウェイト、モジュール式のサイズスケール（xs から 4xl まで）
  • スペーシング：4px から 96px までの一貫したサイズスケール。ピクセル値を名前に使用します
  • カラー：oklch() 色空間を使用した、知覚的に均一なカラー。サーフェス、テキスト、ブランド、インタラクティブ要素、セマンティックな状態に、ライトモードとダークモードのバリエーションを用意しています
  • ボーダー：サイズスケール（sm から full まで）を基にした角丸の値
  • Z-index：重ね合わせコンテキスト用の名前付きレイヤー（ドロップダウン、モーダル、トーストなど）
  • トランジション：標準的なタイミング値（fast、base、slow）

CSS カスタムプロパティ構文 var(--token-name) を使って、個々のトークンを参照できます。

トークンの内容

トークンの完全な定義は、このスキルのディレクトリ内にある references/tokens.css にあります。このファイルには、カテゴリごとに整理されたすべての CSS カスタムプロパティ宣言が含まれています。

このスキルの使用方法

1. CSS ディレクトリを検出する

プロジェクト内で、一般的な名前の CSS ディレクトリを検索します。

  • css/
  • styles/
  • assets/css/
  • stylesheets/
  • src/css/
  • src/styles/

ルート、src/、public/、assets/ など、複数の階層にあるディレクトリを確認します。

2. ユーザーに場所を確認する

CSS ディレクトリが見つかった場合：

見つかった場所を提示し、確認を求めます。

I found a CSS directory at [path]. Should I add the design tokens to this directory in a file named `tokens.css`?

If you'd like a different location or filename, please specify both.

CSS ディレクトリが見つからなかった場合：

ユーザーに直接尋ねます。

I couldn't find an existing CSS directory in your project. Please specify:
1. The directory path where you'd like the tokens file (I can create it if needed)
2. The filename (e.g., `tokens.css`, `design-tokens.css`)
3. トークンファイルを書き込む

場所の確認が取れたら、指定された場所に完全なトークンファイルを書き込みます。このスキルのディレクトリ内にある references/tokens.css の内容をそのまま使用してください。

4. インポート方法をユーザーに知らせる

ファイルの書き込みが成功したら、ユーザーに次のように伝えます。

✓ デザイントークンを [full-path] に書き込みました

プロジェクトでこれらのトークンを使用するには、このファイルをメインの CSS ファイルまたは HTML にインポートしてください。

CSS の場合：

@import url('path/to/tokens.css');

HTML の場合：

<link rel="stylesheet" href="path/to/tokens.css" />

これで、プロジェクト全体で CSS カスタムプロパティとしてトークンを使用できます（例：var(--color-primary)、var(--size-16)）。

カスタマイズ

これらのトークンは確かな基盤となりますが、プロジェクトに合わせてカスタマイズすることを想定しています。

  • ブランドに合わせてカラー値を調整する
  • デザインシステムに合わせてスペーシングスケールを変更する
  • 必要に応じてプロジェクト固有のトークンを追加する
  • アニメーションやシャドウなどのトークンを追加し、カテゴリを拡張する

これは足場を構築するスキルです。初期構造を設定しますが、その後の変更には対応しません。

重要な注意事項

  • ユーザーが指定していない場合、ディレクトリ構成やファイル名を決めつけないでください
  • 書き込む前に、必ず場所を確認してください
  • ユーザーの確認が取れた場合は、必要に応じてディレクトリを作成してください
  • トークンファイルには、prefers-color-scheme を使用したライトモードとダークモードの両方のカラー設定が含まれます
  • oklch() 色空間を使うことで、知覚的に均一なカラーを実現し、アクセシビリティと一貫性を向上できます

コメント

Markdown 対応