What problem does it solve? Web UI codebases accumulate duplicated JSX shells, mixed-concern components, and inaccessible interactive elements. This Skill enforces a consistent component structure so teams reuse primitives, separate data from views, and keep responsive variants maintainable. ## Core Features & Use Cases - Reuse-first extraction: Defines triggers for extracting repeated JSX shells into shared components, state orchestration into hooks, and utility-class chains into named style classes. - Responsive variant structure: Provides a folder contract (common/, <domain>/common/, mobile/, desktop/) with thin media-query selectors so viewport layouts never duplicate base logic. - Accessibility enforcement: Requires semantic interactive elements (<button>, <a>), aria labels for icon-only controls, and keyboard focus support instead of click handlers on <div> or <span>. - Use Case: When refactoring a React feature where the same card layout appears on mobile and desktop, load the responsive-variants reference to split shared logic into common/ and keep only layout composition in each viewport folder. ## Quick Start Ask the agent to review or refactor a React component using the ankyr-ui skill to extract shared primitives and fix accessibility issues.
