create-adaptable-composable
Criar Vue Composable Adaptável
Criar Vue composables com tipos de entrada flexíveis é desafiador. Esta skill fornece um padrão para construir composables de nível de biblioteca que aceitam entradas reativas e não reativas usando tipos MaybeRef e MaybeRefOrGetter.
Baixar o ZIP da skill
Upload no Claude
Vá em Configurações → Capacidades → Skills → Upload skill
Ative e comece a usar
Testar
A utilizar "create-adaptable-composable". Criar um composable useDocumentTitle que aceita um MaybeRefOrGetter para o título
Resultado esperado:
- 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 })
- }
A utilizar "create-adaptable-composable". Build um composable useCounter com MaybeRef para contagem inicial
Resultado esperado:
- 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 }
- }
Auditoria de Segurança
SeguroStatic analyzer flagged TypeScript template literals as shell backticks and random text patterns as cryptographic algorithms. All findings are false positives. The skill contains only Vue.js documentation with TypeScript code examples for creating composables. No shell commands, cryptographic code, or security risks exist.
Problemas de Alto Risco (2)
Problemas de Risco Médio (1)
Pontuação de qualidade
O Que Você Pode Construir
Construindo um Gerenciador de Título Somente Leitura
Criar um composable que define o título do documento e aceita título como MaybeRefOrGetter, permitindo strings simples, refs ou funções getter.
Criando um Composable de Contador Gravável
Build a counter composable with MaybeRef input for the initial count, enabling two-way binding with reactive and non-reactive values.
Projetando um Manipulador de Entrada de Formulário Flexível
Projetar composables que aceitam elementos DOM ou destinos computed como MaybeRefOrGetter para manipulação de entrada flexível em vários contextos.
Tente Estes Prompts
Criar um composable adaptável chamado useUserPreferences que aceita um MaybeRefOrGetter para configuração de tema. O composable deve observar o valor e aplicar o tema ao corpo do documento.
Build um composable useLocalStorage que aceita um MaybeRef para o valor inicial e chave. O composable deve sincronizar o valor do ref com localStorage e retornar um ref gravável.
Criar um composable useDebouncedValue onde a entrada é MaybeRefOrGetter. Usar watch() com toRef() para fontes reativas e retornar um valor computed que atualiza com debounce.
Projetar um composable useFormValidator que aceita múltiplas entradas MaybeRef para valores de campos de formulário e um MaybeRefOrGetter para regras de validação. Normalizar todas as entradas e retornar estado de validação.
Melhores Práticas
- Usar MaybeRefOrGetter para entradas somente leitura, compatíveis com computed, para aceitar refs, getters ou valores simples
- Usar toRef() dentro de fontes watch/watchEffect para resolver adequadamente dependências reativas
- Usar toValue() para normalização de valores não reativos para extrair valores reais
- Evitar MaybeRefOrGetter para parâmetros de função que podem ser funções de callback para evitar invocação acidental
Evitar
- Não passar callbacks fornecidos pelo usuário diretamente para MaybeRefOrGetter sem guardas de tipo
- Não normalizar entradas fora de contextos reativos como watch ou watchEffect
- Não misturar toRef() e toValue() inconsistentemente dentro do mesmo composable
- Não assumir que todos os parâmetros devem ser MaybeRef - usar tipos simples quando reatividade não é necessária