An astronaut overseeing a futuristic data hub
PDFをダウンロードMarkdown版

CSS Class Usage Collision AnalyzerをAIに接続

一度設定すれば、ChatGPT、Claude、Cursorなど、お気に入りのクライアントでどれでも動きます。すべては裏側で安全に動くので、あなたは安心して本当に大切なことに集中できます。未使用や衝突するCSSクラスを瞬時に特定し、コードの品質を向上させます。

このConnectorについてAIに質問

Vinkiusが開発・運用・ホスティング。

MCP認証済み · 本番環境対応 · Vinkius保証

Waiting for input…

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

ChatGPTClaudeCursorPerplexityGeminiMicrosoft CopilotRaycastMeta AI

AIが仕事をこなします。私たちが安全に守ります。

他のAIツールではこれは手に入りません。ワークフローはお気に入りのクライアントで動き、アカウントは守られ、エージェントに何を許すかはあなたが決めます。これこそ乗り換えるべき理由です。

すべてのConnectorは当社のインフラストラクチャの中、あなたのワークフローが動くのと同じ場所にあります。下の3つはすでにその一部で、背景で静かに働き、あなたが意識する必要がないようにしてくれます。追加するものも、設定するものも、心配することもありません。

A futuristic MCP client docking bay
V8 Isolate01

各Connectorは独自の密閉された環境内で実行されます。

各Connectorは独自の封印されたV8ランタイムで実行され、ファイル、システム、他のサーバーへのアクセスはありません。Connectorが自身のリクエストを超えて中身を見ることはありません。

Kill Switch02

1つのスイッチで全エージェントを停止。即座に。

1つのアクションで全Connectorを無効化し、全トークンを失効させ、全セッションを終了します。AI Governanceが記録を保持します。

ユーザーごとのFinOps03

驚きではなく、一時停止する支出制限。

各ユーザーは自身の接続と認証情報を持ち、他から隔離されています。支出制限を超える操作は課金されず、あなたの承認を待ちます。

3つのコントロールが、AIが接続するレイヤーに 組み込まれています。

厳選セット · 3機能

届けるのは、本当に必要な動作だけです。

機能セット01 / 01

01-03

このセットには3機能あります。

CSS Class Analyzerで使える3機能の一部です。

  1. 01

    CSSクラスの衝突を検出

    プロジェクト内のcssおよびscssファイルをスキャンし、同じクラス名が複数の場所で定義されていないかを確認します。異なるファイル間でのクラス定義の重複を特定します。

  2. 02

    定義漏れのクラスを特定

    Html、jsx、tsxファイルを確認し、使用されているクラスがcssやscssファイルで正しく定義されているかをチェックします。HTML/JSX側には存在するが、CSS側に定義がないクラスを見つけ出します。

  3. 03

    未使用のクラスを抽出

    Cssやscssファイルの定義と、html、jsx、tsxファイルでの使用状況を比較します。宣言されているものの、一度も使用されていないCSSクラスを特定します。

実際の業務

チームが実際に回している作業

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.

1つのConnector、すべてのAI

CSS Class Analyzerは、最も人気のあるAIクライアントで動きます。

これは最も人気のあるクライアントで、それぞれにステップバイステップのガイドがあります。リンクは1つ、設定は一度、ガバナンスと可視性は最初から組み込み。しかもすべてMCP標準で動くため、同じ接続は他の対応クライアントでもそのまま使えます。作り直す必要はありません。

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

自社アプリを作っていますか？Connectorはあなたのもの。

CSS Class Analyzerを働かせるのにクライアントは不要です。同じホストされた接続が、あなたのアプリやエージェントのコードにそのまま組み込め、すべてのリクエストに同じガバナンスが適用されます。作るのも、会話するのも、1つの接続で両方。

実測値、推定値ではない

平均719ms。本番環境で高速。

CSS Class Analyzerは本番サービスに対して毎日チェックされています。

日次平均最大873ms
10月3日今日
最速日
542ms
最遅日
873ms
14日間の傾向
改善傾向-11%

クライアントを接続

1つのURL。すべてのクライアント。

Connectorを有効化し、リンクをコピーして、いつも使うクライアントに貼り付けるだけ。3個の機能がすぐに使えます。

プレビューアクセス · プロバイダー認証ではありません

vk_preview_* トークンは Vinkius のプレビューインフラに属します。Claude が CSS Class Analyzer のケイパビリティを検出して表示できるようにし、AI の中でその体験を確認できます。

このトークンは CSS Class Analyzer のアカウントを認証するものではありません。認証情報や実際のアカウントデータが必要なアクションは、Connector を有効化してサービスを承認するまで実行されない場合があります。

CSS Class Analyzer Connector

準備完了です。MCPクライアントを選択し、セットアップ手順に従ってください。

コネクタリンクhttps://edge.vinkius.com/vk_preview_OYwWCxiZcsL8SkR10b7YdhePlJhhgJlh1dSMIpvx/mcp

Claude Desktop

以下の手順で数秒で接続できます。

  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.
設定 · claude_desktop_config.jsonコピー
{
  "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

各クライアントの手順ガイドはこちらです。 接続方法

Claude向けのガイド付きセットアップ？ CSS Class AnalyzerをClaudeや他のAIに設定する

このConnectorが対応するすべてのAIクライアントを見る ↑

対象ユーザー

CSS Class Analyzerユーザーが任せたい仕事のために。

フロントエンドのコード品質を維持し、スタイルシートの管理を効率化したい開発者向けです。大規模なプロジェクトでのCSS管理に悩むチームに最適です。

  • 01

    フロントエンドエンジニア

    CSSの肥大化を防ぎ、クリーンなコードベースを維持するために使用します。

  • 02

    UI/UXエンジニア

    スタイル定義の不整合による表示崩れを未然に防ぐために活用します。

  • 03

    Web開発チーム

    複数人での開発におけるクラス名の重複や定義漏れを自動で検出し、コードレビューの負荷を軽減します。

FAQ

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.

さがす

Developmentの他のコネクタ

おすすめ

『CSS Class Analyzer』を Claude、Cursor、ChatGPT などに接続