最近、Claude CodeやCopilot Agentを触り始めたんだけど、正直な感想として「素のAgent、思ったより微妙じゃない？」って思ったんですよね。
チャットはできる。コードも生成してくれる。でも、なんか…プロダクションレベルじゃない。
例えばこんな感じ：
- コードは書けるけど、設計パターンがめちゃくちゃ
- 質問には答えてくれるけど、実務のベストプラクティスを知らない
- UIは生成できるけど、どう見てもデザイン素人が作った感じ
要するに、スマホを買ったけどアプリを何もインストールしてない状態。OSはあるのに、使い道がない。
Skillsって何？
Skillsはプラグインとはちょっと違います。Agentに業界のベストプラクティス、実プロジェクトの経験値、エンジニアリングの制約ルール、構造化された思考フレームワークを注入するものです。
つまり、「Agent の地頭」を底上げする仕組みですね。
今回紹介する20個のSkillsのうち、まずは最初の5つを入れてみてください。体感が全然変わります。
skills.sh でもこの5つはインストール数トップです。
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
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
3. frontend-design
Agentが生成するUIって、正直「いかにもAIが作った感」が出ちゃいますよね。このSkillsを入れると、配色・レイアウト・アニメーションのクオリティが明らかに上がります。テンプレ感のない、ちゃんとしたUIを出力してくれるようになる。
npx skills add https://github.com/anthropics/skills --skill frontend-design
4. web-design-guidelines
コードレビューのお供に最適。100以上のWebアクセシビリティ・UX・パフォーマンスのルールが含まれていて、初歩的なUXミスを防いでくれます。PRレビューの時にこれが効いてくると、かなり楽になる。
npx skills add https://github.com/vercel-labs/agent-skills --skill web-design-guidelines
5. remotion-best-practices
Reactでショート動画を作れるRemotionのベストプラクティス集。アニメーション、エクスポート、パフォーマンス最適化まで網羅されていて、動画制作初心者でもサクッと高品質なショート動画が作れるようになります。
npx skills add https://github.com/remotion-dev/skills --skill remotion-best-practices
6. brainstorming
Superpowersフレームワークベースで、構造化されたブレインストーミング・TDD・ワークフロー設計をAgentにやらせることができます。「とりあえず何か出して」じゃなく、ちゃんと整理されたアウトプットが出てくるようになる。
npx skills add https://github.com/obra/superpowers --skill brainstorming
7. agent-browser
ブラウザの自動操作を実現するSkills。Webページの閲覧、フォームの自動入力、スクリーンショットの取得など、手作業で面倒だったタスクをAgentに丸投げできます。
npx skills add https://github.com/vercel-labs/agent-browser --skill agent-browser
8. browser-use
もう一つの強力なブラウザ操作Skills。Rust実装で動作が高速。agent-browserと組み合わせることで、複雑な自動化タスクでも安定して動かせるようになります。
npx skills add https://github.com/browser-use/browser-use --skill browser-use
9. supabase-postgres-best-practices
Supabase + PostgreSQLのデータベース最適化ガイド。SQLのアンチパターンを避けて、パフォーマンスを引き出すためのルールが詰まっています。DBまわりで沼にハマりたくないなら必須。
npx skills add https://github.com/supabase/agent-skills --skill supabase-postgres-best-practices
10. azure-cost-optimization
Azureのコスト最適化ルールセット。クラウドの請求書を見て「え、こんなにかかってるの？」ってなった経験、ありませんか？このSkillsを入れておくと、笑えない金額になる前に対策が打てます。
npx skills add https://github.com/microsoft/github-copilot-for-azure --skill azure-cost-optimization
11. cloudflare/skills
Cloudflare WorkersとEdge Computingのベストプラクティス。最近かなりバズっていて、Vercelユーザーからの乗り換え組も増えている印象。エッジで動かしたいならこれ。
npx skills add cloudflare/skills
12. redis/agent-skills
Redisの上級パターンとアンチパターン集。キャッシュ、ベクトル検索、ストリーム処理まで網羅。Redisを「ただのキャッシュ」から卒業させてくれます。
npx skills add redis/agent-skills
13. vercel-composition-patterns
Reactのコンポジションパターンに特化したベストプラクティス。先ほどの vercel-react-best-practices と組み合わせて使うと、コンポーネント設計がワンランク上がります。
npx skills add https://github.com/vercel-labs/agent-skills --skill vercel-composition-patterns
14. vercel-react-native-skills
React Native公式のベストプラクティス集。モバイルアプリ開発をやっているなら入れておいて損はない。
npx skills add https://github.com/vercel-labs/agent-skills --skill vercel-react-native-skills
15. sleek-design-mobile-apps
モダンで洗練されたモバイルアプリのデザインガイドライン。Agentが生成するアプリUIの質感が一気に上がります。ダサいUIとはおさらば。
npx skills add https://github.com/sleekdotdesign/agent-skills --skill sleek-design-mobile-apps
16. ui-skills
UIコンポーネントとインタラクションのベストプラクティス。最近Xでもかなり話題になっていて、デザイナーレベルのインターフェースをAIに書かせたいならこれ一択。
npx skills add ibelick/ui-skills
17. pdf
PDFの生成・解析・処理をAgentに任せられるSkills。レポート作成や書類処理など、日常業務で地味に助かる場面が多い。
npx skills add https://github.com/anthropics/skills --skill pdf
18. seo-audit
WebサイトのSEO監査と改善提案を出してくれるSkills。本番プロジェクトにそのまま使えるレベルで、効果が目に見えて出ます。
npx skills add https://github.com/coreyhaines31/marketingskills --skill seo-audit
19. skill-creator
自分だけのオリジナルSkillsを作れるようになるSkills。他の人のアップデートを待つ必要がなくなるので、欲しい機能は自分で作れるようになります。
npx skills add https://github.com/anthropics/skills --skill skill-creator
20. code-review-expert
シニアエンジニアのようなコードレビューを実現。SOLID原則、セキュリティ、パフォーマンスなど多角的にチェックしてくれるので、PRの品質が確実に上がります。
npx skills add https://github.com/sanyuan0704/code-review-expert --skill code-review-expert
まとめ
「Agentの差って、モデルのパラメータ数で決まるんでしょ？」って思ってる人、多いと思います。
でも、実際に使い込んでみると分かるんですが、本当に差が出るのはルール（Skills）の部分なんですよね。
モデルは最低ラインを決める。Skillsは上限を決める。
ツールはどんどん進化するし、モデルもどんどん大きくなる。でも、これからの開発者に求められるのは、コードを書く力だけじゃなく、Agentに正しいルールを定義して、AIの振る舞いを設計する力だと思います。
気になるSkillsがあったら、まずは1つ試してみてください。体感が変わるはずです。
もしこの記事が参考になったら、ぜひシェアしてもらえると嬉しいです。他にもおすすめのSkillsがあれば、コメントで教えてください！