Use when working with React components in chariot/ui - handles component source selection and migration from @praetorian-chariot/ui to local components
Handles component source selection and migration from the deprecated @praetorian-chariot/ui shared library to local components.
chariot-ui-components (@praetorian-chariot/ui) is being decommissionedmodules/chariot/ui/src/components/@/components/...) take precedence over shared libraryUse this skill when:
@praetorian-chariot/uiYou MUST use TodoWrite before starting to track all migration steps.
Need a component?
├─ Check local first: modules/chariot/ui/src/components/
│ ├─ EXISTS → Use it (@/components/...)
│ └─ NOT FOUND → Check chariot-ui-components
│ ├─ EXISTS → Migrate first, then use
│ └─ NOT FOUND → Create new component locally
│
Encountered @praetorian-chariot/ui import?
└─ Ask user: "Migrate this component to local?"
├─ YES → Run full migration workflow
├─ NO → Continue (user's choice)
└─ MIGRATE ALL → Mass migration of remaining components
| Source | Path | Import Pattern | Status |
|---|---|---|---|
| Local (use this) | modules/chariot/ui/src/components/ | @/components/... | Active |
| Shared (migrate) | modules/chariot-ui-components/src/ | @praetorian-chariot/ui | Decommissioning |
Before migrating, identify all dependencies:
# Find component file
COMPONENT="ComponentName"
COMPONENT_FILE="modules/chariot-ui-components/src/components/${COMPONENT}.tsx"
# Extract imports to find dependencies
grep -E "^import.*from ['\"]" "$COMPONENT_FILE"
Dependency types:
| Type | Pattern | Action |
|---|---|---|
| Internal components | from './OtherComponent' | Migrate first (recursive) |
| Icons | from '../icons/IconName' | Migrate to local icons/ |
| Utilities | from '../utils/...' | Migrate or use local utils |
| External packages | from 'react', from 'tailwind-merge' | Keep as-is |
Order matters: Migrate dependencies before the component that uses them.
For each component:
chariot-ui-components| Original | Rewritten |
|---|---|
from './OtherComponent' | from '@/components/OtherComponent' |
from '../icons/IconName' | from '@/components/icons/IconName' |
from '../utils/someUtil' | from '@/utils/someUtil' |
After migration, update ALL imports across the codebase:
# Find all files importing the migrated component
grep -r "from '@praetorian-chariot/ui'" modules/chariot/ui/src/ \
--include="*.tsx" --include="*.ts"
Transform imports (see references/import-transforms.md):
// Before
import { Button, Dropdown } from "@praetorian-chariot/ui";
// After (both migrated)
import { Button } from "@/components/Button";
import { Dropdown } from "@/components/Dropdown";
cd modules/chariot/ui && npm run tscd modules/chariot/ui && npm run build# Verify no remaining imports
grep -r "ComponentName.*@praetorian-chariot/ui" modules/chariot/ui/src/
# Should return empty
| Component Type | Local Destination |
|---|---|
| Generic UI primitives | components/ui/ |
| Form controls | components/form/ |
| Icons | components/icons/ |
| Charts/visualization | components/charts/ |
| Complex components | components/ (root) |
When encountering @praetorian-chariot/ui imports, prompt the user:
AskUserQuestion:
question: "This file imports from @praetorian-chariot/ui (deprecated).
Would you like to migrate these components to local?"
options:
- "Yes, migrate now" - Migrate component(s) and update all imports
- "No, continue" - Keep using deprecated import for now
- "Migrate ALL remaining" - Full migration of all remaining components
If local version exists with same name:
If component A imports B and B imports A:
Some components export types alongside component:
// Both must migrate together
export interface ButtonProps { ... }
export const Button = ...
Migrate interface and component together.
Button, Checkbox, Container, CopyToClipboard, DashedDropdown, Drawer,
Dropdown, EpssChart, FeatureCheckbox, FeatureRadio, IconToggle, LeftNav,
Modal, OverflowText, Popover, QueryBuilder, QueryBuilderRelationship,
SearchBar, SearchDropdown, Slider, SortableColumns, Stepper, Tabs, Tag,
Tooltip, ViewToggle
Plus icons in modules/chariot-ui-components/src/icons/
// WRONG - using deprecated library
import { Button } from "@praetorian-chariot/ui";
// CORRECT - use local
import { Button } from "@/components/Button";
If you need to modify a component, migrate it first:
After migrating a component, ALL references must be updated. Never leave a mix of:
// File A
import { Button } from "@/components/Button";
// File B (WRONG - still using deprecated)
import { Button } from "@praetorian-chariot/ui";
Before working with components:
@praetorian-chariot/ui, offer migrationnpm run ts and npm run build