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