Builds Vue 3 components with Composition API patterns, configures Nuxt 3 SSR/SSG projects, sets up Pinia stores, scaffolds Quasar/Capacitor mobile apps, implements PWA features, and optimises Vite builds. Use when creating Vue 3 applications with Composition API, writing reusable composables, managing state with Pinia, building hybrid mobile apps with Quasar or Capacitor, configuring service workers, or tuning Vite configuration and TypeScript integration.
98
100%
Does it follow best practices?
Impact
96%
1.02xAverage score across 6 eval scenarios
Passed
No known issues
Pinia global state management
Uses Pinia
100%
100%
Setup Store style
100%
100%
storeToRefs used
0%
100%
script setup syntax
100%
100%
No Options API
100%
100%
ref for primitives
100%
100%
Type-safe props
0%
0%
No direct prop mutation
100%
100%
Named Vue imports
100%
100%
Reactivity comment
100%
100%
No Vuex
100%
100%
Composables with lifecycle cleanup
Cleanup in useWindowSize
100%
100%
Cleanup in useOnlineStatus
100%
100%
Cleanup in usePolling
100%
100%
ref for primitives
100%
100%
No unnecessary reactive
100%
100%
No DOM before onMounted
0%
0%
script setup syntax
100%
100%
No Options API
100%
100%
Named Vue imports
100%
100%
Cleanup comments
100%
100%
Computed used where appropriate
100%
100%
Composable returns refs
100%
100%
Vite build optimization
Uses Vite
100%
100%
Sourcemap hidden
100%
100%
manualChunks vendor split
100%
100%
Route-based lazy loading
100%
100%
No static route imports
100%
100%
Named Vue imports in config
100%
100%
Multiple vendor groups
100%
100%
Build notes explains sourcemap
100%
100%
Build notes explains chunking
100%
100%
Vue plugin included
100%
100%
No webpack
100%
100%
Nuxt 3 SSR data fetching and hydration safety
useFetch in listings page
100%
100%
useFetch in detail page
100%
100%
No raw fetch for SSR data
100%
100%
Hydration mismatch prevention
100%
100%
useLocalTime cleanup
100%
100%
File-based routing structure
100%
100%
Page meta tags
100%
100%
script setup syntax
100%
100%
No webpack config
100%
100%
nuxt.config.ts present
100%
100%
NOTES.md explains useFetch
100%
100%
NOTES.md explains hydration
100%
100%
TypeScript-safe component communication
InjectionKey used
100%
100%
provide uses typed key
100%
100%
inject uses typed key
100%
100%
Generic DataTable
100%
100%
defineProps with TypeScript interface
100%
100%
defineEmits with TypeScript interface
100%
100%
withDefaults for optional props
0%
0%
script setup syntax
100%
100%
No Options API
100%
100%
Scoped slot in DataTable
100%
100%
DESIGN.md explains injection key
100%
100%
DESIGN.md explains generic component
100%
100%
Vitest and Vue Test Utils component testing
Vitest imports in store spec
100%
100%
setActivePinia in beforeEach
100%
100%
setActivePinia and createPinia imported
100%
100%
Vue Test Utils in component spec
100%
100%
Pinia setup in component spec
100%
100%
Store quantity merge test
100%
100%
total computed tested
100%
100%
Component renders item list
100%
100%
Remove button test
100%
100%
vitest.config.ts present
100%
100%
TEST-PLAN.md mentions Pinia setup
100%
100%
Named imports only
100%
100%
5b76101
Table of Contents
If you maintain this skill, you can claim it as your own. Once claimed, you can manage eval scenarios, bundle related skills, attach documentation or rules, and ensure cross-agent compatibility.