react-container-presentation-component

容器/展示组件

使用此技能在 src/components 下创建一个遵循容器/展示模式的 React 组件。

详细规则请参阅此技能捆绑的参考资料。

• references/component-architecture.md
• references/typescript-and-scss-rules.md

如果 /react-container-presentation-component 的输入不完整，请先提问再创建文件。

何时使用

• 当用户运行 /react-container-presentation-component 时
• 当用户明确要求一个遵循容器/展示模式的 React 组件时
• 当用户希望在容器/展示模式中决定或实现 ui 与 features 的分类时需要帮助时

必问问题

如果缺少以下任何信息，请使用 ask_user 询问用户。

1. 组件名称
2. 类型（ui 或 features）
3. 是否替换现有组件（仅在创建 ui 时）

问题要求：

• 将类型作为选项提供（ui、features）
• 要求组件名称使用 PascalCase
• 对于 ui，询问是否应将现有 features 中直接使用 Mantine 或其他 UI 库的地方替换为新组件

流程

1. 检查现有组件

• 检查 src/components/ui/<ComponentName> 或 src/components/features/<ComponentName> 是否已存在。
• 如果已存在，不要覆盖；与用户确认首选方案。

2. 决定目标目录

• ui：src/components/ui/<ComponentName>
• features：src/components/features/<ComponentName>

3. 重新检查分类（仅在指定 ui 时）

• 即使指定了 ui，在创建文件之前，也要查阅 references/component-architecture.md 中的 Reclassification Rule。
• 如果实现包含状态管理、副作用、异步处理、context/store 更新或业务逻辑，则视为 features。
• 如果结果更接近 features，不要按 ui 继续；使用 ask_user 并确认以下之一后再继续。
  • Create as features
  • Keep ui and move state/logic to parent or features

4. 创建必需文件

• ui：index.tsx、index.module.scss、index.stories.tsx
• features：index.tsx、use<ComponentName>.tsx、presentation.tsx、types.ts、presentation.module.scss、presentation.stories.tsx

5. 替换现有用法（仅在创建 ui 时）

• 仅在用户批准时，将现有 features 中使用 Mantine 或其他 UI 库的等效直接实现替换为新的 ui 组件。

6. 验证

• 运行构建和 lint 命令，并确保两者均通过；如果新添加或更新的文件引入了问题，请修复它们。
• 按照 references/component-architecture.md 中的 Storybook Minimum 决定 story 状态。
• 通过 ask_user 询问用户是否运行 Storybook 检查（例如："Run" / "Skip for now"）。
• 仅当用户选择 "Run" 时运行 npm run storybook。
• 如果用户选择 "Skip for now"，请在最终报告中明确说明跳过了 Storybook 执行。

输出约定

• 报告已创建文件的列表。
• 如果执行了替换，报告已更改文件的列表和替换详情。
• 提供所创建组件的一个用法示例。
• 报告是否执行了 Storybook 验证（运行/跳过），如果运行了，请包含所使用的命令。
• 解释组件为何被分类为 ui 或 features。
• 总结状态、副作用和渲染职责分别放置在何处。
• 确认是否存在任何依赖方向违规。
• 清楚说明任何未解决的事项。