Vue Expert

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

Security Scan

The skill is an instruction-only Vue 3 / Nuxt / Pinia expert guide — its requested footprint (none) and included references are consistent with its stated purpose.

Purpose & Capability

Name and description match the included SKILL.md and reference files: guidance and templates for Vue 3, Composition API, Pinia, Nuxt, Quasar/Capacitor, Vite, TypeScript and related topics. Nothing in the package asks for unrelated access or credentials.

Instruction Scope

SKILL.md instructs the agent to act as a senior Vue engineer and produce component/composable/store code and explanations. The instructions and reference files contain code examples and configuration snippets only — they do not instruct the agent to read arbitrary system files, exfiltrate data, or call external endpoints outside normal development examples. Some examples reference contacting APIs or analytics (e.g., Sentry, web-vitals), but those are typical code examples rather than runtime actions forced by the skill.

Install Mechanism

Instruction-only skill with no install spec and no code files to execute. This is the lowest-risk install mechanism and nothing will be written or downloaded by the skill itself.

Credentials

The skill does not declare any required environment variables or credentials (none are requested). However, the reference files include example environment variables and tokens (VITE_API_URL, API_SECRET, SENTRY_AUTH_TOKEN, etc.) used in typical Vue/Nuxt setups. These are examples for developers and are not required by the skill, but users should avoid providing secrets to the agent when not necessary.

Persistence & Privilege

always:false and no install steps; the skill does not request persistent presence or system-wide configuration changes. It does not modify other skills or agent settings.

Assessment

This is a documentation-style, instruction-only skill that appears to be what it claims: a Vue/Nuxt/Pinia expert guide. It does not request credentials or install software. Before using it, consider: (1) Do not paste sensitive secrets (API keys, auth tokens, private environment files) into the agent when asking for code — the reference examples mention such variables but the skill does not need your real secrets. (2) If you ask the agent to operate on your project, be mindful whether you grant the agent file-system or repository access; review any generated code/config for accidental inclusion of real secrets or production tokens. (3) Because the skill can be invoked autonomously by the agent (normal default), restrict the agent's permissions as you normally would. Overall the package is coherent and consistent with its stated purpose.

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

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

Constraints

MUST DO

• Use Composition API (NOT Options API)
• Use <script setup> syntax for components
• Use type-safe props with TypeScript
• Use ref() for primitives, reactive() for objects
• Use computed() for derived state
• Use proper lifecycle hooks (onMounted, onUnmounted, etc.)
• Implement proper cleanup in composables
• Use Pinia for global state management

MUST NOT DO

• Use Options API (data, methods, computed as object)
• Mix Composition API with Options API
• Mutate props directly
• Create reactive objects unnecessarily
• Use watch when computed is sufficient
• Forget to cleanup watchers and effects
• Access DOM before onMounted
• Use Vuex (deprecated in favor of Pinia)

Output Templates

When implementing Vue features, provide:

1. Component file with <script setup> and TypeScript
2. Composable if reusable logic exists
3. Pinia store if global state needed
4. Brief explanation of reactivity decisions

Knowledge Reference

Vue 3 Composition API, Pinia, Nuxt 3, Vue Router 4, Vite, VueUse, TypeScript, Vitest, Vue Test Utils, SSR/SSG, reactive programming, performance optimization

Related Skills

• Frontend Developer - UI/UX implementation
• TypeScript Pro - Type safety patterns
• Fullstack Guardian - Full-stack integration
• Performance Engineer - Optimization strategies