visual-edit-precision について
選択箇所、注釈、スクリーンショットなどの視覚情報を伴う依頼で、コードを的確に変更するためのスキルです。指定要素だけを編集し、既存の動作を保ちながら描画結果を確認します。
主な機能
- 01指定された要素を特定
- 02依頼された範囲に編集を限定
- 03スタイルと動作を維持
- 04CSS やマークアップを最小限変更
- 05描画結果と副作用を確認
活用シーン
- 01選択された UI 要素の調整
- 02スクリーンショットに基づくデザイン修正
- 03複数の視覚的変更を個別に適用
- 04無関係なコンポーネント動作の変更を回避
インストール
コマンドをコピーしてターミナルで実行します。
$
npx skills add https:/インストール後、Claude Code で/visual-edit-precisionを入力して読み込まれたか確認します。
詳細
ビジュアル編集の精度
概要
変更リクエストにビジュアルコンテキスト（要素の選択、注釈、スクリーンショット）が伴う場合は、対象を絞った最小限の編集を行います。野心よりも精度を重視し、指示されたものだけを正確に変更し、それ以外はすべて保持します。
プロセス
ビジュアルコンテキストが提供された場合：
- 特定 - どの要素が正確に指示されたのか。それを所有するコンポーネントファイルはどれか。
- 範囲 - 指し示されたものだけを変更します。周囲のコードをリファクタリングしないでください。
- 保持 - 既存のスタイル、クラス、動作を維持します。求められたものだけを変更してください。
- 対象を絞る - ビジュアル上の結果を実現する最小限の CSS／マークアップの変更を行います。
- 検証 - 副作用なく変更が正しくレンダリングされることを確認します。
主要な原則
野心よりも精度
ビジュアルコンテキストは特定の要素を示します。次のことはしないでください：
- 1 つのスタイルだけが要求されたのにコンポーネント全体をリファクタリングする
- 見た目だけが指し示されたのにコンポーネントの API を変更する
- ビジュアルだけが選択されたのにロジックに手を触れる
次のことを行ってください：
- 選択された要素の正確なファイルと行を見つける
- 説明されたビジュアル変更を実現する最小限の編集を行う
- 既存の動作、イベントハンドラー、アクセシビリティをすべて保持する
複数の編集
複数のビジュアル編集が届いた場合：
- それぞれが独自の要素を独立して対象とする
- 1 つが完了するのを待たずに別のものを処理する
- 2 つの編集が競合する場合（同じ要素、異なるリクエスト）、最新のものを処理する
よくある間違い
- ユーザーが 1 つのボタンを指し示したのにコンポーネント全体を書き直す
- 1 つの要素の色を調整する必要があるだけなのにグローバル設定を変更する
- 選択に合わせて固定幅を追加し、レスポンシブな動作を壊す
- 詳細度を無視する（ユーザーは 1 つのカードを指示したのに、エージェントがすべてのカードを変更した）
- ビジュアル編集の際にアクセシビリティ属性（aria-*、role、tabindex）を削除する
コメント
Markdown 対応