技能库智客分类：Agent 工作流 create-adaptable-composable

Create Adaptable Composable

创建库级 Vue 可容性可接受可能反应的输入(Maybe Ref / Maybe RefOrGetter),所以呼叫者可以传递一个纯值, ref, 或 getter. 在反应效果(Watch/watcheffect)中将输入与Value()/Ref()规范化,以保持行为的可预见性和反应性. 当用户要求创建可适应或可再使用的可堆放时使用此技能.

12427 安装量

官方网址：skills.sh

技能介绍

先看中文介绍；官方 description 原文单独保留，不改写 SKILL.md。

做什么

何时用

官方 description 未单独写出 Use when。按规范，代理会在用户任务与这段 description 的关键词匹配时激活本技能。

代理如何加载

按 Agent Skills 渐进披露：启动时只加载 name 与 description（约 100 token）；任务匹配后才读入整份 SKILL.md 正文；scripts/、references/、assets/ 仅在需要时再读。本文件正文结构：Create Adaptable Composable、Core Type Concepts、Type Utilities、Policy and Rules、Examples。其中含规范建议的小节：输入输出示例。

文件分析

文件分析：这是一份仅含 SKILL.md 的指令型技能，代理激活后整份正文进入上下文。

官方 description（原文）

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.

Create Adaptable ComposableCore Type ConceptsType UtilitiesPolicy and RulesExamples

兼容：Requires Vue 3 (or above) or Nuxt 3 (or above) project · 许可：MIT

来源分类：skills.sh agent-skill

来源与网址

市场来源：skills.sh

GitHub 完整包

开源榜 Skill 分类

SKILL.md 与 Agent 调用

官方规范 ↗

name: create-adaptable-composable
description: 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.
compatibility: Requires Vue 3 (or above) or Nuxt 3 (or above) project
许可: MIT

发现技能客户端向 Agent 提供名称与描述目录。
匹配与调用用户指定或任务匹配后，载入 SKILL.md 指令。
按需加载按步骤读取参考文档、使用脚本与素材。

具体调用语法与可用工具以目标 Agent 客户端为准。查看调用机制说明 ↗

安装这个技能

Skills CLI ↗

先选择目标 Agent 和安装范围，保留技能包的附属文件，安装后检查客户端能否发现该技能。

交给 Agent 安装

复制安装指令给支持 Agent Skills 的代理，确认其中的目标目录与客户端匹配。

把 Agent Skill「create-adaptable-composable」安装到我的项目：SKILL.md 原文与官方 description 见 https://zicq.com/zh/skills/skl-414652220a878c72-Create-Adaptable-Composable.html
请存为 .cursor/skills/create-adaptable-composable/SKILL.md 或 .claude/skills/create-adaptable-composable/SKILL.md，frontmatter 的 name 与 description 保持原样，不要改写。

GitHub 完整包 ↗

终端安装 · Skills CLI

需要 Node.js 与 npx。先查看仓库技能列表，确认实际名称。

npx skills add 'https://github.com/vuejs-ai/skills' --list

目标客户端安装范围

npx skills add 'https://github.com/vuejs-ai/skills' --skill 'create-adaptable-composable'

CLI 会交互选择目标 Agent，默认安装到项目；用户级安装使用 -g。先通过查看命令核对仓库内容，再用 npx skills list 检查已安装技能。

SKILL.md 原文可复制，不会改动源文件

# 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:
1. Confirm the composable's purpose and API design and expected inputs/outputs.
2. Identify inputs params that should be reactive (MaybeRef / MaybeRefOrGetter).
3. Use `toValue()` or `toRef()` to normalize inputs inside reactive effects.
4. Implement the core logic of the composable using Vue's reactivity APIs.

## Core Type Concepts

### Type Utilities

```ts
/**
 * 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);
```

### Policy and Rules

- Read-only, computed-friendly input: use `MaybeRefOrGetter`
- Needs to be writable / two-way input: use `MaybeRef`
- Parameter might be a function value (callback/predicate/comparator): do not use `MaybeRefOrGetter`, or you may accidentally invoke it as a getter.
- DOM/Element targets: if you want computed/derived targets, use `MaybeRefOrGetter`.

When `MaybeRefOrGetter` or `MaybeRef` is used: 
- resolve reactive value using `toRef()` (e.g. watcher source)
- resolve non-reactive value using `toValue()`

### Examples

Adaptable `useDocumentTitle` Composable: read-only title parameter

```ts
import { watch, toRef } from 'vue'
import type { MaybeRefOrGetter } from 'vue'

export function useDocumentTitle(title: MaybeRefOrGetter<string>) {
  watch(toRef(title), (t) => {
    document.title = t
  }, { immediate: true })
}
```

Adaptable `useCounter` Composable: two-way writable count parameter

```ts
import { watch, toRef } from 'vue'
import type { MaybeRef } from 'vue'

function useCounter(count: MaybeRef<number>) {
  const countRef = toRef(count)
  function add() {
    countRef.value++
  }
  return { add }
}
```

阅读排版

--- name: create-adaptable-composable description: 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. license: MIT metadata: author: github.com/vuejs-ai version: "17.0.0" compatibility: Requires Vue 3 (or above) or Nuxt 3 (or above) project --- # 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: 1. Confirm the composable's purpose and API design and expected inputs/outputs. 2. Identify inputs params that should be reactive (MaybeRef / MaybeRefOrGetter). 3. Use `toValue()` or `toRef()` to normalize inputs inside reactive effects. 4. Implement the core logic of the composable using Vue's reactivity APIs. ## Core Type Concepts ### Type Utilities ```ts /** * value or writable ref (value/ref/shallowRef/writable computed) */ export type MaybeRef = T | Ref | ShallowRef | WritableComputedRef; /** * MaybeRef + ComputedRef + () => T */ export type MaybeRefOrGetter = MaybeRef | ComputedRef | (() => T); ``` ### Policy and Rules - Read-only, computed-friendly input: use `MaybeRefOrGetter` - Needs to be writable / two-way input: use `MaybeRef` - Parameter might be a function value (callback/predicate/comparator): do not use `MaybeRefOrGetter`, or you may accidentally invoke it as a getter. - DOM/Element targets: if you want computed/derived targets, use `MaybeRefOrGetter`. When `MaybeRefOrGetter` or `MaybeRef` is used: - resolve reactive value using `toRef()` (e.g. watcher source) - resolve non-reactive value using `toValue()` ### Examples Adaptable `useDocumentTitle` Composable: read-only title parameter ```ts import { watch, toRef } from 'vue' import type { MaybeRefOrGetter } from 'vue' export function useDocumentTitle(title: MaybeRefOrGetter) { watch(toRef(title), (t) => { document.title = t }, { immediate: true }) } ``` Adaptable `useCounter` Composable: two-way writable count parameter ```ts import { watch, toRef } from 'vue' import type { MaybeRef } from 'vue' function useCounter(count: MaybeRef) { const countRef = toRef(count) function add() { countRef.value++ } return { add } } ```

Create Adaptable Composable

技能介绍

做什么

何时用

代理如何加载

文件分析

SKILL.md 与 Agent 调用

安装这个技能

相关技能

Skill Creator

Clawdhub

Agent Team Orchestration

Superpowers