こんにちは。
最近、AIエージェント（ChatGPTやClaude Code、GitHub Copilotなど）を使ってコードを書く人が増えてきました。でも「AIにコードを書かせると、なんか微妙なものが出てくる」と感じたこと、ありませんか。
実はそれ、AIの能力不足ではなく、「何が得意で、何を守るべきか」をAIに伝えていないのが原因かもしれません。
そこで登場するのがSkills（SKILL.md）という仕組みです。これをプロジェクトに置くだけで、AIエージェントが「Web制作のプロ」として振る舞えるようになります。
この記事では、Web制作10年の実務経験をもとに、2026年3月時点でWeb制作に使えるSkills 15個を整理しました。「どれを入れたらいいかわからない」という方は、記事後半の組み合わせパターンから試してみてください。
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の出力を”置くだけ”で変えるファイルの使い方をご覧ください。
Web制作の流れとSkillsの対応関係
Web制作は「デザイン確認 → 実装 → テスト → 改善 → デプロイ」の流れで進みます。この流れのどこを担当するSkillなのかがわかると、選びやすくなります。
2026年3月時点での提供元ごとの担当領域は、かなり分かりやすく分かれています。
- OpenAI — Figma→実装、Playwrightテスト、Netlify / Renderデプロイ
- Vercel Labs — React / Next.js設計、UIレビュー
- Anthropic — フロントエンドデザイン（見た目の完成度）
- GitHub公式コミュニティ — Webテスト、デザインレビュー
では、それぞれ見ていきます。
公式・準公式のSkills 12選
まずはベンダー公式や公式コミュニティが提供しているSkillsです。メンテナンスの安定感があるので、迷ったらまず公式から入れるのがおすすめです。
Figma → コード実装（OpenAI）
1. Figma実装
Figmaのデザイン情報を参照しながら、既存のReact / Tailwind / デザインシステムに寄せて実装するためのSkillです。デザイナーから渡されたFigmaファイルを、そのままコードに落とし込む場面で使います。
GitHub: openai/skills – figma
2. Figma実装・デザイン反映
FigmaノードやアセットからUIをproduction-readyなコードに仕上げるSkillです。上の「Figma実装」よりも、デザインの細部（スペーシング、アニメーション等）の再現度に重点を置いています。
GitHub: openai/skills – figma-implement-design
僕はWeb制作の現場でFigmaからのコーディングを10年近くやっていますが、デザインの意図を正確にコードに落とす作業は地味に時間がかかります。この2つのSkillを入れるだけで、AIがFigmaの構造を理解した上でコードを提案してくれるので、コーディングのスタート地点がかなり前に進みます。
React / Next.js 設計（Vercel Labs）
3. Reactベストプラクティス
React / Next.js の実装品質やパフォーマンス改善の観点を整理して使えるSkillです。コンポーネントの分割基準やstate管理の方針など、「設計の型」をAIに教えます。
GitHub: vercel-labs/agent-skills – react-best-practices
4. コンポーネント設計
Reactコンポーネントの責務分離や合成パターン（Composition Pattern）を整理するSkillです。「このコンポーネント、責務が多すぎない？」という判断をAIがしてくれるようになります。
GitHub: vercel-labs/agent-skills – composition-patterns
5. Next.jsベストプラクティス
Next.jsのファイル構成規約やRSC（React Server Components）の境界、最適化の定石を整理したSkillです。App Routerを使っている人には特に刺さるはず。
GitHub: vercel-labs/next-skills – next-best-practices
6. Webデザインガイドラインレビュー
UIやレイアウトが設計ガイドラインに沿っているかをレビューするSkillです。「デザインシステムの基準を満たしているか」をAIに確認させるイメージ。
GitHub: vercel-labs/agent-skills – web-design-guidelines
Vercel Labsの4つは、React / Next.jsを使っている人にとってはほぼ必須だと思います。「コードは動くけど設計が微妙」という、AIあるあるの問題を減らしてくれるのが大きいです。
デザインレビュー（Anthropic・GitHub）
7. フロントエンドデザイン（Anthropic）
無難なUIに寄りすぎず、見た目の完成度や方向性まで含めて設計・実装を補助するSkillです。AIが生成するUIって「動くけどダサい」ことが多いですが、このSkillはそこを改善してくれます。
GitHub: anthropics/skills – frontend-design
8. Webデザインレビュー（GitHub公式コミュニティ）
レイアウト崩れ、視覚的一貫性、アクセシビリティなどを点検するSkillです。コードレビューではなく「見た目のレビュー」を自動化する発想。
GitHub: github/awesome-copilot – web-design-reviewer
テスト・QA（OpenAI・GitHub）
9. Playwright対話テスト（OpenAI）
ローカルのWebアプリをブラウザで確認しながら、UI挙動チェック・デバッグ・視覚QAを回すためのSkillです。「ページを開いて、ここをクリックして、表示を確認して」という作業をAIが代行します。
GitHub: openai/skills – playwright-interactive
10. Webアプリテスト（GitHub公式コミュニティ）
Playwrightを中心に、ユーザーフローやレスポンシブ確認を型化するSkillです。「ログインからカート追加まで」のような一連の操作テストを定型化できます。
GitHub: github/awesome-copilot – webapp-testing
テスト系は、正直なところ一人でWeb制作をしていると後回しにしがちな領域です（僕もそうでした）。でもAIにテストを任せられるなら、手間ゼロでQAの品質が上がる。これは楽をするための正しい使い方だと思います。
デプロイ（OpenAI）
11. Netlifyデプロイ
静的サイトやフロントエンドアプリをNetlifyに載せる流れを定型化するSkillです。ビルド設定やリダイレクト設定でいちいち悩まなくてよくなります。
GitHub: openai/skills – netlify-deploy
12. Renderデプロイ
Renderへのデプロイや構成整理を進めるためのSkillです。バックエンドも含めたアプリケーションのデプロイに向いています。
GitHub: openai/skills – render-deploy
サードパーティのおすすめSkills 3選
公式だけでなく、個人やコミュニティが公開しているSkillsにも実用的なものがあります。公式に比べるとメンテナンスの継続性は不確定ですが、中身がしっかりしているものは積極的に使って問題ありません。
13. Web品質監査（Addy Osmani系）
Lighthouse、Core Web Vitals、SEO、アクセシビリティなどを横断的に監査・改善するためのSkill群です。GoogleのエンジニアであるAddy Osmaniが関わっているだけあり、Web品質の基準が実用的。
GitHub: addyosmani/web-quality-skills
14. Web制作標準スキル集（Schalk Neethling）
セマンティックHTML、CSS、セキュリティなど、Web標準寄りの制作実務を支えるSkill集です。「AIが生成するHTMLのマークアップが雑」と感じている人には刺さります。
GitHub: schalkneethling/webdev-agent-skills
15. Playwright特化QA（Bryan Lackey系）
Playwrightを使ったブラウザ自動化・検証を回すためのSkillです。テスト環境のセットアップからテストの書き方まで、Playwrightに集中した内容になっています。
GitHub: lackeyjb/playwright-skill
実務で強い「組み合わせ」3パターン
Skillsは単体で入れても効果がありますが、制作フローに沿って複数を組み合わせると、作業の「つなぎ目」がなくなって一気に楽になります。
僕が実際に試してみて「これは強い」と感じた3つの組み合わせを紹介します。
パターン1 — Figmaからの実装を高速化したいとき
- figma（Figmaのデザイン情報を読み取る）
- figma-implement-design（production-readyなコードに変換）
- frontend-design（見た目の完成度を上げる）
デザイナーからFigmaを受け取って、コードに落とし込んで、見た目の調整まで。この一連の流れをSkillsでカバーできます。特にfrontend-design を足すことで、AIが「動くけど見た目が微妙」なコードを出しにくくなるのがポイントです。
コーポレートサイトやLPの制作で、Figmaカンプから一気にコーディングまで持っていきたいときに向いています。
パターン2 — React / Next.jsの設計品質を上げたいとき
- react-best-practices（Reactの設計原則）
- composition-patterns（コンポーネント分割の基準）
- next-best-practices（Next.js固有の最適化）
この3つを入れておくと、AIが提案するコードが「とりあえず動く」レベルから「設計として正しい」レベルに上がります。
React / Next.jsでWebアプリを開発していて、AIが生成するコードの設計がバラバラで困っているなら、まずこの組み合わせを試してみてください。App Routerのファイル構成やServer Componentsの境界判断も、Skillが入っていれば一貫した基準で提案してくれます。
パターン3 — 公開前のチェックを自動化したいとき
- playwright-interactive（ブラウザでのUI挙動チェック）
- webapp-testing（ユーザーフローのテスト定型化）
- web-quality-skills（Lighthouse / CWV / SEO / a11y監査）
サイトを公開する前に「ちゃんと動くか」「表示崩れはないか」「パフォーマンスは大丈夫か」をまとめてチェックできる組み合わせです。
正直なところ、僕はフリーランス時代に「テストは目視で十分」と思っていた時期がありました。でも納品後に「スマホで崩れてます」と言われた経験が何度かあって、公開前チェックを仕組み化することの重要性を痛感しています。このSkillsの組み合わせなら、その仕組み化がほぼ無料で手に入ります。
まとめ
というわけで、2026年3月時点でWeb制作に使えるAIエージェントSkillsを15個紹介しました。
ポイントを振り返ると:
- Skills（SKILL.md）は、AIエージェントに「得意分野」を教える設定ファイル
- 公式12個 + サードパーティ3個で、デザイン→実装→テスト→デプロイまでカバーできる
- 単体よりも「組み合わせ」で入れると、制作フローがつながって楽になる
「プロンプトを毎回工夫する」のではなく、「Skillsを一度入れて、あとは楽をする」。これがAIエージェント時代のWeb制作の進め方だと僕は思います。
Skillsの仕様は変化が速いので、この記事は定期的に見直して更新していく予定です。他のカテゴリ（SEO・広告・マーケティングなど）のSkillsも順次整理していきますので、そちらもチェックしてみてください。
※ 本記事の情報は2026年3月6日時点のものです。各Skillsの仕様や公開状況は変更される可能性があります。最新情報は各GitHubリポジトリをご確認ください。