citrus-migratelisted

# Citrus Migration Skill ## Purpose Migrate a single React component from vanilla/legacy UI to Citrus design system, following established patterns and maintaining existing functionality. ## Usage ```bash /citrus-migrate <component-path> [screenshot-path] [comments] ``` **Arguments**: - `<component-path>` (required): Relative path to React component (e.g., `src/components/AddCardForm/AddCardForm.tsx`) - `[screenshot-path]` (optional): Path to Figma screenshot showing post-migration UI - `[comments]` (optional): Migration instructions/hints for the skill (e.g., "Use ValidationMessage for Message component") **Examples**: ```bash # Basic migration /citrus-migrate src/components/AddCardForm/AddCardForm.tsx # With Figma screenshot /citrus-migrate src/components/CardList/CardList.tsx ~/Downloads/cardlist-figma.png # With user comments/instructions /citrus-migrate src/components/ErrorDisplay/ErrorDisplay.tsx "Use ValidationMessage Citrus component for migrating Message component" # With screenshot and comments /citrus-migrate src/components/PaymentForm/PaymentForm.tsx ~/Downloads/payment-form.png "Follow ui/citrus/FormInput component pattern for form controls" ``` ## What This Skill Does ### Initial Migration Mode 1. **Parse Arguments**: Parse component path, optional screenshot, and optional user comments/instructions 2. **Analyze Component**: Read component, CSS, and tests to understand structure and dependencies 3. **Process User Comments**: Incorporate user-provided