CtrlK
BlogDocsLog inGet started
Tessl Logo

vue-expert

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

1.02x
Quality

100%

Does it follow best practices?

Impact

96%

1.02x

Average score across 6 eval scenarios

SecuritybySnyk

Passed

No known issues

SKILL.md
Quality
Evals
Security

Evaluation results

92%

10%

Multi-Step Onboarding Wizard — State Management Layer

Pinia global state management

Criteria
Without context
With context

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%

92%

Responsive Analytics Dashboard Composables

Composables with lifecycle cleanup

Criteria
Without context
With context

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%

100%

Production-Ready Vite Build Configuration

Vite build optimization

Criteria
Without context
With context

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%

100%

Job Board with Server-Side Rendering

Nuxt 3 SSR data fetching and hydration safety

Criteria
Without context
With context

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%

92%

Reusable Data Table Component System

TypeScript-safe component communication

Criteria
Without context
With context

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%

100%

Test Suite for a Shopping Cart Feature

Vitest and Vue Test Utils component testing

Criteria
Without context
With context

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%

Repository
jeffallan/claude-skills
Evaluated
Agent
Claude Code
Model
Claude Sonnet 4.6

Table of Contents

Is this your skill?

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.