English | 简体中文

vue-nuxt-agent-workbench

一个可复用的 Codex Skill，用于构建或评审基于 Vue 3 + Nuxt 4 的 Agent 工作台与 Dashboard 风格前端。

它解决什么

• Agent Factory 类产品的创建与调试页面；
• Playground、Trace、版本 diff、回滚与 Evals-lite 检查；
• Nuxt 4 + pnpm monorepo + Nitro 本地 Mock API；
• 基于 shadcn-vue 的 Dashboard UI 与交互规范。

核心原则

• 以“配置 → 测试 → 保存 → 发布 → 回滚”为完整闭环；
• 用 config / savedConfig / publishedConfig 三份快照推导 Draft / Saved / Published；
• Playground 常驻且紧邻配置，改完即可测试；
• 优先使用成熟开源库，只手写产品特有逻辑。

技术栈

pnpm monorepo
Vue 3
Nuxt 4
Pinia
Pinia Colada
shadcn-vue + Reka UI
Tailwind CSS
TanStack Vue Table v8
Zod
vee-validate
@vueuse/core
@vueuse/motion
fast-deep-equal
nanoid
date-fns
marked + dompurify
Nitro Server Routes
Biome

目录结构

vue-nuxt-agent-workbench/
├── .codex-plugin/
│   └── plugin.json
├── skills/
│   └── vue-nuxt-agent-workbench/
│       ├── SKILL.md
│       ├── agents/
│       │   └── openai.yaml
│       └── references/
│           ├── architecture.md
│           ├── domain.md
│           ├── state-management.md
│           ├── ui-interaction.md
│           └── checklist.md
├── README.md
├── README.zh-CN.md
└── LICENSE

安装

npx（推荐）

npx vue-nuxt-agent-workbench install

这会把 skill 安装到 $CODEX_HOME/skills。使用 --claude 安装到 Claude Code，使用 --plugin 安装完整插件：

npx vue-nuxt-agent-workbench install --claude
npx vue-nuxt-agent-workbench install --plugin

本地克隆

克隆仓库：

git clone https://github.com/zzlw/vue-nuxt-agent-workbench.git

Codex

这是一个只含 skill 的插件，真正的 skill 位于 skills/vue-nuxt-agent-workbench/。

本地开发推荐软链接内层 skill 目录，这样修改和 git pull 都会即时生效：

mkdir -p "${CODEX_HOME:-$HOME/.codex}/skills"
ln -s "$PWD/vue-nuxt-agent-workbench/skills/vue-nuxt-agent-workbench" "${CODEX_HOME:-$HOME/.codex}/skills/vue-nuxt-agent-workbench"

如果要安装完整插件，把这个仓库目录放到插件目录，并在本地 marketplace 中登记，然后执行 codex plugin add vue-nuxt-agent-workbench@<marketplace>。

直接复制内层 skill 目录也可以，但会留下一个不会自动更新的快照：

cp -R vue-nuxt-agent-workbench/skills/vue-nuxt-agent-workbench "${CODEX_HOME:-$HOME/.codex}/skills/"

Claude Code 及其他兼容 SKILL.md 的 Agent

# 全局安装
ln -s "$PWD/vue-nuxt-agent-workbench/skills/vue-nuxt-agent-workbench" "$HOME/.claude/skills/vue-nuxt-agent-workbench"

# 项目级安装
ln -s "$PWD/vue-nuxt-agent-workbench/skills/vue-nuxt-agent-workbench" ".claude/skills/vue-nuxt-agent-workbench"

使用

Codex

如果按 skill 方式安装，可以显式调用，或由 Codex 根据任务自动发现：

$vue-nuxt-agent-workbench

如果按插件方式安装，则安装插件后即可使用其中的 skill。

Claude Code 及其他兼容 SKILL.md 的 Agent 会根据 name 和 description 自动发现 skill，直接要求它们使用 vue-nuxt-agent-workbench 即可。

License

MIT