Skill.md検索

ブラウザのスクリーンショットを自動取得し、UIの問題（レイアウト崩れ、スタイル不具合、テキスト表示エラーなど）を検出できます。 検出した問題に対して自動的にソースコードを分析・修正し、修正結果をスクリーンショットで確認するサイクルを回せます。 レスポンシブ対応の確認やボタンクリック後のUI変化も含めて、複数ページにわたる改善を実行できます。 問題が解決するまで最大5回の自動改善を試み、解決状況を詳細に報告できます。 Webサイトやアプリのデザイン・レイアウト崩れを素早く修正したいフロントエンド開発者 UI/UXの問題を画像で指摘されたが、どのコードを修正すべきか判断に迷っているエンジニア 複数ページのUIスタイルを効率的にチェック・改善したいプロダクトマネージャー 毎回スクリーンショットを撮って確認する手作業を削減したい開発チーム このスキルは next-ai-bridge を活用し、ブラウザのスクリーンショット取得とソースコード修正を自動でループさせます。前提として、ブリッジサーバー（/ai-bridge-serve）とNext.jsアプリ（npm run dev）が起動していて、ブラウザからページにアクセスできている状態が必要です。改善ループは以下の6ステップを繰り返します：(1)curl でスクリーンショットを取得して base64 デコード、(2)スクリーンショットからレイアウト崩れ・テキスト問題・色コントラスト・アラインメントなどを分析、(3)関連ファイルを app/page.tsx や components/ から特定し /api/ai-bridge/actions で確認、(4)Edit ツールで最小限の CSS/JSX/TSX 修正実施、(5)Hot Reload 後に再度スクリーンショット取得して確認、(6)問題解決判定で終了または次イテレーションへ。ページ遷移時は /api/ai-bridge/navigate、ユーザーアクション後は /api/ai-bridge/actions で UI 確認。5回のイテレーション上限設定により、無限ループを防止。各イテレーションの結果は「検出した問題 / 修正内容 / 解決状況」で報告します。

プロジェクトのReact・Next.jsコンポーネントを自動解析し、AIがブラウザ操作に必要なAPIエンドポイントを自動生成できます。 AST解析（Abstract Syntax Tree、構文木解析）を使ってコンポーネント情報を抽出し、API Route ファイルと OpenAPI 仕様書を一括生成するため、手動で API を定義する手間が不要になります。 生成されたOpenAPI仕様からアクション一覧が自動作成され、AI がブラウザを操作するための操作方法が明確になります。 コンポーネント変更時に再度実行するだけで API が自動更新されるため、コンポーネント変更に伴う API 仕様ズレを防げます。 --with-dom オプションでAST解析に加えて実行中のブラウザのDOM構造もスキャンすることで、より正確な API 生成が可能になります。 AIにブラウザ操作を自動化させたいNext.js開発者 UIコンポーネントを頻繁に追加・変更し、その度に API を手動定義するのが煩雑なチーム OpenAPI仕様を活用して、API の利用方法を統一的に管理したい人 初回セットアップ時や、大幅なUIリニューアル時に API の構造を整理し直したい人 コード生成は以下のステップで実行されます。まずプロジェクトルートディレクトリを確認し、npx next-ai-bridge generate $ARGUMENTS でコード生成を実行します。生成後、app/api/ai-bridge/ 配下にAPI Routeファイル群が作成されたか、public/openapi.yml が生成されたかを確認します。生成された OpenAPI 仕様を読み、利用可能なアクション一覧をユーザーに報告します。オプションとして --with-dom (AST解析に加えてブラウザDOM もスキャン、puppeteer必要) と --port (Next.js開発サーバーポート、デフォルト3000) が指定可能です。注意事項として、` が app/layout.tsx` に追加されていることを確認すること、生成ファイルは「Auto-generated by next-ai-bridge - DO NOT EDIT」で始まり手動編集禁止であること、コンポーネント変更時は再実行して再生成することが必要です。

スクリーンショット取得でWebサイトの現在の見た目を確認し、どの要素が表示されているかを把握できます ボタンクリック、テキスト入力、ページ遷移などのUI操作をコマンドで実行できるため、ユーザーの行動をシミュレートして動作検証が可能です 複数のアクションを組み合わせて自動化フロー（ログイン→入力→送信など）を実装できます 特定の要素だけをスクリーンショットで確認し、細かなUI変更を検証できます レスポンスに毎回スクリーンショットが含まれるため、各ステップの状態を目で確認しながら進められます Webアプリの動作確認やテストを手動で繰り返しているQAエンジニア UIの変更影響を素早く検証したい開発者 ブラウザ操作を自動化したいが、複雑なテストツール設定は避けたい人 APIを通じてUIテストを簡潔に書きたいエンジニア

WebSocketブリッジサーバーを起動して、APIからのブラウザ操作指令をリアルタイムでブラウザに中継できる環境を構築できます ブラウザとバックエンドを接続し、APIを通じたUI操作を可能にする仲介役として機能します ヘルスチェックコマンドで、ブリッジサーバーとブラウザの接続状態を確認し、正常に動作しているかを即座に判定できます ポート指定オプションで、サーバーが使用するポートをカスタマイズできるため、複数の環境で並行実行できます ブラウザ操作のAPI自動化を行う前のセットアップが必要な開発者 Next.js環境でUI操作を自動化したいエンジニア ブラウザ操作の基盤を準備する必要がある人