taichuy Frontend Development
Outcome and Entry
把已确认的用户流程落到现有前端结构，保留设计与业务真值。进入 web/ 先读 web/AGENTS.md 及改动目录的局部规则；复用已确认目标、授权和 AC，不重复对齐或另开 issue。
行为验证使用 test-driven-development 的风险策略；缺失业务语义或扩大目标、权限、contract 时回到 problem-framing，局部实现选择继续执行。
Design Truth and Architecture
DESIGN.md 是前端设计真值；先理解第 1–2 节的真值关系和视觉层，再按任务定位章节。精确 token 值和实际组件能力查它指向的源码，不从偶然页面样式反推全局设计。skill 只说明如何定位、应用和验证，不维护第二份 recipe / 状态色 / 断点规范。
设计约束：DESIGN.md → theme / token → shared UI → feature 局部实现
业务真值：backend DTO → api-client → feature api → UI
结构归属：app-shell / routes → features/* → shared/*（仅真实共享）
- Shell 复用 Ant Design 与现有共享组件；Canvas / Inspector 使用现有 Editor UI，不另建视觉体系。
- 业务数据、权限、状态原因、排序 / 筛选 / 聚合由后端提供；前端拥有展示、交互与客户端草稿，不推断缺失业务真值。
- 接口字段沿用后端 DTO 原名；导航与按钮可见性不构成 API 授权。
- 单 feature 请求编排留在 feature api，跨 feature 真实复用才提到 shared/api；schema 关系为
shared/schema-ui → feature schema → node definitions → renderer / consumer。
Read by Task
只读取命中任务与直接风险的行；设计与源码冲突时说明偏离，不能以同步为由修改产品语义。
| 任务信号 | 最短入口 |
|---|---|
| 工作区、页面 recipe、L1 详情、状态或响应式 | workspace-rules → DESIGN.md 对应章节 |
| 目录落点、API 编排、schema / node 分层 | placement-rules |
| 入口层级、同类对象行为、反馈位置 | interaction-architecture-gate |
| DTO、权限消费、取消、流式状态 | consumer-contracts → 受影响源码 |
| i18n key / value、owner、unused key | i18n-rules |
| 样式、第三方 slot、共享组件覆写 | visual-baseline；运行态再读 browser-verification |
| 报表、ECharts、JS Block chart | chart-reporting |
| 新公共 props、抽象、重复防御或转发层 | design-rules；具体坏味道查 anti-patterns |
| 实现完成、直接风险自查 | review-checklist |
| 修改本 skill 或检查合法例外 | pressure-scenarios |
Execution and Handoff
- 先确认主路径、详情规则、反馈位置与 owner，再落组件与样式；缺后端 DTO / 聚合时联动
backend-development，不添加前端兼容推断。 - 测试资源沿用仓库包装器与
.1flowbase.verify.local.json，不写死并发；执行成本、停止与证据复用见test-driven-development。 - 完成开发后使用
qa-evaluation；交付保留页面 / 组件 / API 消费链、关键决策与证据指针，已有 AC 逐点映射，不复制代码或重述 diff。 - 当前结果与直接风险证据充分即停止；缺证据明确标为未验证，不自动升级全仓 lint / build / 浏览器回归。