# 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.

- Skill: `entropy-r/frontend-page-development` (Agent Skill, multi-file: 3 files)
- Install (CLI): `npx skillmds@latest add entropy-r/frontend-page-development`
- Raw SKILL.md: https://api.skillmd.com/api/skills/entropy-r/frontend-page-development/raw
- Safety review: pending
- Works with: Claude Code, Claude.ai, OpenAI Codex
- Category: Web & Frontend
- Author: Entropy-R (https://skillmd.com/u/entropy-r)
- Updated: 2026-09-21
- Page: https://skillmd.com/skills/entropy-r/frontend-page-development

---


# 前端页面开发

## 工作目标

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

## 开始前

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

- 页面目录、入口和路由配置，以及权限或菜单关联方式；
- 已使用的 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 的字段、参数、失败语义或权限规则不清楚时，应先定位现有契约或向用户澄清，不得臆造接口。

## 实现边界与验证

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