Name: component-fix
Author: mattnigh

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	[object Object], [object Object], [object Object]
model	claude-sonnet-4-5-20250929

component-fix

Install Skill

SKILL.md