An astronaut overseeing a futuristic data hub
Download PDFMarkdown Version

Connect CSS Class Usage Collision Analyzer to your AI

Set it up once and it works in ChatGPT, Claude, Cursor, and any other client you love. It all runs safely in the background, so you can relax and focus on what really matters. Keep your frontend stylesheets clean and predictable.

Ask AI about this Connector

Developed, maintained, and hosted by Vinkius.

MCP VERIFIED · PRODUCTION READY · VINKIUS GUARANTEED

Waiting for input…

Works with modern AI clients that support MCP, including ChatGPT, Claude, Cursor, and more.

ChatGPTClaudeCursorPerplexityGeminiMicrosoft CopilotRaycastMeta AI

Your AI does the work. We keep it safe and sound.

No other AI tool gives you this. Your workflow runs in the client you already love, your account stays protected, and you decide what the agent can and cannot do. It is the whole reason to make the switch.

Each Connector lives inside our infrastructure, the same place where your workflow runs. The three things below are already part of it, working quietly in the background so you never have to think about them. Nothing to add, nothing to set up, nothing to worry about.

A futuristic MCP client docking bay
V8 Isolate01

Each Connector runs inside its own sealed environment.

Each Connector runs inside its own sealed V8 runtime — no access to your files, your system, or other servers. A Connector never sees past its own request.

Kill Switch02

One switch stops every agent. Instantly.

One action deactivates every Connector, revokes every token, and ends every session at once. AI Governance keeps the record.

FinOps per User03

Spending limits that pause instead of surprise.

Every user keeps their own connections and credentials, isolated from everyone else. Anything that would cross your spending limit is held for your approval, not billed.

Three controls, built into the layer your AI connects through.

Curated set · 3 capabilities

We ship only the actions that matter.

Capability set01 / 01

01-03

3 capabilities in this set.

Part of 3 available through CSS Class Analyzer.

  1. 01

    Find css collisions

    This capability scans your CSS and SCSS files to find duplicate class definitions. It flags when the same class name is defined in multiple places within your project root.

  2. 02

    Find broken references

    This capability checks your HTML, JSX, and TSX files for styling errors. It identifies class names used in your markup that have no corresponding definition in your CSS or SCSS files.

  3. 03

    Find orphaned classes

    This capability identifies dead code in your stylesheets. It compares your CSS and SCSS definitions against your HTML and JSX usage to find classes that are declared but never used.

Real work

What teams actually run

01

Refactoring Legacy Code

Use the MCP to find which old CSS rules can be safely deleted after a component rewrite.

02

Debugging Layout Issues

Identify if a style isn't applying because of a broken reference or a naming collision.

03

Pre-deployment Audits

Run a quick scan to ensure no orphaned styles or duplicate classes were introduced in a new PR.

04

Project Cleanup

Identify and remove unused SCSS modules to keep the bundle size small.

One connector, every AI

CSS Class Analyzer works with the most popular AI clients.

These are the most popular clients, each with a step-by-step guide: one link, set up once, with governance and visibility built in. And because everything runs on the MCP standard, the same connection also works in any other compatible client — nothing to rebuild.

ClaudeClaudeChatGPTChatGPTGeminiGeminiPerplexityPerplexityGrokGrokMicrosoft CopilotMicrosoft CopilotCursorCursorVS CodeVS CodeWindsurfWindsurfJetBrainsJetBrainsClineClineLangChainLangChainVercel AI SDKVercel AI SDKLovableLovableZ.aiZ.aiRaycastRaycastQwen CodeQwen CodeKimi CodeKimi CodeLe ChatLe Chat

Building your own app? The connector is yours to use.

You don't need a client to put CSS Class Analyzer to work: the same hosted connection plugs into your own applications and agent code, with the same governance on every request. Build with it, chat with it — one connection for both.

Observed, not estimated

719ms average. Fast in production.

CSS Class Analyzer is checked daily against the live service.

Daily averagePeak 873ms
Oct 3Today
Fastest day
542ms
Slowest day
873ms
14-day trend
Improving-11%

Connect your client

One URL. Every client.

Activate the Connector, copy your link, and paste it into the client you already use. 3 capabilities arrive ready to run.

Preview access · not provider authentication

The vk_preview_* token belongs to Vinkius preview infrastructure. It lets Claude discover and display the capabilities of CSS Class Analyzer, so you can see the experience inside your AI.

It does not authenticate your account with CSS Class Analyzer. Actions requiring credentials or live account data may not run until you activate the Connector and authorize the service.

CSS Class Analyzer Connector

You're all set. Choose your MCP client and follow the setup instructions.

Connector linkhttps://edge.vinkius.com/vk_preview_OYwWCxiZcsL8SkR10b7YdhePlJhhgJlh1dSMIpvx/mcp

Claude Desktop

Follow the steps below to connect in seconds.

  1. 1In Claude Desktop, open Settings → Connectors.
  2. 2Click “Add custom connector” and paste the connector link above as the remote MCP server URL.
  3. 3Click Add and start a new chat — CSS Class Analyzer capabilities are ready to use.
Configuration · claude_desktop_config.jsonCopy
{
  "mcpServers": {
    "css-class-usage-collision-analyzer-mcp": {
      "url": "https://edge.vinkius.com/vk_preview_OYwWCxiZcsL8SkR10b7YdhePlJhhgJlh1dSMIpvx/mcp"
    }
  }
}
  • Claude
  • ChatGPT
  • Cursor
  • VS Code
  • Windsurf
  • Claude Code
  • JetBrains
  • Cline

Step-by-step instructions for each client are in the guide. How to connect

Guided setup for Claude? Set up CSS Class Analyzer in Claude and other AIs

See all the AI clients this connector works with ↑

Who it's for

Built for the work CSS Class Analyzer owners hand off.

Frontend developers and UI engineers who need to maintain large, complex stylesheets.

  • 01

    Frontend Engineer

    Uses the MCP to audit component styles and clean up technical debt.

  • 02

    UI Developer

    Checks for broken class references after refactoring components.

  • 03

    Web Auditor

    Runs scans to ensure stylesheet consistency across a large codebase.

FAQ

Questions CSS Class Analyzer owners ask.

  • 01

    What files does this MCP analyze?

    It analyzes CSS and SCSS files for definitions, and HTML, JSX, and TSX files for usage.

  • 02

    How do I use this with Cursor or VS Code?

    You connect the MCP through the Vinkius platform, which hosts the capability. Once connected, your client can invoke the capabilities directly.

  • 03

    Can it find duplicate styles in my SCSS?

    Yes, the find_css_collisions capability specifically looks for the same class name being defined in multiple files.

  • 04

    Does this work for React projects?

    Yes, it is designed to check JSX and TSX files to ensure your component styles are correctly mapped.

  • 05

    Will this help reduce my CSS bundle size?

    Yes, by using find_orphaned_classes, you can identify and remove unused CSS that is bloating your files.

  • 06

    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.

  • 07

    How can I detect broken class references?

    Use the find_broken_references capability to find class names used in your components that do not exist in any scanned stylesheet.

  • 08

    Can this capability detect duplicate CSS definitions?

    Yes, the find_css_collisions capability detects when the same class name is defined in multiple different CSS or SCSS files.

Explore

More in Development

Suggestions

Connect CSS Class Analyzer to Claude, Cursor, ChatGPT & more