state-machine

Document UI component states (current vs expected) with transitions

1. Uruchom skill w trybie Ask mode podczas pętli CONVERGE — gdy pracujesz nad komponentem ze skomplikowaną logiką stanów lub refaktoryzujesz istniejący komponent.

2. W fazie pierwszej zidentyfikuj wszystkie możliwe stany komponentu. Utwórz tabelę z kolumnami: State, Current Behavior (co się dzieje teraz), Expected Behavior (co powinno się dziać). Uwzględnij stany danych (Initial, Loading, Success, Error, Empty), interakcji (Idle, Hover, Focus, Active, Disabled), widoczności (Hidden, Visible, Collapsed, Expanded) i walidacji (Valid, Invalid, Pending validation).

3. W fazie drugiej zmapuj wszystkie przejścia między stanami. Dla każdego przejścia określ: stan źródłowy (From), stan docelowy (To), wyzwalacz (Trigger — np. user action, data received, retry clicked) i efekty uboczne (Side Effects — np. start fetch, populate UI, show error message).

4. W fazie trzeciej wygeneruj diagram Mermaid przedstawiający przepływ stanów. Diagram powinien pokazywać punkt początkowy, wszystkie stany jako węzły i przejścia jako krawędzie z opisanymi wyzwalaczami.

5. Przejrzyj wygenerowaną dokumentację i upewnij się, że obejmuje wszystkie scenariusze — zarówno happy path (Initial → Loading → Success) jak i error handling (Loading → Error → Loading przy retry).