Menu
用于用户要求通用前端代码评审、PR 评审、合并就绪评估、架构可维护性、类型安全、渲染/状态风险、样式一致性、可测性缺口或横向评审总结时。深度安全、无障碍、E2E 或性能问题应委托对应专项 skill；中文触发词包括 代码审查、代码评审、review。
Install with Codex or Claude Copy this prompt, paste it into Codex, Claude, or another assistant, and let it review the skill page and install it for you.
Based on SOC occupation classification
用于生成或编辑图表、图形资产、海报、UI 样机、产品图、信息图、学术图、漫画、头像、分镜、品牌板或图像编辑工作流，尤其是导出 PNG 需要视觉质检和有限自动修复时。文字密集图表优先使用确定性的 Mermaid/SVG/HTML/canvas 源；浏览器可打开的技术图优先使用 HTML technical diagrams，覆盖系统蓝图、架构图、部署拓扑、Agent runtime、memory flow、before-after architecture、流程、序列、数据流、生命周期、runbook、PII/数据血缘和状态机；不要用于不涉及生成图像的普通 UI 打磨。中文触发词包括 图片生成、图像编辑、图表生成、架构图、系统蓝图、部署拓扑、Agent runtime、memory flow、before-after architecture、工作流图、数据流、生命周期图、状态机、ER 图、UML、序列图、海报、UI 样机、产品图、信息图、学术图、漫画、头像、分镜、品牌板、PNG 自检、自动修复。
Use when generating or editing diagrams, charts, visual assets, posters, UI mockups, product images, infographics, academic figures, comics, avatars, storyboards, brand boards, or image-edit workflows, especially when exported PNGs need visual QA and bounded self-repair. Prefer deterministic Mermaid/SVG/HTML/canvas sources for text-heavy diagrams; use HTML technical diagrams for browser-ready system blueprints, architecture, deployment topology, agent runtime, memory flow, before-after architecture, workflow, sequence, data-flow, lifecycle, runbook, PII/data-lineage, and state-machine diagrams. Do not use for ordinary UI polish without generated imagery.
用于创建带 draw.io / diagrams.net 源文件的可编辑技术图，包括架构图、ERD、UML、序列图、流程图、ML 模型图、官方形状检索、品牌符号、Graphviz 自动布局、代码结构图、.drawio 校验或 draw.io CLI 导出兜底。不要用于普通位图生成、手绘草图、交互式 Canvas/Three.js 场景或装饰性 SVG 动画；中文触发词包括 draw.io、diagrams.net、可编辑架构图、.drawio、ER 图、UML、序列图、自动布局、形状检索、代码结构图。
Use when creating editable technical diagrams with draw.io / diagrams.net sources, including architecture diagrams, ERD, UML, sequence diagrams, flowcharts, ML model diagrams, official shape lookup, brand symbols, Graphviz auto-layout, codebase structure maps, .drawio validation, or draw.io CLI export fallback. Do not use for ordinary raster image generation, freehand sketches, interactive canvas/Three.js scenes, or decorative SVG animation. Chinese triggers include draw.io, diagrams.net, editable architecture diagrams, .drawio, ER diagrams, UML, sequence diagrams, auto layout, shape retrieval, code structure diagrams.
用于审查或改进前端无障碍、语义结构、键盘支持、焦点管理、ARIA 标签、屏幕阅读器行为、WCAG 2.2 问题、触控无障碍或辅助技术回归；中文触发词包括 无障碍、accessibility、a11y、WCAG、屏幕阅读器。
用于从参考系统中吸收想法、能力、工作流、架构、质量体系、生态扩展或工程实践，并通过原创的项目内重设计转化为当前项目能力，而不是复制原实现。
| name | fec-code-review |
| description | 用于用户要求通用前端代码评审、PR 评审、合并就绪评估、架构可维护性、类型安全、渲染/状态风险、样式一致性、可测性缺口或横向评审总结时。深度安全、无障碍、E2E 或性能问题应委托对应专项 skill；中文触发词包括 代码审查、代码评审、review。 |
从架构、类型安全、可访问性、样式一致性、性能和可测试性等 8 个维度审查前端代码质量，输出分级评审报告。
当改动跨越多个质量维度时，按“主评审 + 专项分流”组织，而不是让所有维度重复检查同一处代码。
| 维度 | 触发条件 | 分流边界 |
|---|---|---|
| TypeScript 工程与类型契约 | DTO、泛型、公共类型、类型守卫、any、断言、tsconfig | 深入类型建模和 TS 配置交给 TypeScript 流程 |
| 状态管理 | 状态归属、全局 store、URL 状态、派生状态、跨页面同步 | 状态选型与迁移交给状态管理专项流程 |
| 安全 | 用户输入、HTML 渲染、token、上传、第三方脚本 | 漏洞级分析交给安全专项流程 |
| 无障碍 | 弹窗、菜单、表单、键盘操作、焦点管理 | WCAG 细查交给无障碍专项流程 |
| 性能 | 大列表、重依赖、重复请求、长任务、包体积 | 性能证据与预算交给性能专项流程 |
| E2E | 关键用户路径、登录态、支付、跨页面流程 | 浏览器用例与 trace 交给 E2E 专项流程 |
发现合并规则：
Dimension 中列出相关维度。anytemplates/shared/rules/fec-typescript.md「禁止 Magic Number / Magic String」）any撰写代码评审报告时，加载 references/report-template.md。发现必须具体且可操作；不要写"优化性能"等空泛建议而不指出具体代码模式。
reports/code-review-YYYY-MM-DD-HHmmss.md