2026.06 — 08

agent-change-cost スキル制作

エージェントが直すファイル数を減らすフロントエンド作成ルール3つを実測で検証し、エージェントがコードを書くときに自動適用されるようClaude Codeスキルとしてパッケージ化して公開しました。

75か所 → 13か所
重複統合6件の修正箇所
1/8 → 8/8
誤ったペイロードの遮断 (契約テスト)
39万トークン
リクエスト1回あたりの再送信コンテキスト
問題

エージェントはファイルを1つ直すたびに1ターンを使い、毎ターン会話全体を送り直します。セッション2,149ターンを調査すると、修正387件がすべて「1ターンに1ファイル」で処理され、リクエスト1回あたり平均39万トークンが再送信されていました。直すファイル数がそのままコストなので、変更が波及する範囲を減らす作成ルールが必要でした。

ルール3つ

3か所以上で一緒に変わるコードだけをコンポーネントに統合し、サーバーへ送るデータの組み立ては画面から分離して契約テストを必須にし、互いに異なる関心事が4種以上で300行を超えるコンポーネントは分離対象と見ます。しきい値は勘ではなく、ファイル分布の裾(全体の9%)で決めました。

実測検証

React 19 + TypeScriptの実リポジトリで測定しました。重複統合6件の修正箇所が75か所から13か所に減り、アダプター導入後は誤ったペイロード8件がすべて契約テストで遮断されました。確認にかかった時間は196ms、サーバー契約が全面改編されたときの画面コードの変更量は0行でした。

限界も一緒に記録しました。事例6件、リポジトリ1つ、TypeScript限定なので数値はリポジトリごとに異なりえます。共通部品の自動検出は精度8~30%の候補リストであり、人の最終判断が必要です。

スキルとしてパッケージ

ルールは文書のままだと忘れられます。エージェントがコードを書くときに自動で適用されるようClaude Codeスキルにまとめ、実測の根拠と一緒にGitHubで公開しました。他のリポジトリでもそのままインストールして使えます。

Stack
Claude Code Skills·TypeScript·React
©2026 Imjurney · All Rights Reserved8 Posts | 4 Projects