用途:在构建、重构、改样式或扩展前端/模板组件时,提供一套严格“复用优先”的组件开发工作流,让功能组件尽量由项目组件、设计系统原语和框架原生组合机制拼装而成,而不是直接堆砌底层 DOM/HTML 元素。
主要能力:一是复用优先规则,按“复用现有通用组件→泛化现有非通用组件再复用→才写新代码→立即从新代码抽取更小可复用件”的顺序执行,并把底层节点尽量封闭在可复用原语内。二是递归拆解规则,要求每个新增或被改动的组件都递归拆分,直到无法有意义地继续拆;重复标记簇、具名视觉区域、自包含交互块、带变体或状态的片段都是继续抽取的信号,即使当前没有复用需求,也可因清晰性、单一职责和可测试性而拆分,直到剩下设计系统原语、极小的语义包装或拆分不再改善可读性/复用/职责的节点。
使用方式:先识别技术栈与本地组件模型(框架、样式方案、已在用的设计系统包),编辑前阅读邻近组件;可加载 references/reuse-checklist.md 获取检索启发、技术栈映射与抽取信号;先按行为、结构和视觉角色而非仅按名称搜索共享组件目录、设计系统包、特性库与现有 UI Kit;优先使用现有插槽、变体、组合 props、render props 和样式 token;无通用组件时寻找可泛化的同骨架或同交互模型组件,将硬编码内容抽成 props、插槽、children、变体或配置,并在不破坏现有调用方行为的前提下复用泛化版本。新代码从最小的可复用边界开始,广泛有用时放入设计系统或共享层;每轮抽取后重新检查父子组件,必要时继续拆。优先放特性内共享层,抽象被证明可跨特性后再提升为全局共享组件。
适用场景:前端 UI 组件与模板组件的开发、重构、改样式和扩展,尤其需要保持组件树高层可读、避免功能组件出现大量直接底层元素的项目。
限制:泛化只在抽象形状稳定时进行,避免没有明确第二使用场景的臆测性抽象;重命名、包装、别名和默认 props 应尽量保持向后兼容。原始底层元素应尽量收敛在少量可复用文件中,仅在必须保持显式语义、框架约束、极小叶子包装或同一任务中正在抽取的新原语时直接使用。任务结束时需报告复用了哪些组件、泛化了哪些组件及方式、抽取了哪些新可复用件、仍保留哪些底层元素及原因。