stylesafe

Name: stylesafe
Author: Patrizzos

本地服务

github.com/Patrizzos开发工具016 周前更新

代码仓库

关于 stylesafe

stylesafe 是面向 AI 编码 Agent 与 CI 工作流的 CSS 检查 MCP 服务和命令行工具，可在提交前发现层叠冲突与 Tailwind 工具类冲突，并输出结构化风险报告。

主要功能

01检测重复声明与失效规则
02发现意外样式覆盖
03识别 Tailwind 工具类冲突
04理解 cn()、clsx() 与 twMerge()
05生成结构化风险报告

适用场景

01检查 AI 生成的样式改动
02在 PR 或 CI 中拦截冲突
03扫描项目中的既有样式问题

MCP 相关

作为 MCP 服务，向 MCP 客户端提供 CSS 与 Tailwind 冲突检查，并返回包含置信度、风险分数和后续步骤的结构化报告。

配置

本地服务的配置在各客户端中通用，复制后粘贴到客户端的 MCP 配置文件即可。

mcp.json · 通用配置

{
  "mcpServers": {
    "patrizzos-stylesafe": {
      "command": "npx",
      "args": [
        "-y",
        "@patrizzos/stylesafe"
      ]
    }
  }
}

启动命令npx -y @patrizzos/stylesafe

本地服务需要在你的电脑上安装运行环境（如 Node.js 18+）。各客户端的配置文件位置不同，请参考客户端文档。

安装包

npm@patrizzos/stylesafe0.1.9stdio

工具

还没有获取到工具列表

本地服务需要在你的电脑上运行后才能读取工具，维护者暂未提供工具列表。

详细介绍

StyleSafe - MCP 和 CLI

一个 MCP 服务和 CLI，可在 CSS 层叠冲突和 Tailwind 工具类冲突进入发布前将其捕获，专为 AI 编码 Agent 和 CI 工作流打造。

功能

检测重复的 CSS 声明，以及因优先级冲突而失效的规则
标记可能由意外导致的静默样式覆盖
查找冲突的 Tailwind 工具类（内边距、外边距、背景、阴影、不透明度、边框、环等）
理解 cn()、clsx() 和 twMerge() 调用表达式，而不仅仅是纯 className 字符串
返回包含 confidence、riskScore 和 nextStep 的结构化报告，便于 Agent 使用

快速开始

作为 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 代码生成：在 Agent 提交更改前捕获样式错误
PR 门禁：阻止引入层叠冲突或工具类冲突的更改合并
Agent 工作流：将其集成到多轮编码任务中，作为确认步骤
样式审计：扫描整个项目，查找现有问题

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

支持 Markdown

登录后评论