Does this follow VueUse standards?

Yes, the implementation patterns, normalization techniques, and type utilities generated by this skill align with the best practices established by the Vue community and the VueUse core team.

When should I use MaybeRef vs. MaybeRefOrGetter?

Use MaybeRef for two-way/writable data and MaybeRefOrGetter for read-only or computed-friendly inputs that don't need to be mutated by the composable.

What is a MaybeRefOrGetter input?

It is a type pattern that allows a function parameter to accept a plain value, a reactive Ref, or a getter function, providing maximum flexibility for the caller.

Does this skill work with Vue 2?

No, this skill is specifically designed for Vue 3 or Nuxt 3 projects as it relies on modern reactivity APIs like toValue() and toRef().

How does this help with code reusability?

It standardizes how inputs are handled, ensuring your composables work correctly regardless of whether the user passes reactive state or static values.

Vue Adaptable Composable Creator

Name: Vue Adaptable Composable Creator
Author: stevessr

bystevessr

0•

Herramientas para Desarrolladores

Generates library-grade Vue 3 composables that seamlessly handle reactive and non-reactive inputs using industry-standard patterns.

This skill empowers developers to build production-ready Vue.js composables that adhere to the best practices used in major ecosystems like VueUse. By implementing MaybeRef and MaybeRefOrGetter patterns, it ensures that your custom hooks are compatible with plain values, reactive refs, and getter functions. The skill focuses on predictable reactivity by automatically normalizing inputs using toValue() and toRef() within reactive effects, making it ideal for creating shared utility libraries or complex internal logic for Vue 3 and Nuxt 3 projects.

Características Principales

01Differentiates between read-only computed-friendly and two-way writable inputs

02Normalizes inputs using modern Vue 3.3+ toValue() and toRef() utilities

03Ensures predictable reactivity within watch and watchEffect blocks

04Generates clean, type-safe TypeScript code suitable for library development

05Implements MaybeRef and MaybeRefOrGetter type patterns for flexible APIs

060 GitHub stars

Casos de Uso

01Building shared utility libraries for large-scale Vue 3 or Nuxt 3 applications

02Developing state management patterns that must accept both static values and reactive state

03Creating reactive DOM interaction hooks that support dynamic targets

What are Skills?·How to Install

Install with 🐟 Skill.Fish

npx skillfish add stevessr/dotsfiles create-adaptable-composable

For use in Claude.ai and ChatGPT

Download Skill