SuperAPI AI 工具集

widget-decomposition

设计与创作

查看项目

更新于 10-15 21:11

技能介绍

用途:当用户在 Flutter 项目中处理需要拆解的 Widget 时自动激活,帮助把组件按 Atomic Design 层级(Atom、Molecule、Organism、Template、Page)重新组织。

主要能力:读取用户正在编辑的 Widget,识别其中哪些部分属于原子、分子和有机体;给出拆解表格;在获得确认后再生成拆分后的文件,并附带 Widgetbook 条目。层级职责参考:Atom 为单一用途、无业务逻辑的无状态元素(如 Button、Avatar、Badge、TextInput、Icon);Molecule 由原子组合并含少量本地交互逻辑(如 SearchBar、UserChip、RatingStars);Organism 含数据绑定与状态管理(如 UserList、CommentThread、ProductCard);Template 只负责页面布局与插槽;Page 绑定路由与数据提供者。

触发拆解的信号:单文件超过 150 行;布局、逻辑与状态混杂;被两个以上功能复用;名为原子却含 setState;内联构建其他 Widget。

使用方式:技能自动激活后读取目标 Widget,提出拆解方案并等待批准,再生成文件。文件放置规则:共享组件放 core/widgets/{atoms|molecules|organisms}/;功能专属放 features/{feature}/presentation/{templates|pages}/;Widgetbook 条目与组件同目录,命名为 {widget_name}.widgetbook.dart。完整方法论需读取 ${CLAUDE_PLUGIN_ROOT}/references/atomic-methodology.md。

限制与反模式:不得硬编码颜色或文字样式,应使用 Theme.of(context).colorScheme 与 textTheme;不得跳过 Widgetbook 条目;不得在原子或分子中放业务逻辑;不得创建没有模板的页面。具体安装与调用命令资料未提供。