playbooks

home / skills / oimiragieo / agent-studio / vueuse-library-rule

vueuse-library-rule skill

/.claude/skills/_archive/dead/vueuse-library-rule

This skill helps developers apply VueUse guidelines across code to boost reactivity and performance consistently.

npx playbooks add skill oimiragieo/agent-studio --skill vueuse-library-rule

Review the files below or copy the command above to add this skill to your agents.

Files (3)
SKILL.md
1.4 KB
---
name: vueuse-library-rule
description: Encourages leveraging VueUse functions throughout the project to enhance reactivity and performance.
version: 1.0.0
model: sonnet
invoked_by: both
user_invocable: true
tools: [Read, Write, Edit]
globs: src/**/*.*
best_practices:
  - Follow the guidelines consistently
  - Apply rules during code review
  - Use as reference when writing new code
error_handling: graceful
streaming: supported
---

# Vueuse Library Rule Skill

<identity>
You are a coding standards expert specializing in vueuse library rule.
You help developers write better code by applying established guidelines and best practices.
</identity>

<capabilities>
- Review code for guideline compliance
- Suggest improvements based on best practices
- Explain why certain patterns are preferred
- Help refactor code to meet standards
</capabilities>

<instructions>
When reviewing or writing code, apply these guidelines:

- Leverage VueUse functions where applicable to enhance reactivity and performance.
  </instructions>

<examples>
Example usage:
```
User: "Review this code for vueuse library rule compliance"
Agent: [Analyzes code against guidelines and provides specific feedback]
```
</examples>

## Memory Protocol (MANDATORY)

**Before starting:**

```bash
cat .claude/context/memory/learnings.md
```

**After completing:** Record any new patterns or exceptions discovered.

> ASSUME INTERRUPTION: Your context may reset. If it's not in memory, it didn't happen.

Overview

This skill helps teams adopt VueUse functions across Vue projects to improve reactivity, simplify logic, and boost performance. It identifies opportunities to replace custom reactive utilities with battle-tested VueUse composables and provides actionable refactors and rationale. The goal is consistent, maintainable usage of VueUse idioms across the codebase.

How this skill works

The skill reviews code to detect places where native Vue reactivity or ad-hoc helpers can be replaced by VueUse composables (e.g., useEventListener, useLocalStorage, useFetch, useVModel). It highlights performance and readability gains, suggests exact VueUse functions to use, and provides concrete code snippets or refactors. It also explains trade-offs and when a custom implementation remains preferable.

When to use it

  • During code reviews to enforce consistent reactivity patterns
  • When refactoring legacy or homegrown reactive utilities
  • While implementing new features that need common browser or state utilities
  • When optimizing performance-sensitive reactive logic
  • Onboarding engineers to standardized composable usage

Best practices

  • Prefer VueUse composables for common patterns (event listeners, storage, fetch, sensors) to reduce bugs and duplication
  • Use composables to encapsulate side effects and lifecycle ties rather than scattering watchers and manual cleanup
  • Keep custom composables only when behavior is unique or heavily domain-specific
  • Favor typed composables and proper return shapes to improve IDE hints and safety
  • Document refactor rationale and add tests to ensure behavior parity when replacing custom logic

Example use cases

  • Replace manual window resize listener and cleanup with useWindowSize or useEventListener for robust lifecycle handling
  • Swap localStorage get/set logic with useLocalStorage to keep reactive binding and serialization consistent
  • Migrate custom fetch wrappers to useFetch to get built-in caching, abort control, and reactive params
  • Adopt useVModel composable to simplify v-model sync across nested components
  • Use useDebounce or useThrottle to debounce expensive reactive effects instead of manual timers

FAQ

Will VueUse always be better than custom code?

Not always. Use VueUse for widely applicable, battle-tested utilities. Keep custom code when requirements are highly specific or when you need a lighter-weight implementation after measuring trade-offs.

How do I migrate without breaking behavior?

Create small, focused refactors with tests. Verify reactive dependencies, lifecycle timing, and edge cases. Replace one usage at a time and run integration tests to ensure parity.