Yc Css Ui MCP

🚀 YC-CSS-UI MCP CSS調試與優化

YC-CSS-UI 智能CSS調試與優化MCP服務，能夠對CSS代碼進行智能分析，檢測佈局、性能、兼容性等問題，並提供自動修復建議，還可與Claude Code無縫集成，實現即時調試和性能優化。

🚀 快速開始

環境要求

• 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

✨ 主要特性

• 🔍 智能CSS分析：檢測佈局、性能、兼容性問題。
• 🛠️ 自動修復建議：AI驅動的代碼修復方案。
• ⚡ 即時調試：與Claude Code無縫集成。
• 📊 性能優化：CSS性能分析和優化建議。
• 🎯 準確性優化：基於PostCSS的精確語法分析。
• 🌐 兼容性檢查：跨瀏覽器兼容性驗證。
• ♿ 可訪問性：WCAG合規性檢查。

💻 使用示例

基礎用法

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/

不同場景使用示例

檢測Flexbox問題

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

/* 修復建議 */
.navbar {
  display: flex;
  align-items: center;
  min-height: 60px; /* ✅ 添加明確高度 */
}

Grid佈局診斷

/* 問題CSS */
.grid-container {
  display: grid; /* ❌ 錯誤：缺少grid模板 */
}

/* 修復建議 */
.grid-container {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); /* ✅ 添加模板 */
}

性能優化

/* 問題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

📦 包結構

這是一個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樣式缺失

維護性問題

• ✅ 選擇器特異性過高
• ✅ 特異性衝突
• ✅ 代碼重複

📚 詳細文檔

• 用戶指南：詳細使用說明。
• API參考：完整API文檔。
• 貢獻指南：如何參與貢獻。
• 更新日誌：版本更新記錄。

🤝 貢獻

我們歡迎所有形式的貢獻！請查看 貢獻指南 瞭解詳情。

貢獻方式

• 🐛 報告Bug
• 💡 提出新功能建議
• 📖 改進文檔
• 💻 提交代碼
• 🧪 編寫測試
• 🌐 翻譯文檔

快速貢獻

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