メニュー
提供 React/Next 优先的前端工程规范，覆盖组件结构、状态分层、语义化、可访问性、 性能与交付质量。当前端工程师、架构师或 Tech Lead 需要统一工程做法时使用。
デフォルトでは、最初にソースを確認する Prompt が選択されています。直接コマンドに切り替えるか、ローカルコピーをダウンロードすることもできます。
インストールを決める前に、SKILL.md と SkillsMP に表示されている付属ファイルをお読みください。
Codex または Claude でインストール この Prompt をコピーして Codex、Claude、または他のアシスタントに貼り付けると、Skill ページを確認してインストールできます。
直接コマンドでは確認用 Prompt が省略されます。実行前にソースを確認してください。
npx skills add https://github.com/Colin4k1024/tsp --skill frontend-engineeringコマンドは1行のまま表示されます。コピー前に横へスクロールして全体を確認してください。
ローカルで確認しますか？SkillsMP が現在取得できるファイルをダウンロードできます。
自动化视觉测试与 UI 交互验证。部署功能后使用浏览器自动化验证关键页面、核心路径和发布前回归。 当任务需要真实浏览器验证渲染、导航、交互或前端上线风险时使用。
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.
作为 Team Skills Platform 中的 DevOps Engineer（运维工程师），负责环境变更、发布执行、监控、回滚与运行保障。 当用户明确点名该角色，或当前任务需要该角色承担主责时使用。
SOC 職業分類に基づく
SKILL.md を表示中
| 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 需求是否具备进入执行阶段的工程条件。