Menú
提供 React/Next 优先的前端工程规范，覆盖组件结构、状态分层、语义化、可访问性、 性能与交付质量。当前端工程师、架构师或 Tech Lead 需要统一工程做法时使用。
Instalar con Codex o Claude Copia este prompt, pégalo en Codex, Claude u otro asistente, y deja que revise la página de la skill y la instale por ti.
Basado en la clasificación ocupacional SOC
| name | frontend-engineering |
| description | 提供 React/Next 优先的前端工程规范，覆盖组件结构、状态分层、语义化、可访问性、 性能与交付质量。当前端工程师、架构师或 Tech Lead 需要统一工程做法时使用。 |
若项目根目录存在 DESIGN.md，实现前必须读取，所有 token 值（色值、字号、间距、圆角、阴影）以 DESIGN.md 为基准。代码中不允许出现与 DESIGN.md 不一致的硬编码原始值（如 color: #5e6ad2），必须通过 CSS 变量或 Tailwind token 引用。参考：DESIGN.md 使用工作流
先阅读 frontend-engineering-standards.md 锁定技术基线和质量红线。
企业内部应用补看 enterprise-architecture-governance.md 与 enterprise-component-baseline.md，确认是否受统一框架、组件和兼容性约束。
若目标项目明确采用自定义前端样式 profile，再补看 frontend-enterprise-style-profile.md，确认是否需要附加样式与 Figma 映射约束。
使用 react-next-baseline.md 和 component-patterns.md 决定页面、组件、hooks、状态与数据流分层。
若是新界面或大改版，先补齐 ui-implementation-plan.md 再进入编码。
若启用了公司前端样式 profile，把附加样式约束同步回写到 ui-implementation-plan.md、/team-execute 和 /handoff。
提交给 QA 前，结合 quality-checklist.md 与 ui-review-checklist.md 留下可追溯证据。
frontend-engineer 需要确定组件结构、状态分层、Next 边界与样式约束。architect 需要把前端实现约束沉淀进方案，而不是只给页面草图。tech-lead 需要判断某个 UI 需求是否具备进入执行阶段的工程条件。上下文优化技能，通过 trigger-based 懒加载和 context composition awareness 自动重组长会话上下文。
Goal-oriented autonomous loop with external completion oracle. Keeps iterating until verifiable stopping conditions are met, checked by a separate model.
Scheduled discovery automation that runs scans on a heartbeat interval, classifies findings, and routes them to goals or triage inbox.
Active MCP connector polling that integrates external tools (issue trackers, error monitoring, CI) into the heartbeat loop for cross-system discovery.
Structured rework with git blame attribution for failed goal iterations. Maps failures to responsible changes and routes targeted fix briefs.
将 CodeGraph 作为默认内置 MCP-backed 代码图谱能力接入，用于 brownfield 符号搜索、 调用链、影响面和上下文查询。输出必须回落到 `/team-*` 主链和 artifacts。