state-machine

Skill do dokumentowania maszyn stanów w komponentach interfejsu. Porównujesz obecne zachowanie z oczekiwanym, identyfikujesz wszystkie możliwe stany (Initial, Loading, Success, Error, Empty) i definiujesz przejścia między nimi wraz z wyzwalaczami. Przydatne przy refaktoryzacji złożonych komponentów lub przed implementacją nowych interaktywnych elementów UI. Generujesz tabelę stanów, mapę przejść i diagram Mermaid.

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).