reuse について
reuseは、新しいUIの実装方法を導くスキルです。既存コンポーネントを優先し、次に保守中のライブラリやプラットフォーム機能を使い、カスタムコードは最後に検討します。共通化や関連コンポーネントへの修正反映も確認します。
主な機能
- 01既存コンポーネント、アイコン、トークンを優先
- 02提供済みのバリアントとAPIを使用
- 03UIパターンごとの標準を統一
- 04共通プリミティブ内で修正
- 05保守中のライブラリやプラットフォーム機能を優先
活用シーン
- 01新しいUIの実装方法の検討
- 02コンポーネントやスタイルの重複防止
- 03関連コンポーネントへの共通修正の適用
インストール
コマンドをコピーしてターミナルで実行します。
npx skills add https:/インストール後、Claude Code で/reuseを入力して読み込まれたか確認します。
同梱ファイルagents/openai.yamlLICENSE
詳細
再利用
このスキルでは、新しいものを作るときの順序を定めます。まずプロジェクト独自の部品を使い、次にメンテナンスされているライブラリやプラットフォームの機能を使います。カスタムコードを使うのは最後です。
重複は指摘事項です
プロジェクトにすでにあるものと重複するコンポーネント、スタイル、アイコンを新たに作ることは、指摘事項です。共有パッケージにプリミティブを追加してから使うことは、指摘事項ではありません。共有パッケージがないプロジェクトでは、すでに依存しているライブラリを基準に判断します。
誰も求めていないものを削ることは、restraint の範囲です。外部アプリを模倣することは、match の範囲です。
まずプロジェクト独自の部品を使う
UI を書く前に、共有コンポーネントパッケージ、アイコンセット、トークンを検索します。見つかったものを明記します。プロジェクトの Input と並べて生の <input> を使うことは、reuse-house-component-first に該当します。
提供されたコンポーネントはそのまま使う
コンポーネントのバリアントと data-* 属性を使います。ローカルの className でスタイルを変更することは、reuse-no-local-restyle に該当します。
種類ごとにスタイルは1つ
メニュー、テーブル、ダイアログシェルは、それぞれ1つに統一します。ドロップダウンのスタイルを2つ目に作ることは、reuse-one-standard に該当します。
プリミティブ内で一度だけ修正する
すべてのインスタンスに適用する修正は、共有コンポーネント内で行います。5か所の呼び出し元にパッチを当てることは、reuse-fix-in-the-primitive に該当します。そのうえで、同種の箇所をすべて検索し、ローカルの修正を取り除いて、ファイルを列挙します。引用された行だけを修正することは、reuse-sweep-siblings に該当します。
次にライブラリかプラットフォームを使う
プロジェクトに使えるものがない場合は、カスタムコードを書く前に、メンテナンスされているライブラリかプラットフォームの機能を使います。日付と数値のフォーマットには Intl を使います。右クリックにはネイティブのコンテキストメニューを使います。手書きのフォーマッターは、reuse-library-before-custom に該当します。
ライブラリがメンテナンスされていることを確認します。メンテナンスされていない場合は、インストールするのではなく、そのパターンを移植します。これは reuse-no-stale-dependency に該当します。
props の前にドキュメントを読む
プリミティブを使う前にドキュメントを読み、現在の API を使います。推測した prop は、reuse-read-the-docs に該当します。
アイコンセットから、ネイティブサイズで使う
プロジェクトのアイコンセットを、描画時のサイズで使います。生成した SVG や、18px のアイコンを 12px に縮小することは、reuse-icon-set-native-size に該当します。アイコンセットにないグリフを icons で描画し、共有アイコンパッケージまたはフォルダーに追加することは、指摘事項ではありません。
ペアで確認する
各チェック項目はペアです。問題のある行と、それを置き換える行を並べます。
| ルール | 問題のある記述 | 置き換え |
|---|---|---|
reuse-house-component-first | <input className={styles.search} /> | プロジェクトの <Input /> |
reuse-no-local-restyle | 共有の Menu と並ぶ .menu { border-radius: 6px } | 提供されたままの Menu |
reuse-one-standard | 3つの画面に3種類のドロップダウンスタイル | 1つの Menu |
reuse-fix-in-the-primitive | 5か所の呼び出し元に追加したスクロールフェード | ScrollArea 内のフェード |
reuse-sweep-siblings | 引用された行は修正され、同種の箇所は未修正 | 同種の箇所をすべて修正し、ファイルを列挙 |
reuse-library-before-custom | 手書きの相対日付フォーマッター | Intl.RelativeTimeFormat |
reuse-no-stale-dependency | メンテナンスされていないパッケージをインストール | そのパターンをプロジェクトに移植 |
reuse-read-the-docs | すでにボタンであるトリガーに render={<button />} を指定 | ドキュメントに記載された prop、または何も指定しない |
reuse-icon-set-native-size | width: 12px で表示する 18px のアイコン | アイコンセットの 12px のアイコン |
報告
深刻度。 既存の共有コンポーネントと重複するもの、またはプリミティブで対応できるコントロールを独自に実装したものは HIGH です。ローカルでのスタイル変更、アイコンセット外のアイコン、または1か所の呼び出し元だけに適用した共有修正は MEDIUM です。メンテナンスされているか確認せずに選んだライブラリは LOW です。
形式。 根本原因ごとに指摘を1つ記載します。
file:line - [rule-id] what is wrong
続けて Rule | Count | Severity の形式で要約します。HIGH が残っている場合は Block、それ以外は Approve とします。読んでいないファイルを Approve にしてはいけません。実行できなかったチェックはすべて Not verified と記載します。