mcpField
S
stylesafe

stylesafe

Local
github.com/PatrizzosDeveloper Tools0Updated 16w ago
Repository

About stylesafe

stylesafe is an MCP server and CLI for AI coding agents and CI workflows. It detects CSS cascade and Tailwind utility conflicts before changes ship, returning structured risk reports.

Key features

  1. 01Detect duplicate declarations and dead rules
  2. 02Find accidental style overrides
  3. 03Identify conflicting Tailwind utilities
  4. 04Understand cn(), clsx(), and twMerge()
  5. 05Produce structured risk reports

Use cases

  1. 01Check styles generated by coding agents
  2. 02Gate conflicting changes in PRs or CI
  3. 03Audit existing project styles

MCP support

As an MCP server, it provides CSS and Tailwind conflict checks to MCP clients, returning structured reports with confidence, risk scores, and next steps.

Configuration

Local server config is the same for every client. Copy it into your client’s MCP config file.

mcp.json · Universal config
{
  "mcpServers": {
    "patrizzos-stylesafe": {
      "command": "npx",
      "args": [
        "-y",
        "@patrizzos/stylesafe"
      ]
    }
  }
}
Run commandnpx -y @patrizzos/stylesafe

Local servers need a runtime on your machine (e.g. Node.js 18+). Config file locations differ by client; see your client’s docs.

Packages
npm@patrizzos/stylesafe0.1.9

Tools

No tool list yet

Local servers expose tools only once running on your machine, and the maintainer has not provided a tool list.

Details

From the project README

StyleSafe - MCP and CLI

An MCP server and CLI that catches CSS cascade conflicts and Tailwind utility clashes before they ship — built for AI coding agents and CI workflows.

What it does

  • Detects duplicate CSS declarations and dead rules from specificity conflicts
  • Flags silent style overrides that may be accidental
  • Finds conflicting Tailwind utilities (padding, margin, background, shadow, opacity, border, ring, etc.)
  • Understands cn(), clsx(), and twMerge() call expressions, not just plain className strings
  • Returns structured agent-friendly reports with confidence, riskScore, and nextStep

Quick start

As a CLI tool
npm install -g stylesafe
stylesafe src/components/Button.jsx
stylesafe --changed --fail-on-issues
stylesafe --projectRoot src
stylesafe --watch src
As an MCP server
{
  "mcpServers": {
    "stylesafe": {
      "command": "node",
      "args": ["/absolute/path/to/server.js"]
    }
  }
}

Example output

stylesafe examples/tailwind-conflict.jsx

Returns a structured report:

{
  "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 means no hard errors. clean: true means zero issues of any kind.

Use cases

  • AI code generation: Catch style bugs before the agent commits changes
  • PR gate: Block merged changes that introduce cascade conflicts or utility clashes
  • Agent workflows: Integrate as a confirmation step in multi-turn coding tasks
  • Style audits: Run across a project to find existing issues

CLI options

  • stylesafe <file> — analyze a single file
  • stylesafe <dir> — analyze a directory recursively
  • stylesafe --projectRoot <dir> — same as above
  • stylesafe --changed — analyze git-changed files (for PR/CI)
  • stylesafe --changed --fail-on-issues — exit with code 1 if any issues found
  • stylesafe --watch src — re-run on every file change
  • npm test — run regression tests

Config

Place a .styleintegrityrc file in your project root:

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

GitHub Actions

Add to .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

Comments

Markdown supported

New to MCP?

From what the protocol is to installing your first server, these answers cover most first questions.

An open protocol that defines how AI applications connect to external tools and data in a uniform way. Clients talk to the model; MCP servers provide tools, resources and prompt templates. They exchange standard messages, so one server can be reused by many clients.