create-adaptable-composable

Creates Vue composables accepting maybe-reactive inputs via MaybeRef and MaybeRefOrGetter types.

Updated Aug 2, 2026
One-click install
npx skills add https://github.com/jeje-it/template-projet --skill create-adaptable-composable-jeje-it
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: create-adaptable-composable
Source: https://github.com/jeje-it/template-projet/tree/main/.agents/skills/create-adaptable-composable
Command: npx skills add https://github.com/jeje-it/template-projet --skill create-adaptable-composable-jeje-it

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve? Vue composables often break or lose reactivity when callers pass plain values instead of refs, or getters instead of static values. This Skill guides the creation of library-grade composables that accept any input form—plain value, ref, or getter—without forcing callers to adapt their data. ## Core Features & Use Cases - Flexible Input Typing: Uses MaybeRef and MaybeRefOrGetter type utilities so composable parameters accept plain values, refs, computed refs, or getter functions. - Reactivity Normalization: Applies toValue() and toRef() inside watchers and reactive effects to keep behavior predictable regardless of input form. - Typing Policy Guidance: Provides clear rules for choosing MaybeRefOrGetter for read-only inputs versus MaybeRef for writable two-way inputs, and warns against using getter types for callback parameters. - Use Case: When building a shared useDocumentTitle or useCounter composable for a Vue 3 or Nuxt 3 design system, generate it so every consumer can pass a string, a ref, or a computed getter interchangeably. ## Quick Start Ask the AI to create an adaptable Vue composable that accepts maybe-reactive inputs using MaybeRefOrGetter and normalizes them with toValue or toRef.

Frequently Asked Questions about create-adaptable-composable

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I create a Vue composable that accepts both refs and plain values?▼

Type the parameter as MaybeRef or MaybeRefOrGetter, then normalize it inside the composable using toValue() for reads or toRef() for watcher sources. This lets callers pass a plain value, ref, or getter without changing composable behavior.

What is the difference between MaybeRef and MaybeRefOrGetter in Vue?▼

MaybeRef covers a plain value or writable ref, while MaybeRefOrGetter additionally accepts computed refs and getter functions. Use MaybeRefOrGetter for read-only inputs and MaybeRef when the composable must write back to the input.

When should I use toValue versus toRef in a Vue composable?▼

Use toRef() when you need a reactive source, such as a watch target, and toValue() when you only need the resolved non-reactive value. Both unwrap refs and getters uniformly.

Does this composable pattern work with Nuxt 3?▼

Yes, the MaybeRef and MaybeRefOrGetter pattern works in any Vue 3 or Nuxt 3 project since both share the same reactivity APIs including toValue, toRef, watch, and watchEffect.

Why should callback parameters not use MaybeRefOrGetter?▼

MaybeRefOrGetter treats functions as getters and invokes them, so a callback, predicate, or comparator parameter would be accidentally executed. Type function-valued parameters as plain function types instead.