提供 React/Next 优先的前端工程规范，覆盖组件结构、状态分层、语义化、可访问性、 性能与交付质量。当前端工程师、架构师或 Tech Lead 需要统一工程做法时使用。
提供 React/Next 优先的前端工程规范，覆盖组件结构、状态分层、语义化、可访问性、 性能与交付质量。当前端工程师、架构师或 Tech Lead 需要统一工程做法时使用。
npx skills add https://github.com/Colin4k1024/tsp --skill frontend-engineering复制此命令并粘贴到 Claude Code 中以安装该技能
将 CodeGraph 作为默认内置 MCP-backed 代码图谱能力接入，用于 brownfield 符号搜索、 调用链、影响面和上下文查询。输出必须回落到 `/team-*` 主链和 artifacts。
Use Open Design as an external local-first design workbench for prototypes, decks, mobile screens, dashboards, DESIGN.md systems, and exportable visual artifacts. Keep TSP responsible for team workflow, handoff, and quality gates.
将 GitNexus 作为受控可选代码智能能力接入，用于 brownfield MCP 查询、影响面分析、 detect_changes、多仓分析和更深代码图谱证据。输出必须回落到 `/team-*` 主链和 artifacts。
项目级上下文工程框架：通过 PROJECT / REQUIREMENTS / ROADMAP / STATE 四层文档 为每个任务建立结构化上下文，控制 token 预算，防止上下文腐烂， 确保跨会话连续性。与 context-lifecycle 的 L0-L3 层互补。
提供公司级前端 UI/UX 设计知识库，覆盖产品类型、视觉方向、设计 token、布局、 交互、可访问性、动效与交付检查。当前端任务需要统一设计语言或体验门禁时使用。
强化高能动性和高压闭环执行的行为技能。适用于连续失败、原地打转、空口完成、 把问题甩给用户、没搜就猜、修完就停等场景，也支持手动通过 /pua 进入核心模式。
| 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 需求是否具备进入执行阶段的工程条件。