An astronaut overseeing a futuristic data hub
Baixar PDFVersão em Markdown

Conecte CSS Class Usage Collision Analyzer à sua IA

Configure uma vez e funcione no ChatGPT, Claude, Cursor e em qualquer outro cliente que você goste. Tudo roda com segurança em segundo plano, para você relaxar e focar no que realmente importa. Mantenha seus estilos limpos, organizados e sem erros.

Pergunte à IA sobre este Connector

Desenvolvido, mantido e hospedado pela Vinkius.

MCP VERIFICADO · PRONTO PARA PRODUÇÃO · GARANTIA VINKIUS

Waiting for input…

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

ChatGPTClaudeCursorPerplexityGeminiMicrosoft CopilotRaycastMeta AI

A sua IA faz o trabalho. A gente cuida com segurança.

Nenhuma outra ferramenta de IA te dá isso. O seu workflow roda no cliente que você já ama, a sua conta fica protegida, e você decide o que o agente pode e não pode fazer. É a razão completa para mudar de vez.

Cada Connector vive dentro da nossa infraestrutura, no mesmo lugar onde o seu workflow roda. As três coisas abaixo já fazem parte dele, trabalhando silenciosamente em segundo plano para que você nunca precise pensar nelas. Nada para adicionar, nada para configurar, nada com que se preocupar.

A futuristic MCP client docking bay
V8 Isolate01

Cada Connector roda dentro do seu próprio ambiente lacrado.

Cada Connector roda em seu próprio runtime V8 lacrado — sem acesso aos seus arquivos, ao seu sistema ou a outros servidores. Um Connector nunca enxerga além da sua própria requisição.

Kill Switch02

Um interruptor para todos os agentes. Na hora.

Uma única ação desativa todos os Connectors, revoga todos os tokens e encerra todas as sessões de uma vez. A Governança de IA guarda o registro.

FinOps por usuário03

Limites de gastos que pausam em vez de assustar.

Cada usuário tem suas próprias conexões e credenciais, isoladas das dos demais. O que ultrapassar o seu limite de gastos fica aguardando a sua aprovação, em vez de ser cobrado.

Três controles, embutidos na camada pela qual sua IA se conecta.

Conjunto curado · 3 capacidades

Entregamos só as ações que importam.

Conjunto de capacidades01 / 01

01-03

3 capacidades neste conjunto.

Parte de 3 disponíveis através de CSS Class Analyzer.

  1. 01

    Detectar conflitos de CSS

    Analisa arquivos css/.scss na raiz do projeto para identificar se o mesmo nome de classe foi definido em múltiplos lugares. Detecta definições duplicadas entre diferentes arquivos CSS.

  2. 02

    Encontrar referências quebradas

    Verifica arquivos html/.jsx/.tsx para checar se cada classe possui uma definição correspondente em .css/.scss. Identifica nomes de classes usados no código que não possuem estilo definido.

  3. 03

    Localizar classes órfãs

    Compara arquivos css/.scss com o uso real em .html/.jsx/.tsx. Identifica classes CSS que foram declaradas, mas nunca são utilizadas no projeto.

Trabalho real

O que as equipes executam de verdade

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.

Um connector, todas as IAs

CSS Class Analyzer funciona com os clientes de IA mais populares.

Estes são os clientes mais populares, cada um com um guia passo a passo: um link, configurado uma vez, com governança e visibilidade embutidas. E como tudo roda no padrão MCP, a mesma conexão também funciona em qualquer outro cliente compatível — nada para reconstruir.

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

Construindo o seu próprio app? O connector é seu para usar.

Você não precisa de um cliente para colocar CSS Class Analyzer para trabalhar: a mesma conexão hospedada entra nas suas aplicações e no código do seu agente, com a mesma governança em cada pedido. Construa com ele, converse com ele — uma conexão para os dois.

Observada, não estimada

Média de 719ms. Rápida em produção.

CSS Class Analyzer é verificado diariamente contra o serviço em produção.

Média diáriaPico de 873ms
3 de out.Hoje
Dia mais rápido
542ms
Dia mais lento
873ms
Tendência de 14 dias
Melhorando-11%

Conecte seu cliente

Uma URL. Todos os clientes.

Ative o Connector, copie seu link e cole no cliente que você já usa. 3 capacidades chegam prontas para rodar.

Acesso de prévia · não é autenticação no provedor

O token vk_preview_* pertence à infraestrutura de prévia da Vinkius. Ele permite que o Claude descubra e exiba as capacidades de CSS Class Analyzer, para você ver a experiência dentro da sua IA.

Ele não autentica a sua conta com CSS Class Analyzer. Ações que exigem credenciais ou dados reais da conta podem não ser executadas até que você ative o Connector e autorize o serviço.

CSS Class Analyzer Connector

Tudo pronto. Escolha seu cliente MCP e siga as instruções de configuração.

Link do conectorhttps://edge.vinkius.com/vk_preview_OYwWCxiZcsL8SkR10b7YdhePlJhhgJlh1dSMIpvx/mcp

Claude Desktop

Siga os passos abaixo para conectar em 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.
Configuração · 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

Instruções passo a passo para cada cliente estão no guia. Como conectar

Configuração guiada para o Claude? Configurar CSS Class Analyzer no Claude e outras IAs

Veja todos os clientes de IA com quem este connector funciona ↑

Para quem é

Feito para o trabalho que quem usa CSS Class Analyzer delega.

Desenvolvedores que buscam manter a saúde do código CSS e evitar o acúmulo de estilos inúteis em projetos de larga escala.

  • 01

    Desenvolvedor Frontend

    Para quem precisa garantir que o CSS aplicado corresponde exatamente ao que foi escrito.

  • 02

    Engenheiro de Software

    Para profissionais que prezam por análise estática e limpeza de código em repositórios complexos.

  • 03

    QA Engineer

    Para quem deseja identificar erros de estilização antes mesmo da fase de testes visuais.

FAQ

Perguntas de quem usa 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.

Explore

Mais em Development

Sugestões

Conecte CSS Class Analyzer ao Claude, Cursor, ChatGPT e outros