css-tokens

SKILL.md

| Button | --color-primary, --space-2/4, --radius-md, --text-sm | | Input | --color-border, --space-2/3, --radius-md, --text-base | | Card | --color-surface, --space-4, --radius-lg, --shadow-md | | Badge | --color-, --space-1/2, --radius-full, --text-xs |

一貫したスタイルを実現するために、CSS カスタム プロパティを使用してトークン システムを設計します。カラー パレット、間隔スケール、タイポグラフィ システム、およびテーマ (ダーク/ライト モード) の作成に使用します。デザイン トークン、CSS 変数、テーマ、カラー システム、間隔スケール、または一貫したスタイルのリクエストをトリガーします。 ソース: ibutters/claudecodeplugins。

ターミナルまたはコマンドラインツール（Terminal、iTerm、Windows Terminal など）を開きます このコマンドをコピーして実行します: npx skills add https://github.com/ibutters/claudecodeplugins --skill css-tokens インストール後、スキルは自動的に AI コーディング環境に設定され、Claude Code や Cursor で使用できるようになります

安全認証済み、信頼性の高いコード ワンクリックインストール、簡単設定 Claude Code、Cursor などに対応

原文を見る