react-web

react-web 技能概览

react-web 是做什么的

react-web 技能是一套面向 React 前端的工作流指南，用于借助 hooks、React Query 和 Zustand 构建组件与页面。它最适合那些希望流程比随意提问更严格的场景：先写测试的组件开发、更清晰的文件顺序，以及更少“先猜一版再补洞”的反复。如果你在做 React Web 开发，并且更看重正确性而不是先把样式堆出来，这个技能很适合。

谁应该安装它

如果你负责组件密集型前端、页面级 UI，或者 src/components、src/pages、src/app 下的应用代码，就该用 react-web skill。当任务本身很粗糙，比如“做一个设置面板”或“加一个带加载和错误状态的数据表”，而代理需要更少歧义地产出代码时，它尤其有用。

它为什么不一样

最大的差异点是它强制执行 Test-First Development 工作流。这个 react-web guide 不只是讲 React 模式，而是明确推动一个具体顺序：先写测试，确认失败，再最小化实现，最后重构。对那些希望前端输出更可预测、隐藏假设更少的团队来说，这会让这个技能更有决策价值。

如何使用 react-web 技能

安装并限定技能适用范围

进行 react-web install 时，把它加到编码代理读取 skills 的环境中，然后确认当前任务确实符合这个技能的适用范围。这个技能面向 *.tsx、*.jsx 以及常见的 React 应用目录，所以它不是一个什么都能接的通用 Web App 技能。只有在任务是 React UI 改动时才用它，不要拿它去改后端逻辑或无关的基础设施。

从正确的文件开始

先读 SKILL.md，再查看任何会影响执行风格的仓库级指引。这个仓库里，真正有用的依据集中在一个文件中，所以重点是理解工作流章节，而不是在多份参考资料里到处找。写代码前，先关注测试优先规则、组件开发顺序和测试文件结构。

给技能一份完整的任务说明

最好的 react-web usage 从一段包含 UI 目标、目标组件或页面、预期行为、边界情况，以及任何状态或数据依赖的提示词开始。强输入例如：“创建一个 React 设置卡片，包含保存/取消操作，保存时禁用，名称为空时校验，并为成功和错误状态都写测试。”弱输入例如：“做一个设置卡片。”前者给了技能足够的信息，能先写测试再实现。

按照测试优先工作流推进

把这个技能当成一个流程，而不是一次性提示。先要测试，再要实现，必要时再重构。例如：1）定义行为和测试用例，2）创建测试文件，3）实现组件，4）运行并修复失败，5）等行为稳定后再做样式。react-web for Frontend Development 背后的核心运行模型就是这个。

react-web 技能常见问题

react-web 比普通提示词更好吗？

通常是的，尤其在任务需要可靠的 UI 行为、测试覆盖，或一致的组件结构时。普通提示词也许能产出代码，但 react-web skill 给代理提供了一个更强的流程，先证明行为再继续。如果你只是想快速改一个一次性的标记，额外流程可能就不值得。

什么时候不该用它？

不要把 react-web 用在后端服务、纯 CSS 重构，或根本不涉及 React 组件和页面的任务上。如果你的仓库没法支持测试，或者工作本身只是探索性设计而不是实现，它也不是很合适。

它适合新手吗？

适合，只要用户能把 UI 说明白。这个技能对新手其实很有帮助，因为它强制更清晰的工作顺序，减少“我该从哪开始”的混乱。唯一的关键要求是：你得能把组件行为说清楚到足以先写测试。

它如何适配常见的 React 技术栈？

它适用于标准 React 应用模式，尤其是基于 hooks 的 UI、用于服务端状态的 React Query，以及用于本地/全局客户端状态的 Zustand。如果你的技术栈有不同约定，react-web guide 仍然能作为流程层提供帮助，但你需要把命名、测试工具和状态边界适配到你的应用里。

如何改进 react-web 技能

说明行为，不只描述外观

提升 react-web usage 最快的方法，是把用户行为讲得足够具体。要说明会渲染什么、点击或提交时会发生什么、加载和错误状态长什么样，以及组件依赖哪个数据源或 store。说“渲染一个个人资料表单”太模糊；“渲染姓名/邮箱字段，表单有效前禁用提交，显示行内错误，并在提交时调用 updateProfile”才是可执行的。

写出会影响测试的约束

因为这个技能是测试优先，约束条件非常重要。明确测试运行器、偏好的 testing library 写法、可访问性要求，以及组件应当是受控还是非受控。如果组件必须保留现有 props，或要和 React Query/Zustand 集成，务必提前说明；否则第一版很容易在架构上做出不必要的猜测。

先检查第一版有没有漏项

拿到初始输出后，检查测试是否真的定义了你关心的行为，而不只是 happy path。常见问题包括缺少错误场景、对 loading 状态覆盖不足、mock 过于宽泛，以及代码能跑但难维护。可以先要求第二轮把测试文件收紧，再谈润色。

迭代式使用这个技能

最好的 react-web skill 结果来自小而明确的增量：一个组件、一个页面区块、一组行为。如果第一次回答已经接近但不完整，就通过补充边界情况、状态转换或集成细节来细化，而不是直接要求整份重写。这样既能保住测试优先的纪律，也能在不破坏原有结构的前提下提升输出质量。