互动网页工具制作助手

使用现代前端技术制作包含状态、路由、组件和复杂交互的网页工具或可分享互动作品。适合单文件静态页面已无法满足需求，需要构建多组件的互动 Web 成品。

技能说明

互动网页工具制作助手

这个 Skill 能做什么

使用现代前端技术制作包含状态、路由、组件和复杂交互的网页工具或可分享互动作品。

完成任务时重点处理：

• 任务驱动的信息架构
• 状态、路由和组件边界
• 可运行构建与清楚的交付方式

最终目标不是堆出一份看似完整的内容，而是交付能够直接使用、继续修改并清楚验收的结果。

什么时候使用

• 单文件静态页面已无法满足需求，需要构建多组件的互动 Web 成品。
• 用户需要使用现代前端技术制作包含状态、路由、组件和复杂交互的网页工具或可分享互动作品。
• 任务需要同时控制任务驱动的信息架构、状态、路由和组件边界。

如果需求只包含简单展示时退回轻量单页实现，避免无谓工程化，先处理前置条件，不要直接假装任务已经完成。

开始前需要什么

优先收集：

1. 目标、输入文件与预期输出 2. 运行环境、依赖、版本和目录约束 3. 已有代码、接口、样例和错误信息 4. 安全、性能、兼容性和测试要求 5. 用户流程、页面列表和数据状态 6. 部署方式、浏览器范围和是否允许联网

信息不必一次问完。先检查用户已经提供的材料，只追问会明显改变结果的问题。

执行步骤

1. 定义使用任务

列出用户进入、操作、保存、出错和完成的完整路径。

2. 选择项目结构

根据复杂度确定路由、状态管理、组件和数据边界。

3. 建立视觉系统

先定义令牌与基础组件，避免页面各自为政。

4. 实现核心闭环

优先完成一条可用路径，再补充次要功能。

5. 补齐状态与边界

覆盖加载、空数据、错误、长内容和断网。

6. 构建与验收

运行构建、测试关键流程并检查移动端与可访问性。

输出格式

至少交付以下内容：

• **可运行项目**：包含源码、依赖和启动命令的前端工程
• **使用说明**：功能、数据、环境变量和部署步骤
• **验证报告**：构建、关键路径和边界状态测试结果

所有文件使用能说明内容和版本的名称。若任务包含执行动作，还要记录执行状态、验证结果和可继续处理的材料。

完整示例

用户需要一个可筛选、收藏并导出结果的资料浏览器；先完成数据列表到收藏导出的闭环，再加入搜索与空状态。

合理处理顺序：

1. 定义使用任务 2. 选择项目结构 3. 建立视觉系统 4. 实现核心闭环 5. 补齐状态与边界 6. 构建与验收

交付时应重点展示可运行项目、使用说明、验证报告，并说明尚未验证的部分。

质量检查清单

• [ ] 命令、脚本和依赖在目标环境可运行
• [ ] 输入、输出、错误和边界情况均被处理
• [ ] 关键步骤可重复执行且不会意外覆盖原件
• [ ] 完成最小测试并记录验证命令与结果
• [ ] 构建产物不依赖开发机绝对路径
• [ ] 复杂交互可通过键盘完成主要任务

信息不足时怎么处理

• 缺少依赖或权限时先给出可验证的替代路径。
• 环境未知时避免绑定单一工具，明确适配点。
• 需求只包含简单展示时退回轻量单页实现，避免无谓工程化。