An astronaut overseeing a futuristic data hub
Télécharger le PDFVersion Markdown

Connectez CSS Class Usage Collision Analyzer à votre IA

Configurez-le une fois et il fonctionne avec ChatGPT, Claude, Cursor et n'importe quel autre client que vous aimez. Tout s'exécute en toute sécurité en arrière-plan, pour que vous puissiez vous détendre et vous concentrer sur l'essentiel. Maintenez des feuilles de style propres et prévisibles.

Demandez à l'IA à propos de ce Connector

Développé, maintenu et hébergé par Vinkius.

MCP VÉRIFIÉ · PRÊT POUR LA PRODUCTION · GARANTIE VINKIUS

Waiting for input…

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

ChatGPTClaudeCursorPerplexityGeminiMicrosoft CopilotRaycastMeta AI

Votre IA fait le travail. Nous veillons dessus, en toute sécurité.

Aucun autre outil d'IA ne vous offre ça. Votre workflow s'exécute dans le client que vous aimez déjà, votre compte reste protégé, et vous décidez ce que l'agent peut ou ne peut pas faire. C'est la vraie raison de faire le pas.

Chaque Connector vit dans notre infrastructure, là où votre workflow s'exécute. Les trois choses ci-dessous en font déjà partie et travaillent discrètement en arrière-plan pour que vous n'ayez jamais à y penser. Rien à ajouter, rien à configurer, aucune inquiétude à avoir.

A futuristic MCP client docking bay
V8 Isolate01

Chaque Connector s'exécute dans son propre environnement scellé.

Chaque Connector s'exécute dans son propre runtime V8 scellé, sans accès à vos fichiers, à votre système ni aux autres serveurs. Un Connector ne voit jamais au-delà de sa propre requête.

Kill Switch02

Un seul interrupteur arrête tous les agents. Immédiatement.

Une seule action désactive tous les Connectors, révoque tous les tokens et termine toutes les sessions d'un coup. La Gouvernance de l'IA conserve le registre.

FinOps par utilisateur03

Des limites de dépense qui s'interrompent au lieu de surprendre.

Chaque utilisateur garde ses propres connexions et identifiants, isolés de ceux des autres. Ce qui dépasserait votre limite de dépense est stoppé et mis en attente de votre approbation, pas facturé.

Trois contrôles, intégrés à la couche par laquelle votre IA se connecte.

Sélection · 3 capacités

Nous ne livrons que les actions qui comptent.

Ensemble de capacités01 / 01

01-03

3 capacités dans cet ensemble.

Sur 3 disponibles via CSS Class Analyzer.

  1. 01

    Détecter les collisions CSS

    Analyse les fichiers css/.scss de la racine du projet pour identifier si un même nom de classe est défini à plusieurs endroits. Détecte les doublons de définitions entre différents fichiers CSS.

  2. 02

    Identifier les références cassées

    Parcourt les fichiers html/.jsx/.tsx pour vérifier si chaque classe possède une définition correspondante dans les fichiers .css/.scss. Repère les noms de classes utilisés dans le HTML/JSX qui n'ont pas de définition CSS.

  3. 03

    Trouver les classes orphelines

    Compare les fichiers css/.scss avec leur utilisation dans les fichiers .html/.jsx/.tsx. Identifie les classes CSS déclarées mais jamais utilisées dans le projet.

Travail réel

Ce que les équipes font tourner

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, toutes les IAs

CSS Class Analyzer fonctionne avec les clients IA les plus populaires.

Voici les clients les plus populaires, chacun avec un guide pas à pas : un lien, configuré une fois, avec gouvernance et visibilité intégrées. Et comme tout tourne sur le standard MCP, la même connexion fonctionne aussi dans tout autre client compatible : rien à reconstruire.

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

Vous construisez votre propre app ? Le connector est à vous.

Vous n'avez pas besoin d'un client pour mettre CSS Class Analyzer au travail : la même connexion hébergée se branche sur vos propres applications et le code de votre agent, avec la même gouvernance à chaque requête. Construisez avec lui, discutez avec lui : une connexion pour les deux.

Observée, pas estimée

Moyenne de 719 ms. Rapide en production.

CSS Class Analyzer est vérifié quotidiennement contre le service en production.

Moyenne quotidiennePic à 873 ms
3 oct.Aujourd'hui
Jour le plus rapide
542ms
Jour le plus lent
873ms
Tendance sur 14 jours
En amélioration-11%

Connectez votre client

Une URL. Tous les clients.

Activez le Connector, copiez votre lien et collez-le dans le client que vous utilisez déjà. 3 capacités arrivent prêtes à l'emploi.

Accès aperçu · pas d’authentification du fournisseur

Le jeton vk_preview_* appartient à l’infrastructure d’aperçu de Vinkius. Il permet à Claude de découvrir et d’afficher les capacités de CSS Class Analyzer, pour que vous voyiez l’expérience dans votre IA.

Il n’authentifie pas votre compte auprès de CSS Class Analyzer. Les actions nécessitant des identifiants ou des données de compte réelles peuvent ne pas s’exécuter tant que vous n’avez pas activé le Connector et autorisé le service.

CSS Class Analyzer Connector

Tout est prêt. Choisissez votre client MCP et suivez les instructions de configuration.

Lien du connecteurhttps://edge.vinkius.com/vk_preview_OYwWCxiZcsL8SkR10b7YdhePlJhhgJlh1dSMIpvx/mcp

Claude Desktop

Suivez les étapes ci-dessous pour vous connecter en quelques secondes.

  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.jsonCopier
{
  "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

Les instructions pas à pas pour chaque client sont dans le guide. Comment connecter

Configuration guidée pour Claude ? Configurer CSS Class Analyzer avec Claude et les autres IA

Voyez tous les clients IA avec lesquels ce connector fonctionne ↑

Pour qui

Conçu pour le travail que les utilisateurs de CSS Class Analyzer délèguent.

Cet outil s'adresse aux professionnels du développement web qui souhaitent optimiser la performance et la maintenance de leur interface utilisateur.

  • 01

    Développeur Frontend

    Pour nettoyer le code et éviter les régressions visuelles lors des mises à jour.

  • 02

    Ingénieur QA

    Pour valider l'intégrité des feuilles de style et l'absence d'erreurs de rendu.

  • 03

    Architecte Frontend

    Pour garantir la cohérence des systèmes de design et éviter les conflits de noms de classes.

FAQ

Les questions des utilisateurs de 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.

Explorer

Plus dans Development

Suggestions

Connectez CSS Class Analyzer à Claude, Cursor, ChatGPT et d'autres