create-adaptable-composable

vuejs-ai/skills · Agent Skill

Creare composizioni di libreria Vue che supportano valori semplici, riferimenti e ricevitori con reattività prevedibile.

Vai all'installazione ↓

Panoramica

Autorevuejs-aiOrganizzazione
Repositoryvuejs-ai/skills ↗
Cartella dello skillcreate-adaptable-composable
Stelle3151
Fork184
File inclusi1
LicenzaMIT
Aggiornato23 ottobre 2026
LinkSorgente dello skill ↗ · Repository ↗

Verifica Mozgi

Cosa abbiamo trovato nei file dello skill. I dettagli con l’abbonamento.

Sicurezza
rischio basso · nessun rischio evidente — il report completo mostra i dettagli
Compatibilità
solo istruzioni — funziona con la maggior parte degli agenti
Skill simili
62 skill simili trovati
Inoltre con l’abbonamento

Installazione

Uno skill è una cartella con un file SKILL.md. Scegli il tuo agente ed esegui i comandi in un terminale (macOS, Linux o Git Bash su Windows) dalla radice del progetto.

Incolla il prompt in Claude, Codex o un altro assistente: controllerà lo skill e lo installerà.

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.

File dello skill

1 file Scarica ZIP

Leggi SKILL.md e i file correlati prima di installare. Clicca un file per l'anteprima.

Contenuto di SKILL.md

Testo originale dell'autore · sola lettura

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

Domande frequenti

Che cosa fa lo skill create-adaptable-composable?

Creare composizioni di libreria Vue che supportano valori semplici, riferimenti e ricevitori con reattività prevedibile.

Come si installa create-adaptable-composable?

Apri il blocco “Installazione” in questa pagina e scegli il tuo agente — Claude Code, Codex, Cursor o Gemini CLI — per i comandi pronti che copiano la cartella dello skill nel posto giusto. Oppure copia il prompt dalla scheda “Con l'assistente” e lascia che sia l'assistente a controllare e installare lo skill.

Con quali modelli AI funziona create-adaptable-composable?

Gli skill sono semplici istruzioni in Markdown (formato Agent Skills), quindi create-adaptable-composable funziona con qualsiasi agente che legge SKILL.md: Claude Code, Codex, Cursor, Gemini CLI, GitHub Copilot, OpenCode e altri. Il modello carica le istruzioni solo quando il compito corrisponde alla descrizione dello skill.

create-adaptable-composable è gratuito?

Lo skill è pubblicato apertamente da vuejs-ai con licenza MIT. Lo skill in sé non costa nulla: paghi solo il tuo fornitore AI per i token usati.

È sicuro installare gli skill?

Uno skill è un insieme di istruzioni che il tuo agente seguirà: leggi SKILL.md e i file correlati prima di installarlo. Gli script nella cartella dello skill vengono eseguiti solo se li esegue l'agente: controlla cosa fa e non concedere permessi superflui.

In cosa differisce uno skill da un server MCP o da un plugin?

Un server MCP o un plugin danno al modello nuovi strumenti: codice che viene eseguito e restituisce un risultato. Uno skill fornisce conoscenza e metodo: come affrontare il compito, quali passi seguire e com'è un buon risultato. Non servono server né chiavi API.

Skill correlati

Tutti gli skill →
vue-best-practices Linee guida principali per lo sviluppo su Vue per l'architettura dei componenti, la reattività e il codice manutenibile per Vue vuejs-ai3.2k vue-jsx-best-practices Guida per scrivere componenti Vue robusti, tipicamente sicuri e leggibili utilizzando JSX vuejs-ai3.2k vue-options-api-best-practices Le migliori pratiche per la strutturazione e la scalabilità delle applicazioni Vue costruite con Options API vuejs-ai3.2k vue-pinia-best-practices Modelli per una gestione dello stato pulita e scalabile nelle applicazioni Vue utilizzando i negozi Pinia. vuejs-ai3.2k vue-testing-best-practices Strategie di testing per le applicazioni Vue, inclusi test dei componenti, test di integrazione e modelli di affidabilità. vuejs-ai3.2k to-prd Converte la conversazione in un ticket tecnico e lo pubblica nel sistema di tracciamento degli errori. mattpocock304k