こんにちは。てばです。

以前、よく使うMCPサーバー設定まとめの記事を書きましたが、今回はその スキル版 です。

Claude Codeを使っていて、こんな経験はありませんか？

💭 あのスキル、どうやってインストールするんだっけ...

よく使うスキルをまとめておけば、必要な時にサッとインストールして使えます。

この記事では、個人的によく使うClaude Codeスキルをインストールコマンド付きでまとめました。

📋 この記事の内容

• よく使うスキルの一覧とインストールコマンド

📖 よく使うスキル一覧

以下は個人的によく使うスキルです！

知らないスキルがあれば、名前で検索してもらえれば出ると思うので、参考にどうぞー

✅ frontend-design（Anthropic公式）

AIが生成するUIの「いかにもAIが作った感」を脱却させるデザインスキル。色使い、タイポグラフィ、アニメーション、余白の使い方まで変わります。

npx skills add anthropics/skills@frontend-design -g

✅ web-design-guidelines（Vercel公式）

VercelのWeb Interface Guidelinesに基づいて、UIコードをデザイン・アクセシビリティ・UXの観点で監査してくれるスキル。最新のガイドラインをリモートから取得してからレビューするので、ルールが常に最新です。

npx skills add vercel-labs/agent-skills@web-design-guidelines -g

✅ react-best-practices（Vercel公式）

ReactやNext.jsのパフォーマンス最適化に関するVercel公式ガイドライン。コンポーネント設計やレンダリング最適化のベストプラクティスを適用してくれます。

npx skills add vercel/skills@react-best-practices -g

✅ composition-patterns（Vercel公式）

スケーラブルなコンポーネントライブラリを構築するための、Reactの高度なCompositionパターン集。コンポーネント設計で迷ったときに。

npx skills add vercel/skills@composition-patterns -g

✅ react-native-skills（Vercel公式）

React NativeとExpoでパフォーマンスの高いモバイルアプリを構築するためのベストプラクティス。

npx skills add vercel/skills@react-native-skills -g

✅ supabase-postgres-best-practices（Supabase公式）

Supabase公式のPostgresパフォーマンス最適化ガイド。クエリのインデックス設計、コネクションプーリング、RLS（Row Level Security）の設定、スキーマ設計パターンなど8カテゴリのルールが含まれています。

npx skills add supabase/agent-skills@supabase-postgres-best-practices -g

✅ sleek-design-mobile-apps

Sleek AIを使ったモバイルアプリのUIデザインスキル。自然言語でアプリを説明するだけで、レンダリングされた画面が生成されます。APIキー（SLEEK_API_KEY）が必要です。

npx skills add sleekdotdesign/agent-skills@sleek-design-mobile-apps -g

✅ ui-skills

エージェントが作ったUIを「磨く」ためのスキルセット。ベースラインUI改善、アクセシビリティ修正、アニメーションパフォーマンス最適化などが含まれています。

✅ seo-audit

SEOの専門家としてサイトを監査するスキル。テクニカルSEO、メタタグ、Core Web Vitals、インデックスの問題などを診断して、改善提案をしてくれます。

npx skills add coreyhaines31/marketingskills@seo-audit -g

✅ skill-creator（Anthropic公式）

新しいスキルを作るときのガイド。Q&A形式でインタラクティブにスキルを構築できます。

npx skills add anthropics/skills@skill-creator -g

✅ code-review-expert（個人的イチオシ）

SOLID原則、セキュリティ、パフォーマンス、エラーハンドリング、境界条件の観点でコードレビューしてくれるスキル。

「AIが書いたコードをまた同じAIにレビューさせても意味ないのでは？」と思うかもしれませんが、実はこれがかなり効きます。コード生成時とレビュー時では 関心ごとが分離 されているため、生成時には見落としていた問題がレビュー用のサブエージェントとして実行すると浮き彫りになることが多いです。

個人的に一番よく使っているスキルです。

npx skills add sanyuan0704/sanyuan-skills@code-review-expert -g

🛡️ セキュリティ注意点

スキルは 任意のコードを実行できる ため、インストール時には注意が必要です。

• 信頼できるソースのみ使用 する（Anthropic公式、有名なOSSなど）
• インストール前に SKILL.md の中身を確認 する
• APIキーをスキル内にハードコードしない（環境変数を使う）
• 知らないスキルは scripts/ フォルダの中身も確認 する

🎯 まとめ

よく使うスキルをまとめておけば、新しいプロジェクトを始めるときもサッとインストールできます。

この記事で紹介したスキルを：

• コピペしてインストールする
• 自分の開発スタイルに合わせて入れ替える
• 定期的に新しいスキルを探してアップデートする

まずは気になるスキルを1つ入れてみるところから始めてみてください。

この記事をブックマークして、必要な時にすぐに参照できるようにしておくと便利ですよ。

それでは、今回はこの辺で。