create-adaptable-composable

Skill do tworzenia bibliotecznych composable'ów Vue 3, które przyjmują elastyczne wejścia (MaybeRef / MaybeRefOrGetter). Pozwala użytkownikom przekazywać zwykłe wartości, referencje lub gettery bez martwienia się o reaktywność. Normalizujesz wejścia za pomocą toValue() lub toRef() wewnątrz efektów reaktywnych (watch/watchEffect), aby zachować przewidywalne i reaktywne zachowanie. Idealny do budowania wielokrotnie używalnych composable'ów.

1. Upewnij się, że Twój projekt używa Vue 3 lub wyższej wersji (lub Nuxt 3+), ponieważ skill wymaga tych wersji.
2. Zdefiniuj cel i API composable'a — określ, jakie parametry powinny być reaktywne i jakie wartości będzie zwracać.
3. Zidentyfikuj parametry wejściowe, które powinny obsługiwać zarówno wartości zwykłe, jak i reaktywne. Oznacz je typem MaybeRef (jeśli mogą być zapisywalne) lub MaybeRefOrGetter (jeśli mają być tylko do odczytu).
4. Wewnątrz efektów reaktywnych (watch, watchEffect) normalizuj wejścia za pomocą toValue() lub toRef(), aby obsługiwać wszystkie formy wejścia — zwykłe wartości, referencje, computed czy gettery.
5. Zaimplementuj logikę composable'a używając Vue Reactivity API, pamiętając o regułach: dla wejść tylko do odczytu użyj MaybeRefOrGetter, dla zapisywalnych użyj MaybeRef, a dla callbacków unikaj MaybeRefOrGetter, aby nie aktywować ich przypadkowo jako gettery.
6. Przetestuj composable z różnymi typami wejść (wartości zwykłe, refs, computed, gettery) aby upewnić się, że zachowuje się przewidywalnie w każdym kontekście.