翻译:
一个 MCP 磁共振 用于服务器 点缀它让一个编码代理检查它的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.
安装
bun add -d @cssints/mcp # or: npm i -D @cssints/mcp
客户端在项目目录中启动服务器,因此工作目录是项目根.
打开代码
opencode.json数字 :
{
"$schema": "https://opencode.ai/config.json",
"mcp": {
"cssints": {
"type": "local",
"command": ["npx", "cssints-mcp"],
"enabled": true
}
}
}
克劳德代码
claude mcp add cssints -- npx cssints-mcp
(单位:千美元)--scope project 写给 .mcp.json 整个团队。 )
光标
.cursor/mcp.json数字 :
{
"mcpServers": {
"cssints": {
"command": "npx",
"args": ["cssints-mcp"]
}
}
}
在此寄存器中, 使用 node packages/mcp/src/bin.ts 作为命令(第22.18号或以后运行TypeScript源).
贷项
服务器说话 示范背景协议 并基于 effect/ai编辑
检查内容是: mdn-数据 财务报告和审定财务报表 浏览器兼容数据
(均为CC0-1.0),通过 @cssints/css-grammar。 。 。 .
发展
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