# @cssints/mcp 中文文档

规范地址：https://npmcn.com/package/%40cssints/mcp/

版本：0\.35\.1
npm 元数据更新时间：2026-11-07T14:56:34.428Z
中文译文更新时间：2026-11-11T03:39:25.945Z
软件包许可：MIT

本文由上游 README 翻译，可能存在偏差，请结合原文核对 API、命令与配置。版权与许可归原作者所有。

原始 npm 页面：https://www.npmjs.com/package/%40cssints/mcp
原文对照：https://npmcn.com/package/%40cssints/mcp/?lang=original
项目主页：https://cssints.dev/
源码仓库：https://github.com/alexeiaccio/css-in-ts-compiler

## 关键信息（来自 npm 元数据）

- 包体积（解压后）：87.9 kB，8 个文件
- 模块格式：ES Module
- TypeScript 类型：包内自带
- Node.js 要求：\>=22
- 运行依赖：8 个
- 首次发布：2026-10-10T20:58:01.126Z
- 最新版本发布：2026-11-07T14:56:34.063Z
- 近 30 天下载量：7454（2026-10-11 至 2026-11-09，npm 官方下载统计）
- 已发布版本数：42（近 12 个月 42 个）

## 中文简介

Csints 的 MCP 服务器: 检查声明、 浏览器支持、 对比、 编译模块、 搜索文件

## 安装

```sh
npm install @cssints/mcp
```

也可以使用：`pnpm add @cssints/mcp`、`yarn add @cssints/mcp`、`bun add @cssints/mcp`

## README

# 翻译:

一个 [MCP 磁共振](https://modelcontextprotocol.io/) 用于服务器 [点缀](https://npmcn.com/package/README.md)它让一个编码代理检查它的CSS 如何构建检查它, 不运行应用程序, 并询问运行中的应用程序的dev服务器是什么类 。 它运行在stdio(`cssints-mcp`) 并基于 `effect/ai` `McpServer`。日志转到 stderr; stdout 仅带有协议.

## 工具

| 工具 | 答复 | 示例 |
| --- | --- | --- |
| `check_declaration` | ok, 或构造给出的确切信息 : 属性的语法, 值范围, 谱的发音规则 | `{ "property": "padding", "value": "-1rem" }` → `padding: unexpected "-1rem" in "-1rem", expected <length-percentage [0,∞]>` |
| `check_support` | 根据建筑物支持警告的规则,缺乏财产或其价值特征的目标,以及碱性催化分解键(`partial_implementation` 计数为支持); 闪电CSS为它们降低多少(`loweredOf` 联 合 国 `cssints/check`支持,列在 `lowered` 用它写的值 | `{ "property": "textWrap", "value": "balance", "query": "chrome 109" }` → `css.properties.text-wrap`,缺少 `chrome 109` |
| `check_contrast` | wCAG 2.x 比率 `css.check.contrast`,从引擎(`contrast` 联 合 国 `cssints/check`; 切,不是四舍五入, 在两个地方), 及其是否相会 `min` | `{ "foreground": "#777", "background": "white", "min": 4.5 }` → `contrast 4.47 is below 4.5` |
| `compile` | 通过真实插件的模块:其类字符串, CSS 添加到工作表, 被转换的代码, 错误和警告, 每一个在它的调用下( )`file:line:col`;每集都发出警告) | `{ "file": "src/Button.tsx" }`,或 `{ "file": "src/Card.ts", "source": "..." }` 未保存的文本 |
| `search_docs` | 文件/API.md、README.md和插件READMEs的匹配部分:文件、行、行、行、行、节选 | `{ "query": "firstThatWorks fallback" }` |
| `list_plugins` | 插件包、 成员、 各自做什么、 README | `{}` |

### 在运行中的 Dev 服务器上

| 工具 | 答复 | 示例 |
| --- | --- | --- |
| `explain_class` | 每类:其申报、条件(`@media`, (中文(简体) ), `@container`, (中文(简体) ), `:hover`,.),分层,插件或内核,它用它们的值读取的符号,发出它的呼号(`file:line:col`(中文(简体) ) | `{ "classes": "_1d608he" }` → `color: #dc2626`, (中文(简体) ), `:hover`, (中文(简体) ), `_.b`, (中文(简体) ), `src/components/Inspect.tsx:25:14` |
| `module_styles` | 页:1 `css.*` dev 服务器编译一个文件的电话, 每个文件都有其类及其 CSS | `{ "file": "src/components/Button.tsx" }` |
| `dev_errors` | vite 发送到客户端的构建错误( message, `file:line:col`,插件,代码框);未发送的(警告,页面的运行时间错误)被命名 | `{}` → `padding: unexpected "-1rem"` 时间 `src/bad.ts:4:20` |

他们拿 `url`,应用程序的dev服务器(默认) `http://localhost:5173`)),必须运行. `explain_class` 财务报告和审定财务报表 `module_styles` 需求 `cssints({ devtools: true })` 在应用程序 `vite.config` 他们说:他们要求早日实现 表格上覆盖的表单为(`cssints:devtools:get` 超过 Vite 的 HMR websocket, 会话每个 URL 一个套接字) 并保持它,直到服务器说它是 stale。 服务器只知道它服务过的模块,所以第一个呼叫 获取页面到达的每个模块( 动态导入器也), 编辑后再次: 浏览器不必打开 . `dev_errors` 在任何 Vite dev 服务器上工作: 它再次获取模块并收集 Vite 的 `error` 载荷.

