CSS Class Analyzer Connector for AI agents.
3 live capabilities
Waiting for input…
Why people use CSS Class Analyzer
See what CSS Class Analyzer changes in a real workflow.
Move from a question to a useful CSS Class Analyzer result without breaking your flow.
What Vinkius changes
Get the CSS Class Analyzer answer you need in the AI client you already use.
Use it from Claude, ChatGPT, Cursor or another AI client you already have.
One account · 6,100+ Connectors
- Real-world use case 01
/Placeholder/
Get the result without leaving the conversation.
Complete set · 3capabilities
The complete CSS Class Analyzer capability set.
These are the exact actions your AI can choose when you ask it to work with CSS Class Analyzer.
01—03
3 capabilities in this set.
Part of 3 available through CSS Class Analyzer.
- 01 Capability
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
- 02 Capability
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
- 03 Capability
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
Set up in minutes
One URL. Then ask CSS Class Analyzer to work.
Claude and ChatGPT only need the Connector URL. Copy it once, add it in settings, and use CSS Class Analyzer from the conversation.
Choose your client
Live previewAdvanced clients IDE · CLI
Claude · Web + desktop
Connector URL · ready to paste
Streamable HTTPhttps://edge.vinkius.com/vk_preview_OYwWCxiZcsL8SkR10b7YdhePlJhhgJlh1dSMIpvx/mcp - Step 01
Open Connectors
In Claude Web or Claude Desktop, open Settings and choose Connectors.
- Step 02
Add the URL
Choose Add custom connector, name it CSS Class Analyzer, and paste the URL above.
- Step 03
Turn it on in chat
Select +, open Connectors, and enable CSS Class Analyzer for the conversation.
ChatGPT · Web + desktop
Connector URL · ready to paste
Streamable HTTPhttps://edge.vinkius.com/vk_preview_OYwWCxiZcsL8SkR10b7YdhePlJhhgJlh1dSMIpvx/mcp - Step 01
Open MCP settings
On desktop, open Settings and MCP servers. On web, open your workspace app or connector settings.
- Step 02
Add the URL
Choose Add server with Streamable HTTP, or create a custom MCP app, then paste the CSS Class Analyzer URL.
- Step 03
Save and start
Save the connection and enable CSS Class Analyzer in your conversation. Desktop may ask you to restart once.
Cursor · IDE configuration
Advanced setup
{
"mcpServers": {
"css-class-usage-collision-analyzer": {
"url": "https://edge.vinkius.com/vk_preview_OYwWCxiZcsL8SkR10b7YdhePlJhhgJlh1dSMIpvx/mcp"
}
}
}- Step 01
Open MCP Settings
Press Cmd+Shift+P (macOS) or Ctrl+Shift+P (Windows/Linux) → search "MCP Settings"
- Step 02
Add the server config
Paste the JSON configuration above into the mcp.json file that opens
- Step 03
Save the file
Cursor will automatically detect the new Connector
- Step 04
Start using CSS Class Analyzer
Open Agent mode in chat and ask: "Using CSS Class Analyzer, help me...". 3 tools available
VS Code Copilot · IDE configuration
Advanced setup
{
"mcpServers": {
"css-class-usage-collision-analyzer": {
"url": "https://edge.vinkius.com/vk_preview_OYwWCxiZcsL8SkR10b7YdhePlJhhgJlh1dSMIpvx/mcp"
}
}
}- Step 01
Create MCP config
Create a .vscode/mcp.json file in your project root
- Step 02
Add the server config
Paste the JSON configuration above
- Step 03
Enable Agent mode
Open GitHub Copilot Chat and switch to Agent mode using the dropdown
- Step 04
Start using CSS Class Analyzer
Ask Copilot: "Using CSS Class Analyzer, help me...". 3 tools available
Windsurf · IDE configuration
Advanced setup
{
"mcpServers": {
"css-class-usage-collision-analyzer": {
"url": "https://edge.vinkius.com/vk_preview_OYwWCxiZcsL8SkR10b7YdhePlJhhgJlh1dSMIpvx/mcp"
}
}
}- Step 01
Open MCP Settings
Go to Settings → MCP Configuration or press Cmd+Shift+P and search "MCP"
- Step 02
Add the server
Paste the JSON configuration above into mcp_config.json
- Step 03
Save and reload
Windsurf will detect the new server automatically
- Step 04
Start using CSS Class Analyzer
Open Cascade and ask: "Using CSS Class Analyzer, help me...". 3 tools available
Cline · IDE configuration
Advanced setup
{
"mcpServers": {
"css-class-usage-collision-analyzer": {
"url": "https://edge.vinkius.com/vk_preview_OYwWCxiZcsL8SkR10b7YdhePlJhhgJlh1dSMIpvx/mcp"
}
}
}- Step 01
Open Cline MCP Settings
Click the Connectors icon in the Cline sidebar panel
- Step 02
Add remote server
Click "Add Connector" and paste the configuration above
- Step 03
Enable the server
Toggle the server switch to ON
- Step 04
Start using CSS Class Analyzer
Ask Cline: "Using CSS Class Analyzer, help me...". 3 tools available
Claude Code · Terminal command
Advanced setup
claude mcp add css-class-usage-collision-analyzer --transport http "https://edge.vinkius.com/vk_preview_OYwWCxiZcsL8SkR10b7YdhePlJhhgJlh1dSMIpvx/mcp"- Step 01
Install Claude Code
Run npm install -g @anthropic-ai/claude-code if not already installed
- Step 02
Add the Connector
Run the command above in your terminal
- Step 03
Verify the connection
Run claude mcp to list connected servers, or type /mcp inside a session
- Step 04
Start using CSS Class Analyzer
Ask Claude: "Using CSS Class Analyzer, show me...". 3 tools are ready
Build the capability set
Add more capabilities.
Each Connector adds new actions and data without changing how you work.
Browse Connectors
Astro Server Island Detector
Extracts Astro Server Island directives from HTML/JSX to prevent misconfigured streaming SSR components.
shadcn/ui Dependency Resolver
Resolves exact shadcn/ui component dependencies from JSX snippets.
CSS Specificity Calculator
Calculate, compare, and validate CSS selector specificity weights using W3C standards.
Tailwind Excellence Prover
AI agents build bloated styling layers containing arbitrary values, div-only layouts, inaccessible contrast, and legacy configurations. This prover enforces strict design token structures (@theme), utility-first compliance, semantic HTML, mobile-first layouts, and interactive focus states.
Code Clone Detector
Identify exact and near-duplicate code blocks within your project.
Annotation Extractor and Tracker
Automatically detect, track, and report code annotations like FIXME, HACK, and XXX in your codebase.
Bring your own AI
Change the model, client or framework. Keep CSS Class Analyzer connected.
-
Claude -
ChatGPT -
Gemini -
Cursor -
VS Code -
Windsurf -
ZCode -
Cline -
Zed -
Continue -
Kiro -
Roo Code -
Zencoder -
Goose -
Void -
Augment Code -
Amp -
Qodo -
Tabnine -
Pieces -
Sourcegraph Cody -
JetBrains -
Warp -
Amazon Q -
Antigravity -
BoltAI -
Raycast -
Jan -
LM Studio -
AnythingLLM -
Open WebUI -
Msty -
Cherry Studio -
LibreChat -
TypingMind -
Chorus -
5ire -
n8n -
LangChain -
LlamaIndex -
CrewAI -
Vercel AI SDK
Before you connect
Questions about CSS Class Analyzer.
The practical details behind the request, access and result.
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 capability to find class names used in your components that do not exist in any scanned stylesheet.
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.
One connection away
Give your agent a direct line to CSS Class Analyzer.
Connect CSS Class Analyzer once. Keep it beside 6,100+ managed Connectors when the next task needs more.
Explore every Connector No credit card required · Free tier available