--- 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="" ``` **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="" ``` **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 ( ) } // After (with disabled state) export function Input({ value, onChange, disabled }: InputProps) { return ( ) } ``` **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) // After (text adapts to background) ``` **Fix Method**: - Edit className string - Or update variant class mapping object **E. Add Focus Indicator**: ```typescript // Before (no focus ring) // After (with focus indicator) ``` **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 } // After (with loading state) import { Spinner } from '../LoadingSpinner' export function Button({ children, onClick, loading, disabled }: ButtonProps) { return ( ) } ``` **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 ---