optics-context について
optics-contextは、RoleModelのOptics CSSデザインシステムを扱うためのエージェントスキルです。インストール済みパッケージでトークンやコンポーネントを確認し、スタイル作成とテーマ設定を進める方法を示します。
主な機能
- 01インストール済みパッケージでトークンとコンポーネントを確認
- 02既存のOpticsコンポーネントを優先
- 03新規作成前にプロジェクトのクラスを再利用
- 04値の直書きではなくデザイントークンを使用
- 05オーバーライドとテーマ設定の指針
活用シーン
- 01CSS作成前のトークン名の確認
- 02ビューに使う既存コンポーネントの選定
- 03アプリ全体でのOpticsコンポーネントの変更
インストール
コマンドをコピーしてターミナルで実行します。
npx skills add https:/インストール後、Claude Code で/optics-contextを入力して読み込まれたか確認します。
同梱ファイルreferences/theming.md
詳細
Optics
Optics は RoleModel の CSS デザインシステムで、@rolemodel/optics として公開されています。インストール済みのパッケージが、存在するコンポーネントとトークンの正しい情報源です。トークンはバージョン間で変更されるため、名前を記憶から呼び起こすのではなく、パッケージを確認してください。
- トークン：
node_modules/@rolemodel/optics/dist/tokens/tokens.json（古いバージョンではdist/css/core/tokens/内の CSS） - コンポーネント：
node_modules/@rolemodel/optics/dist/css/components/*.css - バージョン：
package.jsonの@rolemodel/opticsエントリー - ドキュメント：https://docs.optics.rolemodel.design
- エージェント向けドキュメント：https://docs.optics.rolemodel.design/llms.txt（Markdown のインデックス。各コンポーネントのページに、各バリアントの HTML が記載されています）。最新リリースを対象としているため、名前はインストール済みのパッケージで確認してください。
CSS を記述する前に
- 適合する Optics コンポーネントがあれば使用します。 ブロックと修飾子を
dist/css/components/で確認してください。 - プロジェクトにクラスがあれば再利用します。
app/assets/stylesheets/を検索してください。 - どちらも適合しない場合に限り、新しいコンポーネントを記述します。
app/assets/stylesheets/components/{block}.cssに、bem-structureスキルに従って名前を付け、ネストして、ファイルごとに 1 つのブロックを記述してください。
Optics コンポーネントのアプリ全体での見た目を変更するには、app/assets/stylesheets/components/optics-overrides/{component}.css で上書きします。新しいブロックに分岐させないでください。
Optics にはユーティリティクラス（.flex、.gap-sm など。残りは dist/css/core/utilities.css にあります）も含まれています。RoleModel はビューでの使用を強く推奨していません。代わりに、BEM ブロックまたは要素を通じてスタイルを設定してください。
値を直書きせず、トークンを使う
色、間隔、フォント、角丸、境界線、影の値はすべてトークンを使用します。
| 代わりに | 次を使用 |
|---|---|
#fff、rgb(...)、white | var(--op-color-background)、var(--op-color-primary-base) |
padding: 12px | padding: var(--op-space-small) |
border: 1px solid #ddd | border: var(--op-border-width) solid var(--op-color-border) |
box-shadow: 0 1px 3px rgba(...) | box-shadow: var(--op-shadow-small) |
色付きの表面にテキストを置く場合は、その表面に対応する on- トークンを使います。--op-color-primary-base には --op-color-primary-on-base、--op-color-primary-plus-two には --op-color-primary-on-plus-two を使います。
適合するトークンがない場合は、アプリ独自のプレフィックスでプロジェクトトークンを定義します（「Your App」の場合は --ya-color-brand-accent）。--op- 以下に新しい名前を追加してはいけません。
注意点
- 不正な名前はエラーなしで失敗します。
var(--op_color_primary_base)、var(--color-primary-base)、var(--op-primary-color-base)はいずれも何も解決されず、エラーも発生しないままプロパティがフォールバックします。名前はtokens.jsonで確認してください。 - ダークモードでは Plus と Minus が反転します。 各段階は
light-dark()のペアです。ライトモードではplus-*がより明るく、minus-*がより暗くなります。ダークモードでは逆になるため、plus-maxは最も明るい段階から最も暗い段階に変わります。「明るい」か「暗い」かではなく、背景に対する役割で段階を選び、scale_color_tokens.cssで両方の値を確認してください。 - Optics には想像以上に多くのコンポーネントがあります。
btnとcardのほか、avatar、badge、tag、alert、modal、table、tab、switch、spinner、sidebar、side-panel、text-pair、segmented-controlなどが含まれています。ブロックを記述する前にdist/css/components/を確認し、確認できるのに「Optics のバージョンにあれば」と曖昧にしないでください。Optics の名前で独自ブロック（新しい.avatar { … }など）を記述しても、別のコンポーネントが作られるわけではありません。Optics のルールにマージされ、アプリ内のすべてのアバターが変更されます。Optics のブロックを使用し、変更はcomponents/optics-overrides/{component}.cssまたはプロジェクトの修飾子に記述してください。 - テーマの一部だけを上書きすると、スケールが壊れます。
--op-color-*の値を変更する前に、references/theming.md を参照してください。
テーマ設定
アプリ全体のブランドカラー、フォント、角丸、またはカラースケールを変更する場合は、references/theming.md を参照してください。