/ ディレクトリ / プレイグラウンド / cc-frontend-skills
← 全サーバー ↗ GitHub
● コミュニティ oikon48 ⚡ 即起動

cc-frontend-skills

作者 oikon48 · oikon48/cc-frontend-skills

ChatGPTが生成したような紫グラデーション＋角丸だらけのページから脱却する、フロントエンドUI構築のためのClaude Codeプラグインです。

日本人が開発した、意図あるビジュアルアイデンティティを持つフロントエンドUIを構築するためのClaude Codeスキルです。デフォルトの「AIデザイン言語」（汎用グラデーション、同じカードレイアウト、shadcnクローン）から離れ、タイポグラフィ、グリッド、実際のデザインリファレンスに基づいたカラーシステムなど、意図を感じる選択へとClaudeを導きます。

▶ デモを見る 📦 インストール 💡 ユースケース

なぜ使うのか

主な機能

ライブデモ

実際の動作

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

インストール

作者のリポジトリ · Claude Skills の公式ドキュメント

ユースケース

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

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

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

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

フロー
  1. 美学を指定する
    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のヒーローではなく、具体的なタイプ選択を含むレイアウト案
  2. グリッドとタイポグラフィを詰める
    Tighten the typographic scale to a 1.333 modular scale; use Charter or similar serif.✓ コピーしました
    → 'sans-serif'ではなく、フォント名が指定された具体的なCSS
  3. 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ベースのアプリと見分けがつかない場合。

フロー
  1. 診断する
    Use cc-frontend-skills. Look at /app/dashboard. What are the specific AI-design tells here?✓ コピーしました
    → 具体的なリスト：「すべてがlg-rounded、全カードにシャドウ、グラデーションCTA、常に3カラムグリッド」など
  2. 代替案を提案する
    Suggest an aesthetic direction anchored to one data-dense design reference (Bloomberg terminal, Figma's inspector panel).✓ コピーしました
    → 具体的な適用方法を伴う名前付きリファレンス
  3. 段階的に適用する
    Start with typography only — fix hierarchy without touching layout.✓ コピーしました
    → font-size、letter-spacing、weightのみを変更するdiff

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

注意点
  • デザインに凝りすぎてアクセシビリティを壊す — AAコントラストを維持する。ビジュアルアイデンティティに薄いグレー・オン・ホワイトは不要
組み合わせ： chrome-devtools

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

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

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

フロー
  1. 棚卸しする
    Use cc-frontend-skills. Review components/ and identify inconsistencies in border-radius, shadow, spacing.✓ コピーしました
    → トークンごとのばらつき一覧表
  2. トークンを提案する
    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的美学を診断するとき 0
aesthetic_brief named reference style 方向性を持って新しいページに着手するとき 0
typography_tune current scale タイプ階層を修正するとき 0

コストと制限

運用コスト

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

セキュリティ

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

認証情報の保管： なし
データ送信先： なし — ローカルスキル

トラブルシューティング

よくあるエラーと対処法

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

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

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

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

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

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

代替案

cc-frontend-skills 他との比較

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

その他

リソース

📖 GitHub の公式 README を読む

🐙 オープンな issue を見る

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