An astronaut overseeing a futuristic data hub
Descargar PDFVersión en Markdown

Conecta CSS Class Usage Collision Analyzer a tu IA

Configúralo una vez y funciona en ChatGPT, Claude, Cursor y en cualquier otro cliente que te guste. Todo se ejecuta con seguridad en segundo plano, para que tú te relajes y te centres en lo que de verdad importa. Mantén tus hojas de estilo limpias, organizadas y sin errores.

Pregunta a la IA sobre este Connector

Desarrollado, mantenido y alojado por Vinkius.

MCP VERIFICADO · LISTO PARA PRODUCCIÓN · GARANTÍA VINKIUS

Waiting for input…

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

ChatGPTClaudeCursorPerplexityGeminiMicrosoft CopilotRaycastMeta AI

Tu IA hace el trabajo. Nosotros lo cuidamos, seguro.

Ninguna otra herramienta de IA te da esto. Tu workflow se ejecuta en el cliente que ya amas, tu cuenta permanece protegida y tú decides lo que el agente puede y no puede hacer. Es la razón completa para dar el salto.

Cada Connector vive dentro de nuestra infraestructura, en el mismo lugar donde se ejecuta tu workflow. Las tres cosas de abajo ya forman parte de él, trabajando en silencio en segundo plano para que nunca tengas que pensar en ellas. Nada que añadir, nada que configurar, nada de qué preocuparte.

A futuristic MCP client docking bay
V8 Isolate01

Cada Connector se ejecuta dentro de su propio entorno sellado.

Cada Connector se ejecuta en su propio runtime V8 aislado, sin acceso a tus archivos, a tu sistema ni a otros servidores. Un Connector nunca ve más allá de su propia petición.

Kill Switch02

Un interruptor detiene a todos los agentes. Al instante.

Una única acción desactiva todos los Connectors, revoca todos los tokens y cierra todas las sesiones a la vez. La Gobernanza de IA guarda el registro.

FinOps por usuario03

Límites de gasto que se pausan en vez de sorprenderte.

Cada usuario mantiene sus propias conexiones y credenciales, aisladas de las de los demás. Lo que supere tu límite de gasto se detiene y queda esperando tu aprobación en vez de cobrarse.

Tres controles, integrados en la capa por donde tu IA se conecta.

Set curado · 3 capacidades

Publicamos solo las acciones que importan.

Set de capacidades01 / 01

01-03

3 capacidades en este set.

Parte de 3 disponibles a través de CSS Class Analyzer.

  1. 01

    Detectar colisiones de CSS

    Analiza archivos css/.scss en la raíz del proyecto para identificar si el mismo nombre de clase se define en varios lugares. Detecta definiciones duplicadas entre distintos archivos CSS.

  2. 02

    Buscar referencias rotas

    Revisa archivos html/.jsx/.tsx para verificar si cada clase tiene su definición correspondiente en .css/.scss. Identifica nombres de clase usados en el código que carecen de una definición CSS.

  3. 03

    Localizar clases huérfanas

    Compara los archivos css/.scss con su uso en archivos .html/.jsx/.tsx. Identifica clases CSS que están declaradas pero nunca se utilizan en el proyecto.

Trabajo real

Lo que los equipos ejecutan de verdad

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.

Un connector, todas las IAs

CSS Class Analyzer funciona con los clientes de IA más populares.

Estos son los clientes más populares, cada uno con una guía paso a paso: un enlace, configurado una vez, con gobernanza y visibilidad integradas. Y como todo corre sobre el estándar MCP, la misma conexión también funciona en cualquier otro cliente compatible: nada que reconstruir.

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

¿Construyendo tu propia app? El connector es tuyo para usar.

No necesitas un cliente para poner CSS Class Analyzer a trabajar: la misma conexión alojada se conecta a tus propias aplicaciones y al código de tu agente, con la misma gobernanza en cada petición. Construye con él, conversa con él: una conexión para ambos.

Observada, no estimada

Promedio de 719ms. Rápida en producción.

CSS Class Analyzer se verifica a diario contra el servicio en producción.

Promedio diarioPico de 873ms
3 octHoy
Día más rápido
542ms
Día más lento
873ms
Tendencia de 14 días
Mejorando-11%

Conecta tu cliente

Una URL. Todos los clientes.

Activa el Connector, copia tu enlace y pégalo en el cliente que ya usas. 3 capacidades llegan listas para funcionar.

Acceso de vista previa · no es autenticación del proveedor

El token vk_preview_* pertenece a la infraestructura de vista previa de Vinkius. Permite que Claude descubra y muestre las capacidades de CSS Class Analyzer, para que veas la experiencia dentro de tu IA.

No autentica tu cuenta con CSS Class Analyzer. Las acciones que requieran credenciales o datos reales de la cuenta podrían no ejecutarse hasta que actives el Connector y autorices el servicio.

CSS Class Analyzer Connector

Todo listo. Elige tu cliente MCP y sigue las instrucciones de configuración.

Enlace del conectorhttps://edge.vinkius.com/vk_preview_OYwWCxiZcsL8SkR10b7YdhePlJhhgJlh1dSMIpvx/mcp

Claude Desktop

Sigue los pasos siguientes para conectarte en segundos.

  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.
Configuración · claude_desktop_config.jsonCopiar
{
  "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

Las instrucciones paso a paso para cada cliente están en la guía. Cómo conectar

¿Configuración guiada para Claude? Conectar CSS Class Analyzer con Claude y otras IA

Ve todos los clientes de IA con los que funciona este connector ↑

Para quién es

Hecho para el trabajo que quienes usan CSS Class Analyzer delegan.

Esta herramienta es ideal para equipos que buscan mantener la integridad de su arquitectura de estilos en aplicaciones web modernas.

  • 01

    Desarrollador Frontend

    Para limpiar código innecesario y evitar errores de renderizado por clases inexistentes.

  • 02

    Ingeniero de Software

    Para asegurar que el mantenimiento de las hojas de estilo sea escalable y sin conflictos de nombres.

  • 03

    QA Engineer

    Para validar la consistencia entre la estructura HTML y las definiciones de estilos aplicadas.

FAQ

Preguntas de quienes usan CSS Class Analyzer.

  • 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.

Explora

Más en Development

Sugerencias

Conecta CSS Class Analyzer a Claude, Cursor, ChatGPT y más