·qa-web-test
</>

qa-web-test

視覚的な回帰テスト、レスポンシブ ブレークポイントの検証、CSS レイアウトのデバッグに Chrome DevTools MCP ツールを使用した QA Web テスト スキル。このスキルは、ユーザーが「ページのテスト」、「ブレークポイントのチェック」、「レスポンシブ レイアウトの確認」、「このページの QA」、「さまざまなビューポートでの CSS のテスト」、「レイアウトのバグのチェック」、「修正の確認」を要求する場合、または特定のビューポート幅で Web ページを視覚的に検査したい場合に使用します。また、ユーザーが URL を提供し、スクリーンショットの撮影、レイアウトの比較、要素の寸法の検査を要求したときにもトリガーされます。ローカルホストまたはステージング環境上の Chrome DevTools MCP に接続されたブラウザ セッションで動作します。

20インストール·1トレンド·@delexw

インストール

$npx skills add https://github.com/delexw/claude-code-misc --skill qa-web-test

qa-web-test のインストール方法

コマンドラインで qa-web-test AI スキルを開発環境にすばやくインストール

  1. ターミナルを開く: ターミナルまたはコマンドラインツール(Terminal、iTerm、Windows Terminal など)を開きます
  2. インストールコマンドを実行: このコマンドをコピーして実行します: npx skills add https://github.com/delexw/claude-code-misc --skill qa-web-test
  3. インストールを確認: インストール後、スキルは自動的に AI コーディング環境に設定され、Claude Code、Cursor、OpenClaw で使用できるようになります

ソース: delexw/claude-code-misc。

Automate visual QA testing of web pages using Chrome DevTools MCP tools. Connects to an already-running Chrome browser session, navigates to pages, emulates viewports, takes screenshots, and inspects CSS properties to catch responsive layout bugs.

After connecting to the browser and navigating to the target URL, always hard-refresh the page and clear the cache before any testing:

Then wait for the page to fully reload before proceeding.

視覚的な回帰テスト、レスポンシブ ブレークポイントの検証、CSS レイアウトのデバッグに Chrome DevTools MCP ツールを使用した QA Web テスト スキル。このスキルは、ユーザーが「ページのテスト」、「ブレークポイントのチェック」、「レスポンシブ レイアウトの確認」、「このページの QA」、「さまざまなビューポートでの CSS のテスト」、「レイアウトのバグのチェック」、「修正の確認」を要求する場合、または特定のビューポート幅で Web ページを視覚的に検査したい場合に使用します。また、ユーザーが URL を提供し、スクリーンショットの撮影、レイアウトの比較、要素の寸法の検査を要求したときにもトリガーされます。ローカルホストまたはステージング環境上の Chrome DevTools MCP に接続されたブラウザ セッションで動作します。 ソース: delexw/claude-code-misc。

引用可能な情報

AI/検索での引用用の安定したフィールドとコマンド。

インストールコマンド
npx skills add https://github.com/delexw/claude-code-misc --skill qa-web-test
カテゴリ
</>開発ツール
認証済み
初回登録
2026-03-09
更新日
2026-03-10

Browse more skills from delexw/claude-code-misc

クイックアンサー

qa-web-test とは?

視覚的な回帰テスト、レスポンシブ ブレークポイントの検証、CSS レイアウトのデバッグに Chrome DevTools MCP ツールを使用した QA Web テスト スキル。このスキルは、ユーザーが「ページのテスト」、「ブレークポイントのチェック」、「レスポンシブ レイアウトの確認」、「このページの QA」、「さまざまなビューポートでの CSS のテスト」、「レイアウトのバグのチェック」、「修正の確認」を要求する場合、または特定のビューポート幅で Web ページを視覚的に検査したい場合に使用します。また、ユーザーが URL を提供し、スクリーンショットの撮影、レイアウトの比較、要素の寸法の検査を要求したときにもトリガーされます。ローカルホストまたはステージング環境上の Chrome DevTools MCP に接続されたブラウザ セッションで動作します。 ソース: delexw/claude-code-misc。

qa-web-test のインストール方法は?

ターミナルまたはコマンドラインツール(Terminal、iTerm、Windows Terminal など)を開きます このコマンドをコピーして実行します: npx skills add https://github.com/delexw/claude-code-misc --skill qa-web-test インストール後、スキルは自動的に AI コーディング環境に設定され、Claude Code、Cursor、OpenClaw で使用できるようになります

ソースリポジトリはどこですか?

https://github.com/delexw/claude-code-misc