extract

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 the target the user described. 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):