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:

# 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):

// 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):

// 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):

// 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):

// 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:

// 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:

// 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:

// 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:

// 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:

// 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:

// 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:

// 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:

# 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:

/serena -d "Execute component-fix skill to update Button component token usage"

From Review:

/serena -d "Execute component-fix skill to implement all HIGH priority component fixes from component-analysis report"

Combined:

/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