Agent skill · software engineering · aiskillstore
create-adaptable-composable
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 user asks for creating adaptable or reusable composables.
Why this skill is useful
Provides specific patterns and type utilities for creating adaptable Vue composables that enhance reactivity handling.
What it needs
Requires vue installed locally. About 1k tokens when loaded. Last updated 2026-08-07. 405 stars on the source repository.
What this skill does
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
How to use it
Reference it in AdaL, Claude Code, Cursor or any coding agent — nothing to install:
@skills aiskillstore/create-adaptable-composable