こんにちは。てばです。

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

この記事では、個人的によく使うClaude Codeスキルをまとめました。

📋 この記事の内容

• よく使うスキルの一覧

📖 よく使うスキル一覧

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

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

✅ frontend-design（Anthropic公式）

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

✅ web-design-guidelines（Vercel公式）

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

✅ react-best-practices（Vercel公式）

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

✅ composition-patterns（Vercel公式）

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

✅ react-native-skills（Vercel公式）

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

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

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

✅ sleek-design-mobile-apps

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

✅ ui-skills

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

✅ seo-audit

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

✅ skill-creator（Anthropic公式）

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

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

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

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

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

✅ obsidian-skills（kepano公式）

ObsidianユーザーがClaude Codeと連携するためのスキルセット。Obsidianの作者kepano氏が公開しています。

含まれるスキルは以下の5つです。

• obsidian-markdown（ウィキリンク・コールアウトなどObsidian独自記法を正しく扱う）
• obsidian-bases（.baseファイル＝Basesビューの作成・編集）
• json-canvas（.canvasファイルの操作）
• obsidian-cli（CLIを使ったVault操作）
• defuddle（WebページからクリーンなMarkdownを抽出）

個人的には obsidian-markdown が特に役立っています。Obsidian独自の記法（[[wikilink]]やコールアウト構文など）をClaude Codeが正確に理解してくれるので、「Obsidianのノートを整理して」「この記事をVaultに追加して」といった指示がスムーズに通ります。

Obsidianをナレッジベースとして使いながらClaude Codeで開発している方には試す価値があります。

✅ humanizer-ja（AIくさい日本語を人間らしい文章に）

AI（Claude、ChatGPT、Gemini等）が生成した日本語テキストから「AIっぽさ」を除去し、人間が書いたように読める文章に書き換えるスキル。WikiProject AI Cleanupの知見をベースに日本語特有のパターンを追加したオリジナル実装です。

「人間っぽくして」「humanize」と指示するだけで起動し、以下のようなパターンをチェックして修正してくれます：

• 太字+コロンの箇条書き（- **ラベル**: 内容 形式）
• 「〜と言えるでしょう」「〜ではないでしょうか」などの定型評価語
• 「詳しく解説していきます」のような説教くさい前置き・締め句
• 全角ダッシュ（——）の乱用
• 「〜することができます」→「〜できます」への短縮
• 結論に自分の体温が入っているかのチェック

ブログ記事や社内ドキュメントを書いた後にかけると、一気に読みやすくなります。個人的にこのブログの記事を書くときは必ず使うようにしています。

✅ expo-app-design（Expo公式）

ExpoとReact NativeでモバイルアプリのUIから通信・APIまでカバーするスキルセット。

含まれるスキルは以下の6つです。

• building-native-ui（Expo Routerを使ったネイティブUI構築の完全ガイド。ナビゲーション、スタイリング、アニメーション、NativeTabsまで）
• expo-api-routes（Expo RouterでのAPIルート作成。EAS Hosting＝Cloudflare Workersへのデプロイもカバー）
• expo-tailwind-setup（Tailwind CSS v4をNativeWind v5と組み合わせてExpoに導入する手順）
• native-data-fetching（fetch API・React Query・認証トークン管理・オフライン対応など通信処理全般）
• use-dom（'use dom' ディレクティブを使い、rechartsなどWeb専用ライブラリをネイティブアプリのWebview上で動かす）
• expo-dev-client（カスタムネイティブコードが必要なときにEAS Buildで開発クライアントを作成・TestFlight配信）

Expoでアプリを作るなら最初からセットで入れておきたい。個人的には building-native-ui と native-data-fetching が出番多めです。

✅ expo-deployment（Expo公式）

ExpoアプリをiOS App Store、Android Play Store、Webにデプロイするためのスキルセットをまとめたもの。

含まれるスキルは以下の2つです。

• expo-deployment（EASを使ったiOS/Android/Web全プラットフォームへのデプロイ手順とeas.jsonの設定例）
• expo-cicd-workflows（.eas/workflows/ に置くCI/CDワークフローYAMLファイルの作成・検証を支援。最新のEASスキーマを取得してバリデーションまでやってくれる）

ストアへの提出手順は毎回調べ直してたので、このスキルがあると助かります。

✅ upgrading-expo（Expo公式）

Expo SDKのバージョンアップと依存関係の修正をガイドするスキル。

新アーキテクチャ移行（SDK 53+）、React 19対応（SDK 54+）、React Compiler導入、非推奨パッケージの置き換えなど、メジャーバージョンアップで踏みやすいポイントをまとめてくれています。

expo-av → expo-audio/expo-video の移行や、Metro・PostCSS設定の不要な記述の整理も含まれています。アップグレードのたびに何かしら詰まるので、最初にざっと読んでおくと時間を節約できます。

🛡️ セキュリティ注意点

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

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

🎯 まとめ

新しいプロジェクトを始めるたびに調べ直すのが面倒なので、この記事にまとめています。気になるものがあれば名前で検索してみてください。

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