DEV Community

Cover image for Skillsを導入してAgentの出力品質を上げる方法【2026年最新】
youichi11
youichi11

Posted on

Skillsを導入してAgentの出力品質を上げる方法【2026年最新】

#skills #promptengineering #agents #claudecode

最近、Claude CodeやCopilot Agentを触り始めたんだけど、正直な感想として「素のAgent、思ったより微妙じゃない？」って思ったんですよね。

チャットはできる。コードも生成してくれる。でも、なんか…プロダクションレベルじゃない。

例えばこんな感じ：

  • コードは書けるけど、設計パターンがめちゃくちゃ
  • 質問には答えてくれるけど、実務のベストプラクティスを知らない
  • UIは生成できるけど、どう見てもデザイン素人が作った感じ

要するに、スマホを買ったけどアプリを何もインストールしてない状態。OSはあるのに、使い道がない。

Skillsって何？

Skillsはプラグインとはちょっと違います。Agentに業界のベストプラクティス、実プロジェクトの経験値、エンジニアリングの制約ルール、構造化された思考フレームワークを注入するものです。

つまり、「Agent の地頭」を底上げする仕組みですね。

今回紹介する20個のSkillsのうち、まずは最初の5つを入れてみてください。体感が全然変わります。

skills.sh でもこの5つはインストール数トップです。

skills.sh

Skills導入時のセキュリティ注意点（重要）

最近、Agent向けのSkillsにおいて 悪意あるコード混入（いわゆる“Skill汚染 / Supply Chain Attack”） の事例が報告されています。

特に npx 経由での実行は、リモートコードを取得し、そのまま実行する挙動 のため、攻撃ベクトルになり得ます。

例えば、:contentReference[oaicite:0]{index=0} が報告している「Toxic Skills」では、外部リポジトリ経由で意図しない処理（情報送信・権限悪用など）が実行されるリスクが指摘されています。

最低限の確認ポイント：

  • skills.sh の一覧だけで判断しない（人気＝安全ではない）
  • 必ずリポジトリの中身（実装コード・依存関係）を確認
  • npx 実行前に「何が実行されるか」を把握する
  • 不明なスクリプトはローカル環境ではなくサンドボックスで検証

参考例として、以下のようなSkillも必ず中身を確認した上で使用してください：

1. find-skills

まず最初に入れるべきSkillsがこれ。Agentが自分で他のSkillsを検索・発見・レコメンドしてくれるようになります。いわばスキルのApp StoreをAgentに持たせるイメージです。

npx skills add https://github.com/vercel-labs/skills --skill find-skills
Enter fullscreen mode Exit fullscreen mode

2. vercel-react-best-practices

React / Next.js のパフォーマンスチューニングに特化した64のルールが8カテゴリで内蔵されています。ウォーターフォールの排除やServer Componentsの最適化など、踏みがちなパフォーマンス地雷を全部カバーしてくれる。

npx skills add https://github.com/vercel-labs/agent-skills --skill vercel-react-best-practices
Enter fullscreen mode Exit fullscreen mode

3. frontend-design

Agentが生成するUIって、正直「いかにもAIが作った感」が出ちゃいますよね。このSkillsを入れると、配色・レイアウト・アニメーションのクオリティが明らかに上がります。テンプレ感のない、ちゃんとしたUIを出力してくれるようになる。

npx skills add https://github.com/anthropics/skills --skill frontend-design
Enter fullscreen mode Exit fullscreen mode

4. web-design-guidelines

コードレビューのお供に最適。100以上のWebアクセシビリティ・UX・パフォーマンスのルールが含まれていて、初歩的なUXミスを防いでくれます。PRレビューの時にこれが効いてくると、かなり楽になる。

npx skills add https://github.com/vercel-labs/agent-skills --skill web-design-guidelines
Enter fullscreen mode Exit fullscreen mode

5. remotion-best-practices

Reactでショート動画を作れるRemotionのベストプラクティス集。アニメーション、エクスポート、パフォーマンス最適化まで網羅されていて、動画制作初心者でもサクッと高品質なショート動画が作れるようになります。

npx skills add https://github.com/remotion-dev/skills --skill remotion-best-practices
Enter fullscreen mode Exit fullscreen mode

6. brainstorming

Superpowersフレームワークベースで、構造化されたブレインストーミング・TDD・ワークフロー設計をAgentにやらせることができます。「とりあえず何か出して」じゃなく、ちゃんと整理されたアウトプットが出てくるようになる。

npx skills add obra/superpowers --skill brainstorming
Enter fullscreen mode Exit fullscreen mode

7. agent-browser

ブラウザの自動操作を実現するSkills。Webページの閲覧、フォームの自動入力、スクリーンショットの取得など、手作業で面倒だったタスクをAgentに丸投げできます。

npx skills add vercel-labs/agent-browser
Enter fullscreen mode Exit fullscreen mode

