Lism CSS 実装ガイド

Lism CSSでUI・ページ・コンポーネントを実装する時の判断の起点。変更規模から実行レベルを判定し、実装前チェック→実装→提出前セルフチェックを通す。

公式ドキュメント: https://lism-css.com/docs/overview.md

バージョン: lism-css@0.28.1/@lism-css/ui@0.28.0時点の情報。プロジェクトのバージョンが異なる場合はユーザーに伝え、パッケージ更新またはこのスキルの更新を案内する。

実装フロー（厳守）

資料確認は、コード上の操作の直前に行う。どの操作の手前で何を読むかは「資料確認トリガー」に従う。

0. 実行レベル判定: 「事前チェック実行レベル」で不要/軽量/通常/値照合付きを決める。
1. 初期確認: SKILL.mdだけで実装しない。実装対象に明らかに関係する最小限の詳細ファイルを先に開き、実装プランに「初期確認した資料」を列挙する。リンク表を眺めただけは確認済みにしない。
2. 「目的別実装ガイド」でPrimitive/コンポーネントの候補を選ぶ。
3. 実装前チェック（C0–C8）を行い、初期確認した資料・使うPrimitive・コンポーネント・トークン・レスポンシブ方針を列挙した実装プランを出す。未読のまま採用できない判断は🔁を付け、「読む資料」を判断行に紐づける。
4. 「資料確認トリガー」に従い、各操作をコードに書く手前で対応資料を読み、🔁を✅または⏸へ解消する。
5. ⏸が残る項目（px丸め・任意色・挙動変更・公開クラス変更など）は、その部分を実装する前にユーザー確認する。確認が取れない場合は「判定記号」の⏸の項に従う。
6. 実装する。
7. （通常・値照合付きのみ）「提出前セルフチェック」で実装プランと実装を照合する。

C0–C8の詳細と実装プランの書式はreferences/authoring.md。

判定記号

実装プランの各行に付ける。使えるのは次の3記号と、✅への注記✅新規・✅例外・✅前提だけ。注記の組み合わせ（✅例外/前提等）や新しい記号・注記は作らない。該当する行は🔁として扱う。

✅例外の条件: antipatterns.mdの「直書きしてよい例外」に該当する場合だけ。行にはその項目の引用を添え、引用を書けない行は⏸。それ以外の例外化・丸め・新規トークンは⏸。許可リストに例外カテゴリを自作しない。「正確に再現して」等のユーザー指示や実測値であることは根拠にならない。デザイン値の既定の扱いはreferences/authoring.mdの「デザインデータ取り込みフロー」に従う。

⏸の確認が取れない場合（自律実行など）: 原則準拠側の選択肢（すり合わせ済みの方針があればそれ、無ければ入力種別ごとの既定動作。例: 最寄りトークンへの丸め）を選び、その行を✅前提（p="30"へ丸め）のように更新して進め、完了報告で論点と代替案を列挙する。px直書き・例外カテゴリの新設・公開クラス変更・破壊的変更など逸脱側の選択肢は選べず、⏸のまま実装しない。

lism-css-refactorスキルは同じ記号を別の意味（✅=触らない、⬜=意図的に残す等）で使う。リファクタ時はrefactor側の定義に従い、どちらの意味かを表の見出し等で明示する。

実装前チェック項目（C0–C8）

事前チェック実行レベル

.lism/の規約はreferences/verification.md。

「不要」の判定基準: 次のいずれも含まなければ「不要」。1つでも含めば「軽量」以上。

• 新規のc--*/b--*クラス
• 新規のCSS宣言（ファイル・<style>）
• 既存コードで使っていないPrimitive/Trait/コンポーネントの導入
• 新規のレスポンシブ切替
• トークン外の数値・色

不要/軽量/通常で迷っても上のレベルへ上げない。デザイン再現かどうかで迷う場合だけ「値照合付き」にする。通常でも該当しないCは省略し、表を形だけ埋めず実装に影響する項目だけ列挙する。

資料確認トリガー

左の操作をコードに書く手前で右の資料を読む。未読ならその判断は🔁にし、読んで✅にするか、判断できなければ⏸にする。🔁のままコードへ反映しない。「必要なら参照」で代替しない。

最小ゲート

常に守る。迷う・例外にする・既存実装と衝突する場合は該当資料を読み、🔁を✅または⏸へ解消する。

