animation-interaction-validator

Animation validation checks that interactive elements like buttons, forms, and modals have CSS transitions, hover states, and smooth feedback. This Skill automates detection of missing animations and ensures micro-interactions meet accessibility and polish standards for React apps built with Tanstack Start and shadcn/ui.

Interactive elements need visual feedback during async actions (loading states), keyboard navigation (focus indicators), and state changes. This Skill validates that buttons, links, inputs, and modals display these states, preventing flat interfaces and ensuring accessible keyboard navigation cues.

Yes. This Skill detects missing hover states, loading indicators, and focus visibility across interactive elements during event handling, form submission, and navigation. It validates that components follow shadcn/ui and Tanstack Start patterns.

This Skill validates animation performance and accessible feedback by checking transitions, micro-interactions, and focus states across component-library patterns. It catches performance issues and ensures keyboard users receive equivalent visual feedback.

Transition validation examines CSS transitions and micro-interactions on interactive elements—buttons, links, forms, inputs, modals, and dynamic lists. It ensures smooth feedback during event handling, async actions, state transitions, and navigation.

Yes. This Skill validates animations, loading states, and feedback across dynamically updated lists, async actions, and form submissions. It ensures all state transitions and navigation events display proper visual and accessible feedback.