米醋电子工作室 MCU Electronics Studio

米醋嵌入式AI+
不为嵌入式AI赚钱，以培养新一代嵌入式AI工程师为己任

前端开发自动化工作流

面向 Claude Code 与 OpenAI Codex 四端的前端工程审计、质量门禁和长期维护 Skill。

Repo XiaoSongTongXue0505/frontend-automation-workflow
Host GitHub
Authors 春山
Category Agent
Status 已完成
Last commit 3 个月前
Updated 2026-07-28
Tags Claude CodeOpenAI Codex前端自动化质量门禁CIE2E

作者：春山

这是一套供 Claude Code CLI/Desktop 与 OpenAI Codex CLI/Desktop 共同使用的前端工程 Skill。它先审计现有仓库，再以最小侵入方式补齐代理规则、质量门禁、测试、CI、浏览器验收、无障碍与性能预算，并明确报告实际验证证据和未验证边界。

核心 Skill 位于 frontend-automation-workflow/。

适用场景

  • 初始化可长期维护的前端工程规范
  • 修复成熟项目中断裂或漂移的自动化工作流
  • 统一 Claude、Codex、开发者和 CI 使用的质量命令
  • 建立类型、Lint、格式、测试、构建、E2E、axe 和 Lighthouse 分层门禁
  • 为 monorepo 区分根级编排、应用验收与共享包验证

快速开始

朋友不熟悉 Skill 安装时，可将 直接交给Claude或Codex的完整指令.md 与本仓库一起交给 Claude/Codex，让代理完成安装、审计和实施。

手动自检并安装到 Claude 与 Codex 的用户级目录：

node ".\frontend-automation-workflow\scripts\verify-skill.mjs"
node ".\frontend-automation-workflow\scripts\install-skill.mjs" --scope user --targets claude,codex --mode link

安装到指定项目：

node ".\frontend-automation-workflow\scripts\install-skill.mjs" --scope project --project "D:\path\to\repo" --targets claude,codex --mode link

只预览安装位置，不修改文件系统：

node ".\frontend-automation-workflow\scripts\install-skill.mjs" --scope user --targets claude,codex --mode link --dry-run

Windows 默认使用 junction，使 Claude 与 Codex 指向同一份 Skill 源码。链接不可用时可改用 --mode copy，但复制安装不会自动同步后续更新。

使用方式

安装后，在目标仓库的新会话中输入：

请使用 frontend-automation-workflow，完整审计并落地本项目的高度自动化、长期维护工作流。复用现有工具，只集中询问无法从仓库确认的长期取舍，完成后运行真实浏览器和完整质量门禁验证。

Skill 会区分“已有可用、已有但断裂、缺失且必要、可选且代价高、不适用”，避免用通用模板覆盖成熟项目。

仓库内容

.
├── README.md
├── project.yaml
├── 直接交给Claude或Codex的完整指令.md
├── 高度自动化长期维护工作流学习手册.md
├── 完整测评报告.md
└── frontend-automation-workflow/
    ├── SKILL.md
    ├── agents/openai.yaml
    ├── assets/
    ├── references/
    ├── scripts/
    ├── evals/
    └── CHANGELOG.md

evals/ 保留三类回归夹具与断言，用于验证 Skill 的长期演进；完整运行转录、重复镜像和本机路径不纳入源码仓库。打包生成的 .skill 文件通过 GitHub Release 分发。

设计原则

  1. SKILL.md 只使用 Claude/Codex 共同接受的 name 与 description。
  2. Codex 专属展示信息放在 agents/openai.yaml；Claude 权限与 hooks 留在目标仓库。
  3. 项目规则以工具中立的 AGENTS.md 为单一来源，CLAUDE.md 通过 @AGENTS.md 导入。
  4. 核心质量逻辑存在于仓库 scripts 中，Claude、Codex、开发者与 CI 调用相同入口。
  5. 快速门禁与浏览器、无障碍、性能等慢门禁分层执行。
  6. “配置已创建”和“检查实际通过”必须明确区分。

文档与评测

修改 Skill 后运行：

node ".\frontend-automation-workflow\scripts\verify-skill.mjs"

随后执行 evals/evals.json 定义的回归评测，并在确认没有退化后更新 CHANGELOG.md。

兼容性

这里的 Desktop 指 Claude Code Desktop 与 OpenAI Codex Desktop。普通 Claude Desktop/Claude.ai 的 ZIP Skill 上传是另一种分发方式，不能假设它会自动读取本地 .claude/skills。

平台规则核对日期：2026-07-28。