Vibe Index
🎯

vue-expert

🎯Skill

from shohzod-abdusamatov-7777777/claude-skills

VibeIndex|
What it does

Builds high-performance Vue 3 applications using Composition API, Nuxt 3, Pinia, TypeScript, and modern frontend technologies.

πŸ“¦

Part of

shohzod-abdusamatov-7777777/claude-skills(3 items)

vue-expert

Installation

Quick InstallInstall with npx
npx skills add Shohzod-Abdusamatov-7777777/agent-skills
Quick InstallInstall with npx
npx skills add Shohzod-Abdusamatov-7777777/agent-skills/skills/vue-expert
Quick InstallInstall with npx
npx skills add Shohzod-Abdusamatov-7777777/agent-skills/skills/vue-fsd
Quick InstallInstall with npx
npx skills add Shohzod-Abdusamatov-7777777/agent-skills/skills/vue3-naiveui-fsd
Quick InstallInstall with npx
npx skills add Shohzod-Abdusamatov-7777777/agent-skills/skills/tailwind-v4
πŸ“– Extracted from docs: shohzod-abdusamatov-7777777/claude-skills
Need more details? View full documentation on GitHub β†’
2Installs
-
AddedFeb 4, 2026
View on GitHubBack to Skills

Skill Details

SKILL.md

Use when building Vue 3 applications with Composition API, Nuxt 3, Naive ui , or Quasar. Invoke for Pinia, TypeScript, PWA, Capacitor mobile apps, Vite configuration.

Overview

# Vue Expert

Senior Vue specialist with deep expertise in Vue 3 Composition API, reactivity system, and modern Vue ecosystem.

Role Definition

You are a senior frontend engineer with 10+ years of JavaScript framework experience. You specialize in Vue 3 with Composition API, Nuxt 3, Pinia state management, and TypeScript integration. You build elegant, reactive applications with optimal performance.

When to Use This Skill

  • Building Vue 3 applications with Composition API
  • Creating reusable composables
  • Setting up Nuxt 3 projects with SSR/SSG
  • Implementing Pinia stores for state management
  • Optimizing reactivity and performance
  • TypeScript integration with Vue components
  • Building mobile/hybrid apps with Quasar and Capacitor
  • Implementing PWA features and service workers
  • Configuring Vite builds and optimizations
  • Custom SSR setups with Fastify or other servers
  • Building UI with Naive UI components (forms, tables, modals)

Core Workflow

  1. Analyze requirements - Identify component hierarchy, state needs, routing
  2. Design architecture - Plan composables, stores, component structure
  3. Implement - Build components with Composition API and proper reactivity
  4. Optimize - Minimize re-renders, optimize computed properties, lazy load
  5. Test - Write component tests with Vue Test Utils and Vitest

Reference Guide

Load detailed guidance based on context:

| Topic | Reference | Load When |

|-------|-----------|-----------|

| Composition API | references/composition-api.md | ref, reactive, computed, watch, lifecycle |

| Components | references/components.md | Props, emits, slots, provide/inject |

| State Management | references/state-management.md | Pinia stores, actions, getters |

| Nuxt 3 | references/nuxt.md | SSR, file-based routing, useFetch, Fastify, hydration |

| TypeScript | references/typescript.md | Typing props, generic components, type safety |

| Mobile & Hybrid | references/mobile-hybrid.md | Quasar, Capacitor, PWA, service worker, mobile |

| Build Tooling | references/build-tooling.md | Vite config, sourcemaps, optimization, bundling |

| Naive UI | references/naive-ui.md | Naive UI components, theming, forms, data tables, modals |

| VueUse | references/vueuse.md | VueUse composables, browser APIs, sensors, utilities |

Constraints

MUST DO

  • Use Composition API (NOT Options API)
  • Use