Create a library-grade Vue composable that accepts maybe-reactive inputs (MaybeRef / MaybeRefOrGetter) so callers can pass a plain value, ref, or getter. Normalize inputs with toValue()/toRef() inside reactive effects (watch/watchEffect) to keep behavior predictable and reactive. Use this skill when

Create Adaptable Composable Adaptable composables are reusable functions that can accept both reactive and non reactive inputs. This allows developers to use the composable in a variety of contexts without worrying about the reactivity of the inputs. Steps to design an adaptable composable in Vue.js: 1. Confirm the composable's purpose and API design and expected inputs/outputs. 2. Identify inputs params that should be reactive (MaybeRef / MaybeRefOrGetter). 3. Use toValue() or toRef() to normalize inputs inside reactive effects. 4. Implement the core logic of the composable using Vue's reactivity APIs. Core Type Concepts Type Utilities Policy and Rules Read only, computed friendly input: use MaybeRefOrGetter Needs to be writable / two way input: use MaybeRef Parameter might be a function value (callback/predicate/comparator): do not use MaybeRefOrGetter , or you may accidentally invoke it as a getter. DOM/Element targets: if you want computed/derived targets, use MaybeRefOrGetter . When MaybeRefOrGetter or MaybeRef is used: resolve reactive value using toRef() (e.g. watcher source) resolve non reactive value using toValue() Examples Adaptable useDocumentTitle Composable: read only title parameter Adaptable useCounter Composable: two way writable count parameter

create-adaptable-composable