Claude Codeに最低限入れるべきMCP・プラグイン

Claude Codeを素で使ってる人、損してるゾ。
というわけで「これだけは入れとけ」という2つを紹介する。残りは各自ggれ。

そもそもMCPとSkillって何が違うの？

ざっくり言うと：

• MCP（Model Context Protocol） ─ 外部ツール・サービスをClaudeが「使える」ようにする仕組み。GitHubやSlackなど外の世界と繋ぐ。
• Skill ─ Claudeがタスクをこなすときの「やり方の手引き」。特定ジャンルで一貫して高品質なアウトプットを出させるための指示書セット。

どちらもClaude Codeの /plugin コマンドからマーケットプレイス経由でインストールできる。

1. Repomix（MCP）

リポジトリ： yamadashy/repomix

リポジトリ全体を1つのAIフレンドリーなファイルにパックするツール。スター20k超えの人気OSS。

何がうれしいのか

コードベースをまるごとLLMに食わせたいとき、ファイルを1個1個貼り付けるのはダルすぎる。Repomixならリポジトリ全体を単一ファイルに固めてくれるので、「このプロジェクト全部読んで」が現実的になる。

Claude Code上ではMCPサーバーとして動くので、会話の中でリポジトリの内容を参照させながら作業できる。

入れ方

1. Claude Codeを起動してターミナルで /plugin を実行
2. 「Add MarketPlace」を選択し https://github.com/yamadashy/repomix を入力
3. 「Browse and install plugins」からインストール

公式ドキュメント：Claude Code Plugins

2. frontend-design（Skill）

リポジトリ： anthropics/skills

Anthropic公式のSkillライブラリの中の1つ。フロントエンド制作時の「AIっぽいダサいUI」を回避するための指示書。

何がうれしいのか

何も指定しないとClaudeが作るUIは「Inter + 白背景 + ありきたりなカード」みたいなやつになりがち。このSkillを入れると：

• タイポグラフィに個性的なフォントを選ぶ
• 色設計にコンセプトを持たせる（ドミナントカラー + シャープなアクセント）
• アニメーション・マイクロインタラクションを積極的に実装する
• ブルータリスト・レトロフューチャー・エディトリアルなどボールドな方向性にコミットする

いわゆる「AI slop」を避けてプロダクショングレードのUIを生成させるための思想がSKILL.mdに詰まっている。ReactでもHTML/CSS/JSでも効く。

入れ方

Claude Code公式マーケットプレイスから：

1. /plugin → 「Add MarketPlace」→ https://github.com/anthropics/skills を追加
2. 「Browse and install plugins」→ frontend-design を選択してインストール

Skillはモデルが自動で判断して使う（フロントエンド系の依頼をすれば勝手に発動する）。

公式ドキュメント：Agent Skills

3. その他は各自ggれ

上の2つは「入れない理由がない」レベルなので強制。あとは用途次第。