agentation

Agentationは、実行中のWebページで見えるものと、AIコーディングエージェントがソースコードで変更する必要があるものとの間のギャップを埋めるために設計された視覚フィードバックツールです。UIの問題を文章で説明する代わりに、それを指し示します。 仕組み：パッケージを開発依存関係としてインストールし、アプリと一緒に`<Agentation />`コンポーネントをレンダリングします。右下隅にツールバーが表示されます。それを有効にすると、ページ上の任意の要素をクリックして注釈を付けることができます。ツールはクラス名、CSSセレクタ、要素の位置をキャプチャし、コピーしてエージェントに渡すことができる構造化マークダウン出力を生成します。READMEの例では、「サイドバーの青いボタン」と言う代わりに、`.sidebar > button.primary`とメモをエージェントに渡し、エージェントが直接grepできるようにします。 READMEに記載されている注目すべき機能： - クリックして任意の要素に注釈を付け、セレクタを自動識別 - テキスト選択による特定コンテンツへの注釈 - 複数の要素をドラッグしてのマルチ選択 - 要素が含まれていない領域にも注釈を付けられるエリア選択 - アニメーション一時停止により、CSS、JS、ビデオアニメーションを凍結して特定の状態をキャプチャ - セレクタ、位置、コンテキストを含む構造化マークダウン出力 - システム設定に従う、または手動で設定できるダークモードとライトモード - 純粋なCSSアニメーションを使用し、ランタイム依存関係ゼロ 要件と範囲：React 18以降、デスクトップブラウザ（モバイルは非対応）。このプロジェクトはエージェント非依存であり、コピーされた出力は特定のAIコーディングアシスタントに結び付けられません。 ライセンス：READMEには、このプロジェクトは2026年Benji Taylorの著作権であり、PolyForm Shield 1.0.0の下でライセンスされていると記載されています。これは従来のオープンソースライセンスではなくソース利用可能ライセンスであるため、商用利用前にその条件を確認してください。完全なドキュメントはagentation.comでホストされています。