用途：为 React 函数组件文件提供可预测的七段式结构，让任何人打开文件都知道去哪里找内容；同时归纳最常见的 Hooks 反模式，减少无限循环、状态过期和意外重渲染。
主要能力：七段顺序为导入（React→第三方→内部 @/→本地，分组空行）→样式（Styled 前缀组件、Tailwind、CSS Modules）→类型（*Props 紧邻组件上方）→组件（具名导出 const 箭头函数）→逻辑（本地 state→自定义/数据 hooks→effects→后处理→handlers）→条件渲染（loading/error/empty 提前返回）→默认渲染（成功路径放最底部）。逻辑按依赖顺序排列，每行只引用上方已声明内容。
Hooks 反模式要点：1）能在渲染期派生就不要用 effect 同步，否则多一次渲染且可能循环；2）props 派生的 state 用 key 重置，不要指望 useState 跟踪 props；3）依赖数组要列全，漏项会捕获过期闭包；4）依赖数组中的对象/数组字面量每次渲染都是新引用，会无限触发，应移入 effect 或用 useMemo 记忆。
使用方式：作为技能需显式调用 /ideal-react-component，或在项目 CLAUDE.md 中记录该约定；GSD 执行阶段不会自动激活技能。深度参考按需加载 reference/SECTIONS.md、HOOKS-ANTIPATTERNS.md、REFACTORING.md、COMPLETE-EXAMPLES.md 等文件。
适用场景与限制：适用于函数组件与 TypeScript/JavaScript 项目；小组件和 React Server Components 可合理跳过部分段落。提前返回必须位于所有 hook 调用之后，否则会触发“Rendered fewer hooks than expected”。Server Components 不能包含样式与逻辑段，useState、useEffect、styled-components 需在文件顶部加 'use client'。key 重置会重挂载整个子树，丢弃子状态、非受控输入值、焦点和动画。返回类型应写 React.JSX.Element（React 19 移除了全局 JSX 命名空间）。@tanstack/react-query v5 改为单对象参数，loading 状态更名为 pending，isLoading 重定义为 isPending && isFetching。组件逻辑约 50 行或总长约 200 行时，建议抽取为 use[Domain] 自定义 hook。