Vueuse skill

O que ela faz

Orienta o agente a olhar o VueUse antes de escrever um composable próprio num projeto Vue 3 ou Nuxt, porque a maioria dos padrões já existe lá. Mostra a instalação do @vueuse/core e, no Nuxt, do módulo @vueuse/nuxt, que importa as funções sozinho.

Traz o mapa por categoria: estado (useLocalStorage), elementos (useElementSize), navegador (useClipboard, useMediaQuery), sensores (useMouse), rede (useFetch, useWebSocket), tempo (useTimeAgo, useDateFormat), utilidades (useDebounce) e outras. Pro detalhe de uma função, abre só o arquivo dela, nunca tudo de uma vez.

Cobre as armadilhas da renderização no servidor (SSR): checar isClient, rodar dentro do onMounted ou usar as funções que já se protegem. E mostra como medir o tamanho de um componente pela ref dele, com unrefElement, já que passar a ref direto não funciona.

Nas palavras de quem fez

Quando usar

• Guardar uma preferência do visitante, como o tema escuro, no navegador
• Esperar a pessoa parar de digitar antes de rodar a busca
• Saber se o visitante ficou sem internet e avisar na tela
• Copiar um texto pra área de transferência com um clique
• Mostrar há quanto tempo algo foi postado, como "há 5 minutos"

Depois de instalar, é só pedir assim

• Faz o tema escuro do meu site em Nuxt ficar salvo quando a pessoa volta, usando o VueUse
• A busca da loja dispara a cada letra; usa o VueUse pra esperar a pessoa parar de digitar
• Mostra um aviso quando o visitante ficar sem internet, com o VueUse

Segurança

Gen Agent Trust Hub, Socket e Snyk leem o código da skill atrás de comando perigoso, dado vazando e instrução escondida. Alerta não é reprovação: quer dizer que vale ler o que a skill faz antes de instalar.

• Gen Agent Trust HubPassou
• SocketPassou
• SnykPassou

Perguntas