Componentize

Use this skill to interrogate a codebase for reuse opportunities before writing new UI. The goal is to reduce duplication, establish canonical shared components, and make app code consume those components through props, slots, composition, and clear package boundaries. Do not centralize the whole UI unless the user explicitly asks for a design-system project.

Start

When invoked:

1. State that you are using the componentize skill.
2. Identify the repo shape before editing:
   • package manager and workspace config
   • apps and packages
   • whether turbo.json exists
   • whether a shared UI package already exists, commonly packages/ui, packages/design-system, packages/components, or libs/ui
   • UI framework, styling system, icon library, test setup, Storybook or examples
3. If the user refers to a visible target by location, appearance, or interaction, resolve that target before searching broadly.
4. Search before creating anything. Use rg, rg --files, and import relationships to find existing components, repeated markup, repeated Tailwind class strings, copied form controls, duplicated shells, and variant drift.
5. If the user asks for implementation, first state the extraction target, canonical home, public API, call sites to migrate, and validation plan. Then edit narrowly and validate. If the user asks for analysis, return an audit with prioritized extraction candidates.