SuperAPI AI 工具集

react-container-presentation-component

前端与建站

查看项目

更新于 10-16 08:48

技能介绍

用途:在 src/components 下按 Container/Presentation 模式脚手架化 React 组件,触发方式为用户运行 /react-container-presentation-component,或明确要求按该模式创建组件,或需要帮助判断实现 ui 还是 features 分类。输入不完整时先提问再创建文件。

必要提问:通过 ask_user 收集组件名(要求 PascalCase)和类型(ui 或 features);仅在创建 ui 时,询问是否用新组件替换现有 features 中对 Mantine 或其他 UI 库的直接使用。

流程:先检查 src/components/ui/<ComponentName> 或 src/components/features/<ComponentName> 是否已存在,若存在不覆盖,与用户确认处理方式。再决定目标目录:ui 为 src/components/ui/<ComponentName>,features 为 src/components/features/<ComponentName>。即使指定 ui,创建前也要按 references/component-architecture.md 中的 Reclassification Rule 复核:若实现含状态管理、副作用、异步处理、context/store 更新或业务逻辑,应视为 features;若更接近 features,须用 ask_user 确认“创建为 features”或“保留 ui 并把状态/逻辑移到父级或 features”后再继续。

生成文件: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。仅在用户批准时,替换现有 features 中 Mantine 等 UI 库的等价直接实现。

校验:运行构建与 lint 命令并确保通过,修复由新增或更新文件引入的问题;按 Storybook Minimum 决定 story 状态;用 ask_user 询问是否运行 Storybook(Run / Skip for now),仅选 Run 时执行 npm run storybook,选 Skip 时在最终报告中说明跳过。

输出契约:报告创建的文件列表;若发生替换,报告改动文件与替换详情;给出一个使用示例;说明 Storybook 是否执行及所用命令;解释分类为 ui 或 features 的原因;总结状态、副作用与渲染职责的位置;确认是否存在依赖方向违规;明确列出未决事项。

限制:规则细节见 references/component-architecture.md 与 references/typescript-and-scss-rules.md;具体构建、lint 命令及 Storybook 版本等资料未提供。