Skill

role-frontend:vue-expert

Vue.js expertise including Composition API, Pinia state management, Nuxt.js 3, Vue Router, custom directives, provide/inject patterns, transition system, and Volar tooling configuration.

Install

npx claudepluginhub rnavarych/alpha-engineer --plugin role-frontend

Tool Access

This skill is limited to using the following tools:

ReadGrepGlobBash

Preview

- Building or reviewing Vue 3 single-file components with `<script setup>`

Supporting Assets

references/composition-api-reactivity.mdreferences/nuxt3-typescript-directives.mdreferences/pinia-vue-router.md

SKILL.md

Similar Skills

skill-lookup

Searches, retrieves, and installs Agent Skills from prompts.chat registry using MCP tools like search_skills and get_skill. Activates for finding skills, browsing catalogs, or extending Claude.

prompts.chat

157.6k

prompt-lookup

Searches prompts.chat for AI prompt templates by keyword or category, retrieves by ID with variable handling, and improves prompts via AI. Use for discovering or enhancing prompts.

prompts.chat

157.6k

Agent Development

6 files

Guides agent creation for Claude Code plugins with file templates, frontmatter specs (name, description, model), triggering examples, system prompts, and best practices.

plugin-dev

83.2k

Stats

Parent Repo Stars9

Parent Repo Forks0

Last CommitMar 3, 2026

Actions

View Source View Plugin View on GitHub View README

When to use

Building or reviewing Vue 3 single-file components with <script setup>

Choosing between ref/reactive/computed/watch for state and derived values

Designing Pinia stores or migrating from Vuex

Setting up Vue Router with guards, nested routes, and lazy loading

Working with Nuxt 3 — data fetching, server routes, middleware, SEO

Implementing typed composables, generic components, or provide/inject

Debugging reactivity loss, performance bottlenecks, or transition behavior

Core principles

<script setup> always — less boilerplate, better TypeScript inference, no option to go back

ref for primitives, reactive for objects — never destructure reactive; use toRefs()

computed over watch for derived state — synchronous derivations should never need watchers

Domain stores, not type stores — useCartStore, useAuthStore; not useArrayStore

storeToRefs() for reactive destructuring — functions can be destructured directly

Reference Files

references/composition-api-reactivity.md — ref/reactive/toRefs, computed, watch/watchEffect, script setup macros (defineProps, defineEmits, defineModel, defineExpose), composables, shallowRef, defineAsyncComponent

references/pinia-vue-router.md — Pinia setup vs options syntax, storeToRefs, persistence, store composition, Vue Router named routes, guards, scroll behavior, composable testing, createTestingPinia

references/nuxt3-typescript-directives.md — Nuxt 3 useFetch/useAsyncData, server routes, middleware, runtime config, typed composables, generic components, InjectionKey, custom directives, transition system, anti-patterns

Vue Expert

When to use

Building or reviewing Vue 3 single-file components with <script setup>
Choosing between ref/reactive/computed/watch for state and derived values
Designing Pinia stores or migrating from Vuex
Setting up Vue Router with guards, nested routes, and lazy loading
Working with Nuxt 3 — data fetching, server routes, middleware, SEO
Implementing typed composables, generic components, or provide/inject
Debugging reactivity loss, performance bottlenecks, or transition behavior

Core principles

<script setup> always — less boilerplate, better TypeScript inference, no option to go back
ref for primitives, reactive for objects — never destructure reactive; use toRefs()
computed over watch for derived state — synchronous derivations should never need watchers
Domain stores, not type stores — useCartStore, useAuthStore; not useArrayStore
storeToRefs() for reactive destructuring — functions can be destructured directly

Reference Files

references/composition-api-reactivity.md — ref/reactive/toRefs, computed, watch/watchEffect, script setup macros (defineProps, defineEmits, defineModel, defineExpose), composables, shallowRef, defineAsyncComponent
references/pinia-vue-router.md — Pinia setup vs options syntax, storeToRefs, persistence, store composition, Vue Router named routes, guards, scroll behavior, composable testing, createTestingPinia
references/nuxt3-typescript-directives.md — Nuxt 3 useFetch/useAsyncData, server routes, middleware, runtime config, typed composables, generic components, InjectionKey, custom directives, transition system, anti-patterns