SKILL.md
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/tvvariant 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):