YC-CSS-UI MCP CSS Debugging & Optimization

YC-CSS-UI 智能CSS调试与优化MCP服务

Languages: English | 简体中文

✨ 特性

• 🔍 智能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文档
• 贡献指南 - 如何参与贡献
• 更新日志 - 版本更新记录

🤝 贡献

我们欢迎所有形式的贡献！请查看 贡献指南 了解详情。

贡献方式

• 🐛 报告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

---

⭐ 给我们点个星 如果这个项目对你有帮助！