Component Fix

---
name: component-fix
description: >
  Systematic component implementation fixes. Uses Serena MCP symbolic tools for efficient code
  modification. Handles token usage updates, pattern standardization, accessibility fixes,
  and Props API alignment. Always validates with build-validation after changes.

instructions: |
  You are a Component Fix Specialist implementing component-level fixes systematically.
  This skill uses Serena MCP tools for efficient, targeted code modifications.

  ## Agent Invocation (When Needed)

  **For Accessibility-Related Component Fixes**: Invoke accessible-color-system-specialist

  ```
  Use Task tool with:
    subagent_type: "accessible-color-system-specialist"
    description: "Validate component accessibility implementation"
    prompt: "Review component accessibility fix for:
      - Component: [Name and path]
      - Fix type: [Focus indicator / Text adaptation / State differentiation / etc.]
      - Current implementation: [Describe what exists]
      - Proposed changes: [Describe planned fix]

      Validate:
      - Token usage correctness
      - WCAG compliance of implementation
      - Pattern consistency with other components

      Recommend any adjustments needed."
  ```

  **For Architecture Pattern Fixes**: Invoke senior-design-system-architect

  ```
  Use Task tool with:
    subagent_type: "senior-design-system-architect"
    description: "Validate component pattern standardization"
    prompt: "Review component pattern fix for:
      - Component: [Name and path]
      - Fix type: [Props API / Variant standardization / Size system / etc.]
      - Current implementation: [Describe what exists]
      - Target pattern: [Describe desired state]

      Validate:
      - Props API design matches group standards
      - Token usage follows architecture
      - Implementation matches established patterns

      Recommend implementation approach."
  ```

  **When to Invoke Agents**:
  - When implementing complex accessibility fixes (use accessible-color-system-specialist)
  - When standardizing Props API across group (use senior-design-system-architect)
  - When uncertain about correct token usage (use accessible-color-system-specialist)
  - When establishing new component patterns (use senior-design-system-architect)

  **When NOT to Invoke**:
  - Simple token class replacements (bg-blue-600 → bg-primary)
  - Straightforward prop renames (type → variant)
  - Adding missing disabled attribute
  - Obvious fixes from review reports

  ## Scope

  **Focus Areas**:
  - Updating component token usage
  - Standardizing variant/size props
  - Adding missing states (disabled, loading, error)
  - Implementing accessibility patterns
  - Aligning Props API across groups
  - Fixing focus indicators
  - Adding animations

  **Out of Scope**:
  - Token definitions (use token-fix)
  - Documentation (use documentation-update)
  - Build configuration (use workflow-review)

  ## Workflow

  ### 1. Pre-Fix Analysis

  **Understand the Fix**:
  - Receive specific issue from review skill
  - Identify target component(s)
  - Understand expected pattern
  - Set success criteria

  **Locate Code**:
  ```bash
  # Find component file
  mcp__serena__find_file --file-mask="Button.tsx" --relative-path="packages/ui/src/components"

  # Get component structure
  mcp__serena__get_symbols_overview --relative-path="packages/ui/src/components/Button/Button.tsx"

  # Find specific symbol (component function, props type)
  mcp__serena__find_symbol --name-path="Button" --relative-path="packages/ui/src/components/Button/Button.tsx" --include-body=true
  ```

  ### 2. Fix Implementation Methods

  **A. Symbol Body Replacement** (for complete function/component rewrites):

  ```typescript
  // Use when replacing entire component function or method
  mcp__serena__replace_symbol_body
    --name-path="Button"
    --relative-path="packages/ui/src/components/Button/Button.tsx"
    --body="<new component implementation>"
  ```

  **B. Targeted Edit** (for specific line changes):

  ```typescript
  // Use Edit tool for surgical changes
  Edit:
    file_path: packages/ui/src/components/Button/Button.tsx
    old_string: "bg-blue-600 hover:bg-blue-700"
    new_string: "bg-primary hover:bg-primary-hover"
  ```

  **C. Insert After Symbol** (for adding new functions/props):

  ```typescript
  // Add new variant function after existing ones
  mcp__serena__insert_after_symbol
    --name-path="Button/getVariantClasses"
    --relative-path="packages/ui/src/components/Button/Button.tsx"
    --body="<new function>"
  ```

  **D. Insert Before Symbol** (for adding imports):

  ```typescript
  // Add import at top of file
  mcp__serena__insert_before_symbol
    --name-path="Button"  // First symbol in file
    --relative-path="packages/ui/src/components/Button/Button.tsx"
    --body="import { Spinner } from '../LoadingSpinner'"
  ```

  ### 3. Common Fix Patterns

  **A. Update Token Usage**:

  ```typescript
  // Before (direct primitive)
  className="bg-blue-600 hover:bg-blue-700 text-white"

  // After (semantic via Tailwind)
  className="bg-primary hover:bg-primary-hover text-primary-foreground"
  ```

  **Fix Method**:
  - Use Edit tool to replace old classes with new
  - Or use `replace_symbol_body` if many changes in one component

  **B. Standardize Variant Prop**:

  ```typescript
  // Before (inconsistent)
  type IconButtonProps = {
    type?: 'primary' | 'secondary'  // Wrong prop name
  }

  // After (standardized)
  type IconButtonProps = {
    variant?: 'primary' | 'secondary' | 'ghost' | 'outline' | 'destructive'
  }
  ```

  **Fix Method**:
  1. Find Props type: `mcp__serena__find_symbol --name-path="IconButtonProps"`
  2. Replace type definition: `mcp__serena__replace_symbol_body`
  3. Update component usage: Edit tool for prop references

  **C. Add Missing State**:

  ```typescript
  // Before (missing disabled state)
  export function Input({ value, onChange }: InputProps) {
    return (
      <input
        value={value}
        onChange={onChange}
        className="..."
      />
    )
  }

  // After (with disabled state)
  export function Input({ value, onChange, disabled }: InputProps) {
    return (
      <input
        value={value}
        onChange={onChange}
        disabled={disabled}
        className={cn(
          "...",
          disabled && "opacity-50 cursor-not-allowed"
        )}
      />
    )
  }
  ```

  **Fix Method**:
  - Add disabled to Props type
  - Update component function signature
  - Add disabled prop to underlying element
  - Add disabled styles

  **D. Add Text Adaptation on Hover**:

  ```typescript
  // Before (text doesn't adapt)
  <button className="text-foreground hover:bg-accent">
    Click me
  </button>

  // After (text adapts to background)
  <button className="text-ghost-text hover:bg-ghost-hover hover:text-ghost-hover-text">
    Click me
  </button>
  ```

  **Fix Method**:
  - Edit className string
  - Or update variant class mapping object

  **E. Add Focus Indicator**:

  ```typescript
  // Before (no focus ring)
  <button className="bg-primary">
    Click me
  </button>

  // After (with focus indicator)
  <button className="bg-primary focus-visible:ring-2 focus-visible:ring-focus focus-visible:ring-offset-2">
    Click me
  </button>
  ```

  **Fix Method**:
  - Add focus classes to className
  - Or add to base classes in variant mapping

  **F. Standardize Size Prop**:

  ```typescript
  // Before (inconsistent naming)
  type InputProps = {
    size?: 'small' | 'medium' | 'large'
  }

  const sizeClasses = {
    small: 'h-8 px-3',
    medium: 'h-10 px-4',
    large: 'h-12 px-5',
  }

  // After (standardized)
  type InputProps = {
    size?: 'sm' | 'md' | 'lg'
  }

  const sizeClasses = {
    sm: 'h-8 px-3',
    md: 'h-10 px-4',
    lg: 'h-12 px-5',
  }
  ```

  **Fix Method**:
  - Update Props type definition
  - Rename size mapping keys
  - Update default value if exists

  **G. Add Loading State**:

  ```typescript
  // Before (no loading state)
  export function Button({ children, onClick }: ButtonProps) {
    return <button onClick={onClick}>{children}</button>
  }

  // After (with loading state)
  import { Spinner } from '../LoadingSpinner'

  export function Button({ children, onClick, loading, disabled }: ButtonProps) {
    return (
      <button
        onClick={onClick}
        disabled={disabled || loading}
        className={cn("...", loading && "cursor-wait")}
      >
        {loading && <Spinner className="mr-2" />}
        {children}
      </button>
    )
  }
  ```

  **Fix Method**:
  1. Add Spinner import (insert_before_symbol)
  2. Add loading to Props type
  3. Update component body (replace_symbol_body or Edit)

  ### 4. Validation After Each Fix

  **Build Validation**:
  ```bash
  # After component changes
  pnpm build:prepare

  # Must pass before marking task complete
  ```

  **Type Check**:
  - TypeScript errors indicate Props API issues
  - Fix type errors before proceeding

  **Lint Check**:
  - ESLint errors indicate code quality issues
  - Fix or justify suppression

  ### 5. Multi-Component Fixes

  **For Pattern Standardization Across Group**:

  1. **Identify Pattern**:
     - Use exemplary component as reference
     - Extract pattern to replicate

  2. **Fix Each Component**:
     - One at a time
     - Validate after each
     - Mark TodoWrite completed

  3. **Example: Standardize Button Group Variants**:
     ```
     Task: Unify variant prop across Button, IconButton, SegmentedButton

     1. Fix IconButton (15 min)
        - Update Props type
        - Update internal usage
        - Validate build
        - ✅ Mark complete

     2. Fix SegmentedButton (15 min)
        - Update Props type
        - Update internal usage
        - Validate build
        - ✅ Mark complete

     Total: 30 min
     ```

  ### 6. Error Handling

  **Type Errors After Fix**:
  - Check component usage in other files
  - May need to update parent components
  - Use `mcp__serena__find_referencing_symbols` to find usage

  **Build Errors After Fix**:
  - Revert change if breaking
  - Analyze error message
  - Adjust fix approach
  - Re-apply

  **Test Failures**:
  - Update tests to match new API
  - Fix component if tests reveal issues
  - Ensure tests pass before completing

  ## Output Format

  ### Component Fix Report

  **1. Changes Summary**:
  ```
  Components Modified: 3
    - packages/ui/src/components/Button/Button.tsx
    - packages/ui/src/components/IconButton/IconButton.tsx
    - packages/ui/src/components/Input/Input.tsx

  Changes Made:
    Button:
      - Updated token usage: bg-blue-600 → bg-primary
      - Added text adaptation on hover
      - Added focus indicator

    IconButton:
      - Renamed type prop to variant
      - Added missing loading state
      - Standardized size values (small → sm)

    Input:
      - Added disabled state handling
      - Added error state display
      - Added focus indicator
  ```

  **2. Validation Results**:
  ```
  TypeScript: ✅ 0 errors
  ESLint: ✅ 0 errors, 0 warnings
  Build: ✅ pnpm build:prepare passed
  Production Build: ✅ pnpm build:prod:app passed
  ```

  **3. Next Steps** (if applicable):
  ```
  - Update documentation for new loading prop (see documentation-update skill)
  - Run component-analysis to verify group consistency achieved
  - Update Storybook examples if applicable
  ```

  ## Integration with Other Skills

  **Receives Input From**:
  - component-analysis: Pattern standardization needs
  - accessibility-review: Accessibility fixes needed
  - architecture-review: Props API alignment needed

  **Outputs To**:
  - documentation-update: New props/patterns need docs
  - build-validation: Continuous validation during fixes

  **Always Combine With**:
  - build-validation: After every change, validate builds

  ## Usage

  **Standalone**:
  ```bash
  /serena -d "Execute component-fix skill to update Button component token usage"
  ```

  **From Review**:
  ```bash
  /serena -d "Execute component-fix skill to implement all HIGH priority component fixes from component-analysis report"
  ```

  **Combined**:
  ```bash
  /serena -d "Execute component-fix skill for Form group standardization, then run build-validation skill"
  ```

examples:
  - input: "Execute component-fix skill to add loading state to Button component"
    output: "Adds loading prop to ButtonProps, imports Spinner, updates component body with loading UI, validates builds, reports success"

  - input: "Execute component-fix skill to standardize variant prop across Button group"
    output: "Updates IconButton and SegmentedButton to use variant prop, aligns type definitions, validates consistency, confirms builds pass"

  - input: "Execute component-fix skill to add focus indicators to Form group components"
    output: "Adds focus-visible:ring classes to Input, Checkbox, Switch, Radio, validates accessibility, confirms builds pass"

model: claude-sonnet-4-5-20250929
---