# CSS Class Usage & Collision Analyzer MCP

> CSS Class Usage & Collision Analyzer MCP identifies and fixes frontend-related CSS/SCSS errors in your project. It scans your HTML, JSX, and TSX files to find unused or broken class references, duplicate definitions across different stylesheets, and orphaned CSS classes that are bloating your bundle size. This is essential for maintaining a clean, predictable, and performibleant frontend codebaseer.

## Overview
- **Category:** development
- **Price:** Free
- **Endpoint:** https://edge.vinkius.com/vk_preview_OYwWCxiZcsL8SkR10b7YdhePlJhhgJlh1dSMIpvx/mcp
- **Tags:** css, scss, frontend, linting, debugging

## Description

Managing a large frontend project can quickly become a nightmare of dead code and unpredictable styles. You start adding new classes, but you lose track of which ones are actually being used in your components. Before long, you're afraid to delete anything because you might break the layout. This MCP changes that by acting as a static analysis tool for your stylesheets. It looks through your HTML, JSX, and TSX files and compares them against your CSS or SCSS definitions. You can use it via Vinkius to connect your preferred AI client to your codebase, allowing your agent to find broken references, identify duplicate class names that might be causing unexpected layout shifts, and spot unused classes that are just taking up space. It keeps your styles predictable and your codebase clean without you having to manually hunt through dozens of files.

## Tools

### find_broken_references
html/.jsx/.tsx files and checks if each class has a corresponding definition in .css/.scss files.

Identifies class names used in HTML/JSX that lack CSS definitions

### find_css_collisions
css/.scss files in the project root to identify if the same class name is defined in multiple places.

Detects duplicate class definitions across different CSS files

### find_orphaned_classes
css/.scss files and compares them against usage in .html/.jsx/.tsx files.

Identifies CSS classes that are declared but never used

## Prompt Examples

**Prompt:** 
```
Find all unused CSS classes in /path/to/my-project
```

**Response:** 
```
The analysis found 3 orphaned classes: .btn-unused, .header-for-old, and .footer-deprecated.
```

**Prompt:** 
```
Are there any broken class references in my React project?
```

**Response:** 
```
Yes, the following classes are used but not defined: .missing-style and .undefined-class.
```

**Prompt:** 
```
Check for CSS class collisions in /workspace/app
```

**Response:** 
```
A collision was detected for class '.card-title' which is defined in both globals.css and component.module.css.
```

## Capabilities

### /placeholder/


## Frequently Asked Questions

**What does `find_orphaned_classes` do?**
It identifies CSS classes that are declared in your stylesheets but have no corresponding usage in your HTML or JSX files.

**How can I detect broken class references?**
Use the `find_broken_references` tool to find class names used in your components that do not exist in any scanned stylesheet.

**Can this tool detect duplicate CSS definitions?**
Yes, the `find_css_collisions` tool detects when the same class name is defined in multiple different CSS or SCSS files.