create-adaptable-composable

vuejs-ai/skills · Agent Skill

建立支援簡單值、參考和收集器的Vue庫組合，並具有可預測的反應性。

總覽

發布者	vuejs-ai組織
儲存庫	vuejs-ai/skills ↗
技能資料夾	`create-adaptable-composable`
星	3,151
分支	184
附帶檔案	1
授權	MIT
最近更新	2026年10月23日
連結	技能原始碼 ↗ · 儲存庫 ↗

Mozgi 檢查

我們在技能檔案中發現的內容。詳細資訊需訂閱。

安全性

低風險 · 未發現明顯風險 — 完整報告會顯示細節

相容性

僅含說明 — 適用於多數代理

相似技能

找到 62 個相似技能

訂閱另含

安裝

技能就是一個含 SKILL.md 的資料夾。選擇你的代理，在專案根目錄的終端機（macOS、Linux 或 Windows 的 Git Bash）執行指令。

把提示貼到 Claude、Codex 或其他助理：它會自行檢查並安裝技能。

Install the “create-adaptable-composable” skill from mozgi.io (https://mozgi.io/skills/vuejs-ai-create-adaptable-composable/) for me.

1. Download the archive: https://mozgi.io/skills/vuejs-ai-create-adaptable-composable/download
   If it fails, take the skill folder from the source: https://github.com/vuejs-ai/skills/tree/main/skills/create-adaptable-composable
2. Read SKILL.md and the other files. Check the skill is safe: no hidden commands, no sending data elsewhere, no scripts doing something other than described. If anything looks suspicious, stop and tell me.
3. Put the “create-adaptable-composable” folder into your agent's skills folder: .claude/skills/ for Claude Code, .agents/skills/ for Codex, .cursor/skills/ for Cursor, .gemini/skills/ for Gemini CLI. Inside the project if we are in one, otherwise in the home folder (~/.claude/skills/ etc.).
4. Make sure <skills folder>/create-adaptable-composable/SKILL.md exists.
5. Briefly tell me what this skill does and offer to try it on my task.

If you cannot do a step yourself, tell me what to click or type.

git clone --depth 1 --branch main https://github.com/vuejs-ai/skills.git /tmp/skills
mkdir -p .claude/skills
cp -r /tmp/skills/skills/create-adaptable-composable .claude/skills/create-adaptable-composable

重新啟動 Claude Code — 技能就會出現在清單中，手動呼叫：/create-adaptable-composable。要套用到所有專案，請放在 ~/.claude/skills。

git clone --depth 1 --branch main https://github.com/vuejs-ai/skills.git /tmp/skills
mkdir -p .agents/skills
cp -r /tmp/skills/skills/create-adaptable-composable .agents/skills/create-adaptable-composable

Codex 會從目前資料夾往上到儲存庫根目錄，在 .agents/skills 中尋找技能；用 /skills 或 $create-adaptable-composable 呼叫。所有專案：~/.agents/skills。

git clone --depth 1 --branch main https://github.com/vuejs-ai/skills.git /tmp/skills
mkdir -p .cursor/skills
cp -r /tmp/skills/skills/create-adaptable-composable .cursor/skills/create-adaptable-composable

Cursor 啟動時會載入技能；在 Agent 聊天輸入「/」呼叫。Cursor 也會讀取 .claude/skills 與 .agents/skills。所有專案：~/.cursor/skills。

git clone --depth 1 --branch main https://github.com/vuejs-ai/skills.git /tmp/skills
mkdir -p .gemini/skills
cp -r /tmp/skills/skills/create-adaptable-composable .gemini/skills/create-adaptable-composable

任務符合時，Gemini CLI 會提議啟用技能，由你確認。所有專案：~/.gemini/skills。

技能檔案

1 個檔案下載 ZIP

安裝前請先檢視 SKILL.md 與相關檔案。點擊檔案即可預覽。

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

/**
 * 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

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

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 }
}

常見問題

create-adaptable-composable 技能有什麼用途？

建立支援簡單值、參考和收集器的Vue庫組合，並具有可預測的反應性。

如何安裝 create-adaptable-composable？

打開本頁的「安裝」區塊並選擇你的代理 — Claude Code、Codex、Cursor 或 Gemini CLI：那裡有把技能資料夾複製到正確位置的現成指令。也可以複製「透過助理」分頁中的提示，讓助理自行檢查並安裝技能。

create-adaptable-composable 適用哪些 AI 模型？

技能是純 Markdown 指示（Agent Skills 格式），因此 create-adaptable-composable 適用任何讀取 SKILL.md 的代理：Claude Code、Codex、Cursor、Gemini CLI、GitHub Copilot、OpenCode 等。只有在任務符合技能描述時，模型才會載入指示。

create-adaptable-composable 是免費的嗎？

此技能由 vuejs-ai 公開發布，採用 MIT 授權。技能本身免費 — 你只需向 AI 供應商支付實際使用的 token 費用。

安裝技能安全嗎？

技能是代理會遵循的指示，安裝前請閱讀 SKILL.md 及相關檔案。技能資料夾中的腳本只有在代理執行時才會運行 — 留意它的動作，不要授予多餘權限。

技能和 MCP 伺服器或外掛有何不同？

MCP 伺服器或外掛為模型提供新工具 — 會執行並回傳結果的程式碼。技能提供的是知識與流程：如何處理任務、要遵循哪些步驟、好的成果長什麼樣子。它不需要伺服器或 API 金鑰。

總覽