component-fix

What problem does it solve?

Inconsistent token usage, non-standardized props, or missing accessibility patterns in UI components lead to a fragmented user experience and increased maintenance burden. This Skill systematically fixes these issues, ensuring your components are robust, accessible, and aligned with your design system.

Core Features & Use Cases

• Token Usage Updates: Replaces hardcoded styles (e.g., bg-blue-600) with semantic theme tokens (e.g., bg-primary) for consistent theming.
• Props API Standardization: Aligns variant, size, and state props (e.g., type → variant, small → sm) across component groups for a unified developer experience.
• Accessibility Enhancements: Implements critical accessibility patterns like visible focus indicators, text adaptation on hover, and missing states (e.g., disabled, loading, error).
• Efficient Code Modification: Leverages symbolic code manipulation tools for targeted and systematic changes, minimizing manual effort and errors.
• Use Case: Standardize the variant prop across all button-like components (Button, IconButton, SegmentedButton) and add a consistent loading state with a spinner to each.

Quick Start

Use the component-fix skill to add a loading state to the Button component, including the prop, spinner, and disabled logic.