reuse について
reuseは、UI構築で既存の実装を優先するためのスキルです。プロジェクトのコンポーネントやスタイルを保守する開発者向けに、共有部品、アイコン、トークンを確認し、保守中のライブラリやプラットフォーム機能を検討してから独自コードを使うよう促します。
主な機能
- 01共有コンポーネントを先に検索
- 02既存のバリアントと属性を使用
- 03同種のUIパターンを統一
- 04共有プリミティブ内で問題を修正
- 05保守中のライブラリや機能を優先
- 06ドキュメントに沿って現行APIを使用
活用シーン
- 01UI構築前に再利用可能な部品を探す
- 02同じコントロールのスタイル増加を防ぐ
- 03繰り返しの修正を共有部品に集約
- 04独自フォーマッターやアイコンを置き換える
インストール
コマンドをコピーしてターミナルで実行します。
npx skills add https:/インストール後、Claude Code で/reuseを入力して読み込まれたか確認します。
同梱ファイルagents/openai.yaml
詳細
再利用
このスキルでは、新しいものを作るときの優先順位を定めます。まずプロジェクト独自のパーツを使い、次にメンテナンスされているライブラリかプラットフォームの機能を使います。カスタムコードは最後です。
重複は指摘事項です
プロジェクトにすでにあるものと重複するコンポーネント、スタイル、アイコンを新たに作ることは指摘事項です。プリミティブを共有パッケージに追加してから使うことは、指摘事項ではありません。共有パッケージがないプロジェクトは、すでに依存しているライブラリを基準に評価します。
誰にも求められていないものを削ることは、restraint の担当です。外部アプリをコピーすることは、match の担当です。
まずプロジェクト独自のパーツを使う
UI を書く前に、共有コンポーネントパッケージ、アイコンセット、トークンを検索します。見つけたものの名前を挙げます。プロジェクトの Input の隣に素の <input> を置くことは、reuse-house-component-first です。
提供済みのコンポーネントは、そのまま使う
コンポーネントのバリアントと data-* 属性を使います。ローカルの className でスタイルを変更することは、reuse-no-local-restyle です。
同じ種類のものには、スタイルを一つだけ使う
メニュー、テーブル、ダイアログのシェルは、それぞれ一つにします。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 です。
対比
すべてのチェックは対比で示します。問題のある行の隣に、それを置き換える行を示します。
| ルール | 問題のある記述 | 置き換え |
|---|---|---|
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 は、既存の共有コンポーネントとの重複、またはプリミティブで対応できるコントロールを独自に作成した場合です。MEDIUM は、ローカルのスタイル変更、アイコンセット外のアイコン、または1つの呼び出し箇所だけに適用した共有修正です。LOW は、メンテナンス状況を確認せずにライブラリを選んだ場合です。
形式。 根本原因ごとに指摘を1件記載します。
file:line - [rule-id] what is wrong
続いて Rule | Count | Severity の要約を記載します。HIGH が残っている場合は Block、それ以外は Approve とします。読んでいないファイルを Approve にしてはいけません。実行できなかったチェックはすべて Not verified と記載します。