skills.rest
nimadorostkar
nimadorostkarCOMMUNITY
Explore all skills by this author →
WebsiteGitHub

vue

Enforce Vue 3 Composition API reactivity and lifecycle cleanup in components.

25|3|Updated Jul 14, 2026
Search Tags:#frontend#javascript#vue#reactivity#pinia#composition-api
One-click install
npx skills add https://github.com/nimadorostkar/Claude-Skills-collection --skill vue-nimadorostkar
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: vue
Source: https://github.com/nimadorostkar/Claude-Skills-collection/tree/main/skills/frontend/vue
Command: npx skills add https://github.com/nimadorostkar/Claude-Skills-collection --skill vue-nimadorostkar

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

This skill addresses the common pitfalls in Vue 3 development where improper use of reactivity primitives leads to silent UI update failures and difficult-to-trace bugs.

Core Features & Use Cases

  • Reactivity Best Practices: Provides clear guidance on when to use ref versus reactive to ensure state changes trigger view updates.
  • Composable Architecture: Offers patterns for building reusable logic that handles lifecycle cleanup correctly.
  • State Management: Guides the implementation of Pinia stores and typed component boundaries to prevent common destructuring errors.

Quick Start

Ask the assistant to review your Vue component for reactivity issues by providing the code and describing the specific state update that is failing to render.

Frequently Asked Questions about vue

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
Why does my Vue 3 component fail to render state updates silently?▼

Vue 3 reactivity synchronization issues occur when reactivity primitives are misused, causing silent UI update failures. This Skill resolves these bugs by enforcing correct Composition API patterns and proper state primitive usage in component refactoring.

How do I fix reactivity loss when refactoring to the Vue 3 Composition API?▼

Fix reactivity loss during Vue 3 Composition API refactoring by applying strict typing and proper lifecycle cleanup for side effects. This Skill provides patterns to ensure state changes correctly trigger view updates without silent failures.

When should I use ref versus reactive in Vue 3 for complex state trees?▼

Use ref versus reactive in Vue 3 based on clear best practices to ensure state changes trigger view updates. This Skill guides proper primitive selection to prevent difficult-to-trace bugs in complex state trees.

How do I build Vue 3 composables with proper lifecycle cleanup?▼

Build Vue 3 composables with proper lifecycle cleanup by following reusable logic patterns provided by this Skill. It ensures side effects are correctly managed and destroyed, preventing memory leaks and state synchronization issues.

Does this approach work with Pinia state management and typed component boundaries?▼

Yes, this approach works with Pinia state management and typed component boundaries. The Skill guides Pinia store implementation and strict typing to prevent common destructuring errors that break Vue 3 reactivity.

What are the limitations of using reactive primitives for Vue state management?▼

Limitations of using reactive primitives for Vue state management include silent UI update failures when destructuring errors occur. This Skill helps debug these complex state trees by enforcing strict type boundaries and proper primitive usage.

Related Skills

Explore More Software Engineering Skills→
heamlkheamlk

vue

Standardize Vue 3 SFC development with script setup and typed props.

Community
Intermediate
NgDuyKhanhsNgDuyKhanhs

vue-pinia-best-practices

Analyze Pinia stores in Vue 3 applications for state-management pitfalls.

Community
Intermediate
noartemnoartem

reka-ui

Provide headless Vue component primitives for accessible, composable UI.

Community
Intermediate
michelhaussairemichelhaussaire

react-state-management

Implement React state management patterns with Redux Toolkit, Zustand, Jotai, or React Query.

Community
Advanced