--- name: migrate-component description: 'Migrate a component from raw HTML to design system components' targets: ["*"] claudecode: allowed-tools: - "Bash" - "Read" - "Write" - "Glob" - "Grep" --- # Migrate Component Skill This skill migrates components from raw HTML to design system components. ## Usage Invoke when: - A component uses raw HTML elements (div, button, span, etc.) - A component needs to adopt design system patterns - Lint errors flag `prefer-design-system` violations ## Process ### Step 1: Analyze Current Component Read the component and identify: - Raw HTML elements used - Current styling approach (CSS, Tailwind, inline) - Component structure and logic - Props and state ### Step 2: Map to Design System | Raw HTML | Design System Replacement | |----------|--------------------------| | `

` | `Box`, `VStack`, `HStack`, `Stack` | | `

); ``` ### After (Design System) ```tsx import { HStack, VStack, Box } from '@contractspec/lib.design-system'; import { Avatar, Text, Heading, Button } from '@contractspec/lib.ui-kit-web'; const UserCard = ({ user, onEdit }) => ( {user.name} {user.email} ); ``` ### Key Changes Made 1. `

` → `` (semantic flex container) 2. `` → `` (handles fallback, accessibility) 3. `

`-`

{user.name}

` → `` (semantic, styled) 4. `` → `` (typography tokens) 5. `

migrate-component

Scan your own AI components