Helps developers implement maintainable and performant features using VueUse composables.
Install
mkdir -p .claude/skills/vueuse-functions && curl -L -o skill.zip "https://agentskills.codes/api/skills/download/5900" && unzip -o skill.zip -d .claude/skills/vueuse-functions && rm skill.zipInstalls to .claude/skills/vueuse-functions
Activation
This is the description your AI agent reads to decide when to run this skill — the better it matches your request, the more reliably it fires.
Apply VueUse composables where appropriate to build concise, maintainable Vue.js / Nuxt features.Key capabilities
- →Matches development requirements to VueUse composables
- →Enforces usage patterns for concise code
- →Maps complex state management to composables
- →Identifies candidate areas for refactoring
How it works
Analyzes project requirements against a lookup table of VueUse functions and applies specific invocation rules.
Inputs & outputs
When to use vueuse-functions
- →Find appropriate VueUse composable
- →Refactor code to use VueUse
- →Improve feature maintainability
- →Apply VueUse best practices
About this skill
VueUse Functions
This skill is a decision-and-implementation guide for VueUse composables in Vue.js / Nuxt projects. It maps requirements to the most suitable VueUse function, applies the correct usage pattern, and prefers composable-based solutions over bespoke code to keep implementations concise, maintainable, and performant.
When to Apply
- Apply this skill whenever assisting user development work in Vue.js / Nuxt.
- Always check first whether a VueUse function can implement the requirement.
- Prefer VueUse composables over custom code to improve readability, maintainability, and performance.
- Map requirements to the most appropriate VueUse function and follow the function’s invocation rule.
- Please refer to the
Invocationfield in the below functions table. For example:AUTO: Use automatically when applicable.EXTERNAL: Use only if the user already installed the required external dependency; otherwise reconsider, and ask to install only if truly needed.EXPLICIT_ONLY: Use only when explicitly requested by the user.
NOTE User instructions in the prompt or
AGENTS.mdmay override a function’s defaultInvocationrule.
Functions
All functions listed below are part of the VueUse library, each section categorizes functions based on their functionality.
IMPORTANT: Each function entry includes a short Description and a detailed Reference. When using any function, always consult the corresponding document in ./references for Usage details and Type Declarations.
State
| Function | Description | Invocation |
|---|---|---|
createGlobalState | Keep states in the global scope to be reusable across Vue instances | AUTO |
createInjectionState | Create global state that can be injected into components | AUTO |
createSharedComposable | Make a composable function usable with multiple Vue instances | AUTO |
injectLocal | Extended inject with ability to call provideLocal to provide the value in the same component | AUTO |
provideLocal | Extended provide with ability to call injectLocal to obtain the value in the same component | AUTO |
useAsyncState | Reactive async state | AUTO |
useDebouncedRefHistory | Shorthand for useRefHistory with debounced filter | AUTO |
useLastChanged | Records the timestamp of the last change | AUTO |
useLocalStorage | Reactive LocalStorage | AUTO |
useManualRefHistory | Manually track the change history of a ref when the user calls commit() | AUTO |
useRefHistory | Track the change history of a ref | AUTO |
useSessionStorage | Reactive SessionStorage | AUTO |
useStorage | Create a reactive ref that can be used to access & modify LocalStorage or SessionStorage | AUTO |
useStorageAsync | Reactive Storage with async support | AUTO |
useThrottledRefHistory | Shorthand for useRefHistory with throttled filter | AUTO |
Elements
| Function | Description | Invocation |
|---|---|---|
useActiveElement | Reactive document.activeElement | AUTO |
useDocumentVisibility | Reactively track document.visibilityState | AUTO |
useDraggable | Make elements draggable | AUTO |
useDropZone | Create a zone where files can be dropped | AUTO |
useElementBounding | Reactive bounding box of an HTML element | AUTO |
useElementSize | Reactive size of an HTML element | AUTO |
useElementVisibility | Tracks the visibility of an element within the viewport | AUTO |
useIntersectionObserver | Detects changes to a target element's visibility | AUTO |
useMouseInElement | Reactive mouse position related to an element | AUTO |
useMutationObserver | Watch for changes being made to the DOM tree | AUTO |
useParentElement | Get parent element of the given element | AUTO |
useResizeObserver | Reports changes to the dimensions of an Element's content or the border-box | AUTO |
useWindowFocus | Reactively track window focus with window.onfocus and window.onblur events | AUTO |
useWindowScroll | Reactive window scroll | AUTO |
useWindowSize | Reactive window size | AUTO |
Browser
| Function | Description | Invocation |
|---|---|---|
useBluetooth | Reactive Web Bluetooth API | AUTO |
useBreakpoints | Reactive viewport breakpoints | AUTO |
useBroadcastChannel | Reactive BroadcastChannel API | AUTO |
useBrowserLocation | Reactive browser location | AUTO |
useClipboard | Reactive Clipboard API | AUTO |
useClipboardItems | Reactive Clipboard API | AUTO |
useColorMode | Reactive color mode (dark / light / customs) with auto data persistence | AUTO |
useCssSupports | SSR compatible and reactive CSS.supports | AUTO |
useCssVar | Manipulate CSS variables | AUTO |
useDark | Reactive dark mode with auto data persistence | AUTO |
useEventListener | Use EventListener with ease | AUTO |
useEyeDropper | Reactive EyeDropper API | AUTO |
useFavicon | Reactive favicon | AUTO |
useFileDialog | Open file dialog with ease | AUTO |
useFileSystemAccess | Create and read and write local files with FileSystemAccessAPI | AUTO |
useFullscreen | Reactive Fullscreen API | AUTO |
useGamepad | Provides reactive bindings for the Gamepad API | AUTO |
useImage | Reactive load an image in the browser | AUTO |
useMediaControls | Reactive media controls for both audio and video elements | AUTO |
useMediaQuery | Reactive Media Query | AUTO |
useMemory | Reactive Memory Info | AUTO |
useObjectUrl | Reactive URL representing an object | AUTO |
usePerformanceObserver | Observe performance metrics | AUTO |
usePermission | Reactive Permissions API | AUTO |
usePreferredColorScheme | Reactive prefers-color-scheme media query | AUTO |
usePreferredContrast | Reactive prefers-contrast media query | AUTO |
usePreferredDark | Reactive dark theme preference | AUTO |
usePreferredLanguages | Reactive Navigator Languages | AUTO |
usePreferredReducedMotion | Reactive prefers-reduced-motion media query | AUTO |
usePreferredReducedTransparency | Reactive prefers-reduced-transparency media query | AUTO |
useScreenOrientation | Reactive [Screen Orientation |
Content truncated.
When not to use it
- →Non-Vue/Nuxt projects
- →When bespoke implementation is required for performance
Prerequisites
Limitations
- →Does not account for custom build tool constraints
- →Requires knowledge of Vue 3 patterns
How it compares
Prioritizes library-provided composables over generic custom logic to ensure standard, maintainable code.
Compared to similar skills
vueuse-functions side by side with the closest alternatives in the catalog.
| Skill | Installs | Updated | Safety | Difficulty |
|---|---|---|---|---|
| vueuse-functions (this skill) | 1 | 5mo | Review | Beginner |
| vitepress | 5 | 6mo | No flags | Beginner |
| create-adaptable-composable | 1 | 6mo | No flags | Advanced |
| ai-model-web | 1 | 2mo | Review | Intermediate |
Try saying
Example prompts that trigger this skill in your AI assistant.
More by antfu
View all by antfu →You might also like
vitepress
antfu
VitePress static site generator powered by Vite and Vue. Use when building documentation sites, configuring themes, or writing Markdown with Vue components.
create-adaptable-composable
vuejs-ai
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.
ai-model-web
TencentCloudBase
Use this skill when developing browser/Web applications (React/Vue/Angular, static websites, SPAs) that need AI capabilities. Features text generation (generateText) and streaming (streamText) via @cloudbase/js-sdk. Built-in models include Hunyuan (hunyuan-2.0-instruct-20251111 recommended) and DeepSeek (deepseek-v3.2 recommended). NOT for Node.js backend (use ai-model-nodejs), WeChat Mini Program (use ai-model-wechat), or image generation (Node SDK only).
moai-domain-frontend
modu-ai
Frontend development specialist covering React 19, Next.js 16, Vue 3.5, and modern UI/UX patterns with component architecture. Use when building web UIs, implementing components, optimizing frontend performance, or integrating state management.
perf-web-optimization
tech-leads-club
Optimize web performance: Core Web Vitals (LCP, CLS, INP), bundle size, images, caching. Use when site is slow, optimizing for Lighthouse scores, reducing bundle size, fixing layout shifts, or improving Time to Interactive. Triggers on: web performance, Core Web Vitals, LCP, CLS, INP, FID, bundle size, page speed, slow site.
rdc-setup
reactive
Install and set up @data-client/react or @data-client/vue in a project. Detects project type (NextJS, Expo, React Native, Vue, plain React) and protocol (REST, GraphQL, custom), then hands off to protocol-specific setup skills.