使用 MDN 支持的工具来编写更优质的 CSS
一个查询 MDN 文档、报告浏览器兼容性并分析用户 CSS 的智能体 MCP 服务器。
- 具体怎么做
- 通过 `npx` 命令,将智能体添加到 Claude Code、VS Code 或其他 MCP 客户端中。随后,该智能体可调用工具来获取 CSS 功能的 MDN 文档、获取浏览器兼容性数据,并分析粘贴的 CSS 或项目构建后的 CSS 文件。分析结果默认为简短摘要,您可以用简单的语言进行提问。
- 做到了什么
- README中未提供实际结果。其中列出了约 400-500ms 的首次获取时间,以及约 100ms 的缓存获取时间。总结分析大约需要 1-2k 个词元。
- 上手要点
- 完整的150+项指标分析需要约10k+个标记,因此请保持默认总结模式。该工具需要Node 20及以上版本以及原生构建工具来处理SQLite缓存。
你可以这样试
使用 Claude Code查看 [样式表或项目路径] 中的 CSS,并对照 MDN 文档检查每个有疑问的属性或功能在 [浏览器,例如 Safari 和 Chrome 的最新两个版本] 中的支持情况。修复你发现的问题,如不受支持的属性或冗余规则,并说明每次修改的原因。最后编制一份简短的兼容性报告,列出哪些内容可以安全发布,哪些需要采用替代方案。