stylesafe

StyleSafe - MCP と CLI

AI コーディングエージェントや CI ワークフロー向けに構築された MCP サーバーと CLI です。リリース前に CSS のカスケード競合や Tailwind ユーティリティの衝突を検出します。

できること

• 詳細度の競合による CSS 宣言の重複や無効なルールを検出します
• 意図せず発生した可能性のある、気づきにくいスタイルの上書きを警告します
• 競合する Tailwind ユーティリティ（パディング、マージン、背景、シャドウ、不透明度、ボーダー、リングなど）を検出します
• 単なる className 文字列だけでなく、cn()、clsx()、twMerge() の呼び出し式も認識します
• confidence、riskScore、nextStep を含む、エージェント向けの構造化レポートを返します

クイックスタート

CLI ツールとして

npm install -g stylesafe
stylesafe src/components/Button.jsx
stylesafe --changed --fail-on-issues
stylesafe --projectRoot src
stylesafe --watch src

MCP サーバーとして

{
  "mcpServers": {
    "stylesafe": {
      "command": "node",
      "args": ["/absolute/path/to/server.js"]
    }
  }
}

出力例

stylesafe examples/tailwind-conflict.jsx

構造化レポートを返します：

{
  "totalIssues": 5,
  "riskScore": 275,
  "averageRiskScore": 55,
  "riskLevel": "medium",
  "passed": true,
  "clean": false,
  "files": [
    {
      "filename": "examples/tailwind-conflict.jsx",
      "issues": [
        {
          "type": "tailwind-conflict",
          "category": "padding",
          "classes": ["p-4", "px-8"],
          "confidence": "medium",
          "riskScore": 55,
          "nextStep": "Choose one utility from the conflicting set or split the classes by scope.",
          "requiresUserConfirmation": true
        }
      ]
    }
  ]
}

passed: true は重大なエラーがないことを意味します。clean: true は、どの種類の問題も一切ないことを意味します。

ユースケース

• AI によるコード生成：エージェントが変更をコミットする前にスタイルのバグを検出します
• PR ゲート：カスケード競合やユーティリティの衝突を引き起こす変更のマージをブロックします
• エージェントのワークフロー：複数ターンにわたるコーディングタスクの確認ステップとして統合します
• スタイル監査：プロジェクト全体を実行して、既存の問題を検出します

CLI オプション

• stylesafe <file> — 単一のファイルを解析します
• stylesafe <dir> — ディレクトリを再帰的に解析します
• stylesafe --projectRoot <dir> — 上記と同様です
• stylesafe --changed — Git で変更されたファイルを解析します（PR/CI 向け）
• stylesafe --changed --fail-on-issues — 問題が見つかった場合、終了コード 1 で終了します
• stylesafe --watch src — ファイルが変更されるたびに再実行します
• npm test — 回帰テストを実行します

設定

プロジェクトのルートに .styleintegrityrc ファイルを配置します：

{
  "ignore": ["dist", "*.min.css"],
  "failOn": ["error", "warning"]
}

GitHub Actions

.github/workflows/style-check.yml に追加します：

name: stylesafe

on:
  pull_request:
  push:
    branches: [main]

jobs:
  stylesafe:
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v4
      - uses: actions/setup-node@v4
        with:
          node-version: 20
      - run: npm install
      - run: node server.js --changed --fail-on-issues