extract

Compare original and translation side by side

🇺🇸

Original

English

🇨🇳

Translation

Chinese

Context: this sub-skill is one lens of the broader

ui-craft

skill. If the

ui-craft

skill is also installed, read its SKILL.md first for Discovery + Anti-Slop + Craft Test, then apply the specific lens below.

Extract reusable pieces from

$ARGUMENTS

. Load the

ui-craft

skill.

Step 1 — Scan the target for extraction candidates:

Repeated Tailwind class combos — any class string that appears ≥3 times becomes a component (or a
```
cva
```
/
```
tv
```
variant if the project uses one — check first).
Magic values — hex colors, pixel sizes, shadow definitions, font sizes, z-index values appearing in literal form. Lift into CSS variables or
```
theme.extend
```
.
Repeated markup — blocks that differ only by text/props collapse into a single component with props.

Step 2 — Match the project's conventions, don't impose new ones:

Naming — look at neighboring components. PascalCase file? kebab-case file? Named export vs default export? Match exactly.
Location — check
```
components/ui/
```
,
```
ui/
```
,
```
primitives/
```
,
```
src/components/
```
before creating a new directory. Reuse.
Tokens — respect existing CSS variable naming (
```
--color-*
```
,
```
--space-*
```
,
```
--font-*
```
,
```
--radius-*
```
). Don't introduce a parallel system.

Step 3 — Anti-Slop Test on every new component (from SKILL.md):

Component name must be domain-specific, not generic.
```
MetricCard
```
/
```
PricingTier
```
/
```
InviteRow
```
beats
```
Card
```
/
```
Box
```
/
```
Item
```
.
If the component is generic ("a card with a title and description"), ask yourself whether it should instead be an inline composition — premature abstraction is worse than repetition.

Step 4 — Update every call-site. No half-migrations.

Knob-agnostic — DRY is not tunable.

References to read:

references/layout.md

(composition patterns),

references/typography.md

and

references/color.md

(token naming), plus the project's existing component library (scan before writing).

Output:

The new component file(s) + any token additions.
A table showing every call-site update:

File	Before	After

A one-line delta: "Extracted N components, M tokens. Call-sites updated: X."

Next step:

/tokens

— lift the values you just centralized into the token spine (rung 2).

上下文： 本子技能是更广泛的

ui-craft

技能的一个视角。如果同时安装了

ui-craft

技能，请先阅读其SKILL.md中的「发现 + Anti-Slop + 工艺测试」相关内容，然后应用以下特定视角。

从

$ARGUMENTS

中提取可复用片段。加载

ui-craft

技能。

步骤1 — 扫描目标以确定可提取的候选项：

重复的Tailwind类组合 — 出现次数≥3次的类字符串应提取为组件（如果项目使用
```
cva
```
/
```
tv
```
，则提取为变体——请先检查项目约定）。
魔法值 — 以字面量形式出现的十六进制颜色、像素尺寸、阴影定义、字体大小、z-index值。将其提升为CSS变量或
```
theme.extend
```
配置。
重复的标记 — 仅文本/props不同的代码块应合并为带props的单个组件。

步骤2 — 遵循项目现有约定，不要引入新约定：

命名 — 参考相邻组件的命名方式。文件用PascalCase还是kebab-case？是命名导出还是默认导出？完全匹配现有约定。
位置 — 创建新目录前先检查
```
components/ui/
```
、
```
ui/
```
、
```
primitives/
```
、
```
src/components/
```
这些目录，尽量复用现有目录。
令牌 — 遵循现有CSS变量命名规范（
```
--color-*
```
、
```
--space-*
```
、
```
--font-*
```
、
```
--radius-*
```
），不要引入并行的体系。

步骤3 — 对每个新组件进行Anti-Slop测试（来自SKILL.md）：

组件名必须是领域特定的，不能过于泛化。
```
MetricCard
```
/
```
PricingTier
```
/
```
InviteRow
```
优于
```
Card
```
/
```
Box
```
/
```
Item
```
。
如果组件是通用型的（比如「带标题和描述的卡片」），请自问是否应该保留为内联组合——过早抽象比重复更糟糕。

步骤4 — 更新所有调用点。 不得进行半完成的迁移。

无可调参数 — DRY原则不可调校。

参考文档：

references/layout.md

（组合模式）、

references/typography.md

和

references/color.md

（令牌命名），以及项目现有的组件库（编写前请先扫描了解）。

输出：

新的组件文件 + 所有新增的令牌。
展示所有调用点更新的表格：

文件	之前	之后

一行变更摘要：「已提取N个组件、M个令牌，更新调用点：X个。」

下一步：

/tokens

— 将你刚刚集中整理的值提升到令牌主干（第2阶）。