Create Adaptable Composable

The create-adaptable-composable skill guides developers in building reusable Vue composables that accept both reactive and non-reactive inputs (values, refs, or getters) through MaybeRef and MaybeRefOrGetter type utilities. It's designed for Vue 3+ developers who need to create library-grade composables that work flexibly across different contexts by normalizing inputs with toValue() and toRef() inside reactive effects. This skill solves the problem of creating composables with inconsistent APIs by establishing clear patterns for handling inputs that may or may not be reactive.

skills.sh installs: 14.8K
GitHub stars: 3.3K
last updated: Aug 21, 2026

View on GitHub

Install

$ npx -y skills add vuejs-ai/skills --skill create-adaptable-composable --agent claude-code

Installs into .claude/skills of the current project.

Files

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:

Confirm the composable's purpose and API design and expected inputs/outputs.
Identify inputs params that should be reactive (MaybeRef / MaybeRefOrGetter).
Use toValue() or toRef() to normalize inputs inside reactive effects.
Implement the core logic of the composable using Vue's reactivity APIs.

Core Type Concepts

Type Utilities

/**
 * value or writable ref (value/ref/shallowRef/writable computed)
 */
export type MaybeRef<T = any> = T | Ref<T> | ShallowRef<T> | WritableComputedRef<T>;

/**
 * MaybeRef<T> + ComputedRef<T> + () => T
 */
export type MaybeRefOrGetter<T = any> = MaybeRef<T> | ComputedRef<T> | (() => T);