Yc Css Ui MCP

🚀 YC-CSS-UI MCP CSS Debugging & Optimization

YC-CSS-UI offers intelligent CSS debugging and optimization MCP services, detecting and resolving various CSS issues.

🚀 Quick Start

Environment Requirements

• Node.js 18+
• Yarn 3.8+

Local Installation

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

### Install dependencies
yarn install

### Build all packages
yarn build

### Run tests
yarn test

### Start development mode
yarn dev

NPM Installation - Not yet released, currently unavailable

Using npm

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

Using yarn

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

Using pnpm

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

✨ Features

• 🔍 Intelligent CSS Analysis - Detect layout, performance, and compatibility issues.
• 🛠️ Auto-fix Suggestions - AI-driven code repair solutions.
• ⚡ Real-time Debugging - Seamlessly integrated with Claude Code.
• 📊 Performance Optimization - CSS performance analysis and optimization suggestions.
• 🎯 Accuracy Optimization - Precise syntax analysis based on PostCSS.
• 🌐 Compatibility Check - Cross-browser compatibility verification.
• ♿ Accessibility - WCAG compliance check.

💻 Usage Examples

Basic Usage

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

const css = `
  .flex-container {
    display: flex;
    align-items: center; /* Possible issue: Missing height */
  }
`;

const result = await analyzeCSS(css);
console.log(result.summary); // { totalIssues: 1, warningCount: 1, ... }
console.log(result.issues[0].message); // "The flex container is missing an explicit height"

Integration with Claude Code

1. Configure the MCP server:

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

2. Use it in Claude Code:

In the Claude Code command line, enter:
Please use YC-CSS-UI to analyze the following CSS code issues:
“
.header {
  font-size: 12px;
  background-color: #f0f0f0;
  color: #999;
}”
# Analyze a CSS file
/css:debug styles/main.css

# Automatically fix CSS issues
/css:fix layout-issues styles/components/

# Optimize CSS performance
/css:optimize --performance styles/

📦 Package Structure

This is a Monorepo project containing the following packages:

• @yc-css-ui/core - Core CSS analysis engine.
• @yc-css-ui/server - MCP server implementation.
• @yc-css-ui/cli - Command-line tool (under development).
• @yc-css-ui/vscode-extension - VS Code extension (planned).

🔧 Supported Issue Types

Layout Issues

• ✅ Flexbox alignment failure
• ✅ Missing Grid template
• ✅ Invalid positioning attributes
• ✅ Z-index stacking issues

Performance Issues

• ✅ Excessive file size
• ✅ Too many selectors
• ✅ Deep nesting
• ✅ Unused CSS rules

Compatibility Issues

• ✅ Detection of modern CSS features
• ✅ Missing vendor prefixes
• ✅ Browser support verification

Accessibility Issues

• ✅ Insufficient color contrast
• ✅ Font size too small
• ✅ Missing Focus styles

Maintainability Issues

• ✅ Excessive selector specificity
• ✅ Specificity conflicts
• ✅ Code duplication

💡 Usage Examples

1. Detect Flexbox Issues

/* Problematic CSS */
.navbar {
  display: flex;
  align-items: center; /* ⚠️ Warning: The container has no explicit height */
}

/* Fix suggestion */
.navbar {
  display: flex;
  align-items: center;
  min-height: 60px; /* ✅ Add an explicit height */
}

2. Grid Layout Diagnosis

/* Problematic CSS */
.grid-container {
  display: grid; /* ❌ Error: Missing grid template */
}

/* Fix suggestion */
.grid-container {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); /* ✅ Add a template */
}

3. Performance Optimization

/* Problematic CSS - Deep nesting */
body div#main .content ul li.item a.link {
  color: blue; /* ⚠️ Warning: Selector nesting is too deep */
}

/* Optimization suggestion */
.nav-link {
  color: blue; /* ✅ Use a simple class selector */
}

Testing

# Run all tests
yarn test

# Run tests for a specific package
yarn workspace @yc-css-ui/core test

# Run tests and generate a coverage report
yarn test --coverage

📚 Documentation

• User Guide - Detailed usage instructions
• API Reference - Complete API documentation
• Contribution Guide - How to contribute
• Changelog - Version update records

🤝 Contribution

We welcome all forms of contribution! Please check the Contribution Guide for details.

Ways to Contribute

• 🐛 Report bugs
• 💡 Propose new features
• 📖 Improve documentation
• 💻 Submit code
• 🧪 Write tests
• 🌐 Translate documentation

Quick Contribution

1. Fork the project.
2. Create a feature branch (git checkout -b feature/amazing-feature).
3. Commit your changes (git commit -m 'Add amazing feature').
4. Push to the branch (git push origin feature/amazing-feature).
5. Open a Pull Request.

📄 License

This project is licensed under the MIT License - see the LICENSE file for details.

🙏 Acknowledgments

• PostCSS - A powerful CSS processing tool.
• CSS Tree - CSS parsing and analysis.
• Model Context Protocol - MCP standard.

📞 Contact Us

• 🐛 Report an issue
• 💬 Discuss
• 📧 Email: yichaoling@gmail.com