前端代码审查

cs-frontend-review
分类编程
作者Alireza Rezvani
许可MIT
评分4.80/5
使用15.5K

/cs:frontend-review — 前端工程评审

使用 cs-frontend-engineer agent（使用 context: fork）来处理此请求：

$ARGUMENTS

强制性问题库

权威来源：engineering-team/skills/senior-frontend/references/forcing_questions.md（共 7 个问题，每轮一个，每个问题需提供建议 + 权威引用）。

1. 主要设备 + 网络环境（桌面-光纤 / 移动-4G / 低端 Android / 企业内网）
2. 主要设备上的 LCP 目标（毫秒）
3. Server Components vs SPA vs SSR vs SSG
4. 每条路由的 JS Bundle 预算（KB gzipped）
5. 依赖 SEO 还是 鉴权墙（auth-walled）
6. 设计系统位置（Figma + tokens / 临时 Tailwind / headless UI）
7. WCAG 目标（AA / AAA / 尽力而为）+ 无障碍负责人

路由协议

1. 引导执行 7 个强制性问题（参考 engineering-team/skills/senior-frontend/references/forcing_questions.md）。每轮一个。基于权威引用给出建议。记录在 /tmp/frontend-grill-<date>.md 中。
2. 识别否决标准 —— 例如，“依赖 SEO + 仅限 SPA”将触发冲突。立即停止并解决。
3. 运行确定性配置选择器：

bash
python engineering-team/skills/senior-frontend/scripts/frontend_decision_engine.py \
     --primary-device <mobile-4g|desktop-fiber|low-end-android|corporate-network> \
     --lcp-target-ms <N> --seo-dependent <true|false> \
     --auth-walled <true|false> --team-size <N>

4. 输出匹配的配置 + 次优方案的权衡（如果差距在 15% 以内）。
5. 分发至专项专家（一次一个，深度优先）：
- a11y-audit：用于 WCAG 基准检查（必选）
- performance-profiler：用于 CWV 基准 + Bundle 审计
- epic-design：仅用于 astro-or-static 营销页面
- apple-hig-expert：仅用于 Apple 平台原生界面
- dependency-auditor：任何重大发布前执行
- cs-karpathy-reviewer：任何提交前执行

输出预期（≤ 200 字摘要）

  • 匹配的配置 + 原因
  • 主要设备上 p75 的三项 CWV 目标（LCP, INP, CLS）
  • 每条路由的 JS Bundle 预算（KB-gzip）
  • 指定的无障碍（a11y）负责人
  • 已调用的专家列表 + 产出物路径
  • 建议的下一个子技能

反模式

  • ❌ 将 Next App Router 推荐为通用默认选项。渲染方式应由设备 + SEO + 鉴权决定。
  • ❌ 将“快速”设为目标。请使用具体的毫秒数。
  • ❌ 在面向用户的界面中跳过 a11y-audit。
  • ❌ 重复实现性能分析逻辑。请分发至 performance-profiler。

自定义

配置方案位于 engineering-team/skills/senior-frontend/profiles/。内置四种：next-app-router, remix-or-sveltekit, vite-spa, astro-or-static。可将其复制到 <your-org>.json 并根据组织默认值进行调整。

相关命令

  • /cs:fullstack-review — 全栈视角（父级）
  • /cs:backend-review — 针对消费端的 API 契约评审
  • /cs:engineer-grill — 跨角色 21 问压力测试
  • /karpathy-check — Karpathy 四原则评审