home / mcp / yc-css-ui mcp server

YC-CSS-UI MCP Server

Provides automated CSS analysis, repair suggestions, and performance optimization via an MCP server for CSS issues and improvements.

Installation

Add the following to your MCP client configuration file.

Configuration

View docs

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

You have a dedicated MCP server for YC-CSS-UI that analyzes CSS snippets, identifies issues, and offers AI-driven repair suggestions and performance optimization. This server is designed to help you integrate automated CSS analysis into your development workflow and Claude Code alongside real-time debugging and cross-browser checks.

How to use

Set up your MCP client to communicate with the YC-CSS-UI MCP server, then analyze CSS, receive remediation ideas, and apply fixes or optimizations in your project. You can run the server locally or connect to a remote instance via the provided MCP entry. Use the analyze results to drive automated refactors or guide manual improvements.

Key actions you can perform with the MCP server include analyzing CSS to surface issues, getting automatic repair recommendations, and optimizing CSS performance. You can also use it to verify cross-browser compatibility and accessibility concerns as part of your workflow.

How to install

Prerequisites you need before getting started:

Node.js 18+
Yarn 3.8+

Install and run the MCP server following the flow shown here to get a development environment running.

# Clone the MCP server repository
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 in development mode
yarn dev

Configuration and usage notes

Configure the MCP client to connect to the YC-CSS-UI MCP server. The following configuration establishes a stdio-based MCP connection using npx to launch the server package.

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

Examples of usage with the MCP server

1) Detect a Flexbox issue and receive a suggested fix (e.g., add a minimum height to a flex container).

/* Problematic CSS */
.navbar {
  display: flex;
  align-items: center; /* ⚠️ warning: container lacks explicit height */
}

/* Suggested fix from the MCP server */
.navbar {
  display: flex;
  align-items: center;
  min-height: 60px; /* ✅ explicit height */
}

Test and development commands

Run tests, build, and start the development server as described in the project setup to ensure everything works in your environment.

# Run all tests
yarn test

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

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

Notes and best practices

Keep your Node.js version aligned with the prerequisites to avoid compatibility issues. When you develop against the MCP server, prefer using the stdio configuration that directly launches the server with npx as shown above.

Available tools

analyzeCSS

Analyzes CSS code to surface layout, performance, compatibility, and accessibility issues and returns a summary with detailed issue messages.