cc-frontend-skills MCP — ユースケース, インストール & ライブデモ

なぜ使うのか

主な機能

デフォルトのAI的な見た目を避けるための明確なスタイルガイダンス
エディトリアル / 印刷 / ブルータリスト / ミニマリストなどのデザイン言語を参照
日本人が作成したプロンプト — どの言語でも利用可能
タイポグラフィ、ホワイトスペース、グリッドの厳密さに注力
フレームワーク非依存（React、Vue、Svelte、素のHTML）

ライブデモ

実際の動作

cc-frontend-skill.replay ▶ 準備完了

0/0

インストール

クライアントを選択

~/Library/Application Support/Claude/claude_desktop_config.json · Windows: %APPDATA%\Claude\claude_desktop_config.json

{
  "mcpServers": {
    "cc-frontend-skill": {
      "command": "git",
      "args": [
        "clone",
        "https://github.com/oikon48/cc-frontend-skills",
        "~/.claude/skills/cc-frontend-skills"
      ],
      "_inferred": true
    }
  }
}

Claude Desktop → Settings → Developer → Edit Config を開く。保存後、アプリを再起動。

~/.cursor/mcp.json · .cursor/mcp.json

{
  "mcpServers": {
    "cc-frontend-skill": {
      "command": "git",
      "args": [
        "clone",
        "https://github.com/oikon48/cc-frontend-skills",
        "~/.claude/skills/cc-frontend-skills"
      ],
      "_inferred": true
    }
  }
}

Cursor は Claude Desktop と同じ mcpServers スキーマを使用。プロジェクト設定はグローバルより優先。

VS Code → Cline → MCP Servers → Edit

{
  "mcpServers": {
    "cc-frontend-skill": {
      "command": "git",
      "args": [
        "clone",
        "https://github.com/oikon48/cc-frontend-skills",
        "~/.claude/skills/cc-frontend-skills"
      ],
      "_inferred": true
    }
  }
}

Cline サイドバーの MCP Servers アイコンをクリックし、"Edit Configuration" を選択。

~/.codeium/windsurf/mcp_config.json

{
  "mcpServers": {
    "cc-frontend-skill": {
      "command": "git",
      "args": [
        "clone",
        "https://github.com/oikon48/cc-frontend-skills",
        "~/.claude/skills/cc-frontend-skills"
      ],
      "_inferred": true
    }
  }
}

Claude Desktop と同じ形式。Windsurf を再起動して反映。

~/.continue/config.json

{
  "mcpServers": [
    {
      "name": "cc-frontend-skill",
      "command": "git",
      "args": [
        "clone",
        "https://github.com/oikon48/cc-frontend-skills",
        "~/.claude/skills/cc-frontend-skills"
      ]
    }
  ]
}

Continue はマップではなくサーバーオブジェクトの配列を使用。

~/.config/zed/settings.json

{
  "context_servers": {
    "cc-frontend-skill": {
      "command": {
        "path": "git",
        "args": [
          "clone",
          "https://github.com/oikon48/cc-frontend-skills",
          "~/.claude/skills/cc-frontend-skills"
        ]
      }
    }
  }
}

context_servers に追加。保存時に Zed がホットリロード。

claude mcp add cc-frontend-skill -- git clone https://github.com/oikon48/cc-frontend-skills ~/.claude/skills/cc-frontend-skills

ワンライナー。claude mcp list で確認、claude mcp remove で削除。

ユースケース

実用的な使い方： cc-frontend-skills

AIスラッジではなく、ビジュアルアイデンティティのあるランディングページを構築する

👤 AIが生成したランディングページの見た目にうんざりしている個人開発者やファウンダー ⏱ ~60 min intermediate

使うタイミング： Claudeにランディングページを頼んだら、またしても紫グラデーションのヒーローセクションに角丸カードが出てきた場合。

前提条件

スキルのインストール — git clone https://github.com/oikon48/cc-frontend-skills ~/.claude/skills/cc-frontend-skills
参考にしたいスタイルのイメージ — エディトリアル、スイス、ブルータリスト、Y2K、ウォームモノクロームなど、何でもひとつ挙げてください

フロー

美学を指定する

Use cc-frontend-skills. Build a landing page for my book in the style of mid-century Penguin paperback covers — restrained type, one accent color, generous whitespace.✓ コピーしました

→ shadcnのヒーローではなく、具体的なタイプ選択を含むレイアウト案
グリッドとタイポグラフィを詰める

Tighten the typographic scale to a 1.333 modular scale; use Charter or similar serif.✓ コピーしました

→ 'sans-serif'ではなく、フォント名が指定された具体的なCSS
AI臭さを排除する

