Yc Css Ui MCP

🚀 YC-CSS-UI MCP CSSデバッグと最適化

YC-CSS-UIは、CSSの問題を自動的に検出し、AIによる自動修復提案を提供するMCPサービスです。Claude Codeとの統合により、リアルタイムでのデバッグや性能最適化が可能です。

✨ 主な機能

• 🔍 CSS自動分析 - レイアウト、パフォーマンス、互換性の問題を検出します。
• 🛠️ 自動修復提案 - AIによるコード修復案を提供します。
• ⚡ リアルタイムデバッグ - Claude Codeとシームレスに統合され、即座に問題を解決できます。
• 📊 パフォーマンス最適化 - CSSのパフォーマンス分析と最適化提案を行います。
• 🎯 正確性最適化 - PostCSSに基づく正確な構文解析を行います。
• 🌐 互換性チェック - 複数のブラウザでの互換性を検証します。
• ♿ アクセシビリティ - WCAG適合性をチェックします。

環境要件

• Node.js 18以上
• Yarn 3.8以上

ローカル環境でのインストールと使用

git clone https://github.com/yc-css-ui/yc-css-ui-mcp.git
cd yc-css-ui-mcp

### 依存関係のインストール
yarn install

### 全てのパッケージをビルド
yarn build

### テストを実行
yarn test

### 開発モードを起動
yarn dev

NPMによるインストール - 未リリース - 現在は利用できません

npmを使用する場合

npm install @yc-css-ui/core @yc-css-ui/server

yarnを使用する場合

yarn add @yc-css-ui/core @yc-css-ui/server

pnpmを使用する場合

pnpm add @yc-css-ui/core @yc-css-ui/server

💻 使用例

基本的な使用法

import { analyzeCSS } from '@yc-css-ui/core';

const css = `
  .flex-container {
    display: flex;
    align-items: center; /* 可能的问题：缺少高度 */
  }
`;

const result = await analyzeCSS(css);
console.log(result.summary); // { totalIssues: 1, warningCount: 1, ... }
console.log(result.issues[0].message); // "flex容器缺少明确高度"

Claude Codeとの統合

1. MCPサーバーを設定します。

{
  "mcp_servers": {
    "yc-css-ui": {
      "command": "npx",
      "args": ["@yc-css-ui/server"]
    }
  }
}

2. Claude Codeで使用します。

Claude Code コマンドラインで以下を入力：
请使用YC-CSS-UI分析以下CSS代码问题：
“
.header {
  font-size: 12px;
  background-color: #f0f0f0;
  color: #999;
}”
# CSSファイルを分析
/css:debug styles/main.css

# CSSの問題を自動修復
/css:fix layout-issues styles/components/

# CSSのパフォーマンスを最適化
/css:optimize --performance styles/

📦 パッケージ構成

このプロジェクトはMonorepoで構成されており、以下のパッケージを含んでいます。

• @yc-css-ui/core - 核心的なCSS分析エンジン
• @yc-css-ui/server - MCPサーバーの実装
• @yc-css-ui/cli - コマンドラインツール（開発中）
• @yc-css-ui/vscode-extension - VS Code拡張（計画中）

🔧 サポートされる問題の種類

レイアウト問題

• ✅ Flexboxの配置が機能しない
• ✅ Gridテンプレートが欠落している
• ✅ 位置指定属性が無効
• ✅ Z-indexの重なり問題

パフォーマンス問題

• ✅ ファイルサイズが大きい
• ✅ セレクターの数が多い
• ✅ 深いネスト
• ✅ 使用されていないCSSルール

互換性問題

• ✅ 最新のCSS機能の検出
• ✅ ベンダープレフィックスが欠落している
• ✅ ブラウザのサポートを検証

アクセシビリティ問題

• ✅ 色のコントラストが不足している
• ✅ フォントサイズが小さい
• ✅ Focusスタイルが欠落している

保守性問題

• ✅ セレクターの特異性が高い
• ✅ 特異性の衝突
• ✅ コードの重複

高度な使用法

1. Flexboxの問題を検出

/* 問題のあるCSS */
.navbar {
  display: flex;
  align-items: center; /* ⚠️ 警告：容器没有明确高度 */
}

/* 修復提案 */
.navbar {
  display: flex;
  align-items: center;
  min-height: 60px; /* ✅ 明確な高さを追加 */
}

2. Gridレイアウトの診断

/* 問題のあるCSS */
.grid-container {
  display: grid; /* ❌ エラー：gridテンプレートが欠落しています */
}

/* 修復提案 */
.grid-container {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); /* ✅ テンプレートを追加 */
}

3. パフォーマンス最適化

/* 問題のあるCSS - 深いネスト */
body div#main .content ul li.item a.link {
  color: blue; /* ⚠️ 警告：セレクターのネストが深すぎます */
}

/* 最適化提案 */
.nav-link {
  color: blue; /* ✅ シンプルなクラスセレクターを使用 */
}

テスト

# 全てのテストを実行
yarn test

# 特定のパッケージのテストを実行
yarn workspace @yc-css-ui/core test

# テストを実行し、カバレッジレポートを生成
yarn test --coverage

📚 ドキュメント

• ユーザーガイド - 詳細な使用方法
• APIリファレンス - 完全なAPIドキュメント
• コントリビューションガイド - コントリビュートの方法
• 更新履歴 - バージョンの更新記録

🤝 コントリビュート

当プロジェクトへのコントリビュートを歓迎します！詳細は コントリビューションガイド を参照してください。

コントリビュートの方法

• 🐛 バグ報告
• 💡 新機能提案
• 📖 ドキュメントの改善
• 💻 コードの提出
• 🧪 テストの作成
• 🌐 ドキュメントの翻訳

簡単なコントリビュートの手順

1. プロジェクトをForkする
2. 新しい特性ブランチを作成する (git checkout -b feature/amazing-feature)
3. 変更をコミットする (git commit -m 'Add amazing feature')
4. ブランチにプッシュする (git push origin feature/amazing-feature)
5. Pull Requestを作成する

📄 ライセンス

このプロジェクトはMITライセンスの下で公開されています。詳細は LICENSE ファイルを参照してください。

🙏 謝辞

• PostCSS - 強力なCSS処理ツール
• CSS Tree - CSSの解析と分析
• Model Context Protocol - MCP標準

📞 お問い合わせ

• 🐛 問題を報告
• 💬 ディスカッション
• 📧 Email: yichaoling@gmail.com