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.
