match について
実際の参照元、測定値、状態に基づいて UI を再構築するスキルです。指定された部分だけを再現し、視覚的な差異を記録する手順を示します。
主な機能
- 01実際の参照元を確認
- 02計算済みスタイルと寸法を取得
- 03状態と遷移を洗い出す
- 04指定部分だけを再構築
- 05キャプチャを並べて比較
- 06差異と検証状況を報告
活用シーン
- 01ライブ画面を基にサイドバーを再現
- 02測定値を使ってデザインファイルを再現
- 03ホバー、読み込み、エラー状態を確認
- 04残る視覚差異を記録
インストール
コマンドをコピーしてターミナルで実行します。
npx skills add https:/インストール後、Claude Code で/matchを入力して読み込まれたか確認します。
同梱ファイル
SKILL.md と一緒にインストールされる参考資料やスクリプト。
compare.htmlLICENSEagents/openai.yaml詳細
マッチ
このスキルは、ユーザーが別のアプリ、サイト、デザインで指定したものを再構築します。見た目の記憶ではなく、実際のソースとそこで測定した値を基に作業します。
一対一とは、値が正確であること
ユーザーが「一対一で」「正確に」「これと同じように」と言った場合、すべての値は参照元から取得します。値を推測した場合は、その事実を指摘します。ユーザーが「インスピレーションを得て」と言った場合は、コンセプトを取り入れ、プロジェクト独自のトークンを使用します。
メッセージにアプリ、URL、スクリーンショット、デザインファイル、デザイン参考ライブラリが含まれる場合は、必ずこのスキルを使います。プロジェクトのパーツを使って構築する作業はreuseに属します。結果の確認はverifyで行います。
1. 実際のソースを開く
参照元そのものを開きます。ライブページ、インストール済みアプリ、デザインファイル、スクリーンショットのいずれかです。記憶を基に再構築するのはmatch-inspect-the-sourceです。参照元がネイティブアプリまたはデスクトップアプリの場合は、ウェブサイトではなく、そのアプリを確認します。デスクトップアプリをマーケティングページで評価するのはmatch-same-platformです。
2. 値を読み取る
ソースから計算済みスタイル、デザイントークン、測定値を読み取ります。サイズ、間隔、角丸、色、書体、時間、イージングを書き留めます。目視で決めた角丸はmatch-read-computed-valuesです。
3. 状態を洗い出す
参照元にある状態をすべて列挙します。ホバー、押下、フォーカス、開いた状態、空の状態、読み込み中、エラー、選択済み、無効状態です。次に状態間の遷移を列挙します。初期状態だけを再構築するのはmatch-inventory-statesです。
4. 指定されたパーツを再現する
ユーザーが指定したパーツだけを再構築し、その周囲は変更しません。サイドバーを求められたのにレイアウト全体をコピーするのはmatch-copy-the-named-partです。ブランドではなく、アイデアを取り入れます。ユーザーが求めていない限り、ロゴ、製品名、色は引き継ぎません。これがmatch-concept-not-brandです。
5. 並べて比較する
参照元と再構築したものを、同じサイズ、同じ状態で横に並べます。差異をすべて具体的に挙げます。比較せずに「近い見た目」とするのはmatch-side-by-sideです。
ステップ3のすべての状態を、同一サイズ、同一デバイススケールファクターでキャプチャします。compare.htmlを.match/<part>/index.htmlにコピーします。このフォルダーは無視対象であり、ソースツリーには絶対に入れません。ヘッダーコメントに示された形式で、その隣にcompare.jsを作成します。キャプチャはimg/に保存し、ページを開きます。
比較ページはこのスキルに含まれているため、データのみを書き込みます。独自のマークアップやスタイルを持つページを作成するのはmatch-shipped-compareです。各値を「一致」「相違あり」「未検証」のいずれかで示します。ユーザーは「Copy Differences」を使って、残っている差異を送り返します。
対応関係
すべてのチェックは対応するペアで構成されます。問題のある行の隣に、それを置き換える行が並びます。
| ルール | 問題のある例 | 置き換え後 |
|---|---|---|
match-inspect-the-source | 記憶を基に再構築したメニュー | ライブメニューを開いて確認する |
match-same-platform | デスクトップアプリをウェブサイトで評価する | インストール済みアプリを開く |
match-read-computed-values | 目視で決めたborder-radius: 8px | 計算済みスタイルから読み取った6px |
match-inventory-states | 初期状態のみ | ホバー、押下、開いた状態、空の状態、エラーを再構築する |
match-copy-the-named-part | 「サイドバー」のためにレイアウト全体をコピーする | サイドバーのみ |
match-concept-not-brand | 相手のロゴとアクセントカラーを含める | プロジェクトのトークンに沿ったパターン |
match-side-by-side | 「近い見た目」 | 同じサイズで並べ、差異を列挙する |
match-shipped-compare | 比較ページを一から作成する | compare.htmlをコピーし、compare.jsのみ作成する |
報告
重大度。 HIGHは、ソースを開かずに再構築した場合、またはユーザーが指定した状態が欠けている場合です。MEDIUMは、「一対一」の指定で値を推測した場合、依頼範囲を超えてパーツをコピーした場合、または比較ページを手書きした場合です。LOWは、見つけて明示した残りの差異です。
形式。 根本原因ごとに1件の指摘を記載します。
file:line - [rule-id] what is wrong
続いてRule | Count | Severityのサマリーを記載します。HIGHが1件でも残っている場合はBlock、それ以外はApproveとします。ソースから読み取れなかった値はすべてNot verifiedと記載します。