Create Adaptable Composable

This teaches Claude to build Vue 3 composables that accept plain values, refs, or getters interchangeably using MaybeRef and MaybeRefOrGetter types. It's the difference between forcing callers to wrap everything in ref() versus letting them pass whatever makes sense in context. The skill covers when to use toValue() versus toRef(), how to handle writable versus read-only inputs, and warns you about the footgun of treating callbacks as getters. If you're building a library or just tired of rigid composable APIs that fight with reactive and non-reactive data, this is the pattern Vue's own ecosystem uses internally.

skills.sh installs: 2.2K
GitHub stars: 2.7K
last updated: Jul 14, 2026

View on GitHub

Install

$ npx -y skills add hyf0/vue-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);