What problem does it solve? Icon transitions in UI often rely on crossfades that look cheap and break visual continuity. This Skill provides a structured approach to building icon components where any icon morphs into any other through actual SVG line transformation, using a shared three-line structure. ## Core Features & Use Cases - Universal Morphing: Every icon is defined as exactly three SVG lines, so any icon can transform into any other without special pairing logic. - Rotation Groups: Rotational variants like arrows or plus/cross share line definitions and animate rotation with spring physics via Motion. - Audit Rules: Nine implementation rules (three-line constraint, collapsed lines, consistent viewbox, reduced motion, aria-hidden, and more) let you audit existing icon code with structured findings and severity summaries. - Use Case: Build a menu button that morphs into a close icon on toggle, or an arrow that rotates smoothly between directions in a carousel, all from one component. ## Quick Start Create a morphing icon component where a menu icon transforms into a close icon using the three-line SVG structure.
