在职前端 Agent 配置分享

前言

去年花了半年时间对公司旧业务代码做了不少架构优化,今年开始陆续就要开始业务开发了。

不得不说在 AI 时代背景下,开发范式每天都在变化,prompt engineering -> context engineering -> agent engineering -> harness engineering,一路狂飙,看似每天都有新东西要学习,到最后大多都是 FOMO。

然而在显而易见的不确定性面前,总有一些东西是固定不变的。今天我来分享在 AI 冲击下我的前端 Agent 开发配置,这些内容个人认为属于长期不变的地基。

(本文以 Mac 为例)

基本工具

首先是两个配置工具:

  1. cc-switch
  2. skills.sh

前者用于接入不同 AI 供应商,例如业内熟知的 Claude、Codex、Gemini、OpenCode 等等;后者用来添加 skills,一些固定的工作流被总结为技能供模型识别和调用。

CC Switch

安装

以 Homebrew(macOS)为例:

bash 复制代码
brew tap farion1231/ccswitch
brew install --cask cc-switch

# 更新
brew upgrade --cask cc-switch

其他平台也可以在 Release 找到对应的安装包。

更新

APP 的关于页可以检查更新、同时还兼具了本地环境检查:

我觉得特别好的一点就是还提供了一键安装的脚本:

以往我都是要去官方文档上找,这里一键复制更方便。

设置 Skills 存储位置

打开「设置 > 通用」面板,修改如下:

默认情况下,Skills 被存储在 ~/.cc-switch/skills/ 下,换成 ~/.agents/skills/,因为 skills.sh 的脚本安装的 skills 默认也是后者,这遵循了 Agent Skills 开放标准,很多 Agent 都能主动发现此处的 skills。

设置自动故障转移

打开「设置 > 路由」面板,依次打开本地路由、自动故障转移的开关:

回到 APP 首页打开两个开关:

下面可以选择需要加入的服务,按照优先级每次使用 cc 时会先用高优先级的,出现熔断就会退到下一级:

开启用量查询

以 kimi code 为例,点击列表中某项的用量查询:

在预设模板中找到合适的配置:

回到首页可以看到能够自动查询用量了:

点击顶部图标也能看到用量:

Skills 和 MCP

Skills 和 MCP 在右上角:

Skills

Skills 管理面板中,比较常用的是「导入已有」,然后点亮需要加入该 skill 的 Agent 工具:

点击「发现技能」可以搜索开头我们提到的 skills.sh 中的技能,下面以 code-simplifier 为例:

点击安装就能加入 Skills 列表。

这和在 skills.sh 上获取安装指令是一样的:

需要注意的是,使用命令行安装时默认安装到 ~/.agents/skills/ 下,想要同时支持 cc,就要自己勾选:

bash 复制代码
npx skills add https://github.com/ant-design/ant-design-cli --skill antd

通用的放全局:

安装方式推荐使用 Symlink:

安装完成后,命令行输入 claude 打开 cc,看到如下界面说明 CC Switch 的配置是有效的,一定要选 Yes,否则会让登录官方的账号:

输入 /skills 可以看到 antd skill 确实被安装进来了:

gemini、codex、opencode 也有:

刚刚安装列表中的 kimi 也有:

而未主动选择的 kilo 没有该技能:

在 Skills 管理中可以导入已有技能:

注意:由于 codex、gemini、opencode 都能从 ~/.agents/skills/ 下读取到技能,即便在 CC Switch 中取消引用,还是能搜到;cc 从 ~/.claude/skills/ 下读取技能,关闭了引用就搜不到了。

总结一下,如果按照我说的修改了 Skills 存储位置,那么想要 cc 加入对应 skill 就打开对应 skill 开关,其他剩下几个 Agent 开不开都可以。

MCP

MCP 服务器管理面板没有 Skills 那么复杂,且功能类似,大家可以自己研究下。

(其实是不想写了,哈哈)

Skills、MCP 推荐

Skills、MCP 都装了不少,但是本着如无必要、勿增实体的原则,最低限度推荐以下几个:

Skills:

MCP:

相关推荐
柚子8162 小时前
break跳出语句块的神奇技巧
前端·javascript
Ares-Wang2 小时前
Flask》》 Flask-OpenID 认证、 OpenID Connect (OIDC)
后端·python·flask
掘金码甲哥2 小时前
这篇优雅安装k8s集群的姿势,请务必投喂给AI智能体, 包装包活的那种!
后端
ejinxian3 小时前
Rust GUI框架Azul与Electron、WebView2
前端·javascript·electron
IT_陈寒3 小时前
Vue的v-for里用index当key,我被自己坑惨了
前端·人工智能·后端
周末程序猿4 小时前
从 OpenAI Agents SDK 中了解最新的 Agent 设计理念
agent·ai编程
invicinble4 小时前
Spring如何把bean注册到容器里
java·后端·spring
阿丰资源4 小时前
基于SpringBoot+MySQL的网上订餐系统(附源码)
spring boot·后端·mysql
代码不加糖4 小时前
0基础搭建前后端分离项目:实现菜单与界面左右布局
java·前端·javascript·mysql·elementui·mybatis