こんにちは。
AIエージェント（ChatGPTやClaude Code、GitHub Copilotなど）を使ってWeb制作をしていると、「コードは動くけど、公開前のチェックが追いつかない」という場面が出てきます。表示崩れ、アクセシビリティ、パフォーマンス、SEO……確認すべき項目は多いのに、手動でやると時間がかかる。
実はこの「公開前チェック（QA）」こそ、AIエージェントのSkillsが最も威力を発揮する領域のひとつです。Skillsを入れておけば、AIが「動くか」だけでなく「崩れていないか」「見づらくないか」「遅くないか」「アクセシブルか」まで自動で見てくれます。
この記事では、Web制作10年の実務経験をもとに、2026年3月時点で公開前チェック（QA）に使えるSkills 10個を整理しました。「何から入れたらいいかわからない」という方は、記事後半の組み合わせパターンから試してみてください。
Skills（SKILL.md）とは — AIエージェントの「得意分野」を定義するファイル
Skills（スキルズ）とは、AIエージェントに「このプロジェクトではこういうルールで、こういう技術を使って、こういう品質基準で仕事してね」と伝えるための設定ファイルです。
具体的には、プロジェクトのルートに SKILL.md というMarkdownファイルを置きます。中身はただのテキストなので、特別なツールは不要です。
たとえば「Reactのベストプラクティスに従ってコードを書いてほしい」というSkillを入れると、AIエージェントはReactの設計原則を守った提案をしてくれるようになります。プロンプトに毎回同じことを書かなくてよくなるわけです。
2026年に入ってから、OpenAI・Vercel Labs・Anthropic・GitHubなどがSkillsを公式に公開し始めていて、GitHubからダウンロードしてそのまま使える状態になっています。
つまり、自分でプロンプトを試行錯誤しなくても、プロが作ったSkillを置くだけでAIの出力品質が上がる。これが「楽してAIを使う」の本質です。
Skillsの仕組みや導入方法をもっと詳しく知りたい方は、Skills（SKILL.md）とは？AIの出力を”置くだけ”で変えるファイルの使い方をご覧ください。
公開前チェック（QA）領域の整理軸
公開前チェック（QA）のSkillsは、2026年3月時点で見ると以下の4つの軸で整理するとわかりやすいです。
- ブラウザ実機確認 — Playwrightなどを使って、実際にブラウザ上でUI挙動や画面遷移を確認する
- デザイン崩れ検出 — レイアウト崩れ、仕様と実装のズレ、デザインシステムとの乖離を見つける
- Lighthouse / CWV / a11y 監査 — パフォーマンス、Core Web Vitals、アクセシビリティなどを定量的に監査する
- 差分レビュー — Figmaや仕様書と実装済み画面を突き合わせて、差分を洗い出す
提供元ごとの構図はこうなっています。
- OpenAI / GitHub公式コミュニティ / Microsoft が実機確認やデザインレビューを押さえる
- サードパーティは Addy Osmani のWeb品質監査、Playwright特化QA、a11y監査系が強い
- SEO監査系も公開前の総点検として流用しやすい
では、それぞれ見ていきます。
公式・準公式のSkills 4選
まずはベンダー公式や公式コミュニティが提供しているSkillsです。メンテナンスの安定感があるので、迷ったらまず公式から入れるのがおすすめです。
ブラウザ実機確認
1. Playwright Interactive（OpenAI）
永続的なPlaywrightセッションを使って、UIデバッグ・機能確認・視覚QAを回すためのSkillです。「ページを開いて、ここをクリックして、表示を確認して」という手動の確認作業をAIが代行してくれます。
GitHub: openai/skills – playwright-interactive
2. Web App Testing（GitHub公式コミュニティ）
Playwrightを使って、フォーム送信・画面遷移・レスポンシブ確認などを型化して進めるSkillです。「ログインからカート追加まで」のようなユーザーフローの検証を定型化できます。
GitHub: github/awesome-copilot – webapp-testing
デザインレビュー・UI品質チェック
3. Web Design Reviewer（GitHub公式コミュニティ）
レイアウト崩れ、視覚的一貫性（visual consistency）、アクセシビリティなどを点検するSkillです。コードレビューではなく「見た目のレビュー」を自動化する発想で、公開前の最終チェックに向いています。
GitHub: github/awesome-copilot – web-design-reviewer
4. Frontend Design Review（Microsoft）
デザインシステム準拠、レスポンシブ対応、アクセシビリティ、UI品質を総合的にレビューするSkillです。「デザインシステムの基準に沿っているか」をAIに確認させるイメージで、チーム開発での品質統一に特に効果的です。
GitHub: microsoft/skills – frontend-design-review
公式4つのうち、ブラウザ実機確認の2つ（Playwright Interactive + Web App Testing）は「動くか」を見るもの、デザインレビューの2つ（Web Design Reviewer + Frontend Design Review）は「崩れていないか」を見るもの。この4つを入れるだけでも、公開前チェックの基本ラインはかなりカバーできます。
サードパーティのおすすめSkills 6選
公式だけでなく、個人やコミュニティが公開しているSkillsにも実用的なものがあります。公式に比べるとメンテナンスの継続性は不確定ですが、中身がしっかりしているものは積極的に使って問題ありません。
品質監査・パフォーマンス
5. Web Quality Skills（Addy Osmani）
Lighthouse、Core Web Vitals、SEO、アクセシビリティ、best practicesを横断的に監査するSkill群です。GoogleのエンジニアであるAddy Osmaniが関わっているだけあり、Web品質の基準が実用的で網羅的。公開前の総点検として非常に頼りになります。
GitHub: addyosmani/web-quality-skills
6. SEO Audit Skill（seo-skills）
251ルール・20カテゴリにわたる大規模監査を行うSkillです。技術SEOだけでなく、パフォーマンス、リンク、セキュリティ、アクセシビリティ、モバイル対応まで広くカバーしており、公開前の総点検として流用しやすい構成になっています。
GitHub: seo-skills/seo-audit-skill
テスト特化
7. Playwright Skill（testdino-hq）
E2Eテスト、ビジュアルテスト、アクセシビリティテスト、モバイルレスポンシブ確認、コンポーネントテストまで幅広く扱うSkill群です。Playwright一本でQAを回したい場合に、公式のPlaywright Interactiveと組み合わせると強力です。
GitHub: testdino-hq/playwright-skill
デザイン差分チェック
8. Design Discrepancy（nonlinear）
Figmaや仕様書と、実装済みの画面との差分を洗い出すためのSkillです。「デザインカンプ通りに実装したはずなのに微妙に違う」という問題を、公開前に機械的に検出できます。
GitHub: nonlinear/skills – design-discrepancy
アクセシビリティ（a11y）監査
9. a11y Audit（snapsynapse）
axe-core、Lighthouse、WCAG 2.1 AA マッピングを使ってアクセシビリティ監査を進めるSkillです。「WCAG準拠」を要件に掲げるプロジェクトで、公開前のa11yチェックを自動化できます。
GitHub: snapsynapse/skill-a11y-audit
10. Accessibility Agents（Community Access）
WCAG 2.2 AA を前提に、専門家チーム型でアクセシビリティレビューを進めるSkill群です。上のa11y Auditがツールベースの自動監査なのに対して、こちらはより「人間のa11y専門家が見るような観点」でレビューしてくれるのが特徴です。
GitHub: Community-Access/accessibility-agents
サードパーティ6つの中では、特にWeb Quality Skills（Addy Osmani）とPlaywright Skill（testdino-hq）の2つが汎用性が高いです。a11y系は、アクセシビリティ要件があるプロジェクトで入れると一気にチェック精度が上がります。
実務で強い「組み合わせ」5パターン
Skillsは単体で入れても効果がありますが、QAの目的に応じて複数を組み合わせると、チェックの抜け漏れが大幅に減ります。
僕が実際に試してみて「これは強い」と感じた5つの組み合わせを紹介します。
パターン1 — 公開前チェックの本流
- Playwright Interactive（ブラウザでのUI挙動チェック）
- Web App Testing（ユーザーフローのテスト定型化）
- Web Quality Skills（Lighthouse / CWV / SEO / a11y監査）
公開前チェックの「まず入れておきたい鉄板セット」です。Playwrightで実機確認しつつ、Web Quality Skillsで品質指標を定量的に押さえる。この3つだけで「動くか」「遅くないか」「基本的な品質基準を満たしているか」を一通りカバーできます。
パターン2 — デザイン崩れ / 実装ズレの検出
- Web Design Reviewer（レイアウト崩れ・視覚的一貫性の点検）
- Frontend Design Review（デザインシステム準拠のレビュー）
- Design Discrepancy（Figma・仕様と実装の差分検出）
「コードは動くけど、見た目がカンプと違う」を撲滅したいときの組み合わせです。公式2つで全体のデザイン品質を見つつ、Design Discrepancyで仕様との差分を具体的に洗い出す。デザイナーとの納品確認の前に回しておくと、手戻りが激減します。
パターン3 — a11yを厚く見る
- a11y Audit（axe-core + Lighthouse + WCAG 2.1 AA マッピング）
- Accessibility Agents（WCAG 2.2 AA 専門家チーム型レビュー）
- Playwright Skill（アクセシビリティテスト含むE2Eテスト）
アクセシビリティ要件が明確にあるプロジェクト向けの組み合わせです。a11y Auditでツールベースの自動チェック、Accessibility Agentsで専門家視点のレビュー、Playwright Skillで実際のブラウザ上での操作確認。WCAG準拠を求められる案件では、この3つを入れておくと安心感が全然違います。
パターン4 — テクニカル監査を広くかける
- SEO Audit Skill（251ルール / 20カテゴリの大規模監査）
- Web Quality Skills（Lighthouse / CWV / SEO / a11y / best practices）
SEO、パフォーマンス、セキュリティ、a11yなど、公開前に「技術的な見落としがないか」を広く網をかけたいときの組み合わせです。SEO Audit Skillの251ルールとWeb Quality Skillsの監査基準を重ねることで、チェックの網羅性がかなり上がります。コーポレートサイトやメディアサイトの公開前に特に有効です。
パターン5 — Playwright中心でQAを回す
- Playwright Interactive（永続セッションでのUIデバッグ・視覚QA）
- Playwright Skill（E2E / visual / a11y / mobile-responsive テスト）
「テストツールはPlaywrightに統一したい」という人向けのシンプルな組み合わせです。公式のPlaywright Interactiveで対話的なデバッグを行い、サードパーティのPlaywright Skillでテストの幅を広げる。ツールを増やしたくないけどQAはちゃんとやりたい、というバランスを取りたいときに向いています。
QA系Skillsを導入するときの注意点
公開前チェックのSkillsを導入する際に、知っておくと失敗しにくいポイントをいくつか挙げておきます。
- Playwright系はローカル環境のセットアップが必要 — Playwright Interactive や Playwright Skill はブラウザの実行環境が前提です。Node.jsとPlaywrightのインストールが済んでいないと動きません
- a11y監査系は「完全準拠」を保証するものではない — axe-coreやLighthouseによる自動チェックはWCAG違反の一部を検出しますが、すべてではありません。最終的には人間の確認も必要です
- サードパーティ製は更新頻度を確認する — GitHubリポジトリの最終更新日やIssueの活発度を見て、メンテナンスが続いているかチェックしておくと安心です
- Skillsは重ねすぎるとノイズになる — 10個すべてを一度に入れる必要はありません。まずはパターン1（公開前チェックの本流）から始めて、必要に応じて足していくのが現実的です
まとめ
というわけで、2026年3月時点で公開前チェック（QA）に使えるAIエージェントSkillsを10個紹介しました。
ポイントを振り返ると:
- 公開前チェックは「ブラウザ実機確認」「デザイン崩れ検出」「Lighthouse / CWV / a11y監査」「差分レビュー」の4軸で整理できる
- 公式4個 + サードパーティ6個で、QAの主要領域をカバーできる
- まず入れるなら「パターン1：Playwright Interactive + Web App Testing + Web Quality Skills」がおすすめ
公開前チェックは、「動くか」だけでなく「崩れていないか」「見づらくないか」「遅くないか」「アクセシブルか」まで見ると、かなり事故が減ります。手動でやると面倒なこのチェックを、Skillsを入れるだけでAIが代行してくれる。これは使わない手はないと思います。
Skillsの仕様は変化が速いので、この記事は定期的に見直して更新していく予定です。他のカテゴリのSkillsも順次整理していきますので、そちらもチェックしてみてください。
※ 本記事の情報は2026年3月9日時点のものです。各Skillsの仕様や公開状況は変更される可能性があります。最新情報は各GitHubリポジトリをご確認ください。