关于 extract
这是 `ui-craft` 的子技能，用于在目标代码中识别可复用的界面组件和设计令牌。它遵循项目现有约定，并列出每处调用点的更新。
主要功能
- 01查找重复的 Tailwind 类和标记
- 02将字面样式值集中为令牌
- 03遵循现有命名与组件约定
- 04更新并列出所有调用点
适用场景
- 01减少重复的界面标记
- 02集中管理颜色、尺寸等样式值
- 03按项目约定重构组件
安装
复制下面的命令，在终端中运行。
$
npx skills add https:/安装后在 Claude Code 中输入/extract确认已加载。
详细介绍
上下文： 此子技能是更广泛的 ui-craft 技能的一个视角。如果也安装了 ui-craft 技能，请先阅读其 SKILL.md，了解 Discovery + Anti-Slop + Craft Test，然后应用下方的具体视角。
从 $ARGUMENTS 中提取可复用的部分。加载 ui-craft 技能。
步骤 1 — 扫描目标，寻找可提取内容：
- 重复的 Tailwind 类组合 — 任何出现 ≥3 次的类字符串都应变成组件（或者在项目使用
cva/tv时变成变体——先检查）。 - 魔法值 — 以字面形式出现的十六进制颜色、像素尺寸、阴影定义、字号、z-index 值。将它们提取到 CSS 变量或
theme.extend中。 - 重复的标记 — 仅文本/属性不同的代码块应合并为带属性的单个组件。
步骤 2 — 遵循项目约定，不要强加新约定：
- 命名 — 查看相邻组件。文件名是 PascalCase 还是 kebab-case？使用命名导出还是默认导出？严格遵循现有做法。
- 位置 — 创建新目录前，先检查
components/ui/、ui/、primitives/、src/components/。优先复用。 - 令牌 — 遵循现有 CSS 变量命名方式（
--color-*、--space-*、--font-*、--radius-*）。不要引入并行体系。
步骤 3 — 对每个新组件进行 Anti-Slop Test（来自 SKILL.md）：
- 组件名称必须体现具体领域，不能太通用。
MetricCard/PricingTier/InviteRow优于Card/Box/Item。 - 如果组件很通用（“带标题和描述的卡片”），请考虑是否应该改为内联组合——过早抽象比重复更糟糕。
步骤 4 — 更新每个调用位置。 不要只迁移一部分。
与参数无关 — DRY 不可调整。
需要阅读的参考资料：references/layout.md（组合模式）、references/typography.md 和 references/color.md（令牌命名），以及项目现有的组件库（编写前先扫描）。
输出：
- 新组件文件和任何令牌新增项。
- 列出每个调用位置更新的表格：
| 文件 | 之前 | 之后 |
|---|
- 一行差异说明：“提取了 N 个组件、M 个令牌。已更新调用位置：X。”
下一步： /tokens — 将刚刚集中管理的值提取到令牌主干（第 2 级）。
评论
支持 Markdown