### 在浏览器中

| 工具 | 答复 | 示例 |
| --- | --- | --- |
| `inspect_element` | 编织工具所覆盖的内容: 元素的类数,通过调用来显示, 每一个属性, 胜者, 它压倒什么( 以及为什么), 现在不适用什么, 以及对照计算样式的检查 | `{ "selector": "[data-case=hover-md]", "hover": true }` → `color: #dc2626` 从 `._1d608he:hover` 击出 `#2563eb` 根据具体情况 |
| `why_property` | 一种财产:胜者及其号召、条件、是否各有其事、胜者为何、不适用、理由 | `{ "selector": "[data-case=unlayered]", "property": "color" }` – →, `.mine { … } in src/components/inspect.css beats it` |

他们打开了 `url` (默认) `http://localhost:5173`在无头的剧作家核心中,每个url保存一页 在会话中,从dev服务器读取表格,作为活的工具(所以) `cssints({ devtools: true })` 再来一次; `server` 当服务器不是页面的出处时,将devtools核心添加到页面中(`@cssints/devtools/inject`,捆绑 Vite on the first call),并在第一个元素上运行被选取者相匹配的覆接级. `hover` 财务报告和审定财务报表 `focus` 将元素放在该状态中第一(因为指针被移走,焦点被移走); `width` 财务报告和审定财务报表 `height` 大小 观地道. 他们需要铬: `npx playwright-core install chromium`,否则将使用已安装的Chrome.

`check_support` 无 `query` 读取工程的浏览器列表( e)`package.json` `"browserslist"` 或者说 `.browserslistrc`, (中文(简体) ), 发现于 `root`如插件从Vite 根读取它; `compile`警告为 那些根的目标. `compile` 在中间软件模式下启动 Vite dev 服务器 工程根数( `root` 参数,否则工作目录)的首次调用并重新使用它: `vite.config` 当它有一个(它的别名,它的) `cssints()` 选项),否则仅插件;项目本身 `vite` 财务报告和审定财务报表 `cssints` 用于安装时。 每一次通话都读取模块以及它再次导入的内容.

安装在一个项目中, `search_docs` 读取 `node_modules/cssints/docs/API.md` (出版的csints 持有一份副本,制作 联合国 `prepack`),读取 `cssints` 和方案预算草案 `@cssints/*`,以及 `list_plugins` 这些读取器; 从这里运行 存储器,它们会读取 Docs/API.md, README.md 和每个软件包 README.

