在职前端 Skill 和 MCP 分享

文章来源声明: 原文作者:菠萝的蜜; 来源站点:掘金; 原文链接:https://juejin.cn/post/7691142360248614947; 本文基于上述来源整理/加工,觅优补充点评,仅供技术学习交流。版权归原作者所有。
觅优短评

可直接照搬的前端 AI 工作流清单,Skill 拆解颗粒度和 MCP 降本思路都很实用,适合正在做代码迁移或想压 token 成本的前端团队参考。

距离上一次分享已经过去好久,这次主要分享我在做迁移代码仓时用到的一些 skill,同时也移除了一些 mcp。

首先是 skills:

  • show-me 结合 ai 迁移代码往往有数不清的组件生成,复盘或者在研究性能问题时总还是需要了解对应模块或功能的组件关系和数据流走向的,该 skill 可以把复杂的逻辑非常直观地展现出来。
  • to-tickets 在迁移过程中,我已经沉淀了一套 spec 生成流程,所以不需要用到 matt 的 to-spec skill,而用 to-tickets,可以把已经制定好的功能清单再切细一些,生成几张小清单,不至于 agent 工作时无序错乱,这样开发后的验证有保障、且幻觉更少。
  • implement 该 skill 需要和 to-tickets 一起使用,在切好清单后,由它来实施功能开发,效果非常好。
  • resolving-merge-conflicts 多人开发或者上游有更新时使用,会追溯代码提交源头,分析上下游代码,最后解决冲突。
  • code-review 一个分支对应一个 issue,开发完以后调用,能够基于项目 rules 检查出不足之处,主要包括规范类和 spec 功能清单的检查。
  • code-simplifier 在代码行数超过 350 行时,我会用一下。

接下来是一批 mcp 的舍弃以及对应的替代方案。

本质上是把 mcp 方案换成 token 消耗更低的 skill 方案。playwrigt-cli 官网有一张图就能看出来:

playwright-cli vs mcp

如果是 Mac 电脑推荐使用 ego-lite 浏览器,它提供了 ego-browser skill,可以打开一个浏览器独立空间进行功能验证,且共享你的 cookie,页面上的 DOM 节点映射为 ref 节点更省 token,要比 playwright 好用不少。