8. browser-use

もう一つの強力なブラウザ操作Skills。Rust実装で動作が高速。agent-browserと組み合わせることで、複雑な自動化タスクでも安定して動かせるようになります。

npx skills add browser-use/browser-use
Enter fullscreen mode Exit fullscreen mode

9. supabase-postgres-best-practices

Supabase + PostgreSQLのデータベース最適化ガイド。SQLのアンチパターンを避けて、パフォーマンスを引き出すためのルールが詰まっています。DBまわりで沼にハマりたくないなら必須。

npx skills add supabase/agent-skills --skill supabase-postgres-best-practices
Enter fullscreen mode Exit fullscreen mode

10. azure-cost-optimization

Azureのコスト最適化ルールセット。クラウドの請求書を見て「え、こんなにかかってるの？」ってなった経験、ありませんか？このSkillsを入れておくと、笑えない金額になる前に対策が打てます。

npx skills add microsoft/github-copilot-for-azure --skill azure-cost-optimization
Enter fullscreen mode Exit fullscreen mode

11. cloudflare/skills

Cloudflare WorkersとEdge Computingのベストプラクティス。最近かなりバズっていて、Vercelユーザーからの乗り換え組も増えている印象。エッジで動かしたいならこれ。

npx skills add cloudflare/skills
Enter fullscreen mode Exit fullscreen mode

12. redis/agent-skills

Redisの上級パターンとアンチパターン集。キャッシュ、ベクトル検索、ストリーム処理まで網羅。Redisを「ただのキャッシュ」から卒業させてくれます。

npx skills add redis/agent-skills
Enter fullscreen mode Exit fullscreen mode

13. vercel-composition-patterns

Reactのコンポジションパターンに特化したベストプラクティス。先ほどの vercel-react-best-practices と組み合わせて使うと、コンポーネント設計がワンランク上がります。

npx skills add vercel-labs/agent-skills --skill vercel-composition-patterns
Enter fullscreen mode Exit fullscreen mode

14. vercel-react-native-skills

React Native公式のベストプラクティス集。モバイルアプリ開発をやっているなら入れておいて損はない。

npx skills add vercel-labs/agent-skills --skill vercel-react-native-skills
Enter fullscreen mode Exit fullscreen mode

15. sleek-design-mobile-apps

モダンで洗練されたモバイルアプリのデザインガイドライン。Agentが生成するアプリUIの質感が一気に上がります。ダサいUIとはおさらば。

npx skills add sleekdotdesign/agent-skills --skill sleek-design-mobile-apps
Enter fullscreen mode Exit fullscreen mode

16. ui-skills

UIコンポーネントとインタラクションのベストプラクティス。最近Xでもかなり話題になっていて、デザイナーレベルのインターフェースをAIに書かせたいならこれ一択。

npx skills add ibelick/ui-skills
Enter fullscreen mode Exit fullscreen mode

17. pdf

PDFの生成・解析・処理をAgentに任せられるSkills。レポート作成や書類処理など、日常業務で地味に助かる場面が多い。

npx skills add anthropics/skills --skill pdf
Enter fullscreen mode Exit fullscreen mode

18. seo-audit

WebサイトのSEO監査と改善提案を出してくれるSkills。本番プロジェクトにそのまま使えるレベルで、効果が目に見えて出ます。

npx skills add coreyhaines31/marketingskills --skill seo-audit
Enter fullscreen mode Exit fullscreen mode

19. skill-creator

自分だけのオリジナルSkillsを作れるようになるSkills。他の人のアップデートを待つ必要がなくなるので、欲しい機能は自分で作れるようになります。

npx skills add anthropics/skills --skill skill-creator
Enter fullscreen mode Exit fullscreen mode

20. code-review-expert

シニアエンジニアのようなコードレビューを実現。SOLID原則、セキュリティ、パフォーマンスなど多角的にチェックしてくれるので、PRの品質が確実に上がります。

npx skills add sanyuan0704/code-review-expert
Enter fullscreen mode Exit fullscreen mode

まとめ

「Agentの差って、モデルのパラメータ数で決まるんでしょ？」って思ってる人、多いと思います。

でも、実際に使い込んでみると分かるんですが、本当に差が出るのはルール（Skills）の部分なんですよね。

モデルは最低ラインを決める。Skillsは上限を決める。

ツールはどんどん進化するし、モデルもどんどん大きくなる。でも、これからの開発者に求められるのは、コードを書く力だけじゃなく、Agentに正しいルールを定義して、AIの振る舞いを設計する力だと思います。

気になるSkillsがあったら、まずは1つ試してみてください。体感が変わるはずです。

もしこの記事が参考になったら、ぜひシェアしてもらえると嬉しいです。他にもおすすめのSkillsがあれば、コメントで教えてください！

Top comments (0)