SuperAPI AI 工具集

component-architecture

通用与其它

查看项目

更新于 10-16 01:28

技能介绍

用途:把散乱的一次性组件整理为可组合系统。先审计现有代码,按原子层级分类,再把问题最严重的组件重构为小型、有类型、有文档的组件。核心原则:组件只承担一个职责,prop 接口应让非法状态无法表达。交付物是可运行的代码加可执行的审计,而非仅给建议。

适用:组件拆分、prop 接口设计、变体系统、抽取共享库、受控与非受控选择、组件文档。不适用时应转交:视觉 token 转 design-foundation,组件内动画转 interaction-physics,键盘与 ARIA 转 accessibility-excellence,渲染性能转 performance-optimization,整体前端不知从何入手转 frontend-orchestrator。

流程:先检查代码库建立组件清单,记录框架与样式方案(Tailwind、CSS Modules、CSS-in-JS 等),匹配现有方案,不擅自引入新样式系统;标记超 200 行文件、既取数据又渲染的组件、重复 UI、重复内联样式、类继承。检查是否已有设计系统或 UI 库,有则沿用其约定。再按原子、分子、有机体、模板、页面分类;无法分类说明职责过多,是重构候选。按杠杆排序:先合并重复原子,再拆上帝组件,再修可表达非法状态的 prop,再补缺失变体。重构规则:按职责而非行数拆分;组合优于继承;变体用 prop,预设用薄包装;编辑中需其他 UI 响应则用受控,提交时读一次可用非受控,不混用;用联合类型替代可冲突布尔值;第 2 至 3 次重复且概念相同时才抽取。每个共享组件需文档:用途、props 表、变体与使用时机、状态、无障碍说明、边界情况。

输出:一是就地修改的组件代码,更新所有调用点并保证可编译;二是 Markdown 组件架构审计,含组件清单表、已应用重构、建议未应用重构、后续约定。质量要求:每个组件一句话可述职责;无非法状态接口;无继承实现变体;共享组件明确受控或非受控;保留键盘可操作与可见焦点;新共享组件均有文档;审计覆盖检查范围。禁止:未经标记重命名公开 API;顺带引入新状态管理或样式库;过早原子化。

限制:资料未提供具体安装命令、收费、平台与效果数据。