Frontend Page Development

Use when Codex needs to design and implement a business or admin frontend page in an existing TypeScript + React project, especially Umi Max. It first inspects the project and clarifies page behavior, then proposes the smallest viable page plan before coding. Do not use for a standalone component library, a whole-site refactor, or image-only visual design.

Entropy-R Updated

File contents

前端页面开发

工作目标

在现有前端工程中,从页面需求到可验证实现完成当前明确范围内的业务页面。优先复用项目已有的组件、布局、路由、请求和样式能力;即使没有可直接参考的业务页面,也先遵循已发现的工程约定。

开始前

收到页面开发需求时,不要立即编码。先从仓库获取下列事实:

  • 页面目录、入口和路由配置,以及权限或菜单关联方式;
  • 已使用的 UI 组件库、页面布局和可复用业务组件;
  • 请求封装、接口类型、错误处理方式及已有相关 API;
  • 样式方案、主题或设计规范,以及相近页面的状态呈现方式;
  • 当前任务相关的测试、lint、TypeScript 和 build 命令。

只询问无法从项目或需求中确认、且会影响功能或验收的事项。重点确认业务目标、页面用途、展示信息、用户操作、数据来源、接口契约、权限边界和验收条件;说明必要的默认假设。

先给出最小可行方案

在编码前,简要输出:

  1. 页面区域划分和主要组件;
  2. 页面状态,包括需要的加载、空数据和错误状态;
  3. 用户交互流程与数据流;
  4. 涉及的路由和 API,或尚待确认的契约;
  5. 预计新增或修改的文件及各自职责;
  6. 不属于本次需求的事项。

方案应基于已检查到的项目结构,采用满足当前验收的最小改动。不要为未知后续需求预先增加模块、通用抽象、新依赖、缓存、轮询、状态机、配置开关或兼容层。

实施顺序

按以下顺序推进,并在每一步保留项目已有约定:

  1. 明确需求和验收条件,完成页面结构设计;
  2. 使用静态 UI 或局部 Mock 数据搭建页面,先验证信息层级与布局;
  3. 根据反馈完成页面视觉调整;
  4. 实现已确认的用户交互;
  5. UI 确认后,使用项目现有请求封装和类型接入真实 API;
  6. 补齐当前页面必需的加载、空数据和错误状态;
  7. 运行与改动相称的 TypeScript、lint、测试或 build 验证。

在 UI 尚未确认前,不要把复杂接口编排耦合进页面。真实 API 的字段、参数、失败语义或权限规则不清楚时,应先定位现有契约或向用户澄清,不得臆造接口。

实现边界与验证

  • 只实现当前明确需求;优先复用现有组件、布局和工程基础设施,不进行无关重构或顺手清理。
  • 保持项目原有代码风格和数据流;新增文件仅在现有结构无法容纳当前页面时创建。
  • 依据明确的用户行为和验收条件验证关键路径,并覆盖本次实现涉及的必要状态。
  • 与本次任务无关的既有问题只报告,不擅自修复。最终说明实际改动、已执行验证、未执行检查及遗留风险。

Entropy-R/codex-skills/tree/main/skills/frontend-page-development commit 9fbd55df19

Frequently asked questions

npx skillmds@latest add entropy-r/frontend-page-development