用途:在新增视图区域或重构现有视图前,先设计组件结构,产出一份已确认的“锁定层级文档”,使后续迁移或实现无需再做设计决策。
主要能力:勘察指定区域内所有组件文件(导出、渲染、导入、被谁导入),展示当前文件树,映射真实共享模板形状与重复接口,提出自底向上的分层(Layer 0 原子块,逐层仅依赖下层),给出视图与组件的提议文件树、TypeScript 接口、调用映射与验证步骤。
使用方式:开场需声明“I'm using the obsidian-arrow-composition skill to analyse the component structure.”;按流程逐步与用户确认,用户确认前不得产出层级文档;文档保存至 docs/plans/<area>-composition-<date>.md。可用命令如: find src/components/<area> src/components/shared -name ".ts" | sort grep -rn "from.<ComponentName>" src/ --include="*.ts" grep -rn "from.views/<ViewName>" src/ --include=".ts"
适用场景:组件抽取、DRY 与原始件采用审计、视图与共享组件边界划分、图标与 CSS 归属决策、story 状态审查。
限制与红线:仅有一个消费者的模式不抽取;接口参数多于原代码行数说明抽象有误;出现在单一位置的模式不视为原始件;不得使用 as unknown as ArrowTemplate 强制转换;“功能相似”不足以作为共享依据,需模板片段完全一致。分层规则:同层不互相导入;视图专属组件留在视图文件夹;仅当组件含多个文件时才建立独立目录。另需检查图标是否统一、共享 CSS 是否直接导入、是否存在 barrel 导出并建议取消。
资料未提供该技能的具体版本、收费与平台支持信息。