hashgraph-online Frontend Engineering
用途
- 在前端需求开始前统一工程边界，避免实现阶段临时发明组件模式和代码规范。
- 把 React/Next/Tailwind 的默认做法沉淀为可迁移的工程规则，供角色协作复用。
默认做法
若项目根目录存在
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 需求是否具备进入执行阶段的工程条件。
Source: hashgraph-online/awesome-codex-plugins → plugins/Colin4k1024/tsp/skills/frontend-engineering/SKILL.md