extract

用途

extract 是一个重构类子技能，属于更广泛的 ui-craft 技能体系。它的目标是从现有代码中识别并抽取可复用的部分，减少重复、集中管理设计值。当代码库中存在大量重复的 Tailwind 类名组合、散落的魔法值或结构雷同的标记时，适合使用该技能。

主要能力

该技能按步骤执行提取工作：

1. 扫描提取候选：

   • 重复的 Tailwind 类名组合——任何出现三次及以上的类名字符串应成为组件（若项目使用 cva/tv 变体，则先检查再决定是否做成变体）。
   • 魔法值——以字面量形式出现的十六进制颜色、像素尺寸、阴影定义、字号、z-index 值，应提升为 CSS 变量或 theme.extend。
   • 重复标记——仅靠文本或属性区分的块，应合并为带 props 的单一组件。

2. 匹配项目约定，而非强加新约定：

   • 命名：参考邻近组件，确认是 PascalCase 还是 kebab-case 文件名、具名导出还是默认导出，并完全匹配。
   • 位置：在创建新目录前，先检查 components/ui/、ui/、primitives/、src/components/，优先复用。
   • 令牌：尊重现有 CSS 变量命名（--color-、--space-、--font-、--radius-），不引入平行体系。

3. 对每个新组件执行 Anti-Slop 测试：

   • 组件名必须具有领域语义，而非泛化命名。MetricCard / PricingTier / InviteRow 优于 Card / Box / Item。
   • 如果组件是泛化的（例如“一个带标题和描述的卡片”），应自问是否更适合内联组合——过早抽象比重复更糟。

4. 更新所有调用点：不做半迁移。DRY 不可调。

使用方式

该技能通过命令触发，从 $ARGUMENTS 中提取可复用片段，并加载 ui-craft 技能。若 ui-craft 技能也已安装，应先阅读其 SKILL.md 以了解 Discovery + Anti-Slop + Craft Test，再应用本子技能的具体视角。

可参考的资料包括：references/layout.md（组合模式）、references/typography.md 与 references/color.md（令牌命名），以及项目现有的组件库（编写前先扫描）。

输出

• 新的组件文件及任何令牌新增项。
• 一张展示每个调用点更新的表格，包含 File、Before、After 三列。
• 一行增量摘要，例如：“Extracted N components, M tokens. Call-sites updated: X.”

适用场景

适用于代码库中已出现明显重复模式、需要系统性重构以提升可维护性的前端项目，尤其是使用 Tailwind CSS 并已有一定组件与令牌约定的项目。

限制

该技能强调不引入新的命名或令牌体系，必须匹配项目既有约定；对泛化组件持谨慎态度，避免过早抽象；要求一次性完成所有调用点更新，不接受半迁移。关于具体支持的框架、平台或版本范围，资料中暂未提供。