lab について
labは、実際のUIコンポーネントのバリエーションや状態をまとめて確認・調整する開発用スキルです。開発環境限定のルートを使い、項目のラベル付けや表示、製品環境への混入防止を確認します。
主な機能
- 01コンポーネントのバリエーションと状態を表示
- 02コピーではなく実際のコンポーネントを使用
- 03操作が必要な状態を開いて表示
- 04項目をソースの位置にリンク
- 05カスタムプロパティ用の調整コントロール
- 06製品環境からラボを除外
活用シーン
- 01コンポーネントの状態を一覧で確認
- 02コンポーネントのプロパティを調整
- 03開発用ラボの表示漏れを確認
インストール
コマンドをコピーしてターミナルで実行します。
npx skills add https:/インストール後、Claude Code で/labを入力して読み込まれたか確認します。
同梱ファイルagents/openai.yamllab.js
詳細
Lab
このスキルは、コンポーネントを確認するためのページを構築します。実際のコンポーネントのすべてのバリアントと状態を1つの画面に表示するため、ユーザーはアプリ内をクリックして回らずに調整できます。
すべての状態を表示し、偽装しない
この Lab はコピーではなく、実際のコンポーネントをレンダリングします。開いたメニューやホバーなど、クリックが必要な状態は強制的に開きます。Lab は開発用ページであり、リリースには含めません。
1つのアイデアについて新しい選択肢を試す場合は、prototypeを使用します。ページ上の値には、defaults、motion、colorおよびプロジェクトのトークンを使用します。
1. 状態を見つける
各コンポーネントを読み、バリアント、サイズ、状態を列挙します。状態には、ホバー、押下、フォーカス、開いた状態、選択済み、無効、読み込み中、空、エラーがあります。通常状態しか表示しない Lab はlab-every-stateです。
2. 1つのルートを作成する
/labなどの開発専用ルートを1つ追加し、実際のコンポーネントをインポートします。lab.jsをアプリにコピーし、そのルートで一度だけ読み込みます。コピーしたマークアップから作成した Lab はlab-real-componentsです。
3. 状態を強制的に開く
メニュー、ポップオーバー、ツールチップ、サブメニューは、制御用のプロパティまたはdata-*属性を使って開いた状態でレンダリングします。エントリーにforce="hover"などのforceを指定し、ホバーとフォーカスを維持します。表示するのにクリックが必要なメニューはlab-states-openです。ユーザーが両方を求めていない限り、アプリで現在使用中のテーマを使います。これはlab-one-themeです。
4. 各エントリーをソースにリンクする
lab.jsのヘッダーコメントにあるように、コンポーネント、状態、ソース行を示すlab-entryで各状態を囲みます。ラベルのないグリッドはlab-link-the-sourceです。ユーザーが値の調整を求めた場合は、各カスタムプロパティに範囲を指定したlab-tuneを追加します。
グリッド、ラベル、フィルター、コントロールはスキルに含まれているため、エントリーだけを記述します。独自のグリッド、ラベル、スタイルを持つ Lab ページはlab-shipped-frameです。
5. 開く
開発サーバーを起動して Lab を開きます。返信にルート名を書いても、実際には開いていない場合はlab-open-itです。
6. リリースに含めない
ルートとlab.jsを開発環境限定にするか、リリース前に両方を削除します。本番環境でアクセスできる Lab はlab-not-in-productionです。
対比
各チェック項目は対比になっています。問題のある行の隣に、それを置き換える行を示します。
| ルール | 問題のある例 | 置き換え |
|---|---|---|
lab-every-state | 通常状態のボタンのみ | 通常、ホバー、押下、フォーカス、無効、読み込み中 |
lab-real-components | 状態ごとにコピーしたマークアップ | インポートした実際のButton |
lab-states-open | トリガーの背後にあるメニュー | サブメニューを開いた<Menu open> |
lab-one-theme | 求められていないライトテーマとダークテーマの並列表示 | アプリで現在使用中のテーマ |
lab-link-the-source | ラベルのないグリッド | menu/index.tsxにリンクされたMenu / Submenu Open |
lab-shipped-frame | Lab のグリッドとラベルを一から記述 | lab.jsを読み込み、lab-entry要素だけを記述 |
lab-open-it | 「/labを追加しました」 | ユーザーのために開いた Lab |
lab-not-in-production | 本番サイトで公開中の/lab | 開発環境に限定されたルート |
報告
重大度。 コピーから作成された Lab、または本番環境でアクセス可能な Lab はHIGHです。状態の欠落、クリックが必要な状態、手書きの Lab ページはMEDIUMです。ラベルのないエントリー、またはユーザーのために開いていない Lab はLOWです。
形式。 根本原因ごとに1件の指摘を記載します。
file:line - [rule-id] what is wrong
続いてRule | Count | Severityの概要を記載します。HIGHが1件でも残っている場合はBlock、それ以外はApproveとします。レンダリングできなかった状態にはすべてNot verifiedと記載します。