• 構造は<div>+素のCSSよりPrimitiveを優先する。候補は「目的別実装ガイド」から選ぶ。
• c--*/b--*はBlockをcamelCase、Elementを_ひとつ、Modifierを--ふたつで命名する。c--feature-cardや__は使わない。
• 独自クラスは2分類で命名する: ベーススタイルをCSS側で管理する共通基礎部品→b--、それ以外→c--。
• 独自CSSは必ず@layer lism-custom内に置く（b--のベーススタイルだけ@layer lism-block）。
• トークン外のpx/rem/em値を勝手に丸めたり直書きしたりしない。丸め・新規トークン・直書き例外は⏸（✅例外の条件は「判定記号」）。
• c--*では、単一要素にだけ効く宣言はCSSに書かず、まずLism Props/Property Classで表せないか確認する。CSSに残すのは擬似要素・子孫セレクタ・状態切替などProperty Classで書けない宣言だけ。名前として残すのは本体クラスc--nameだけで、CSSで参照しないElement（c--name_elem）は付けない。b--*のベーススタイルは対象外で、トークンを使って@layer lism-blockに書いてよい（BP切替・hover・例外的な調整はProperty Class）。
• レスポンシブ値は、container query運用なら必要なisContainer祖先を確認する。
• 状態はdata-*/ARIA、見た目バリエーションはBlockと同じプレフィックスのModifier（c--name--variant/b--name--variant）で表す。is--activeのようにTrait Classを状態名に流用しない。

目的別実装ガイド

やりたいことから候補を引く。複数候補の行は括弧内の基準で使い分ける。

提出前セルフチェック

通常・値照合付きレベルだけ行う。不要・軽量では、チャット内の簡易確認も評価サブエージェントへの委任もしない。

サブエージェント／タスク委任機能が使える環境では、この節の照合を実装した本人ではなく読み取り専用の評価サブエージェントに委任する（指示テンプレ・報告書式・再評価ループはreferences/verification.md）。報告は.lism/review.mdへ保存し、違反ゼロになるまで修正→再評価を繰り返してから提出し、完了報告で.lism/review.mdを参照する。委任できない環境では、本人が同じ照合をこの節の順に行う。

まず実装プランと実装を1行ずつ照合し、差分を「計画変更（意図的）/実装漏れ（直す）/要確認（再び確認が必要）」に分類する。その後、次を確認する。

プロセス照合

• 実装プラン内の🔁が✅または⏸へ解消されているか。🔁のままコードに反映した判断がないか。
• 資料確認ログの各行が実装プランの判断項目と対応しているか。未読のまま採用したPrimitive/トークン/命名/レスポンシブ判断がないか。

ルール照合

• 「最小ゲート」の各項目に違反していないか。
• antipatterns.mdとantipatterns-layout.mdのTOCを開き、実装コードに該当しうる項目を1つずつ照合する。リンク表を眺めただけは確認済みにしない。

プラン再審査（プラン段階で✅にした逸脱は差分照合では検出できないため、別に行う）

• ✅例外を含む✅判定を、最小ゲート・antipatterns.mdの「直書きしてよい例外」・すり合わせ済みの値マッピング方針に再照合する。許可リスト外の✅例外は⏸へ戻す。
• 値照合付きでは、.lism/plan.mdにトークン差分表（差分列付き）があるか確認する。無ければ実装プランは無効。差分表を作って照合をやり直す。スケール前提（画像の書き出し倍率等）が実測・整合チェックで検証済みかも確認する（未検証なら差分表全体が無効）。
• 実行レベル判定が妥当だったか見直す（デザイン再現なのに「値照合付き」へ上げず、差分表を回避していないか）。

個別確認

• @lism-css/uiの既存コンポーネントで置き換えられないか。
• 同じProperty Classの組み合わせが3箇所以上ならコンポーネント化を検討したか。
• 既存の命名・レイヤー・ファイル配置に合っているか。
• 値照合付きでは、レンダリング結果の確認を完了報告の前提にする。確認できない環境では完了報告にユーザーへの目視確認依頼を含める。HTTPステータスやビルド成功だけで完了扱いにしない。

詳細リファレンス

クラス単位の詳細リファレンス

ファイル名はクラス名そのまま（primitives/l--stack.md等）。対応コンポーネント名はcomponents-core.md。

• primitives/: l--box l--flex l--stack l--cluster l--grid l--flow l--center l--frame l--columns l--tileGrid l--autoColumns l--switchColumns l--withSide a--icon a--divider a--spacer a--decorator
• trait-class/: is--container is--wrapper is--layer is--boxLink has--transition has--gutter has--snap has--mask
• property-class/: all-props.md（全Prop表）、bd.md（-bd/-bd-{side}系）、hov.md（-hov:*系）、max-sz.md（-max-sz:full/bleed）

このスキルファイル自身のアップデート方法

スキル更新の依頼にはlism-cli skill addまたはlism-cli skill updateを案内する。最新はGitHubリポジトリのskills/lism-css-guideで確認する。