Audit for AI-design tells: emoji headers, excessive shadow-lg, gradient text, identical card layouts. Kill them.✓ コピーしました

→ ありがちなAI的要素を削除するdiff

結果： 誰かがちゃんとこだわって作ったように見えるランディングページ。

注意点

数回のイテレーション後にClaudeがデフォルトに戻ってしまう — フォローアップのプロンプトごとにスタイルリファレンスを明示する — コンテキストが引き継がれることに頼らない

組み合わせ： filesystem

汎用的なダッシュボードを「デザインされている」と感じるものにリファクタリングする

👤 全員が内心嫌がっている社内ツールを出荷しているチーム ⏱ ~90 min intermediate

使うタイミング： ダッシュボードは動くが、他のshadcnベースのアプリと見分けがつかない場合。

フロー

診断する

Use cc-frontend-skills. Look at /app/dashboard. What are the specific AI-design tells here?✓ コピーしました

→ 具体的なリスト：「すべてがlg-rounded、全カードにシャドウ、グラデーションCTA、常に3カラムグリッド」など
代替案を提案する

Suggest an aesthetic direction anchored to one data-dense design reference (Bloomberg terminal, Figma's inspector panel).✓ コピーしました

→ 具体的な適用方法を伴う名前付きリファレンス
段階的に適用する

Start with typography only — fix hierarchy without touching layout.✓ コピーしました

→ font-size、letter-spacing、weightのみを変更するdiff

結果： 主張のあるダッシュボード。

注意点

デザインに凝りすぎてアクセシビリティを壊す — AAコントラストを維持する。ビジュアルアイデンティティに薄いグレー・オン・ホワイトは不要

組み合わせ： chrome-devtools

コンポーネントライブラリに一貫したビジュアルボイスを与える

👤 デザインシステムのメンテナー ⏱ ~60 min advanced

使うタイミング： ボタン、カード、インプットがそれぞれ別々に生成され、統一感がない場合。

フロー

棚卸しする

Use cc-frontend-skills. Review components/ and identify inconsistencies in border-radius, shadow, spacing.✓ コピーしました

→ トークンごとのばらつき一覧表
トークンを提案する

Propose a consolidated design token set with one radius scale, one shadow scale, one spacing ramp.✓ コピーしました

→ トークンJSON / Tailwindコンフィグ

結果： ライブラリ全体をひとつのものとして感じさせるトークンセット。

組み合わせ

他のMCPと組み合わせて10倍の力を

cc-frontend-skill + chrome-devtools

ブラウザ上でスタイルをライブ調整し、変更をソースに反映する

ページを開き、devtoolsでタイプスケールがしっくりくるまで調整してから、CSSにdiffを適用する。✓ コピーしました

cc-frontend-skill + filesystem

モノレポ全体にデザインシステムの更新を適用する

packages/ui/内のすべてのボタンバリアントを新しいトークンセットに更新する。✓ コピーしました

ツール

このMCPが提供する機能

ツール	入力	呼び出すタイミング
style_audit	component or page	汎用的なAI的美学を診断するとき
aesthetic_brief	named reference style	方向性を持って新しいページに着手するとき
typography_tune	current scale	タイプ階層を修正するとき

コストと制限

運用コスト

APIクォータ: なし
呼び出しあたりのトークン: 中程度
金額: 無料
ヒント: 一度に1ページずつ対応してください。アプリ全体のリファクタリングはコンテキストを肥大化させます。

セキュリティ

権限、シークレット、影響範囲

認証情報の保管： なし

データ送信先： なし — ローカルスキル

トラブルシューティング

よくあるエラーと対処法

Claudeがshadcn/Tailwindのデフォルトを提案し続ける

明示的に指示する：「shadcnのデフォルトを使わず、cc-frontend-skillsのaesthetic briefを使ってください」

生成されたコードが無名フォントを使用している

プロンプトでフォントスタックを指定する。Claudeはしばしば汎用的なまま残す

スキルのドキュメントが日本語で読めない

ClaudeにSKILL.mdを翻訳させてください。スキルはプロンプトの言語に関係なく動作します

代替案

cc-frontend-skills 他との比較

代替案	代わりに使う場面	トレードオフ
apple-hig-designer-skill	iOS / macOSのHIG美学を特に狙う場合	プラットフォーム固有
Tailwind UI / shadcn blocks	アイデンティティよりスピードを重視する場合	すべてが同じ見た目になる

その他

リソース

📖 GitHub の公式 README を読む

🐙 オープンな issue を見る

🔍 400以上のMCPサーバーとSkillsを見る