Create Adaptable Composable Skill (vuejs-ai) for Claude

Makes Claude write reusable Vue 3 composables whose inputs can be a plain value, a ref or a getter, for Vue and Nuxt developers.

Installs: 14.3K; on skills.sh
Stars: 3.2K; on GitHub
Updated: Oct 2026; last repo commit

create-adaptable-composable makes Claude design a Vue composable that accepts maybe-reactive inputs. A caller can pass a plain value, a ref or a getter, and the composable stays reactive either way. The skill sets rules for choosing MaybeRef or MaybeRefOrGetter and for resolving values with toRef() or toValue().

It triggers when you ask for an adaptable or reusable composable. It bundles one file and no scripts, and the file says it needs a Vue 3 or Nuxt 3 project. The README warns that the repo is an early experiment whose skills may be incomplete.

Good for

Vue 3 developers writing shared composables
Library authors who want inputs callers can pass in any form
Nuxt 3 teams reviewing how a composable handles reactive inputs

Install create-adaptable-composable

Claude Code

Copy this prompt.

Install the create-adaptable-composable skill in Claude Code. Run this command:

/plugin marketplace add vuejs-ai/skills
/plugin install create-adaptable-composable@vue-skills

Then check that it loaded and tell me how to use it.

2
Paste it into Claude Code. It shows the change and asks before running it.

The README shows /plugin install <skill>@vue-skills for individual skills, so this command is that pattern with this skill's name. The README also offers /plugin install vue-skills-bundle@vue-skills for all Vue skills at once. Pick one route, not both. The README suggests starting prompts with "use vue skill" for more reliable triggering.

Built from the package data we hold. Not yet tested by us. Source.

What's in the skill

When it loads

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.

Sections in SKILL.md

Core Type Concepts
Type Utilities
Policy and Rules
Examples

Key facts

Author: vuejs-ai (github.com/vuejs-ai)
Repository: vuejs-ai/skills
Installs on skills.sh: 14,330 as of 2026-11-02
GitHub stars: 3,229 for the whole vuejs-ai/skills repo
License: MIT (SKILL.md frontmatter)
Last repo commit: 2026-10-23
What is inside: 1 file: SKILL.md. It has no scripts.
Needs: A Vue 3 (or above) or Nuxt 3 (or above) project
Part of: vuejs-ai/skills, a repo of 8 Vue skills the README calls an early experiment

What it includes

Confirm the API, pick reactive inputs, normalize, implement
Four steps: confirm the purpose and inputs and outputs, identify which params should be reactive, normalize them with toValue() or toRef() inside reactive effects, then implement the logic with Vue reactivity APIs.
Try: “Create an adaptable useDebouncedValue composable where the delay can be a ref or a getter.”
Design steps
MaybeRef and MaybeRefOrGetter definitions
MaybeRef is a value or a writable ref. MaybeRefOrGetter adds computed refs and getter functions.
Type utilities
Use MaybeRefOrGetter for read-only, computed-friendly inputs
Also use it for DOM or element targets that may be derived.
Policy: read-only input
Use MaybeRef for two-way inputs
Pick MaybeRef when the composable needs to write back to the input.
Policy: writable input
Do not use MaybeRefOrGetter for callbacks
A callback, predicate or comparator typed that way could be called by accident as a getter.
Policy: function values
toRef() for watcher sources, toValue() for plain reads
The skill says to resolve reactive values with toRef() and non-reactive ones with toValue().
toRef() and toValue()
useDocumentTitle (read-only) and useCounter (two-way)
useDocumentTitle watches toRef(title) and sets document.title. useCounter takes a MaybeRef count and increments it.
Two examples

From the official docs

Questions

What does create-adaptable-composable do?

It tells Claude how to write a Vue composable so callers can pass a plain value, a ref or a getter. Claude types inputs with MaybeRef or MaybeRefOrGetter and resolves them with toRef() or toValue().

How do I install it?

Use the install box at the top of this page. The Claude Code plugin route installs just this skill. The skills CLI also works. The skill needs a Vue 3 or Nuxt 3 project.

Does it need Vue 3?

Yes. The file says it requires Vue 3 (or above) or Nuxt 3 (or above).

When should I use MaybeRef instead of MaybeRefOrGetter?

Use MaybeRef when the composable must write to the input. Use MaybeRefOrGetter for read-only inputs that can also be computed or a getter. Do not use it for parameters that are themselves functions, because Vue would call them as getters.

How is it different from vue-best-practices?

vue-best-practices is a general guide to Vue 3 with the Composition API. This skill covers one task: composables with flexible reactive inputs. Both sit in the same repo, and the README lists them side by side.

Is it safe?

It bundles one Markdown file and no scripts. The README calls the repo an early experiment and says skills may be incomplete, so review generated composables like any other code.

Information

updated Nov 2, 2026

Repository: vuejs-ai/skills
Folder: skills/create-adaptable-composable

vuejs-ai/skills skills.sh

Sources

Docs, issue trackers and discussions this page is built from.

Show all 5

Using skills in Claude · support.claude.com
vuejs-ai/skills README · github.com
vuejs-ai/skills marketplace.json · github.com
skills CLI commands · github.com
create-adaptable-composable SKILL.md · github.com