# Create Adaptable Vue Composables

Vue composables often need to accept plain values, refs, computed values, or getters. This skill guides Claude, Codex, and Claude Code to design reusable composables with predictable reactivity.

## Install

```bash
npx skillstore add vuejs-ai/create-adaptable-composable
```

## Metadata

- Status: approved
- Slug: vuejs-ai-create-adaptable-composable
- Version: 17.0.0
- Author version: 17.0.0
- Skillstore revision: r1
- Version status: valid
- Tree hash: 2bd32c99a636d2b8344c521e0d8897ad6726dfec4363ec9c9bbffd22c9afb3e3
- Author: vuejs-ai
- GitHub username: vuejs-ai
- License: MIT
- Repository: https://github.com/vuejs-ai/skills/tree/main/skills/create-adaptable-composable/
- Ref: 36e07d5e13068e5be64447e8f20b427cf2cbd21a
- Supported tools: Claude, Codex, Claude Code
- Audit status: complete
- Agent install advisory: allowed
- Manual install advisory: allowed
- Artifact signature: available
- Audit attestation: unavailable
- Human verification: not\_verified
- Risk factors: external\_commands
- Quality score: 81
- Quality tier: silver
- Public page: https://skillstore.pages.dev/skills/vuejs-ai-create-adaptable-composable
- Manifest: https://skillstore.pages.dev/api/skills/vuejs-ai-create-adaptable-composable/manifest

## Capabilities

- Designs Vue composable APIs that accept plain values, refs, and getters.
- Explains when to use MaybeRef versus MaybeRefOrGetter.
- Uses toValue and toRef inside watch or watchEffect flows.
- Provides TypeScript examples for read-only and writable inputs.
- Warns about callback parameters that could be mistaken for getters.

## Use Cases

- Build Library Composables: Create composables that support both static configuration and reactive callers.
- Refactor App Utilities: Update app utilities so components can pass refs, computed values, or literals.
- Standardize Nuxt Patterns: Align composable input handling across SSR-aware Nuxt features.

## Prompt Templates

### Create a Basic Composable

```
Use the create-adaptable-composable skill. Design a Vue composable named useDocumentTitle that accepts a literal, ref, computed value, or getter.
```

### Choose Input Types

```
Use this skill to decide whether my composable should accept MaybeRef or MaybeRefOrGetter. Explain the tradeoffs for these inputs: [describe inputs].
```

### Refactor Existing Utility

```
Apply this skill to refactor my current Vue composable so it accepts maybe-reactive inputs. Preserve the public behavior and explain any API changes.
```

### Design Library API

```
Use this skill to design a library-grade composable API for [feature]. Include writable inputs, read-only inputs, callback parameters, and watcher strategy.
```

## Limitations

- Requires a Vue 3 or Nuxt 3 project context.
- Does not install packages, run tests, or modify files by itself.
- Does not cover every VueUse pattern or advanced lifecycle concern.
- Requires developer review for final API naming and behavior.

## Best Practices

- Confirm whether each input is read-only, writable, or a callback before choosing its type.
- Normalize maybe-reactive values inside reactive effects so getters stay tracked.
- Keep examples small, typed, and aligned with Vue 3 APIs.

## Anti Patterns

- Using MaybeRefOrGetter for callback parameters that should not be invoked automatically.
- Resolving getters outside watch or watchEffect and losing reactive tracking.
- Designing composables that only accept refs when literals would also be valid.

## Security Audit

- Audited at: 2026-07-07T08:30:28.537\+00:00
- Summary: All 15 static findings are false positives caused by Markdown inline code and fenced TypeScript examples. The skill contains documentation for Vue 3 composable design and no evidence of command execution, prompt injection, network access, or data exfiltration.

## Stats

- Views: 148
- Downloads: 17
- Favorites: 0
- Popularity score: 0