## 安装

```sh
bun add -d @cssints/mcp   # or: npm i -D @cssints/mcp
```

客户端在项目目录中启动服务器,因此工作目录是项目根.

### 打开代码

`opencode.json`数字 :

```json
{
  "$schema": "https://opencode.ai/config.json",
  "mcp": {
    "cssints": {
      "type": "local",
      "command": ["npx", "cssints-mcp"],
      "enabled": true
    }
  }
}
```

### 克劳德代码

```sh
claude mcp add cssints -- npx cssints-mcp
```

(单位:千美元)`--scope project` 写给 `.mcp.json` 整个团队。 )

### 光标

`.cursor/mcp.json`数字 :

```json
{
  "mcpServers": {
    "cssints": {
      "command": "npx",
      "args": ["cssints-mcp"]
    }
  }
}
```

在此寄存器中, 使用 `node packages/mcp/src/bin.ts` 作为命令(第22.18号或以后运行TypeScript源).

## 贷项

服务器说话 [示范背景协议](https://modelcontextprotocol.io/) 并基于 `effect/ai`编辑 检查内容是: [mdn-数据](https://github.com/mdn/data) 财务报告和审定财务报表 [浏览器兼容数据](https://github.com/mdn/browser-compat-data) (均为CC0-1.0),通过 `@cssints/css-grammar`。 。 。 .

## 发展

```sh
cd packages/mcp
bun run test        # test/tools.mjs: every tool through an in-process MCP client; test/stdio.mjs: the bin over stdio;
                    # test/live.mjs: the live tools on apps/demo's dev server and on test/fixtures/app
bun run test:browser  # test/browser.mjs: inspect_element and why_property on the demo in Chromium (needs one)
bun run typecheck
```

## 常见问题

### @cssints/mcp 是什么？

Csints 的 MCP 服务器: 检查声明、 浏览器支持、 对比、 编译模块、 搜索文件

### 如何安装 @cssints/mcp？

在项目目录运行 npm install @cssints/mcp，或使用 pnpm add / yarn add / bun add。它还提供命令行工具 cssints-mcp，可以用 npx cssints-mcp 直接运行。

### @cssints/mcp 支持 TypeScript 吗？

支持。包内自带 TypeScript 类型声明（package\.json 声明了 types 入口），安装后即可获得类型提示，无需再安装 @types 包。

### @cssints/mcp 支持 ESM 还是 CommonJS？

以 ES Module 形式发布，推荐使用 import 引入。在 CommonJS 项目中，Node\.js 20\.19\+ / 22\.12\+ 可以直接 require\(\) 不含顶层 await 的 ES Module，更早的版本需要改用动态 import\(\)。

### @cssints/mcp 需要什么版本的 Node\.js？

package\.json 的 engines 字段要求 Node\.js \>=22。版本不符时 npm 默认只给出警告，开启 engine-strict 后会拒绝安装。

### @cssints/mcp 可以商用吗？

@cssints/mcp 使用 MIT 许可。宽松许可：允许商业使用、修改和再分发，通常只需在分发时保留原版权与许可声明。以上为概括，不构成法律意见，请以许可原文为准。

### @cssints/mcp 的下载量有多少？

根据 npm 官方下载统计，@cssints/mcp 在 2026/10/11 – 2026/11/09 这 30 天内被下载 7,454 次，日均约 248 次。下载量会把 CI 构建、镜像同步和作为其他包依赖的安装一并计入，适合横向比较热度，不能直接等同于使用人数。

### @cssints/mcp 还在维护吗？

最新版本 0\.35\.1 发布于 2026/11/07（3 天前）；至今共发布 42 个版本，其中过去 12 个月发布了 42 个；首次发布于 2026/10/11。发布频率只是参考信号：功能稳定的工具可能很少需要更新，建议结合源码仓库的 issue 和提交记录判断。