AI Coding Assistants 1
▼
Uses GitHub Copilot for Vue code autocompletion — components, computed properties, watchers. Understands how to accept, reject and correct Copilot suggestions in Vue 3 Composition API context.
Effectively applies Copilot for Vue development — generating composables from comments, tests through Copilot Chat, TypeScript types. Configures context through adjacent files for better quality Vue-specific suggestions.
Optimizes Copilot for Vue projects — workspace context, custom instructions for Vue/Nuxt conventions, code review with Copilot. Integrates Copilot in CI via automated PR review, creates prompt templates for architectural tasks.
Defines Copilot strategy for Vue teams — organization policy setup, content exclusions, usage guidelines. Introduces AI-assisted coding effectiveness metrics, trains teams on usage best practices.
Algorithms & Data Structures 2
▼
Understands basic O(n) and O(n²) complexity when working with arrays and lists in Vue components. Can evaluate the impact of nested loops on rendering performance and computed properties in Composition API.
Optimizes filtering and sorting algorithms in Pinia store computed properties. Applies memoization and caching in VueUse composables to prevent unnecessary computations when reactive state updates.
Designs efficient algorithms for virtualizing large lists and trees in Vue 3. Optimizes critical rendering paths through Vue DevTools profiling, applying lazy computation strategies and incremental diffing.
Defines architectural standards for algorithmic efficiency in enterprise-scale Vue applications. Introduces performance monitoring systems for computed properties and watchers through Vue DevTools and Lighthouse CI.
Works with arrays and objects in reactive() and ref() Vue 3. Understands reactivity limitations when mutating nested structures, correctly uses shallowRef and shallowReactive for flat data.
Designs normalized data structures in Pinia stores for efficient UI updates. Uses Map and Set in composables, understands Vue 3 reactive proxy behavior with different collection types.
Develops complex data structures for caching, virtualization and offline storage in Vue applications. Optimizes Pinia store structure to minimize computed property recalculations during frequent updates.
Defines data architecture for large-scale Vue applications — normalization, denormalization, indexing in client stores. Designs universal composables for working with typed collections through TypeScript generics.
Application Security 1
▼
Understands basic web application vulnerabilities — XSS, CSRF and their prevention in Vue. Uses Vue 3 built-in XSS protection through automatic escaping in templates, avoids v-html with user data.
Implements Vue application protection against OWASP Top 10 — CSP headers in Nuxt, user input sanitization, secure cookie configuration. Configures Nuxt Security module, conducts dependency audit through npm audit.
Designs security system for Vue applications — security headers via Nitro middleware, auth flow with PKCE, subresource integrity. Conducts component security review, introduces automated vulnerability scanning in CI pipeline.
Build Tools & Bundling 1
▼
Uses Vite for Vue project development — HMR, dev server, basic vite.config.ts configuration. Understands the difference between dev and production modes, configures aliases and environment variables.
Configures Vite for Vue project — plugins (unplugin-auto-import, unplugin-vue-components), API proxy, dep pre-bundling optimization. Configures Vitest through vite.config, sets up SSR mode for Nuxt.
Designs Vite configuration for large-scale Vue applications — custom plugins, multi-entry builds, library mode for component libraries. Optimizes build time through parallelism, caching and incremental builds.
Defines Vite configuration standards for Vue teams — shared presets, plugin governance, migration guide. Introduces Turborepo for monorepo with Vue projects, optimizes CI/CD pipeline through Vite artifact caching.
CI/CD 1
▼
Understands basic GitHub Actions concepts for Vue project — workflows, jobs, triggers. Uses ready CI configurations for running ESLint, TypeScript checks and Vitest tests on each pull request.
Configures CI/CD pipeline for Vue project — parallel jobs for lint, type-check, unit and e2e tests. Configures node_modules and Vite build cache, sets up preview deployments for Nuxt on Vercel/Netlify.
Designs CI/CD architecture for Vue applications — matrix builds, conditional deployments, canary releases. Configures Lighthouse CI for performance regression, bundle size checks and visual regression testing in pipeline.
Defines CI/CD standards for Vue teams — shared workflows, deployment strategies, rollback procedures. Introduces GitOps practices for Nuxt applications, optimizes pipeline time through intelligent test splitting.
Clean Code & Refactoring 1
▼
Follows ESLint rules with eslint-plugin-vue and Prettier for consistent code. Applies Vue Style Guide recommendations — component naming, option order, using script setup with defineProps and defineEmits.
Configures strict ESLint rules for Vue 3 — vue/recommended, TypeScript strict mode, auto-fix through Vite plugin. Introduces Husky + lint-staged for pre-commit checks, writes reusable composables with JSDoc.
Designs Vue code quality assurance system — custom ESLint rules, architectural linters, automated component auditing. Introduces component complexity and module dependency metrics through Vite plugins.
Defines code quality standards for Vue teams — architectural guidelines, review checklist, automated CI checks. Builds code review culture focused on Composition API patterns and type safety.
Code Review 1
▼
Participates in Vue code review — checks Vue Style Guide compliance, props and emit correctness, Composition API usage. Provides constructive comments on component structure and naming.
Conducts effective Vue application code reviews — evaluating composable architecture, reactivity correctness, performance implications. Uses review checklist for Vue — reactivity pitfalls, memory leaks, accessibility.
Designs code review process for the Vue team — review guidelines, automated checks, architectural decision records. Mentors through review — explains Vue 3 patterns, Nuxt best practices, performance optimizations.
Defines code review standards for Vue organization — review SLA, required checks, escalation process. Introduces automated review — ESLint, TypeScript strict, bundle size checks, Lighthouse CI in PR pipeline.
Concurrency & Parallelism 1
▼
Uses async/await in Vue 3 lifecycle hooks and Composition API. Understands Suspense for async components, handles Promises in composables with proper error handling through onErrorCaptured.
Implements complex async flows with useAsyncState and useFetch from VueUse. Manages race conditions in watchers through watchEffect with cleanup functions, organizes parallel data loading in Nuxt 3 middleware.
Designs async operation management systems — request queues, retry strategies, optimistic updates in Pinia stores. Implements streaming SSR in Nuxt 3 with progressive hydration and Suspense boundaries.
Defines architectural standards for async work in Vue applications — data fetching layer, caching strategy, background sync. Introduces error handling patterns and graceful degradation at organizational level.
CSS & Styling 4
▼
Uses CSS-in-JS at basic level. Creates simple components from design. Understands basic concepts and follows component guidelines.
Implements complex Vue components using CSS-in-JS libraries (e.g., vue-styled-components) or scoped styles with dynamic bindings. Optimizes rendering by minimizing style recalculations in reactive contexts. Applies proper patterns for theme switching and state-driven styling in Vue SFCs.
Designs Vue design system architecture with CSS-in-JS integration: token-based theming, variant composition, and style isolation patterns. Optimizes bundle size and Core Web Vitals through tree-shaking and critical CSS extraction. Builds accessible, reusable component libraries for the organization.
Defines product-level CSS-in-JS architecture for Vue applications: evaluates styling strategies (SFC scoped vs CSS-in-JS libraries), establishes design token governance, and sets component API standards. Conducts architectural reviews ensuring scalable, accessible, and performant styling across teams.
Uses ready Vue design system components — Vuetify, PrimeVue, Headless UI. Follows documentation when customizing, understands slots and props for adapting components to project requirements.
Creates Vue component library with unified API — slots, expose, v-model customization. Documents components in Storybook with Histoire, writes component tests through Vitest and Vue Test Utils.
Designs design system on Vue 3 — headless components with Tailwind styling, tokens, icons, typography. Organizes design system monorepo with Turborepo, automates publishing through changesets.
Defines organization's design system architecture on Vue — governance, versioning, adoption strategy. Builds synchronization process between designers (Figma) and Vue components through tokens and code generation.
Applies scoped styles and CSS variables in Vue SFC. Uses Flexbox and Grid for Vue component layouts, understands style cascading and specificity in the context of scoped and deep selectors in Vue.
Creates responsive layouts with Container Queries and CSS Grid in Vue components. Implements animations through CSS Transitions and Vue Transition/TransitionGroup, uses :deep() and :slotted() selectors.
Designs CSS architecture for large-scale Vue applications — CSS Layers for cascade management, custom properties for theming, View Transitions API. Optimizes critical styles through Vite CSS code splitting.
Defines CSS architecture standards for Vue teams — methodologies, tooling, performance budgets for styles. Introduces automated CSS quality checking systems — Stylelint, visual regression through Playwright.
Applies basic Tailwind CSS utility classes in Vue components — spacing, colors, typography, flexbox. Uses @apply directives in scoped Vue SFC styles, understands tailwind.config configuration through Vite.
Creates custom design system on Tailwind for Vue project — custom theme, plugins, Headless UI components. Optimizes PurgeCSS configuration for Vite, uses @tailwindcss/typography and animations.
Designs scalable Tailwind architecture for Vue applications — design tokens, multi-theme support, dark mode via CSS variables. Integrates UnoCSS as an alternative, optimizes critical CSS through Vite plugins.
Defines Tailwind CSS usage standards for Vue team — naming conventions, component abstractions, Storybook integration. Introduces design token system synchronized between Figma and Tailwind configuration.
Frontend Architecture 2
▼
Understands micro-frontends in Vue ecosystem: knows that Vue is well-suited for Web Components through defineCustomElement, understands Module Federation concept with Vite. Knows why large projects split frontend into micro-applications.
Works with micro-frontends in Vue: uses vite-plugin-federation for Module Federation, implements Vue components as Web Components for framework-agnostic integration, configures shared Pinia store between micro-frontends. Manages shared CSS through CSS Modules isolation.
Designs micro-frontend architecture on Vue: defines composition strategy (build-time vs runtime), configures single-spa with Vue adapter for multi-framework support, designs shared state through custom event bus or shared Pinia plugin. Ensures SSR compatibility for SEO-critical micro-frontends.
Standardizes micro-frontend approach in Vue ecosystem: creates CLI for scaffolding new micro-frontend with standard configuration, defines shared component library strategy, designs versioning and backward compatibility. Trains teams on micro-frontend patterns and anti-patterns.
Understands differences between SSR, SSG and CSR in Nuxt 3 context. Configures basic Nuxt project with chosen rendering strategy, uses routeRules for hybrid rendering of individual pages.
Implements hybrid rendering in Nuxt 3 — ISR through routeRules, SWR caching, prerendering static pages. Solves hydration mismatch issues, configures client-only and server-only components.
Designs SSR architecture for large-scale Nuxt application — streaming SSR, selective hydration, edge rendering via Nitro. Optimizes TTFB through server-side caching, CDN strategies and progressive rendering.
Defines rendering strategy for organizational Vue projects — SSR vs SSG vs ISR for different content types, infrastructure requirements. Introduces SSR performance monitoring and Nuxt application deployment standards.
Frontend Testing 2
▼
Writes basic Vue component tests through Vitest and Vue Test Utils — mount, render checking, props interaction. Tests emit events and slots, understands the difference between mount() and shallowMount().
Creates comprehensive component tests — mocking Pinia stores, Vue Router, API calls through MSW. Tests composables in isolation, uses Vitest snapshot tests and custom matchers for Vue-specific checks.
Designs component testing strategy for Vue application — testing library approach, contract testing for shared components, render performance tests. Creates test utilities and fixtures for efficient Vue ecosystem testing.
Defines component testing standards for Vue teams — coverage thresholds, testing patterns, review checklist. Introduces testing culture through training, templates and automated test quality checks in CI.
Understands visual regression testing concept for Vue components. Configures Storybook for Vue 3 with Histoire, creates stories for UI components as a base for visual snapshots.
Configures visual regression tests for Vue components through Playwright and Percy/Chromatic. Integrates with Storybook — automated screenshot tests for each story, configures threshold and viewport breakpoints.
Designs visual regression testing system for Vue design system — CI integration, baseline management, multi-browser/device checks. Creates custom test matrix covering themes, RTL and responsive states.
Defines visual testing strategy for Vue teams — tooling (Chromatic vs Percy vs Playwright), baseline approval governance, code review integration. Introduces visual validation processes when updating design system.
Git & Workflows 1
▼
Uses basic Git commands for Vue project — commit, branch, merge, pull request. Understands .gitignore for Vue/Nuxt — dist, node_modules, .nuxt, .output. Works with feature branches following Git Flow.
Applies advanced Git techniques for Vue development — interactive rebase, cherry-pick, bisect for finding regressions. Configures Husky + lint-staged for pre-commit ESLint and TypeScript checks in Vue project.
Designs Git strategy for Vue monorepo — Turborepo workspace, conventional commits, automated changelogs. Configures CODEOWNERS for Vue components and shared libraries, resolves complex merge conflicts in package-lock.
Defines Git workflow for Vue teams — branching strategy, release process, hotfix procedure. Introduces automation — semantic versioning, automated release notes, changelog generation for Vue component libraries.
GraphQL 1
▼
Uses GraphQL API from Vue components through urql or Apollo Client. Writes basic queries and mutations, understands GraphQL syntax, handles loading and error states in Vue templates.
Integrates GraphQL into Vue application — type generation through graphql-codegen, fragment colocation with components, caching through normalized cache. Uses useQuery/useMutation composables for reactive data work.
Designs GraphQL architecture for Vue application — schema design, optimistic updates, subscriptions for real-time data. Configures persisted queries, cache policies and pagination patterns for large-scale applications.
Defines GraphQL strategy for Vue projects — schema governance, performance monitoring, security (query complexity, depth limiting). Introduces GraphQL standards — codegen pipeline, testing patterns, error handling.
OOP & Design Patterns 1
▼
Applies basic Vue 3 patterns — props/emit for component communication, provide/inject for dependency injection. Uses Composition API for extracting repeating logic into composable functions.
Implements Renderless Components, Compound Components and Headless UI patterns in Vue 3. Designs reusable composables with inversion of control, applies Strategy and Observer through Vue reactivity system.
Designs architectural patterns for large-scale Vue applications — Plugin Architecture, Micro-frontend integration through Module Federation. Creates abstractions over Pinia for complex domain models with CQRS approach.
Defines pattern and anti-pattern catalog for Vue development in the organization. Introduces architectural solutions — Feature-Sliced Design, Clean Architecture adapted for Vue 3 and Nuxt 3 ecosystem.
REST API 1
▼
Uses REST API from Vue components through useFetch and ofetch. Understands HTTP methods, response codes, basic error handling. Types API responses through TypeScript interfaces for safe template usage.
Creates typed API client for Vue application — interceptors, retry logic, request/response transformation. Implements Nuxt server routes as BFF layer, configures API versioning and error handling middleware.
Designs API integration architecture for Vue application — endpoint abstraction, OpenAPI codegen for typing, contract testing. Implements caching, pagination and optimistic updates through Pinia stores with Nuxt server API.
Defines API integration standards for Vue teams — API design guidelines, error handling patterns, documentation. Introduces end-to-end type safety through OpenAPI type generation and runtime validation through Zod.
Specialized Testing 1
▼
Understands basic accessibility testing concepts including WCAG guidelines, semantic HTML in Vue templates, and ARIA binding patterns. Follows team checklists for running axe-core audits and keyboard navigation tests on Vue components. Uses vue-axe plugin and browser DevTools accessibility panels to identify common a11y violations in Vue single-file components during development.
Independently writes accessibility tests for Vue components using Vue Testing Library, axe-core integration, and Cypress/Playwright a11y plugins. Implements automated WCAG compliance scanning in CI/CD pipelines for Vue/Nuxt applications with configurable rule sets. Tests screen reader compatibility for Vue custom directives, transition groups, and dynamic component rendering including focus management across route changes.
Designs comprehensive accessibility testing strategies for Vue application ecosystems covering WCAG 2.1 AA/AAA requirements. Implements advanced testing patterns including Nuxt-specific SSR accessibility validation, Vue composable-based a11y testing utilities, and multi-device assistive technology verification. Builds reusable a11y testing infrastructure for Vue component libraries and integrates continuous accessibility monitoring into Nuxt production deployments.
Defines accessibility testing standards and quality gates for Vue projects across the organization. Establishes automated a11y testing pipelines, Vue component library accessibility certification workflows, and WCAG compliance reporting for Vue/Nuxt products. Conducts architecture reviews ensuring Vue applications meet accessibility requirements and drives adoption of accessible component design patterns across Vue development teams.
State Management 2
▼
Uses useFetch and useAsyncData in Nuxt 3 for data loading. Understands the difference between server and client-side loading, handles loading and error states in Vue components through reactive ref.
Implements efficient data loading — caching through useFetch with keys, parallel requests, deduplication. Configures interceptors through ofetch, implements optimistic updates in Pinia stores with rollback on errors.
Designs data fetching layer for Vue application — API abstraction, typed endpoints, automatic cache invalidation. Implements real-time updates through SSE/WebSocket composables, integrates with Nuxt server routes.
Defines data layer architecture for organizational Vue projects — API client standards, caching strategy, error handling patterns. Introduces end-to-end type safety through tRPC or typed route rules in Nuxt 3.
Uses Pinia for Vue application state management — defining stores through defineStore, reactive state, getters, actions. Understands when to use component local state vs Pinia store.
Designs Pinia store structure — modular organization, composable stores, plugins for persistence and devtools. Uses VueUse composables for global state — useStorage, useBreakpoints, createSharedComposable.
Designs scalable state architecture — Pinia with domain-driven modules, optimistic updates, offline sync. Implements server state management through Nuxt useState, creates caching and invalidation abstractions.
Defines state management strategy for Vue projects — modular Pinia architecture, cross-tab sync, migration patterns. Introduces store organization standards, trains teams on complex state management patterns.
Type Systems 1
▼
Uses TypeScript with Vue 3 — typing props through defineProps<T>(), emit through defineEmits, basic ref() and reactive() typing. Understands type inference in script setup and templates through Volar.
Creates strictly typed composables and Pinia stores with generics. Configures TypeScript strict mode for Vue project, types provide/inject, route params in Nuxt 3 and API responses through Zod validation.
Designs type system for large-scale Vue applications — generic components, conditional types for composables, type-safe routing. Creates utility types for Pinia stores and Nuxt modules with full autocompletion.
Defines typing strategy for organizational Vue projects — config strictness, JavaScript migration, runtime validation integration. Introduces end-to-end type safety from API to templates through tRPC or typed fetch.
Vue Ecosystem 2
▼
Uses Nuxt at basic level. Creates simple components from design. Understands basic concepts and follows component guidelines.
Independently implements complex UI components with Nuxt. Optimizes rendering performance. Writes tests. Applies state management tools.
Designs frontend architecture with Nuxt. Optimizes bundle size and Core Web Vitals. Creates design systems and reusable components. Mentors the team.
Defines product-level frontend architecture with Nuxt. Establishes standards and best practices. Conducts architectural reviews.
Uses Vue Core at basic level. Creates simple components from design. Understands basic concepts and follows component guidelines.
Independently implements complex UI components with Vue Core. Optimizes rendering performance. Writes tests. Applies state management tools.
Designs frontend architecture with Vue Core. Optimizes bundle size and Core Web Vitals. Creates design systems and reusable components. Mentors the team.
Defines product-level frontend architecture with Vue Core. Establishes standards and best practices. Conducts architectural reviews.
Web Performance 2
▼
Understands basic Vite bundling principles — entry points, chunks, tree shaking. Analyzes bundle size through vite-bundle-visualizer, applies dynamic import() for lazy loading Vue Router routes.
Optimizes Vue application bundle — configuring Vite rollupOptions for chunk splitting, manualChunks for vendor libraries. Configures code splitting by Nuxt 3 routes, optimizes Pinia store size through tree shaking.
Designs bundling strategy for large-scale Vue applications — granular chunks, prefetch hints, module federation. Analyzes and eliminates dependency duplication, optimizes Vite build through custom Rollup plugins.
Defines performance budgets for organizational Vue project bundles — automated size checks in CI, growth alerting. Introduces optimization strategy — dependency audit, bundle analysis, automated size regression testing.
Understands Core Web Vitals metrics — LCP, FID, CLS and their impact on UX. Measures Vue application metrics through Lighthouse and Chrome DevTools, applies basic optimizations — lazy loading images, font-display.
Optimizes Vue application Core Web Vitals — code splitting through dynamic import(), LCP optimization with Nuxt Image, CLS elimination through skeleton screens and aspect-ratio for media content.
Designs Core Web Vitals monitoring system for Vue applications — RUM through web-vitals library, performance budgets in CI. Optimizes INP through handler debouncing, requestIdleCallback and Vue scheduler.
Defines performance budgets and Core Web Vitals SLA for organizational Vue projects. Introduces Lighthouse CI in pipeline, configures metric degradation alerting, trains teams on optimization.
Web Standards & APIs 4
▼
Understands PWA fundamentals and integrates them into Vue applications. Uses @vue/cli-plugin-pwa or vite-plugin-pwa for service worker generation. Configures caching strategies and offline support following Vue ecosystem patterns.
Configures PWA for Vue/Nuxt — Workbox caching strategies, push notifications, background sync. Implements offline-first approach with Pinia stores and IndexedDB, configures @vite-pwa/nuxt for Nuxt 3.
Designs PWA architecture on Vue 3 — service worker update strategies, critical resource precaching, background data sync. Optimizes performance through runtime caching and stale-while-revalidate patterns.
Defines PWA development standards for Vue teams — offline UX patterns, caching strategies, quality metrics. Introduces PWA testing processes through Lighthouse CI and automated pipeline checks.
Applies basic a11y principles in Vue components — semantic HTML, ARIA attributes, alt texts. Uses eslint-plugin-vuejs-accessibility for automated accessibility checking in Vue SFC templates.
Implements accessible Vue components: creates keyboard-navigable components with v-on:keydown, manages focus through template refs, implements accessible form validation with aria-describedby and aria-invalid. Uses Headless UI or Radix Vue for accessible primitives.
Designs accessible Vue architecture: creates accessible component library with Nuxt Content for documentation, configures automated a11y testing with Vitest + axe-core, implements dynamic accessibility features (dark mode, reduced motion, text scaling). Conducts screen reader testing in CI.
Standardizes accessibility in Vue ecosystem: defines a11y standards for Vue design system, creates composables for reusable accessibility patterns (useFocusTrap, useAnnouncer), designs a11y testing strategy. Trains teams and conducts accessibility audits.
Uses basic Web APIs in Vue components — Fetch, localStorage, IntersectionObserver. Integrates browser APIs through VueUse composables — useLocalStorage, useIntersectionObserver, useMediaQuery.
Implements Web API integration through custom composables — WebSocket, Geolocation, Notifications, Clipboard API. Uses VueUse as reference for patterns, handles permissions and fallbacks correctly.
Designs Web API abstractions for Vue applications — Web Workers via comlink, SharedArrayBuffer, WebRTC. Creates reusable composables with graceful degradation and feature detection for cross-browser compatibility.
Defines Web API usage standards for Vue projects — security review, permissions policy, privacy-first approach. Introduces architectural solutions for Platform API integration — Web Payments, Credential Management.
Understands Web Components and Vue's custom element support. Wraps Vue components as web components using defineCustomElement. Handles attribute/property binding and event communication.
Creates Web Components from Vue components through defineCustomElement for integration with other frameworks. Configures Vite for building component library as Web Components with correct styling and event handling.
Designs Web Components library architecture based on Vue 3 — SSR compatibility, lazy loading, shared state. Solves Shadow DOM styling issues through CSS Parts and Constructable Stylesheets.
Defines Web Components strategy for the organization — when to use Vue components vs Custom Elements, shared library governance. Introduces publishing and versioning processes for Web Components from Vue codebase.